尧图网页设计 
简介面向计算机毕业设计或课程设计场景的在线阅读系统项目基于微信小程序开发工具与Java后端实现结合MySQL数据库整体采用B/S架构。小程序端包含首页、分类、我的三大功能模块后台则提供小说信息管理、注册用户管理、系统设置等管理功能能清晰呈现从用户操作到后台处理的完整流程。压缩包共80个文件以js、json、wxml、wxss等小程序代码文件为主另附png、jpeg图片资源、sql数据库脚本以及rar后台工程包体大小为88.34MB文件结构按前端、后台、数据库、演示资料等模块划分查找起来比较方便。该资源已有1131人学习下载配套演示视频可帮助快速了解项目运行效果源码和数据库便于二次开发或在答辩前调整功能完整度和实操性都较强很适合毕业设计选题参考也可用于小程序开发练手。1. 毕业设计选在线阅读系统为什么我劝你直接要这套源码每年毕业季都有一批人被“基于微信小程序的XXX系统”这类题目卡住尤其是带“在线阅读”三个字的。你以为难点在阅读器其实难点在书城的数据组织、阅读进度的同步、以及在小程序里做分页和缓存——这些才是真正耗时间的部分。这套标题里说的“源码数据库演示视频”的zip包本质上是把前端页面、后端接口和数据库脚本打包成了一个人能直接跑起来的完整项目省掉的是你从零画原型、建表、写接口、调真机的整个周期。但我要先说一句反直觉的话拿到这套源码不是结束而是填坑的开始。因为毕业设计源码包往往带着环境差异、旧版本依赖、数据库路径写死这类问题你需要的是“能看懂 会改 跑得起来”的能力简历上写“独立开发”之前至少得先把项目里的每张表、每个接口的来龙去脉搞清楚。这篇文章就按我实际带学生的路径把从解压到跑通、从改数据库到答辩演示的完整链路拆给你。读者如果是正在选毕设方向、或者已经拿到同类zip包的本科生跟着走能少熬两个通宵。2. 先拆包这套源码里到底有什么以及当前端、后端、数据库三层怎么协作2.1 压缩包里最常出现的四类文件先分清再动手标题里写了“源码数据库演示视频”那我们就按这个结构反推。常见的毕设zip包打开之后一般是四个部分小程序前端目录通常是miniprogram或pages这一层里面有app.js、app.json、pages/、utils/这些、后端接口目录Java的Spring Boot工程或Node.js工程带有pom.xml或package.json、数据库脚本一个.sql文件或者一个db文件夹里放着建表和初始数据的脚本、以及一个演示视频多半是mp4用于答辩前看效果。有的包还会带README或者部署文档但毕设包的README一般写得很敷衍很多人的文档里连数据库账号密码都忘写了这一步先别寄希望于它。拿到包的第一步不是急着导入微信开发者工具而是先盘清楚后端技术栈。打开后端的pom.xml或package.json看一眼是Spring Boot MyBatis还是Node.js Express这决定了你本机要装什么运行环境。我的经验是如果是Java后端重点确认JDK版本和Maven仓库能否访问如果是Node后端重点确认npm registry能不能拉下依赖。很多毕设源码跑不起来的第一个翻车点就是这里——代码本身没毛病但本机的Java版本从1.8换成了17旧框架直接启动失败。2.2 前端到后端再到MySQL的数据链路用一条书籍列表接口说清楚在线阅读系统的核心业务无非是用户登录、书城首页展示、分类筛选、书籍详情、阅读器翻页、书架收藏、阅读进度记录。我们拿“获取书籍列表”这个最常用的接口做例子把三层协作讲透。小程序的pages/index/index.js里一般会在onLoad生命周期里调用wx.request指向后端的某个URL比如http://localhost:8080/api/book/list?category玄幻page1size10。这个请求打到后端ControllerController调ServiceService调MapperMapper去查MySQL的book表把结果封装成JSON返回给前端前端再用setData渲染到页面上。数据库脚本里最核心的几张表大概长这样book表书籍ID、书名、作者、分类、简介、封面URL、章节数、chapter表章节ID、书籍ID、章节标题、正文内容、字数、user表用户ID、昵称、头像、openid、user_book表收藏关系、最后阅读章节、最后阅读时间。这套表结构其实是比较标准的毕设设计但如果原作者的SQL脚本里只给了建表语句没给初始数据你需要自己往book表里插入几十条测试数据不然首页就是空的。我一般会写一个简单的存储过程批量生成或者直接用Navicat的导入功能灌CSV。2.3 演示视频的价值被低估了它是你最快的“需求说明书”演示视频在多数人眼里就是个答辩佐证材料但我建议你把它当成最快的项目说明书来看。花十分钟把视频从头看到尾能搞清楚三件事第一原作者演示了哪些功能点这些功能点对应的就是你的需求文档目录第二每个操作在页面上对应哪个按钮、哪个跳转你后续改代码时知道去哪里找第三视频里有没有暴露报错或者明显没做完的地方——有就改掉没做完的地方补上恰好是答辩时“我做了额外优化”的加分项。看视频的时候手里拿张纸按时间线记下每一步操作对应的页面和功能描述例如“打开首页 → 点击《三体》封面 → 进入详情页 → 点击开始阅读 → 进入阅读器 → 章末左滑返回目录”。这份笔记直接转化成你的毕业设计说明书的功能模块描述比你自己对着代码猜功能要快得多。3. 本地跑通的最小路径从解压到小程序看到书城首页3.1 环境准备清单按这份表核对不会漏动手跑项目之前先花二十分钟把环境确认完。下面这张表是我带人搭毕设环境时最常核对的项目你可以直接截图对照。环境项版本建议用途JDK1.8或项目指定版本运行Spring Boot后端MySQL5.7或8.0存放业务数据Redis如需要3.x以上缓存登录态或热点数据微信开发者工具稳定版即可运行、调试小程序前端Node.js如后端是Node14或16运行Node后端服务Navicat或MySQL Workbench任意导入数据库、查表数据有个常见的坑是项目里同时用了JDK和Node比如前端部分用了npm构建工具那你需要把两个环境都配好缺一个整个链路就断了。另一个坑是MySQL 8.0和5.7的认证插件不一样如果数据库脚本里有老版本的密码加密方式连接时会报authentication plugin错误后面第五节我会专门说。3.2 数据库导入实操用mysql命令行或Navicat把SQL灌进去拿到.sql文件后先不要急着双击导入。我习惯先用文本编辑器打开看一眼SQL文件的前几十行确认里面有没有CREATE DATABASE语句。如果有直接执行就能建库如果没有你需要手动创建一个空的数据库再导入表结构和数据。一般毕设包的SQL是完整导出包含建库语句但保险起见还是确认一下。# 在终端执行假设你的SQL文件是reading_online.sql mysql -u root -p /path/to/reading_online.sql执行完用一条命令确认表是否建好了mysql -u root -p -e USE reading_online; SHOW TABLES;如果看到book、chapter、user这些表说明数据库导入成功。然后你再顺手查一下数据量确认不是空表SELECT COUNT(*) FROM book;这一步我强烈建议做因为很多毕设SQL文件只有表结构没有INSERT语句你后面打开小程序时首页会一片空白到时候你还以为是代码的问题。如果发现book表是空的让作者补发初始数据或者自己写几条INSERT先跑通界面再说。3.3 启动后端接口服务先解决端口和跨域后端是Spring Boot的话一般直接运行Application类即可启动。启动前改两个配置文件application.yml或application.properties里的数据库连接包括URL、用户名、密码改成你本机的实际值以及端口配置默认一般是8080如果你本机8080被占用了就改成8081但要记住改完端口后小程序前端所有wx.request的URL也得跟着改。server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/reading_online?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: yourpassword driver-class-name: com.mysql.cj.jdbc.Driver启动后在浏览器直接访问一个接口测试比如http://localhost:8080/api/book/list?page1size10能返回JSON数据就说明后端没问题。如果返回404检查Controller的RequestMapping路径和前端请求路径是否一致如果是Spring Boot 2.x以上的版本还需要加CrossOrigin注解或配置WebMvcConfigurer处理跨域不然后端明明通了小程序里却一直报network error。3.4 小程序端导入与基础配置AppID、域名校验、工具设置微信开发者工具里选择“导入项目”找到zip包里的小程序前端目录注意要选到包含app.json的那一层。导入时工具会要求填AppID你可以先用测试号也可以选“不使用云服务”直接用游客模式。然后重点看两个地方第一个是详情 → 本地设置里把“不校验合法域名、web-view业务域名、TLS版本以及HTTPS证书”勾上。因为你的后端是http://localhost没有HTTPS证书不勾这个的话真机预览时会直接拦截所有请求开发工具里也会报request:fail。第二个是小程序根目录下的app.js找到全局请求的基础URL配置// app.js 中的全局配置 globalData: { // 改成你本机的后端地址 baseUrl: http://localhost:8080 }然后在每个页面调接口的地方把wx.request的url拼成app.globalData.baseUrl /api/book/list这种形式。有些毕设源码的作者习惯把IP地址写死在代码里比如http://192.168.1.100:8080这种写死IP的地址改起来最麻烦我一般让学生全局搜索http://一个个替换干净。做完这三步编译运行模拟器里应该能看到书城首页的书籍列表了。如果页面还是空白优先打开调试器的Console面板看报错信息不用瞎猜——大部分问题都能从报错里直接定位是我前面说的“玄学问题”里最少的一类。4. 把数据库表结构和接口逻辑吃透不只跑通要能改4.1 五张核心表的字段设计与业务关联直接对着表抄拿到能跑的项目之后你的下一步任务是从“能跑”变成“能讲、能改”。毕业答辩时最常问的问题是“你这几张表为什么要这么设计”所以你得自己把表结构理一遍。在线阅读系统的核心表我归纳成五张用户表、书籍表、章节表、书架表、阅读进度表。其中用户表不需要存密码——微信小程序登录走的是wx.login拿code后端调微信接口换openid所以你只需要留着openid、昵称、头像三个字段就够了。书籍表和章节表是主从关系一本书记录在book里它的所有章节记录在chapter表chapter表里用book_id字段关联。章节正文一般用TEXT类型存储如果作者用的是LONGTEXT也没问题。书架表和阅读进度表都依赖用户ID分别记录“我收藏了哪几本书”和“我看到这本书的第几章第几行”。这里有个常见的设计陷阱有些包把阅读进度直接挂在书架表里只存一个last_chapter_id这样做虽然省了一张表但你没法区分“收藏了但没看过”和“看过但取消了收藏”功能一扩展就露馅了。4.2 从阅读器翻页到进度上报的完整调用链阅读器页面是整套系统里最核心的技术点。我在看演示视频时最关注的就是翻页和进度记录。一个标准的阅读器页面会有两个关键接口获取章节内容GET /api/chapter/detail?bookId1chapterNo3上报阅读进度POST /api/progress/report请求体里带bookId、chapterNo、pageIndex、totalPage、timestamp前端在章节加载完成后调用进度上报接口后端更新user_book_progress表。我建议你重点看一下这段前端代码因为这是你能在答辩中讲出亮点的地方——很多人只会说“我的系统能看书”但你说“我的进度是每翻一页就上报同时用本地缓存做离线兜底弱网环境下读的章节会存到storage里”这个复杂度一下就拉开了。具体实现思路是这样的阅读器页面的onLoad里接收bookId和chapterNo然后请求章节接口。如果请求成功把数据渲染到当前页同时保存到本地缓存如果请求失败先读缓存缓存没有才提示用户网络异常。前端代码大致长这样Page({ data: { bookId: null, chapterNo: 1, content: , totalPage: 1, currentPage: 1 }, onLoad(options) { const { bookId, chapterNo } options this.setData({ bookId, chapterNo }) this.loadChapter(bookId, chapterNo) }, loadChapter(bookId, chapterNo) { const app getApp() // 先尝试从本地缓存读取 const cacheKey chapter_${bookId}_${chapterNo} const cached wx.getStorageSync(cacheKey) if (cached) { this.setData({ content: cached }) return } // 缓存没有再去请求接口失败时弹出提示 wx.request({ url: ${app.globalData.baseUrl}/api/chapter/detail, data: { bookId, chapterNo }, success: (res) { const content res.data.data.content wx.setStorageSync(cacheKey, content) this.setData({ content }) }, fail: () { wx.showToast({ title: 网络异常请稍后重试, icon: none }) } }) } })这段代码的逻辑是通过缓存优先策略降低接口压力同时用户在翻页时不会每次都有白屏等待。这里的参数说明wx.getStorageSync和wx.setStorageSync是微信小程序的同步缓存API适合读多写少的场景bookId和chapterNo是页面跳转时从URL参数里带过来的如果你发现点开书籍目录跳不到阅读器先检查跳转时的url拼接是否正确——很多毕设源码在这里写死了chapterNo为1导致每次点开都从第一章开始。4.3 首页列表的加载更多从分页参数到触底事件的完整实现热词里有人搜“微信小程序页面列表加载更多”这恰恰是阅读系统首页最典型的一个功能点。书城首页不可能一次性把几百本书全部渲染出来所以后端接口一定带了page和size参数前端也必须有触底加载的逻辑。我见过最省事的写法是直接在Page里写一个onReachBottom事件每次触发把page加1再去请求下一页但这种写法有两个隐患一是没有做请求锁用户快速滑动会触发多次重复请求导致数据错乱二是没有判断总页数会一直请求到服务器返回空数组才算完。Page({ data: { bookList: [], page: 1, size: 10, total: 0, isLoading: false, hasMore: true }, onReachBottom() { if (!this.data.hasMore || this.data.isLoading) return this.setData({ isLoading: true }) const { page, size, bookList } this.data const app getApp() wx.request({ url: ${app.globalData.baseUrl}/api/book/list, data: { page: page 1, size }, success: (res) { const { list, total } res.data.data this.setData({ bookList: bookList.concat(list), page: page 1, total, hasMore: bookList.length list.length total }) }, complete: () { this.setData({ isLoading: false }) } }) } })这里的核心参数是hasMore和isLoading。isLoading是请求锁防止并发触发hasMore用来判断还有没有下一页。你在自己改的时候要学会把这段逻辑写成可复用的函数而不是每个页面都复制一遍——因为分类页、搜索页都会用到相同的分页逻辑。5. 避坑指南跑毕设源码最常见的6个翻车现场5.1 数据库连接报错authentication plugin和时区问题现象后端启动时控制台报Public Key Retrieval is not allowed或者The server time zone value Öйú±ê׼ʱ¼ä is unrecognized。前者是MySQL 8.0的认证插件问题后者是时区没有指定的问题。原因MySQL 8.0默认使用caching_sha2_password认证插件而很多老毕设的JDBC驱动用的是5.x版本或者连接串里没配置allowPublicKeyRetrieval参数时区问题则是因为MySQL和JDBC之间的timezone默认值不一致。解决JDBC连接串里显式加上allowPublicKeyRetrievaltrueuseSSLfalseserverTimezoneAsia/Shanghai这是我在3.3节里的写法你直接照抄。如果还是不行就查一下你的pom.xml里mysql-connector-java的版本8.0版本必须用8.x驱动不能降级用5.x。5.2 小程序里请求后端一直报fail但浏览器里能通现象微信开发者工具里wx.request的fail回调被触发Console里显示request:fail但同样的URL在Chrome里能正常返回JSON。原因八成是你没勾选“不校验合法域名”或者后端端口和前端配置的端口不一致。微信开发者工具默认会对请求域名做合法性校验localhost也在拦截范围内。解决在开发者工具的“详情 → 本地设置 → 不校验合法域名”打勾。注意勾了之后要重新编译一次才生效有时候工具还残留了旧的请求缓存直接关掉重开项目最保险。5.3 首页书籍列表能渲染但点进详情页却是空白现象首页能看到封面和书名点击卡片跳转详情页结果页面只有标题栏内容是白的。原因详情页拿到bookId后调用了GET /api/book/detail?bookIdxxx但接口返回里没有查章节列表。你会发现数据库里book表和chapter表都有数据但章节列表接口的SQL里用了错误的关联字段或者BookController的RequestParam参数名和前端传的参数名不一致。解决打开调试器Network面板看详情页发出的请求返回了什么。如果返回data是null重点检查后端SQL里的表名、字段名是否和数据库实际一致——尤其是字段用了book_id还是bookId这种命名风格不一致的情况下MyBatis默认开启驼峰映射时book_id能映射成bookId但如果作者手动关闭了这个配置就会出问题。5.4 演示视频里有的功能源码里却没实现现象视频里能看到搜索功能但源码的pages下找不到search相关目录或者视频里有点击“加入书架”的演示但后端接口根本没有对应的Controller方法。原因很多毕设视频是作者早期录制的后期改版时砍掉了一些功能但视频没重录。也有可能为了方便演示前端点了收藏只是本地存了一下压根没走接口。解决这种算缺功能你必须自己补。搜索功能其实很简单在后端加一个GET /api/book/search?keywordxxxSQL里用WHERE title LIKE CONCAT(%, #{keyword}, %)即可加入书架也只需要往user_book表里插一条记录。你用两天时间把这种缺口补上答辩时反而能说成“我在原基础上完善了完整功能”。5.5 编译报错一个文件里多个Page注册或重复的app.json现象点击编译后工具提示app.json: 未找到或某个页面的json文件格式错误整个项目白屏。原因最常见的是解压后目录层级不对。原作者的zip打包时把整个工程文件夹套了一层目录你在导入时选错了层级导致工具读不到app.json。还有一种情况是有人把微信开发者工具版本升了工具对json文件的schema校验更严格旧小程序里写了一些废弃字段会直接报错。解决导入项目时目录一定要确认到包含app.json的那一层。如果不确定就在系统文件管理器里逐层打开看。遇到app.json校验报错看看是不是没写pages数组或者window字段的配置键名写错了——微信小程序要求json里不能有注释复制别人的代码时很容易带进来。5.6 真机预览时页面白屏模拟器里却一切正常现象开发者工具里换到手机预览模式一切正常扫码后手机上页面加载出来但数据是空的。原因这是经典的真机环境差异问题。你勾了“不校验合法域名”只对开发者工具生效真机上这个设置不起作用。如果后端是localhost或者192.168.x.x的局域网地址真机也访问不到——除非手机和电脑在同一局域网并且你用的是电脑的内网IP而不是localhost。解决把app.js里的baseUrl改成电脑的局域网IP比如http://192.168.1.100:8080保证手机和电脑连同一个WiFi。同时真机调试需要在开发者工具里打开“真机调试”功能它会给小程序临时注入一个调试环境绕过部分域名限制。如果你连这个都嫌麻烦还有一个办法是临时注册一个微信小程序账号把后端部署到云端后再联调但到那一步其实已经是上线部署的范畴了。6. 从能用变好用给阅读进度加一个“继续阅读”的全局入口跑通整套系统之后建议你做一个很加分的小优化这就是“继续阅读”入口。当用户打开小程序时首页除了书城列表再展示一本“最近在读”的书——点进去直接跳到上次阅读的章节。这个功能用到你已经建好的user_book_progress表前端只需要新增一个接口调用GET /api/progress/last?userIdxxx后端返回最近一条进度记录。你做一个卡片放在首页轮播图下方调接口拿到数据后展示书封、章节名和阅读进度百分比。这块代码我建议你自己写一遍因为它是整个系统里最能体现“用户思维”的功能点更能在答辩时说明白“我不仅做了功能还做了体验优化”。实际编码时需要注意的地方是小程序的生命周期问题。首页每次从后台切回前台都应该重新拉取一次进度数据因为用户可能刚读完一章切回来。做法是在首页的onShow生命周期里调用接口而不是在onLoad里一次性加载。onShow() { this.loadLastReadBook() }, loadLastReadBook() { const app getApp() const userId wx.getStorageSync(userId) if (!userId) return wx.request({ url: ${app.globalData.baseUrl}/api/progress/last, data: { userId }, success: (res) { if (res.data.data) { this.setData({ lastReadBook: res.data.data }) } } }) }这个优化做完你的项目就比原版的“能跑”多了一层“用起来顺”。说实话我当年带学生做毕设时最常强调的一件事是——源码包只是你的起跑线不是你的终点线。你照着跑通只是及格能说清楚每一张表为什么这么建、每个接口为什么这么设计、以及自己动手加了什么功能才是拿高分的底气。我的个人习惯是每拿到一个参考项目先按“跑通 → 画清架构 → 拆出核心技术点 → 替换一个自己写的功能”四步走一遍希望帮到你。本文还有配套的精品资源点击获取 微信小程序在线阅读系统毕设源码：从跑通到答辩优化指南
简介面向计算机毕业设计或课程设计场景的在线阅读系统项目基于微信小程序开发工具与Java后端实现结合MySQL数据库整体采用B/S架构。小程序端包含首页、分类、我的三大功能模块后台则提供小说信息管理、注册用户管理、系统设置等管理功能能清晰呈现从用户操作到后台处理的完整流程。压缩包共80个文件以js、json、wxml、wxss等小程序代码文件为主另附png、jpeg图片资源、sql数据库脚本以及rar后台工程包体大小为88.34MB文件结构按前端、后台、数据库、演示资料等模块划分查找起来比较方便。该资源已有1131人学习下载配套演示视频可帮助快速了解项目运行效果源码和数据库便于二次开发或在答辩前调整功能完整度和实操性都较强很适合毕业设计选题参考也可用于小程序开发练手。1. 毕业设计选在线阅读系统为什么我劝你直接要这套源码每年毕业季都有一批人被“基于微信小程序的XXX系统”这类题目卡住尤其是带“在线阅读”三个字的。你以为难点在阅读器其实难点在书城的数据组织、阅读进度的同步、以及在小程序里做分页和缓存——这些才是真正耗时间的部分。这套标题里说的“源码数据库演示视频”的zip包本质上是把前端页面、后端接口和数据库脚本打包成了一个人能直接跑起来的完整项目省掉的是你从零画原型、建表、写接口、调真机的整个周期。但我要先说一句反直觉的话拿到这套源码不是结束而是填坑的开始。因为毕业设计源码包往往带着环境差异、旧版本依赖、数据库路径写死这类问题你需要的是“能看懂 会改 跑得起来”的能力简历上写“独立开发”之前至少得先把项目里的每张表、每个接口的来龙去脉搞清楚。这篇文章就按我实际带学生的路径把从解压到跑通、从改数据库到答辩演示的完整链路拆给你。读者如果是正在选毕设方向、或者已经拿到同类zip包的本科生跟着走能少熬两个通宵。2. 先拆包这套源码里到底有什么以及当前端、后端、数据库三层怎么协作2.1 压缩包里最常出现的四类文件先分清再动手标题里写了“源码数据库演示视频”那我们就按这个结构反推。常见的毕设zip包打开之后一般是四个部分小程序前端目录通常是miniprogram或pages这一层里面有app.js、app.json、pages/、utils/这些、后端接口目录Java的Spring Boot工程或Node.js工程带有pom.xml或package.json、数据库脚本一个.sql文件或者一个db文件夹里放着建表和初始数据的脚本、以及一个演示视频多半是mp4用于答辩前看效果。有的包还会带README或者部署文档但毕设包的README一般写得很敷衍很多人的文档里连数据库账号密码都忘写了这一步先别寄希望于它。拿到包的第一步不是急着导入微信开发者工具而是先盘清楚后端技术栈。打开后端的pom.xml或package.json看一眼是Spring Boot MyBatis还是Node.js Express这决定了你本机要装什么运行环境。我的经验是如果是Java后端重点确认JDK版本和Maven仓库能否访问如果是Node后端重点确认npm registry能不能拉下依赖。很多毕设源码跑不起来的第一个翻车点就是这里——代码本身没毛病但本机的Java版本从1.8换成了17旧框架直接启动失败。2.2 前端到后端再到MySQL的数据链路用一条书籍列表接口说清楚在线阅读系统的核心业务无非是用户登录、书城首页展示、分类筛选、书籍详情、阅读器翻页、书架收藏、阅读进度记录。我们拿“获取书籍列表”这个最常用的接口做例子把三层协作讲透。小程序的pages/index/index.js里一般会在onLoad生命周期里调用wx.request指向后端的某个URL比如http://localhost:8080/api/book/list?category玄幻page1size10。这个请求打到后端ControllerController调ServiceService调MapperMapper去查MySQL的book表把结果封装成JSON返回给前端前端再用setData渲染到页面上。数据库脚本里最核心的几张表大概长这样book表书籍ID、书名、作者、分类、简介、封面URL、章节数、chapter表章节ID、书籍ID、章节标题、正文内容、字数、user表用户ID、昵称、头像、openid、user_book表收藏关系、最后阅读章节、最后阅读时间。这套表结构其实是比较标准的毕设设计但如果原作者的SQL脚本里只给了建表语句没给初始数据你需要自己往book表里插入几十条测试数据不然首页就是空的。我一般会写一个简单的存储过程批量生成或者直接用Navicat的导入功能灌CSV。2.3 演示视频的价值被低估了它是你最快的“需求说明书”演示视频在多数人眼里就是个答辩佐证材料但我建议你把它当成最快的项目说明书来看。花十分钟把视频从头看到尾能搞清楚三件事第一原作者演示了哪些功能点这些功能点对应的就是你的需求文档目录第二每个操作在页面上对应哪个按钮、哪个跳转你后续改代码时知道去哪里找第三视频里有没有暴露报错或者明显没做完的地方——有就改掉没做完的地方补上恰好是答辩时“我做了额外优化”的加分项。看视频的时候手里拿张纸按时间线记下每一步操作对应的页面和功能描述例如“打开首页 → 点击《三体》封面 → 进入详情页 → 点击开始阅读 → 进入阅读器 → 章末左滑返回目录”。这份笔记直接转化成你的毕业设计说明书的功能模块描述比你自己对着代码猜功能要快得多。3. 本地跑通的最小路径从解压到小程序看到书城首页3.1 环境准备清单按这份表核对不会漏动手跑项目之前先花二十分钟把环境确认完。下面这张表是我带人搭毕设环境时最常核对的项目你可以直接截图对照。环境项版本建议用途JDK1.8或项目指定版本运行Spring Boot后端MySQL5.7或8.0存放业务数据Redis如需要3.x以上缓存登录态或热点数据微信开发者工具稳定版即可运行、调试小程序前端Node.js如后端是Node14或16运行Node后端服务Navicat或MySQL Workbench任意导入数据库、查表数据有个常见的坑是项目里同时用了JDK和Node比如前端部分用了npm构建工具那你需要把两个环境都配好缺一个整个链路就断了。另一个坑是MySQL 8.0和5.7的认证插件不一样如果数据库脚本里有老版本的密码加密方式连接时会报authentication plugin错误后面第五节我会专门说。3.2 数据库导入实操用mysql命令行或Navicat把SQL灌进去拿到.sql文件后先不要急着双击导入。我习惯先用文本编辑器打开看一眼SQL文件的前几十行确认里面有没有CREATE DATABASE语句。如果有直接执行就能建库如果没有你需要手动创建一个空的数据库再导入表结构和数据。一般毕设包的SQL是完整导出包含建库语句但保险起见还是确认一下。# 在终端执行假设你的SQL文件是reading_online.sql mysql -u root -p /path/to/reading_online.sql执行完用一条命令确认表是否建好了mysql -u root -p -e USE reading_online; SHOW TABLES;如果看到book、chapter、user这些表说明数据库导入成功。然后你再顺手查一下数据量确认不是空表SELECT COUNT(*) FROM book;这一步我强烈建议做因为很多毕设SQL文件只有表结构没有INSERT语句你后面打开小程序时首页会一片空白到时候你还以为是代码的问题。如果发现book表是空的让作者补发初始数据或者自己写几条INSERT先跑通界面再说。3.3 启动后端接口服务先解决端口和跨域后端是Spring Boot的话一般直接运行Application类即可启动。启动前改两个配置文件application.yml或application.properties里的数据库连接包括URL、用户名、密码改成你本机的实际值以及端口配置默认一般是8080如果你本机8080被占用了就改成8081但要记住改完端口后小程序前端所有wx.request的URL也得跟着改。server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/reading_online?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: yourpassword driver-class-name: com.mysql.cj.jdbc.Driver启动后在浏览器直接访问一个接口测试比如http://localhost:8080/api/book/list?page1size10能返回JSON数据就说明后端没问题。如果返回404检查Controller的RequestMapping路径和前端请求路径是否一致如果是Spring Boot 2.x以上的版本还需要加CrossOrigin注解或配置WebMvcConfigurer处理跨域不然后端明明通了小程序里却一直报network error。3.4 小程序端导入与基础配置AppID、域名校验、工具设置微信开发者工具里选择“导入项目”找到zip包里的小程序前端目录注意要选到包含app.json的那一层。导入时工具会要求填AppID你可以先用测试号也可以选“不使用云服务”直接用游客模式。然后重点看两个地方第一个是详情 → 本地设置里把“不校验合法域名、web-view业务域名、TLS版本以及HTTPS证书”勾上。因为你的后端是http://localhost没有HTTPS证书不勾这个的话真机预览时会直接拦截所有请求开发工具里也会报request:fail。第二个是小程序根目录下的app.js找到全局请求的基础URL配置// app.js 中的全局配置 globalData: { // 改成你本机的后端地址 baseUrl: http://localhost:8080 }然后在每个页面调接口的地方把wx.request的url拼成app.globalData.baseUrl /api/book/list这种形式。有些毕设源码的作者习惯把IP地址写死在代码里比如http://192.168.1.100:8080这种写死IP的地址改起来最麻烦我一般让学生全局搜索http://一个个替换干净。做完这三步编译运行模拟器里应该能看到书城首页的书籍列表了。如果页面还是空白优先打开调试器的Console面板看报错信息不用瞎猜——大部分问题都能从报错里直接定位是我前面说的“玄学问题”里最少的一类。4. 把数据库表结构和接口逻辑吃透不只跑通要能改4.1 五张核心表的字段设计与业务关联直接对着表抄拿到能跑的项目之后你的下一步任务是从“能跑”变成“能讲、能改”。毕业答辩时最常问的问题是“你这几张表为什么要这么设计”所以你得自己把表结构理一遍。在线阅读系统的核心表我归纳成五张用户表、书籍表、章节表、书架表、阅读进度表。其中用户表不需要存密码——微信小程序登录走的是wx.login拿code后端调微信接口换openid所以你只需要留着openid、昵称、头像三个字段就够了。书籍表和章节表是主从关系一本书记录在book里它的所有章节记录在chapter表chapter表里用book_id字段关联。章节正文一般用TEXT类型存储如果作者用的是LONGTEXT也没问题。书架表和阅读进度表都依赖用户ID分别记录“我收藏了哪几本书”和“我看到这本书的第几章第几行”。这里有个常见的设计陷阱有些包把阅读进度直接挂在书架表里只存一个last_chapter_id这样做虽然省了一张表但你没法区分“收藏了但没看过”和“看过但取消了收藏”功能一扩展就露馅了。4.2 从阅读器翻页到进度上报的完整调用链阅读器页面是整套系统里最核心的技术点。我在看演示视频时最关注的就是翻页和进度记录。一个标准的阅读器页面会有两个关键接口获取章节内容GET /api/chapter/detail?bookId1chapterNo3上报阅读进度POST /api/progress/report请求体里带bookId、chapterNo、pageIndex、totalPage、timestamp前端在章节加载完成后调用进度上报接口后端更新user_book_progress表。我建议你重点看一下这段前端代码因为这是你能在答辩中讲出亮点的地方——很多人只会说“我的系统能看书”但你说“我的进度是每翻一页就上报同时用本地缓存做离线兜底弱网环境下读的章节会存到storage里”这个复杂度一下就拉开了。具体实现思路是这样的阅读器页面的onLoad里接收bookId和chapterNo然后请求章节接口。如果请求成功把数据渲染到当前页同时保存到本地缓存如果请求失败先读缓存缓存没有才提示用户网络异常。前端代码大致长这样Page({ data: { bookId: null, chapterNo: 1, content: , totalPage: 1, currentPage: 1 }, onLoad(options) { const { bookId, chapterNo } options this.setData({ bookId, chapterNo }) this.loadChapter(bookId, chapterNo) }, loadChapter(bookId, chapterNo) { const app getApp() // 先尝试从本地缓存读取 const cacheKey chapter_${bookId}_${chapterNo} const cached wx.getStorageSync(cacheKey) if (cached) { this.setData({ content: cached }) return } // 缓存没有再去请求接口失败时弹出提示 wx.request({ url: ${app.globalData.baseUrl}/api/chapter/detail, data: { bookId, chapterNo }, success: (res) { const content res.data.data.content wx.setStorageSync(cacheKey, content) this.setData({ content }) }, fail: () { wx.showToast({ title: 网络异常请稍后重试, icon: none }) } }) } })这段代码的逻辑是通过缓存优先策略降低接口压力同时用户在翻页时不会每次都有白屏等待。这里的参数说明wx.getStorageSync和wx.setStorageSync是微信小程序的同步缓存API适合读多写少的场景bookId和chapterNo是页面跳转时从URL参数里带过来的如果你发现点开书籍目录跳不到阅读器先检查跳转时的url拼接是否正确——很多毕设源码在这里写死了chapterNo为1导致每次点开都从第一章开始。4.3 首页列表的加载更多从分页参数到触底事件的完整实现热词里有人搜“微信小程序页面列表加载更多”这恰恰是阅读系统首页最典型的一个功能点。书城首页不可能一次性把几百本书全部渲染出来所以后端接口一定带了page和size参数前端也必须有触底加载的逻辑。我见过最省事的写法是直接在Page里写一个onReachBottom事件每次触发把page加1再去请求下一页但这种写法有两个隐患一是没有做请求锁用户快速滑动会触发多次重复请求导致数据错乱二是没有判断总页数会一直请求到服务器返回空数组才算完。Page({ data: { bookList: [], page: 1, size: 10, total: 0, isLoading: false, hasMore: true }, onReachBottom() { if (!this.data.hasMore || this.data.isLoading) return this.setData({ isLoading: true }) const { page, size, bookList } this.data const app getApp() wx.request({ url: ${app.globalData.baseUrl}/api/book/list, data: { page: page 1, size }, success: (res) { const { list, total } res.data.data this.setData({ bookList: bookList.concat(list), page: page 1, total, hasMore: bookList.length list.length total }) }, complete: () { this.setData({ isLoading: false }) } }) } })这里的核心参数是hasMore和isLoading。isLoading是请求锁防止并发触发hasMore用来判断还有没有下一页。你在自己改的时候要学会把这段逻辑写成可复用的函数而不是每个页面都复制一遍——因为分类页、搜索页都会用到相同的分页逻辑。5. 避坑指南跑毕设源码最常见的6个翻车现场5.1 数据库连接报错authentication plugin和时区问题现象后端启动时控制台报Public Key Retrieval is not allowed或者The server time zone value Öйú±ê׼ʱ¼ä is unrecognized。前者是MySQL 8.0的认证插件问题后者是时区没有指定的问题。原因MySQL 8.0默认使用caching_sha2_password认证插件而很多老毕设的JDBC驱动用的是5.x版本或者连接串里没配置allowPublicKeyRetrieval参数时区问题则是因为MySQL和JDBC之间的timezone默认值不一致。解决JDBC连接串里显式加上allowPublicKeyRetrievaltrueuseSSLfalseserverTimezoneAsia/Shanghai这是我在3.3节里的写法你直接照抄。如果还是不行就查一下你的pom.xml里mysql-connector-java的版本8.0版本必须用8.x驱动不能降级用5.x。5.2 小程序里请求后端一直报fail但浏览器里能通现象微信开发者工具里wx.request的fail回调被触发Console里显示request:fail但同样的URL在Chrome里能正常返回JSON。原因八成是你没勾选“不校验合法域名”或者后端端口和前端配置的端口不一致。微信开发者工具默认会对请求域名做合法性校验localhost也在拦截范围内。解决在开发者工具的“详情 → 本地设置 → 不校验合法域名”打勾。注意勾了之后要重新编译一次才生效有时候工具还残留了旧的请求缓存直接关掉重开项目最保险。5.3 首页书籍列表能渲染但点进详情页却是空白现象首页能看到封面和书名点击卡片跳转详情页结果页面只有标题栏内容是白的。原因详情页拿到bookId后调用了GET /api/book/detail?bookIdxxx但接口返回里没有查章节列表。你会发现数据库里book表和chapter表都有数据但章节列表接口的SQL里用了错误的关联字段或者BookController的RequestParam参数名和前端传的参数名不一致。解决打开调试器Network面板看详情页发出的请求返回了什么。如果返回data是null重点检查后端SQL里的表名、字段名是否和数据库实际一致——尤其是字段用了book_id还是bookId这种命名风格不一致的情况下MyBatis默认开启驼峰映射时book_id能映射成bookId但如果作者手动关闭了这个配置就会出问题。5.4 演示视频里有的功能源码里却没实现现象视频里能看到搜索功能但源码的pages下找不到search相关目录或者视频里有点击“加入书架”的演示但后端接口根本没有对应的Controller方法。原因很多毕设视频是作者早期录制的后期改版时砍掉了一些功能但视频没重录。也有可能为了方便演示前端点了收藏只是本地存了一下压根没走接口。解决这种算缺功能你必须自己补。搜索功能其实很简单在后端加一个GET /api/book/search?keywordxxxSQL里用WHERE title LIKE CONCAT(%, #{keyword}, %)即可加入书架也只需要往user_book表里插一条记录。你用两天时间把这种缺口补上答辩时反而能说成“我在原基础上完善了完整功能”。5.5 编译报错一个文件里多个Page注册或重复的app.json现象点击编译后工具提示app.json: 未找到或某个页面的json文件格式错误整个项目白屏。原因最常见的是解压后目录层级不对。原作者的zip打包时把整个工程文件夹套了一层目录你在导入时选错了层级导致工具读不到app.json。还有一种情况是有人把微信开发者工具版本升了工具对json文件的schema校验更严格旧小程序里写了一些废弃字段会直接报错。解决导入项目时目录一定要确认到包含app.json的那一层。如果不确定就在系统文件管理器里逐层打开看。遇到app.json校验报错看看是不是没写pages数组或者window字段的配置键名写错了——微信小程序要求json里不能有注释复制别人的代码时很容易带进来。5.6 真机预览时页面白屏模拟器里却一切正常现象开发者工具里换到手机预览模式一切正常扫码后手机上页面加载出来但数据是空的。原因这是经典的真机环境差异问题。你勾了“不校验合法域名”只对开发者工具生效真机上这个设置不起作用。如果后端是localhost或者192.168.x.x的局域网地址真机也访问不到——除非手机和电脑在同一局域网并且你用的是电脑的内网IP而不是localhost。解决把app.js里的baseUrl改成电脑的局域网IP比如http://192.168.1.100:8080保证手机和电脑连同一个WiFi。同时真机调试需要在开发者工具里打开“真机调试”功能它会给小程序临时注入一个调试环境绕过部分域名限制。如果你连这个都嫌麻烦还有一个办法是临时注册一个微信小程序账号把后端部署到云端后再联调但到那一步其实已经是上线部署的范畴了。6. 从能用变好用给阅读进度加一个“继续阅读”的全局入口跑通整套系统之后建议你做一个很加分的小优化这就是“继续阅读”入口。当用户打开小程序时首页除了书城列表再展示一本“最近在读”的书——点进去直接跳到上次阅读的章节。这个功能用到你已经建好的user_book_progress表前端只需要新增一个接口调用GET /api/progress/last?userIdxxx后端返回最近一条进度记录。你做一个卡片放在首页轮播图下方调接口拿到数据后展示书封、章节名和阅读进度百分比。这块代码我建议你自己写一遍因为它是整个系统里最能体现“用户思维”的功能点更能在答辩时说明白“我不仅做了功能还做了体验优化”。实际编码时需要注意的地方是小程序的生命周期问题。首页每次从后台切回前台都应该重新拉取一次进度数据因为用户可能刚读完一章切回来。做法是在首页的onShow生命周期里调用接口而不是在onLoad里一次性加载。onShow() { this.loadLastReadBook() }, loadLastReadBook() { const app getApp() const userId wx.getStorageSync(userId) if (!userId) return wx.request({ url: ${app.globalData.baseUrl}/api/progress/last, data: { userId }, success: (res) { if (res.data.data) { this.setData({ lastReadBook: res.data.data }) } } }) }这个优化做完你的项目就比原版的“能跑”多了一层“用起来顺”。说实话我当年带学生做毕设时最常强调的一件事是——源码包只是你的起跑线不是你的终点线。你照着跑通只是及格能说清楚每一张表为什么这么建、每个接口为什么这么设计、以及自己动手加了什么功能才是拿高分的底气。我的个人习惯是每拿到一个参考项目先按“跑通 → 画清架构 → 拆出核心技术点 → 替换一个自己写的功能”四步走一遍希望帮到你。本文还有配套的精品资源点击获取