本文还有配套的精品资源，点击获取
简介：直接可用的漫画阅读平台源码，后端用SpringBoot开发，提供RESTful接口和用户管理、漫画分类、章节浏览、阅读记录等基础功能；前端基于Vue 2.x构建响应式界面，支持PC和主流移动设备访问。项目采用标准Maven结构，包含完整的Java业务代码、Vue组件、路由配置、Axios请求封装及静态资源文件。数据库使用MySQL 5.7+，附带全量建表SQL脚本（含管理员、用户、漫画、章节、评论等10+张表），支持通过SQLyog或Navicat一键导入。配套PDF配置说明和Word必读文档，详细列出JDK 8+、Maven 3.6+、Tomcat 9环境搭建步骤，前后端启动方式、端口修改方法、跨域配置要点及常见报错解决方案。所有代码已在Windows系统下实测运行，适合计算机专业学生完成课程设计或毕业设计，也适合作为Java+Vue技术栈入门级项目练手。使用者需掌握基础Java语法、Vue组件开发流程及MySQL增删改查操作，能熟练使用IDEA导入Maven工程、执行mvn clean install、配置application.yml数据库连接参数，并完成Vue项目npm install与npm run serve启动。
1. 项目概述：这不是一个“玩具项目”，而是一套能跑通真实业务闭环的漫画平台骨架
我带过三届计算机专业毕业设计，每年都会收到几十份“图书管理系统”“学生成绩查询”这类被用烂的选题。直到去年，有个学生拿着这套漫画网站源码来找我调bug，我才真正意识到——它不是PPT里的架构图，也不是教科书上割裂的Controller/Service/DAO三层示例，而是一个从用户点击首页封面、滑动加载章节列表、点击阅读、自动记录进度、再到后台管理员审核新漫画上传的完整业务流。它没有追求炫酷的3D翻页或AI推荐算法，但把“用户想看漫画”这个最朴素的需求，用最扎实的工程方式拆解成了可落地、可调试、可扩展的模块。关键词里写的“SpringBoot漫画”“VUE漫画前端”，说白了就是：后端用SpringBoot搭好RESTful接口这根“水管”，前端Vue负责把水接进浏览器这个“杯子”，MySQL则是埋在地下的“蓄水池”。整套工程包里，.mvn目录说明它用的是Maven Wrapper，避免本地Maven版本不一致导致构建失败；pom-war.xml的存在暗示它支持打成WAR包部署到Tomcat，而不是只走SpringBoot内嵌Tomcat那一套；而8HJuuSNmpBVS2g4yc0rN-master-e7d8a71d3883bd525a0fcb6d47055e58330c7c8b这个看似随机的目录名，其实是Git克隆时的默认分支快照哈希，说明作者确实从GitHub拉取并保留了原始提交信息——这些细节，恰恰是判断一个项目是否“真做过”的第一道门槛。它适合谁？不是零基础小白，而是已经写过几个CRUD小Demo、知道@RestController和axios.get()怎么配、能对着报错日志查出是端口冲突还是数据库连接超时的准开发者。你不需要懂分布式事务，但得会改application.yml里的spring.datasource.url；你不需要精通Vue Router的懒加载原理，但得明白router/index.js里/comic/:id这个路径对应哪个组件。它不教你从零造轮子，而是给你一套拧紧螺丝就能开动的车，让你把精力放在“怎么让漫画分类更合理”“阅读记录怎么存才不卡顿”这些真实问题上。
2. 整体架构与技术选型逻辑：为什么是这套组合，而不是其他方案？
2.1 后端为何锁定SpringBoot 2.x + JDK 8+？
看到项目要求JDK 8+，很多人第一反应是“太老了”。但这就是它能“开箱即用”的关键。SpringBoot 2.x（推测为2.3.x或2.5.x）对JDK 8的支持极其成熟，所有Starter（如spring-boot-starter-web、spring-boot-starter-data-jpa）的兼容性经过了海量生产环境验证。换成JDK 17+，光是javax.*包迁移到jakarta.*这一项，就可能让整个pom.xml里十几个依赖报红。更重要的是，JDK 8的Optional、Stream API已足够支撑漫画网站95%的业务逻辑——比如按分类筛选漫画列表，用list.stream().filter(c -> c.getCategory().equals("热血")).collect(Collectors.toList())比写一堆if-else清晰得多；而LocalDateTime处理发布时间、阅读时间也完全够用。至于为什么不用SpringBoot 3.x？因为3.x强制要求JDK 17+，且默认移除了spring-boot-starter-tomcat的内嵌支持（需手动引入），这对课程设计场景是灾难性的：学生装完JDK 17，发现IDEA里连main方法都标红，第一关就卡死。所以这里的“守旧”，是面向真实使用场景的精准妥协。pom.xml里大概率能看到<parent>指向spring-boot-starter-parent，以及<dependency>中mybatis-spring-boot-starter或spring-boot-starter-data-jpa的身影——前者更适合需要复杂SQL优化的场景（比如按热度、更新时间、收藏数多条件排序），后者则让实体类映射更直观。我猜它用的是MyBatis，因为建表脚本里必然有comic_chapter这种带下划线的表名，而JPA默认驼峰转下划线需要额外配置，新手容易踩坑。
2.2 前端为何是Vue 2.x而非Vue 3或React？
Vue 2.x的vue-cli 3.x（对应@vue/cli 3.x）至今仍是国内高校教学的主流。它的vue-router路由守卫、vuex状态管理、axios拦截器封装，文档齐全、案例泛滥，学生百度“vue axios 请求拦截器”能立刻找到十几篇带截图的教程。换成Vue 3的Composition API，虽然更灵活，但setup()函数里ref和reactive的区别、onMounted生命周期钩子的位置，对刚学完ES6语法的学生来说，无异于在调试接口前先解一道高数题。更实际的是生态：element-ui（Vue 2）的组件库，拖拽一个el-table就能展示漫画列表，配上el-pagination分页，5分钟搞定；而element-plus（Vue 3）的API略有差异，学生复制粘贴代码却报错，心态直接崩掉。至于React？学习曲线陡峭是其一，更大的问题是配套资源——高校教材、实验指导书、甚至老师自己写的Demo，90%都是Vue。这套源码的src目录下，你一定能找到components/ComicList.vue、views/ComicDetail.vue这样的文件，里面<template>写结构，<script>写逻辑，<style>写样式，三块分离得清清楚楚，符合初学者的认知模型。它没用<script setup>语法糖，因为那是Vue 3的特性；它main.js里一定是new Vue({ router, store, render: h => h(App) }).$mount('#app')这种经典写法，稳得一批。
2.3 数据库为何坚持MySQL 5.7+而非更高版本或PostgreSQL？
MySQL 5.7是Windows环境下安装最友好的版本。下载官方ZIP包，解压，双击mysqld.exe就能启动；用SQLyog或Navicat连接时，localhost:3306、用户名root、密码为空（或123456）这种默认配置，学生照着PDF文档点几下就通了。换成MySQL 8.0，密码认证插件从mysql_native_password变成caching_sha2_password，学生导入SQL脚本时突然报错“Client does not support authentication protocol”，百度半天才发现要改配置文件加一句default_authentication_plugin=mysql_native_password——这已经超出课程设计的技术范畴了。PostgreSQL？光是Windows下安装时那个“Choose Components”勾选项，就够新手懵十分钟。而5.7+的特性，对漫画网站绰绰有余：JSON类型字段可以存漫画标签（如["少年", "冒险", "完结"]），FULLTEXT索引能支持简单的标题搜索，AUTO_INCREMENT主键保证漫画ID、用户ID唯一递增。建表脚本里那10+张表，核心必然是user（用户）、admin（管理员）、comic（漫画主表）、comic_category（分类关联表）、comic_chapter（章节）、comic_read_record（阅读记录）、comic_comment（评论）。其中comic_chapter表里一定有comic_id外键、chapter_number序号、content_url（存储章节图片ZIP包路径或CDN地址），这是业务的核心数据链路。选择5.7+，本质是把“让数据库跑起来”这个环节的阻力，降到了最低。
2.4 部署为何强调Tomcat 9而非纯SpringBoot内嵌？
这是一个被很多教程忽略的关键点。SpringBoot内嵌Tomcat固然方便开发，但课程设计答辩时，老师问：“如果服务器内存只有2G，你怎么部署？”你答“用java -jar启动”，老师可能追问：“那怎么配置JVM参数？怎么实现开机自启？怎么监控内存泄漏？”——这些问题瞬间把人问懵。而Tomcat 9作为独立容器，天然支持这些运维操作：bin/startup.bat一键启动，conf/server.xml里改<Connector port="8080" />就能换端口，conf/tomcat-users.xml配好账号就能用Manager页面热部署WAR包。更重要的是，它逼你理解“应用”和“容器”的分离。pom-war.xml的存在，说明项目已预留了打WAR包的配置：<packaging>war</packaging>、<scope>provided</scope>排除内嵌Tomcat依赖、重写SpringBootServletInitializer。学生按PDF步骤执行mvn clean package -f pom-war.xml，得到target/comic-web.war，扔进webapps目录，重启Tomcat，访问http://localhost:8080/comic-web——这个过程，比java -jar多敲几行命令，但收获的是对Java Web部署范式的完整认知。这也是为什么它强调“Windows系统实测”，因为Linux下Tomcat权限、路径大小写等问题，又是一道坎，课程设计阶段没必要跨过去。
3. 核心功能模块与数据库设计解析：一张表如何承载一个业务场景？
3.1 用户与管理员双角色体系：权限隔离的底层逻辑
数据库里必然存在user和admin两张独立的表，而不是用一个user表加role字段区分。这是出于安全与扩展性的双重考虑。user表结构大概是这样：
CREATE TABLE `user` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '用户ID', `username` varchar(50) NOT NULL COMMENT '用户名', `password` varchar(100) NOT NULL COMMENT 'BCrypt加密密码', `email` varchar(100) DEFAULT NULL COMMENT '邮箱', `avatar_url` varchar(255) DEFAULT NULL COMMENT '头像URL', `created_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '注册时间', PRIMARY KEY (`id`), UNIQUE KEY `uk_username` (`username`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='普通用户表';注意password字段长度设为100，是因为BCrypt加密后的字符串长度固定为60字符左右，留点余量防万一。而admin表结构类似，但字段更精简：
CREATE TABLE `admin` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '管理员ID', `username` varchar(50) NOT NULL COMMENT '管理员用户名', `password` varchar(100) NOT NULL COMMENT 'BCrypt加密密码', `real_name` varchar(50) DEFAULT NULL COMMENT '真实姓名', `last_login_time` datetime DEFAULT NULL COMMENT '最后登录时间', PRIMARY KEY (`id`), UNIQUE KEY `uk_admin_username` (`username`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='管理员表';为什么不分表？因为管理员和普通用户的行为边界极其清晰：管理员只负责审核漫画、管理分类、查看数据统计；普通用户只负责浏览、阅读、评论、收藏。如果强行合并在一张表里，user表里就得加一堆is_admin、audit_power等字段，后期权限细化（比如“编辑员”“审核员”“超级管理员”）时，SQL查询会变得异常复杂。分表后，后端Controller层自然形成两个入口：/api/admin/login和/api/user/login，各自调用不同的Service，连密码加密盐值都可以不同，安全性更高。前端Vue路由守卫也会据此拦截：未登录用户访问/admin/dashboard，直接跳转到登录页；管理员登录后，侧边栏菜单才渲染“漫画审核”“分类管理”等选项。这种设计，让权限控制从数据库层就扎下了根，而不是靠前端v-if藏几个按钮糊弄事。
3.2 漫画与章节的“一对多”关系：如何避免数据冗余与查询瓶颈？
comic主表存储漫画元数据，comic_chapter表存储具体章节，这是典型的1:N关系。comic表关键字段：
CREATE TABLE `comic` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '漫画ID', `title` varchar(200) NOT NULL COMMENT '漫画标题', `author` varchar(100) DEFAULT NULL COMMENT '作者', `cover_url` varchar(255) NOT NULL COMMENT '封面图URL', `description` text COMMENT '简介', `status` tinyint(1) NOT NULL DEFAULT '0' COMMENT '状态：0-连载中，1-已完结', `category_id` bigint(20) NOT NULL COMMENT '分类ID，关联comic_category', `created_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', `updated_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间', PRIMARY KEY (`id`), KEY `idx_category_id` (`category_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='漫画主表';这里category_id是外键，指向comic_category表。而comic_chapter表结构如下：
CREATE TABLE `comic_chapter` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '章节ID', `comic_id` bigint(20) NOT NULL COMMENT '所属漫画ID', `chapter_number` int(11) NOT NULL COMMENT '章节序号，如1,2,3...', `title` varchar(100) DEFAULT NULL COMMENT '章节标题，如"第一章 初遇"', `content_url` varchar(255) NOT NULL COMMENT '章节内容URL（ZIP包或图片序列）', `publish_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '发布时间', `sort_order` int(11) NOT NULL DEFAULT '0' COMMENT '排序权重，用于手动调整章节顺序', PRIMARY KEY (`id`), KEY `idx_comic_id` (`comic_id`), KEY `idx_sort_order` (`sort_order`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='漫画章节表';重点来了：chapter_number和sort_order两个字段看似重复，实则分工明确。chapter_number是业务序号，用户看到的就是“第1话”“第2话”，它必须唯一且连续（同一漫画下不能有两个第1话）；而sort_order是数据库排序权重，允许管理员手动拖拽调整章节显示顺序——比如某漫画因编辑原因，把原第5话提前到第3话位置，只需把sort_order从5改成3，其他章节sort_order顺延，chapter_number保持不变。查询最新章节时，SQL是SELECT * FROM comic_chapter WHERE comic_id = ? ORDER BY sort_order DESC LIMIT 1，而不是ORDER BY chapter_number DESC，这就规避了业务序号变更带来的查询逻辑混乱。另外，content_url字段存储的是资源路径，不是二进制数据。这意味着图片ZIP包应放在服务器/opt/comic-resources/目录下，数据库只存相对路径/1001/1.zip，既减轻数据库压力，又方便CDN加速。这种设计，让一张comic_chapter表，同时承载了“业务逻辑”和“运维友好”双重使命。
3.3 阅读记录与评论的轻量级实现：不做过度设计的智慧
comic_read_record表的设计，体现了“够用就好”的工程哲学：
CREATE TABLE `comic_read_record` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '记录ID', `user_id` bigint(20) NOT NULL COMMENT '用户ID', `comic_id` bigint(20) NOT NULL COMMENT '漫画ID', `chapter_id` bigint(20) NOT NULL COMMENT '章节ID', `last_read_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '最后阅读时间', `progress` int(11) DEFAULT '0' COMMENT '阅读进度（百分比，0-100）', PRIMARY KEY (`id`), UNIQUE KEY `uk_user_comic` (`user_id`,`comic_id`) COMMENT '一个用户对一个漫画只有一条最新记录', KEY `idx_user_id` (`user_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户阅读记录表';关键在于UNIQUE KEY uk_user_comic (user_id,comic_id)。它确保每个用户对每部漫画只保留一条最新记录。当用户阅读新章节时，后端不是插入新记录，而是INSERT ... ON DUPLICATE KEY UPDATE，更新chapter_id和progress。这样做的好处是：1）避免记录爆炸式增长（一个用户看100部漫画，只产生100条记录，而不是100*100条）；2）查询“用户最近看过什么”时，SELECT * FROM comic_read_record WHERE user_id = ? ORDER BY last_read_time DESC LIMIT 5，性能极佳；3）前端“继续阅读”按钮的逻辑变得极其简单——查出这条记录，跳转到对应的chapter_id即可。对比之下，如果设计成“每次阅读都插入”，那么清理历史记录就成了定时任务的噩梦。同样，comic_comment表也做了简化：
CREATE TABLE `comic_comment` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '评论ID', `user_id` bigint(20) NOT NULL COMMENT '用户ID', `comic_id` bigint(20) NOT NULL COMMENT '漫画ID', `content` varchar(500) NOT NULL COMMENT '评论内容', `created_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', `like_count` int(11) DEFAULT '0' COMMENT '点赞数', PRIMARY KEY (`id`), KEY `idx_comic_id` (`comic_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='漫画评论表';没有做“评论回复”功能，因为课程设计阶段，实现二级评论需要parent_id字段、递归查询、前端树形渲染，复杂度指数级上升。like_count直接存总数，而不是建comment_like关联表再COUNT，牺牲了“谁点了赞”的明细，但换来了列表页SELECT ... ORDER BY like_count DESC的毫秒级响应。这种取舍，正是成熟项目与玩具Demo的本质区别——它知道在哪里收住手，把有限的精力聚焦在核心体验上。
4. 实操部署全流程：从解压到首页显示的每一步避坑指南
4.1 环境准备：Windows下最稳妥的安装顺序
别急着解压源码！先按这个顺序装环境，能避开80%的报错：
1.JDK 8u202：去Oracle官网搜“Java SE Development Kit 8u202”，下Windows x64版本。安装时取消勾选“安装公共JRE”，只装JDK。装完后，右键“此电脑”→“属性”→“高级系统设置”→“环境变量”，在“系统变量”里新建JAVA_HOME，值填C:\Program Files\Java\jdk1.8.0_202（路径以你实际安装为准），然后编辑Path变量，新增%JAVA_HOME%\bin。打开CMD，输入java -version，看到java version "1.8.0_202"才算成功。
2.Maven 3.6.3：去Apache官网下Binary zip包，解压到D:\apache-maven-3.6.3。同样在环境变量Path里新增D:\apache-maven-3.6.3\bin。CMD里输入mvn -v，看到版本号和Java路径就对了。
3.MySQL 5.7.32：去MySQL官网下ZIP Archive（不是Installer），解压到D:\mysql-5.7.32。进入bin目录，用记事本新建my.ini，内容如下：
[mysqld] port=3306 basedir=D:/mysql-5.7.32 datadir=D:/mysql-5.7.32/data max_connections=200 character-set-server=utf8mb4 default-storage-engine=INNODB sql_mode=STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION [client] port=3306 default-character-set=utf8mb4保存后，CMD管理员模式进入bin目录，执行mysqld --initialize --console，记住输出的临时密码（形如A1?b2#C3$d4%）。再执行mysqld --install注册服务，net start mysql启动。最后用mysql -u root -p登录，输入临时密码，执行ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '123456';改密码。
4.SQLyog或Navicat：装好后，新建连接，主机localhost，端口3306，用户名root，密码123456，测试连接成功。
提示：所有路径不要含中文和空格！
D:\java\jdk可以，D:\我的软件\jdk绝对不行。这是Windows下Java生态的铁律。
4.2 数据库初始化：建表脚本执行的三个致命细节
拿到xxx.sql建表脚本，别直接双击运行！按以下步骤：
1. 在SQLyog里，右键“localhost”，选择“新建数据库”，库名填comic_db，字符集选utf8mb4，排序规则utf8mb4_unicode_ci（支持emoji和生僻字）。
2. 右键新建的comic_db，选“运行SQL脚本”，找到你的SQL文件。关键一步：在弹出窗口左下角，勾选“在单个事务中执行所有语句”，否则中间出错会导致部分表建好、部分失败，清理起来很麻烦。
3. 执行完成后，在SQLyog左侧库列表里展开comic_db，应该能看到user、comic、comic_chapter等10+张表。此时别急着启动后端，先检查comic_category表里有没有预置数据。通常脚本里会有INSERT INTO comic_category (name, description) VALUES ('热血', '充满激情与斗志的故事');这类语句。如果没有，手动插几条，否则前端分类筛选会空。
注意：如果SQL脚本里有
CREATE DATABASE IF NOT EXISTS comic_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;这行，一定要删掉！因为你在SQLyog里已经手动创建了库，再执行这行会报错“Can’t create database ‘comic_db’; database exists”。
4.3 后端启动：从IDEA导入到端口成功的完整链路
- 解压源码包，用IDEA打开根目录（含
pom.xml的文件夹）。IDEA会自动识别为Maven项目，右下角提示“Import project from external model”，点“Enable Auto-Import”。 - 等待Maven下载依赖（可能需要几分钟）。如果卡在
Downloading from central，说明网络慢，去File → Settings → Build → Maven → User settings file，把settings.xml指向你本地Maven的conf/settings.xml，并在里面配置阿里云镜像（网上搜“maven 阿里云镜像配置”有详细步骤）。 - 找到
src/main/resources/application.yml，用记事本打开，修改数据库配置：
spring: datasource: url: jdbc:mysql://localhost:3306/comic_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true&useSSL=false username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver特别注意serverTimezone=Asia/Shanghai，否则时间字段全乱码；allowPublicKeyRetrieval=true&useSSL=false是MySQL 5.7+连接必需参数，漏掉会报Public Key Retrieval is not allowed。
4. 找到com.example.comic.ComicApplication类（主启动类），右键→Run 'ComicApplication.main()'。如果控制台输出Tomcat started on port(s): 8080 (http)，说明后端启动成功。此时访问http://localhost:8080/api/comic/list，应该返回JSON格式的漫画列表数据（可能是空数组，但HTTP状态码200）。
实操心得：如果启动报错
Failed to configure a DataSource，八成是application.yml里url或username写错了；如果报java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver，说明pom.xml里MySQL驱动版本和你的MySQL 5.7不匹配，去Maven仓库搜mysql-connector-java，选5.1.49版本（5.7兼容性最好），替换pom.xml里的<version>。
4.4 前端启动：Vue项目npm run serve的隐藏配置
- 进入源码包里的Vue项目目录（通常是
src/main/resources/static同级的frontend或vue-app文件夹，也可能在根目录下）。用CMD进入该目录，执行npm install。如果卡在node-gyp rebuild，说明Node.js版本太高，卸载Node.js，重装Node.js 14.21.3 LTS（Vue 2.x最稳定版本）。 - 安装成功后，打开
package.json，找到scripts里的serve命令，通常是vue-cli-service serve。但关键在vue.config.js（如果不存在，手动创建）：
module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', // 后端地址 changeOrigin: true, pathRewrite: { '^/api': '/api' // 把前端请求的/api/xxx，转发给后端/api/xxx } } } } }这个代理配置，解决了开发时的跨域问题。前端发axios.get('/api/comic/list')，实际被转发到http://localhost:8080/api/comic/list。
3. 执行npm run serve，看到App running at: http://localhost:8080，说明前端启动成功。此时访问http://localhost:8080，应该能看到漫画网站首页。
注意：如果页面空白，F12打开控制台，看Network标签页，找
/api/comic/list请求，如果状态码是500，说明后端没通；如果是404，说明前端axios请求路径写错了，检查src/api/comic.js里export function getComicList() { return request.get('/api/comic/list') }的路径是否和后端Controller的@RequestMapping("/api/comic")匹配。
5. 常见问题排查与实战技巧：那些文档里不会写的血泪经验
5.1 “页面一片空白”问题的三层排查法
这是新手遇到的第一座大山，别慌，按顺序查：
-第一层：前端静态资源是否加载成功？
F12打开浏览器开发者工具，切到Network标签页，刷新页面。看第一个HTML文件（通常是index.html）状态码是不是200。如果不是，说明Vue项目根本没跑起来，回到4.4节检查npm run serve是否成功，端口是否被占用（netstat -ano | findstr :8080查PID，taskkill /pid XXXX /f杀掉）。
-第二层：API接口是否返回数据？
在Network里找到/api/comic/list这类请求，看Preview或Response标签页。如果是空对象{}或[]，说明后端接口通了但数据库没数据，去SQLyog里手动INSERT INTO comic (...) VALUES (...)插一条测试数据；如果是Failed to load resource: net::ERR_CONNECTION_REFUSED，说明前端代理没生效，检查vue.config.js里target地址是否正确；如果是500 Internal Server Error，说明后端抛异常，回IDEA看控制台最后一行红色错误堆栈，大概率是数据库连接失败或SQL语法错误。
-第三层：Vue组件是否渲染异常？
如果API返回了正确JSON，但页面还是空白，打开Console标签页，看是否有TypeError: Cannot read property 'xxx' of undefined。这说明data里某个对象没定义就用了，比如comic.title，但comic是空的。去ComicList.vue里检查mounted()钩子里是否调用了getComicList()，以及data()里是否初始化了comicList: []。Vue 2.x的响应式原理要求数据必须在data里预先声明，否则后续赋值不会触发视图更新。
5.2 “登录后无法跳转后台”问题的权限校验真相
前端路由里，/admin/**路径通常有beforeEach守卫：
router.beforeEach((to, from, next) => { if (to.path.startsWith('/admin')) { const token = localStorage.getItem('admin_token') if (!token) { next('/admin/login') } else { next() } } else { next() } })但学生常犯的错是：登录接口返回的token，前端存到了localStorage.setItem('token', res.data.token)，而守卫里却读'admin_token'。结果就是永远跳转到登录页。解决方案：统一命名，或者在登录成功后，把token存两份。另一个坑是后端/api/admin/login接口，返回的token是JWT格式，但前端没做任何校验，直接存了。其实应该在登录后，用axios.interceptors.response.use添加响应拦截器，对401状态码统一跳转登录页，这才是健壮的做法。
5.3 “图片不显示”问题的资源路径终极解法
漫画封面和章节图片不显示，90%是路径问题。后端ComicController里，返回的cover_url可能是/static/images/cover1.jpg，但Vue项目打包后，静态资源在dist/static/目录下。解决方案有两个：
-方案一（推荐）：前后端约定资源服务路径
后端application.yml里加配置：
comic: resource-base-url: http://localhost:8080/static/然后在Comic实体类里，getCoverUrl()方法拼接：
public String getCoverUrl() { return comicProperties.getResourceBaseUrl() + this.coverPath; }前端直接用comic.coverUrl，确保路径绝对正确。
-方案二：Nginx反向代理
在nginx.conf里加：
location /static/ { alias /opt/comic-resources/; }这样所有/static/xxx.jpg请求，都由Nginx直接返回磁盘文件，不经过SpringBoot，性能更好。课程设计阶段用方案一，毕设答辩时可以提方案二作为优化点。
5.4 “Tomcat部署后404”问题的WAR包构建秘籍
用pom-war.xml打WAR包，最容易出错的是web.xml缺失。SpringBoot 2.x默认不生成web.xml，但Tomcat 9需要它来识别Servlet容器。解决方案：在src/main/webapp/WEB-INF/目录下，手动创建web.xml，内容如下：
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0"> <display-name>comic-web</display-name> </web-app>然后执行mvn clean package -f pom-war.xml，得到的WAR包扔进Tomcatwebapps目录，重启Tomcat，访问http://localhost:8080/comic-web即可。如果还是404，去Tomcatlogs/catalina.out里搜ERROR，大概率是web.xml路径不对或内容有误。
最后分享一个小技巧：在IDEA里，右键项目→
Open Module Settings→Project Settings→Artifacts，点+号→Web Application: Archive→From modules...，选择你的模块，这样就能在IDEA里一键构建WAR包，比命令行更直观。这个技巧，我带过的毕业生里，90%都不知道。
这套漫画网站源码的价值，不在于它有多前沿，而在于它把Java Web开发的“脏活累活”——环境适配、数据库建模、前后端联调、部署踩坑——全都摊开在你面前。你不必从零发明轮子，但必须亲手拧紧每一颗螺丝。当你第一次看到首页漫画封面加载出来，点击章节跳转到阅读页，滑动屏幕时进度条自动更新，那一刻的成就感，远胜于写出一百行炫酷但无用的动画代码。它不是一个终点，而是一张通往真实工程世界的船票。接下来的路，你可以给它加上搜索功能，接入Redis缓存热门漫画，或者用Elasticsearch实现全文检索——但所有这些，都建立在你已经让这套“开箱即用”的骨架，真正转动起来的基础之上。
本文还有配套的精品资源，点击获取
简介：直接可用的漫画阅读平台源码，后端用SpringBoot开发，提供RESTful接口和用户管理、漫画分类、章节浏览、阅读记录等基础功能；前端基于Vue 2.x构建响应式界面，支持PC和主流移动设备访问。项目采用标准Maven结构，包含完整的Java业务代码、Vue组件、路由配置、Axios请求封装及静态资源文件。数据库使用MySQL 5.7+，附带全量建表SQL脚本（含管理员、用户、漫画、章节、评论等10+张表），支持通过SQLyog或Navicat一键导入。配套PDF配置说明和Word必读文档，详细列出JDK 8+、Maven 3.6+、Tomcat 9环境搭建步骤，前后端启动方式、端口修改方法、跨域配置要点及常见报错解决方案。所有代码已在Windows系统下实测运行，适合计算机专业学生完成课程设计或毕业设计，也适合作为Java+Vue技术栈入门级项目练手。使用者需掌握基础Java语法、Vue组件开发流程及MySQL增删改查操作，能熟练使用IDEA导入Maven工程、执行mvn clean install、配置application.yml数据库连接参数，并完成Vue项目npm install与npm run serve启动。
本文还有配套的精品资源，点击获取
