企业官网建设流程全解析

简介：一套面向高校毕业设计、课程设计及期末大作业场景的校园反诈骗微信小程序完整工程，基于Java + SSM（Spring、SpringMVC、MyBatis）+ MySQL 5.7以上开发，前端采用微信小程序原生技术。系统覆盖诈骗信息发布、在线举报、预警提示、教育宣传及后台管理等功能，界面简洁、操作便捷，项目代码经过调试可直接运行。资源包共1206个文件，约15.17MB，以png界面图、svg图标、vue后台页面、java后端逻辑、wxml/wxss小程序页面、json配置及sql数据库脚本为主，另含完整毕业设计论文doc/docx文档，目录结构清晰，便于二次开发与学习。已提供清晰的搭建说明与运行脚本，下载后无需额外修改即可预览效果。目前已有131人学习使用，适合需要快速完成项目落地、获取真实可运行范例并参考论文撰写的学生与开发者。

1. 校园反诈骗小程序：一个能跑通的 SSM+微信小程序毕设，值不值得做

校园反诈骗小程序不是算法竞赛项目，而是一个典型的“双端业务闭环”：微信小程序端负责学生登录、浏览反诈资讯、在线提交诈骗线索和参与知识答题，后台由 Java + SSM（Spring+SpringMVC+MyBatis）提供接口，数据统一落在 MySQL。这类“源码+数据库+论文”的压缩包在毕业设计里很常见，但它不是一个解压后双击就能跑的玩具。我建议把它当作一套需要二次落地的工程：先摸清技术栈，再用最小用例跑通所有接口，最后把数据准备得足够漂亮，才能让答辩演示不冷场。它适合两类人：一是想快速补齐全栈流程的应届生，二是需要一个完整管理系统的课设负责人。

2. 先把后端立住：SSM+MySQL 的项目骨架与数据表设计

SSM 是 Java Web 的老牌组合，Spring 管对象依赖，SpringMVC 接 HTTP 请求，MyBatis 管 SQL 映射。这套组合在校园管理类系统里出现率极高，因为每个模块都能拆成“控制层-服务层-持久层”，遇到问题也好定位。做反诈骗小程序，后端不需要复杂的微服务，一个可运行的 war 包加上几张业务表就够了。

2.1 用 Maven 搭出 SSM 三层结构：pom.xml 里最容易错的两个依赖

写 SSM 后端，我一般不会从零敲所有配置，而是先用 Maven 把依赖固定住。pom.xml 是项目的“说明书”，漏一个依赖或版本不对，启动时就抛 ClassNotFoundException。下面这份依赖清单是最小可用集，适合反诈骗小程序这种单模块项目。

<!-- pom.xml 关键依赖，版本按自己环境锁定 --> <properties> <spring.version>5.3.20</spring.version> </properties> <dependencies> <!-- SpringMVC 会连带依赖 spring-web 和 spring-context --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring.version}</version> </dependency> <!-- MyBatis 与 Spring 的桥接包，版本要和 MyBatis 主版本对应 --> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.5.10</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>2.0.7</version> </dependency> <!-- MySQL 8.x 驱动，注意驱动类名变了 --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.30</version> </dependency> <!-- Druid 连接池，可监控慢 SQL --> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.2.8</version> </dependency> <!-- Servlet API，Tomcat 8/9 用 javax.servlet --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>4.0.1</version> <scope>provided</scope> </dependency> </dependencies>

依赖这里有两个非常容易踩的雷。第一个是 spring-webmvc 版本跨到 6.x 时，包名变成 jakarta.servlet，而大多数教室或老服务器的 Tomcat 8/9 还在用 javax.servlet，一启动就报 NoClassDefFoundError。所以我习惯锁在 5.3.x。第二个是 mybatis-spring 和 mybatis 版本要搭配：mybatis 3.5.x 对应 mybatis-spring 2.0.x，如果误用了 1.3.x，SqlSessionFactory 会一直初始化失败，报的错还是“Property ‘mapperLocations’ was not specified”。

除了依赖，还要注意 mysql-connector-java 8.x 的驱动类名是 com.mysql.cj.jdbc.Driver，且 URL 必须带时区参数。例如本地开发用jdbc:mysql://localhost:3306/campus_fanzha?useSSL=false&serverTimezone=Asia/Shanghai，不写时区就报 “The server time zone value”。很多教程停留在 5.x，照抄驱动名会直接在初始化连接池时翻车。

2.2 数据库设计：反诈骗业务的核心表与状态字段

反诈骗小程序的核心业务是“学生上报、后台审核、全员可见”，所以表设计要围绕用户、诈骗类型、上报记录、资讯公告和反诈答题展开。我见过不少毕设源码把内容塞进一张大表，最后统计“各类型上报占比”时只能写 if-else，数据库本来该干的事都被搬到了 Java 里。

CREATE DATABASE IF NOT EXISTS campus_fanzha DEFAULT CHARSET utf8mb4; CREATE TABLE `user` ( `id` int PRIMARY KEY AUTO_INCREMENT, `openid` varchar(64) NOT NULL, `nickname` varchar(50) DEFAULT '', `role` tinyint DEFAULT 0 COMMENT '0学生 1管理员', `create_time` datetime DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY `uk_openid` (`openid`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; CREATE TABLE `report` ( `id` int PRIMARY KEY AUTO_INCREMENT, `user_id` int NOT NULL, `type_id` int NOT NULL, `content` text, `phone` varchar(20) DEFAULT '', `status` tinyint DEFAULT 0 COMMENT '0待审核 1已确认 2已驳回', `create_time` datetime DEFAULT CURRENT_TIMESTAMP, `audit_time` datetime DEFAULT NULL, KEY `idx_status` (`status`), KEY `idx_type_time` (`type_id`, `create_time`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; CREATE TABLE `article` ( `id` int PRIMARY KEY AUTO_INCREMENT, `title` varchar(100) NOT NULL, `content` mediumtext, `publish_time` datetime DEFAULT CURRENT_TIMESTAMP, `views` int DEFAULT 0 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

细节上，user 表用 openid 做唯一键，而不是让用户填用户名密码，因为微信小程序端天然适合静默登录，后端通过 openid 去重。report 表的 status 字段用 tinyint 表示状态机：0 待审核、1 已确认、2 已驳回。用整型而不是字符串，后续按状态分组统计非常快，也避免了“已审核”“审核通过”“pass”这类拼写不一致的问题。content 用 text，文章内容用 mediumtext，是为了存长文本时不拖累主表的查询性能。

为了应对“各诈骗类型上报人数”这类统计，我给 report 表加了 idx_type_time 复合索引。如果之后想展示“本月资讯浏览量”，article 表里已有的 views 字段配合 publish_time 就能做。至于要不要加反诈答题表，取决于你的论文题目是不是包含“测试”功能。包含的话，建议单独建一张 question 表和一张 answer_record 表，不要把题库存进 article 里。

2.3 从 JDBC 到 MyBatis：mapper 接口与 XML 的对应关系

有了表，下一步是让 Java 代码操作它们。SSM 项目里 MyBatis 的持久层由“接口 + XML”组成：接口里写方法，XML 里写 SQL。这里最反直觉的是，接口方法名必须和 XML 的 statement id 完全一致，否则启动时直接报 “Invalid bound statement”，这是黑匣子问题里最常遇到的一个。

// ReportMapper.java public interface ReportMapper { // 按状态查询上报列表，status 为 null 时查全部 List<ReportVO> selectReportsByStatus(@Param("status") Integer status); // 插入一条上报，返回影响行数 int insertReport(Report report); }

<!-- ReportMapper.xml --> <mapper namespace="com.example.mapper.ReportMapper"> <select id="selectReportsByStatus" resultType="com.example.vo.ReportVO"> SELECT r.id, r.content, r.status, r.create_time, u.nickname FROM report r LEFT JOIN user u ON r.user_id = u.id <where> <if test="status != null"> r.status = #{status} </if> </where> ORDER BY r.create_time DESC </select> </mapper>

注意这里我用了#{}而不是${}，这是防 SQL 注入的核心写法。#{}会把参数编译成预编译占位符，而${}是字符串拼接。答辩时老师常会问“你的 SQL 拼接安全吗”，答案就是：所有用户输入都走#{}，没有一处把参数直接拼进 SQL。如果确实要动态排序字段，比如按 views 或 create_time 排序，也只能白名单校验后再拼接，不能直接接收前端传的字段名。

命名空间 namespace 要写对，写成 com.example.mapper.ReportMapper，Spring 扫描 MapperFactoryBean 时才能找到对应 XML。VO 类里的字段命名采用驼峰，数据库字段用下划线，MyBatis 默认开启 mapUnderscoreToCamelCase 后会自动映射。建议在配置文件里显式加上mybatis.configuration.map-underscore-to-camel-case=true，防止手写 resultMap 时漏字段，也省掉一堆没必要的别名。

3. 微信小程序端：登录、案件上报与反诈资讯页面的实现

后端接口跑通后，小程序端的工作量集中在三块：登录会话、业务页面、请求封装。这一章直接关系演示效果，页面不需要多华丽，但登录和提交流程必须顺畅。

3.1 小程序冷启动流程：wx.login 换 token，会话怎么保持

微信小程序和浏览器不同，不能直接用传统的 cookie-session，因为 wx.request 不会自动携带 Cookie。常见的做法是：小程序调用 wx.login 拿到 code，后端拿 code 到微信接口换 openid，然后自己生成 token 返回给小程序。此后每个请求都在 header 里带 token。

// utils/auth.js function login() { wx.login({ success(res) { const code = res.code; wx.request({ url: 'http://localhost:8080/api/login', method: 'POST', data: { code: code }, success(response) { const token = response.data.token; wx.setStorageSync('token', token); } }); } }); }

这里的 code 是一次性的，后端必须在时限内换取 openid，否则会报 invalid code。很多毕设代码直接拿 code 当 openid 存，那是不对的，换出来的 openid 才是用户唯一标识。对应到 SSM 后端，Controller 里做的事情是：接收 code、调用微信 auth.code2Session 接口、按 openid 查用户表，查不到就新建。

@RestController @RequestMapping("/api") public class LoginController { @Autowired private UserService userService; @PostMapping("/login") public Result login(@RequestBody Map<String, String> body) { String code = body.get("code"); // 调用微信 auth.code2Session，这里省略具体 HTTP 调用 String openid = userService.getOpenidByCode(code); User user = userService.findOrCreateByOpenid(openid); String token = UUID.randomUUID().toString().replace("-", ""); return Result.success(token); } }

真实项目里 token 要存 Redis 或数据库，但毕设用一张 token 表也可以，重点是能演示、能讲清楚为什么要这么做。另外，如果题目里写的是“微信小程序登录获取手机号”，那是另一条技术路线，必须用<button open-type="getPhoneNumber">配合企业认证的小程序才能拿到，不是 wx.login 里直接带的。做校园反诈骗，通常用 openid 静默登录就够，手机号可以在上报表单里让用户手动填，省去资质认证的麻烦。

3.2 校园反诈的核心场景：一键上报与公告列表

小程序首页一般放两个东西：反诈资讯列表和“一键上报”入口。上报表单要选择诈骗类型、填描述、可选项填手机号。后端的报告表我们已经建好，这里看前端提交逻辑。

// pages/report/report.js Page({ data: { types: [], selectedTypeId: 0, content: '' }, submitReport() { const token = wx.getStorageSync('token'); if (!token) { wx.navigateTo({ url: '/pages/login/login' }); return; } wx.request({ url: 'http://localhost:8080/api/report/submit', method: 'POST', header: { 'Authorization': token }, data: { typeId: this.data.selectedTypeId, content: this.data.content }, success(res) { wx.showToast({ title: '提交成功', icon: 'success' }); } }); } })

这段代码的核心是先检查 token，没有 token 直接跳登录页。提交时只把 typeId 和 content 传给后端，用户身份从后端 session 里拿，而不是让前端传 user_id。如果前端传 user_id，会被随意篡改成 xss 注入一样危险的身份伪造。这是毕设里很容易被老师揪出来的设计漏洞。

资讯列表页通常用 onLoad 拉取文章，下拉刷新时重新请求。我建议做成分页接口，GET /api/article?page=1&size=10，后端用 limit 分页，前端用 onReachBottom 触发加载下一页。演示的时候连续刷几页，能直观看到数据加载，也方便论文截图。

3.3 调用后端接口：request 封装与 baseURL 配置

为了让每个页面不重复写 wx.request，我一般封装一个 request 工具。小程序没有 axios，promise 化之后页面逻辑会干净很多。

// utils/request.js const BASE_URL = 'http://localhost:8080/api'; function request(path, method, data) { return new Promise((resolve, reject) => { wx.request({ url: BASE_URL + path, method: method, data: data, header: { 'Authorization': wx.getStorageSync('token') }, success(res) { if (res.data.code === 0) { resolve(res.data.data); } else { reject(res.data.message); } }, fail(err) { reject(err); } }); }); } module.exports = request;

BASE_URL 是本地联调最容易翻车的地方。开发者工具里 localhost 指向电脑本身，手机预览时 localhost 指向手机，所以真机调试必须换成电脑的局域网 IP。调接口时如果遇到“不在以下合法域名列表中”，那是因为小程序平台限制了接口白名单，本地开发可以在开发者工具右上角“详情”-“本地设置”里勾选“不校验合法域名”。想抓包排查问题的话，用 Charles 结合开发者工具代理能看清楚请求头有没有带上 token。

4. 联调与部署：把本地代码变成可演示的系统

光有代码跑不通等于零。这一章给出从本地到服务器的完整路径，包括数据库初始化、配置修改和打包命令，每一步都能对照检查。

4.1 本地联调：Tomcat + MySQL 字符集与端口配置

本地开发时，MySQL 服务要先启动。如果还没装好库，建议先按 mysql 安装配置教程把服务跑起来，注意别遗漏服务注册这一步。数据库准备好后，SSM 项目的数据源配置长这样：

server.port=8080 spring.datasource.url=jdbc:mysql://localhost:3306/campus_fanzha?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai spring.datasource.username=root spring.datasource.password=123456 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver mybatis.configuration.map-underscore-to-camel-case=true

端口 8080 如果被占用，改成 8081 就行。URL 里useUnicode=true&characterEncoding=utf8必须加，否则数据库乱码问题会推迟到答辩那天才暴露。MySQL 8.x 驱动类名必须是com.mysql.cj.jdbc.Driver，这一点和 5.x 不同。Druid 连接池如果需要展示监控页，可以在 web.xml 里配置 DruidStatViewServlet。

4.2 数据初始化：给演示准备模拟数据

演示前一定要准备有层次的数据，不能只有几条“测试内容”。反诈骗小程序的演示重点在于列表筛选和状态流转，所以模拟数据要覆盖不同状态和类型。

INSERT INTO user (openid, nickname, role) VALUES ('o_demo_001', '张同学', 0), ('o_demo_002', '李老师', 1); INSERT INTO article (title, content, views) VALUES ('刷单返利是诈骗', '任何要求垫资的刷单都是诈骗。', 120), ('冒充公检法诈骗套路', '公检法不会通过电话办案。', 80); INSERT INTO report (user_id, type_id, content, phone, status) VALUES (1, 2, '收到兼职刷单短信，要求先垫付', '13800000000', 1), (1, 3, '有人冒充学长推销复习资料', '', 0);

模拟数据不要全用字符串 “test”，这样列表页显示出来很单薄。type_id 要对应诈骗类型表，status 要覆盖 0、1、2，这样演示“按状态筛选”时才有效果。文章表 views 字段给大小不一的数，方便让论文里的柱状图有差异。

4.3 部署到服务器：打包 war 与运行环境

毕业设计演示大部分时候在本地完成，但如果想给远程老师看，或者做线上答辩，就要部署到服务器。SSM 项目传统打包方式是 war 包，放到 Tomcat 的 webapps 下。

mvn clean package -DskipTests cp target/campus-fanzha.war /path/to/tomcat/webapps/ROOT.war cd /path/to/tomcat/bin && ./startup.sh tail -f /path/to/tomcat/logs/catalina.out

-DskipTests跳过测试，避免打包时因为 test 用例卡住。拷贝成 ROOT.war 后，Tomcat 会自动解压并覆盖 ROOT 目录，访问路径会短一些。启动后用curl http://localhost:8080/api/article?page=1验证接口，不要直接在浏览器里打开页面，先看 JSON 返回。日志里看到 “Server startup in xxx ms” 才算成功。

如果服务器上用 Docker 跑 MySQL，很容易因为忽略端口映射或时区导致连接失败。Docker 创建容器时记得加-p 3306:3306 -e TZ=Asia/Shanghai，否则应用连接超时，而且写入数据库的时间会差 8 小时。这属于环境问题，排查起来比代码问题更费时间，所以尽量在部署前先写好一份checklist：端口通不通、时区对不对、驱动类名对不对。

5. 毕业设计避坑指南：这 5 个坑最容易让答辩翻车

这一章是我建议你重点收藏的经验，每个坑都是“现象-原因-解决”的完整链路，能帮你省掉大量玄学排查时间。

5.1 现象：登录接口能返回数据，小程序却一直白屏

真机预览时，页面一直转圈，后台日志看不到任何登录请求。原因多半是 baseURL 写成了 localhost，手机访问 localhost 等于访问自己，根本连不到电脑。解决方法是把 BASE_URL 改成电脑的局域网 IP，例如http://192.168.1.100:8080/api。另一个可能是开发者工具里没有勾选“不校验合法域名”，本地 http 请求被拦截。排查时用 Charles 抓包看请求是否发出，如果抓不到，先看开发者工具控制台报错，再确认 IP 和端口。

5.2 现象：数据库中文全变成问号

明明 insert 语句里写的是中文，页面显示却是???。原因通常有三个：库表字符集不是 utf8mb4、连接 URL 没带 characterEncoding、MySQL 服务端默认字符集设置不对。解决方法是建库时显式指定DEFAULT CHARSET utf8mb4，URL 里加useUnicode=true&characterEncoding=utf8。已经建好的库可以用ALTER TABLE report CONVERT TO CHARACTER SET utf8mb4;补救。注意要在执行 SQL 之前先确认补丁语句，否则已有的数据可能还是乱码。

5.3 现象：Tomcat 启动后端口占用

启动日志报Port 8080 required by Tomcat，原因是之前跑过的进程没关干净。Linux 下用netstat -tlnp | grep 8080找到 PID，Windows 用netstat -ano | findstr 8080，然后taskkill /PID xxx /F。更省事的方法是直接改端口，Idea 里在启动配置的 VM options 加-Dserver.port=8081，或者改 application.properties。不要把端口改得太偏，演示时不好记。

5.4 现象：MyBatis 查询超时或 SQL 注入隐患

列表页偶尔加载慢，偶尔报超时；或有人能在输入框里加' or 1=1查询出全部数据。原因就是 SQL 里用了${}直接拼接参数，且表没有索引。解决方法是把${param}全改成#{param}，给订单表、上报表的常用查询字段加索引。对于排序字段这种必须动态拼接的场景，用 Java 代码先做白名单校验：

String sortColumn = "create_time"; if ("views".equals(sortColumn) || "update_time".equals(sortColumn)) { orderBy = sortColumn; } else { orderBy = "create_time"; }

这比直接接收前端字段名安全得多。如果你在论文里写了“系统具有防 SQL 注入能力”，这段话就是答辩时的底气。

5.5 现象：论文查重与图表不一致

很多同学先把代码跑通，再回头截图写论文，结果 ER 图里的字段和实际表结构对不上，查重率也高。原因是图表没有跟着代码走。解决方法是：先确定最终建表 SQL，再按建表语句画 ER 图；论文里的功能模块图要和小程序页面一一对应。商品的源码包通常自带论文，但那篇论文的用词和结构不一定适合你，我会建议你把每章的图表全部重新截取，保证数据库结构图、时序图和代码截图一致。答辩老师不一定会跑代码，但一定会翻论文对着表结构看，这是最容易翻车的地方。

6. 把答辩演示做进手机：验证功能完整性的三组测试

最后一章不聊框架，只聊演示前怎么自测。我的习惯是拿手机对着 checklist 过一遍，而不是对着 IDE 看代码。

第一组功能测试：从登录到浏览资讯。手机打开小程序，确认能自动登录，首页文章列表有图有文，点详情能看正文。再登录一个管理员账号，进后台页面，对上报记录做一次“确认”和一次“驳回”操作，回到学生端能看到状态变化。第二组异常测试：断网时点击提交，要弹错误提示而不是白屏；重复点两次上报按钮，后端只生成一条记录；token 过期后，接口返回 401，小程序要跳转重新登录。第三组数据测试：用 SQL 查一下上报统计接口，返回的数字和 Excel 手工统计一致，确保答辩时柱状图不是编的。

论文的最后一章不要只写“系统测试如下”，我用过最实用的是“功能测试表 + 异常测试表 + 测试结论”三段式。功能测试表列用例编号、预期结果、实际结果、是否通过；异常测试表专门写重复提交、超时、权限不足这几种场景。把测试时间写到最近的日期，能让答辩老师觉得系统是你亲手跑通的。

最后说一个我的教训：毕业设计不是写完就完了，而是演示完才算完。我曾经在答辩前夜才发现，小程序里所有请求都没带 token，后台接口却全部裸奔，只能连夜加拦截器。从那之后，我每次拿到源码包，第一件事不是看业务逻辑多花哨，而是先顺着“登录-改数据-提报”这条路走一遍，确认基本链路是通的。希望帮到你，也祝你答辩顺利。

本文还有配套的精品资源，点击获取