企业官网建设流程全解析

简介：这是一套面向高校计算机专业毕业设计的停车场微信小程序完整项目，采用SSM框架搭建后台、Vue构建管理页面，前端为微信小程序，数据库使用MySQL，基于JDK1.8开发，Eclipse、MyEclipse、STS、IDEA等主流工具均可导入运行。系统划分管理员、商家、用户三种角色：管理员负责个人中心、车主与商家管理、停车场信息、预约与取消预约、进场停车、收费及留言板等模块；商家可提交停车信息，用户完成停车操作，业务闭环完整，适合作为毕设选题或课程设计参考。资源包共1247个文件，约48.13MB，涵盖java后端源码、vue管理端页面、js与json配置、wxss与wxml小程序页面、png与jpg界面素材，以及sql脚本、论文文档、环境工具包和同框架项目安装教程，另附bat启动脚本与mp4演示视频。目前已有107人学习，可帮助读者快速理解三角色权限设计与预约停车流程，并对照文档完成环境搭建与二次开发。

1. 停车场微信小程序 + SSM：一套能跑通的毕设到底长什么样

每年到了三四月，问「停车场微信小程序 + SSM 源码」的人就多起来。多数人的处境很具体：选题定了，导师催着要能演示的东西，自己 Java 基础还行但没做过完整项目，网上搜到的源码要么跑不起来，要么缺文档，要么数据库对不上。这套组合之所以被反复选，是因为它把「微信小程序」这个前端入口和「SSM（Spring + SpringMVC + MyBatis）」这个后端骨架拼在一起，业务闭环清晰——车主查车位、预约、缴费，管理员管车位和订单，功能点够写论文，代码量又不至于失控。

但「有源码」和「能跑通、能答辩、能讲清楚」是三件事。我见过太多人拿到压缩包，导入 IDEA 一堆红，数据库建表脚本跑一半报错，小程序端请求 404，最后只能截图糊弄。这篇笔记就按我实际带人做这类项目的顺序，把环境怎么搭、SSM 三层怎么分层、小程序怎么调后端、哪些参数必须改、哪些坑一定会踩，一条条讲清楚。适合正在做这个选题、手里有源码但跑不动、或者想自己从零搭一遍的人。

2. 环境与工程结构：先把「跑不起来」这件事解决掉

2.1 这套技术栈的版本选择与依赖关系

SSM 是个老框架组合，版本乱配是第一个翻车点。我一般固定一套经过验证的组合：JDK 8（不是 11 也不是 17，很多老教程的 jar 包在 8 以上会出问题）、Maven 3.6.x、Tomcat 8.5、MySQL 5.7 或 8.0、Spring 5.2.x、MyBatis 3.5.x。微信开发者工具用稳定版即可，基础库选 2.x。

为什么强调 JDK 8？因为 SSM 项目里常见的javax.*包在 JDK 11 之后被移除或改名，javax.servlet直接编译不过。这不是玄学，是实打实的类找不到。MySQL 5.7 和 8.0 的差别主要在驱动类名和连接串参数，8.0 要加serverTimezone，驱动用com.mysql.cj.jdbc.Driver，5.7 用com.mysql.jdbc.Driver。选错就是启动时Communications link failure。

依赖这块，pom.xml里最容易漏的是jackson-databind（返回 JSON 用）和commons-fileupload（如果有图片上传）。MyBatis 和 Spring 整合需要mybatis-spring这个桥接包，只引mybatis是不够的。

2.2 从压缩包到能启动：导入与配置的完整步骤

拿到源码后不要急着 Run，按顺序来。第一步，用 IDEA 以 Maven 项目方式打开，等依赖下载完。第二步，找到src/main/resources下的配置文件，通常是jdbc.properties、applicationContext.xml、spring-mvc.xml、mybatis-config.xml。第三步，改数据库连接。

# jdbc.properties 关键四项，按自己本机改 jdbc.driver=com.mysql.cj.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/parking_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false jdbc.username=root jdbc.password=你的密码

改完连接，去 MySQL 里建库建表。源码一般带一个.sql文件，用命令行导入比图形化工具稳：

# 先建库再导入，注意字符集 mysql -uroot -p -e "CREATE DATABASE parking_db DEFAULT CHARACTER SET utf8mb4;" mysql -uroot -p parking_db < parking_db.sql

导入后检查表数量对不对，常见的有user、parking_space、order、admin这几张。如果导入报错，多半是 sql 文件里带了CREATE DATABASE或字符集不兼容，手动删掉那几行再导。

第四步，配置 Tomcat。IDEA 里 Add Configuration → Tomcat Server → Local，Deployment 里加 Artifact，Application context 设成/parking或/。这一步决定你访问的 URL 前缀，小程序端请求地址要和它一致。

第五步，启动。控制台没有ClassNotFoundException和SQLException，并且看到 Spring 容器初始化日志，基本就成了。访问http://localhost:8080/parking/看有没有响应。

提示：如果启动报NoClassDefFoundError: javax/servlet/...，九成是 JDK 版本不对，换回 8。

2.3 目录分层：controller / service / mapper 各管什么

SSM 的分层不是摆设，答辩时老师一定会问。controller层只做参数接收和结果返回，不写业务逻辑；service层写业务判断，比如「这个车位是否已被预约」；mapper层（也叫 dao）只跟数据库打交道，一个方法对应一条 SQL。实体类放entity或pojo，工具类放util。

// controller 示例：查询空闲车位，只负责转发 @Controller @RequestMapping("/space") public class SpaceController { @Autowired private SpaceService spaceService; @RequestMapping("/free") @ResponseBody public Map<String, Object> freeList() { Map<String, Object> result = new HashMap<>(); result.put("code", 200); result.put("data", spaceService.listFree()); return result; } }

这段代码里@ResponseBody让返回对象自动转 JSON，@Autowired注入 service。参数说明：code是自定义状态码，小程序端靠它判断成功失败；data装实际数据。逻辑上 controller 不该出现if (车位为空)这种判断，那是 service 的活。分层乱了，后期改需求会牵一发动全身，这是血泪经验。

3. 数据库与核心业务表：车位、订单、用户怎么设计

3.1 三张核心表的结构与字段含义

停车场业务的数据模型不复杂，但字段设计直接影响后面查询好不好写。核心三张表：用户表、车位表、订单表。

openid这个字段是重点。小程序登录后微信会返回一个 openid，它是用户在这套小程序里的唯一身份，比手机号更可靠。很多人用手机号当主键，结果用户换号就乱套。

parking_space的status用数字而不是字符串，查询快、占空间小，但要在代码里维护好枚举含义，不然过两个月自己都忘了 2 代表什么。

3.2 建表 SQL 与索引该加在哪

CREATE TABLE `parking_space` ( `id` INT NOT NULL AUTO_INCREMENT, `space_no` VARCHAR(20) NOT NULL COMMENT '车位编号', `status` TINYINT DEFAULT 0 COMMENT '0空闲1占用2预约', `area` VARCHAR(50) DEFAULT NULL COMMENT '区域', `price` DECIMAL(10,2) DEFAULT 0.00 COMMENT '每小时单价', PRIMARY KEY (`id`), UNIQUE KEY `uk_space_no` (`space_no`), KEY `idx_status` (`status`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

uk_space_no唯一索引防止车位编号重复，idx_status加速「查所有空闲车位」这个高频查询。订单表上user_id和space_id都建议加索引，因为「查我的订单」「查某车位的订单」是常用操作。不加索引，数据量一上来查询就慢，答辩演示时转圈圈很尴尬。

3.3 用 MyBatis 写增删改查的三种方式

MyBatis 写 SQL 有三种常见方式：注解、XML、以及 MyBatis-Plus 的自动生成。毕设项目里 XML 最稳，因为 SQL 和 Java 分离，改起来方便，老师也认。

<!-- SpaceMapper.xml 片段 --> <select id="listFree" resultType="com.parking.entity.ParkingSpace"> SELECT id, space_no, status, area, price FROM parking_space WHERE status = 0 ORDER BY space_no ASC </select> <update id="updateStatus"> UPDATE parking_space SET status = #{status} WHERE id = #{id} </update>

resultType指定返回的实体类全限定名，字段名和实体属性名要能对上，对不上就配resultMap。#{status}是预编译占位符，能防 SQL 注入，别用${}拼字符串。逻辑说明：listFree只查空闲，updateStatus在预约和释放时调用。参数说明：#{id}对应实体里的 id 属性，类型自动映射。

如果想让 MyBatis-Plus 根据实体类自动生成建表 SQL，那是另一套玩法，需要引入mybatis-plus依赖并配置，但毕设用原生 MyBatis 更稳妥，少一层黑匣子。

4. 微信小程序端：登录、请求封装与页面联调

4.1 小程序登录换 openid 的完整链路

小程序登录不是拿个账号密码就完事，标准流程是：小程序调wx.login拿 code → 把 code 发给后端 → 后端拿 code 加 appid、secret 去微信接口换 openid 和 session_key → 后端生成自己的登录态返回给小程序。

// 小程序端登录 wx.login({ success(res) { if (res.code) { wx.request({ url: 'http://localhost:8080/parking/user/login', method: 'POST', data: { code: res.code }, success(r) { // r.data.data 里是后端返回的 openid 或 token wx.setStorageSync('openid', r.data.data.openid); } }); } } });

逻辑说明：wx.login的 code 只能用一次，五分钟过期。后端拿到 code 后调微信的jscode2session接口，需要 appid 和 secret，这两个在微信公众平台后台拿。参数说明：url里的地址要和 Tomcat 的 context 一致，本地调试用 localhost，真机调试要换成局域网 IP 或已备案域名。

注意：微信开发者工具里要勾选「不校验合法域名」，否则本地 http 请求会被拦。

4.2 请求封装与顶部导航栏高度适配

每个页面都写一遍wx.request是灾难，封装一个工具函数。同时，小程序顶部导航栏高度在不同机型不一样，自定义导航栏时要动态算。

// utils/request.js const BASE_URL = 'http://localhost:8080/parking'; function request(url, method = 'GET', data = {}) { return new Promise((resolve, reject) => { wx.request({ url: BASE_URL + url, method, data, header: { 'content-type': 'application/json' }, success: res => res.data.code === 200 ? resolve(res.data) : reject(res.data), fail: reject }); }); } module.exports = { request };

逻辑说明：统一拼 base url，统一判断code，成功 resolve 失败 reject，页面里await request('/space/free')就行。参数说明：method默认 GET，POST 时 data 会被序列化。

导航栏高度用wx.getSystemInfoSync()拿状态栏高度，再配合胶囊按钮位置算，常见做法是statusBarHeight + 44。这个值写死会在某些机型上错位，动态算才稳。

4.3 页面调后端接口的联调与跨域处理

小程序请求后端，本地开发最常见的报错是 404 和跨域。404 多半是 url 拼错或 context 不对；跨域在开发者工具里勾选不校验域名就能绕过，但真机不行，正式环境要配好域名。

联调时先在浏览器或 Postman 里把接口调通，确认返回 JSON 结构，再让小程序调。这样能把「后端问题」和「前端问题」分开，不然两边一起查很痛苦。

// 页面里调用 const { request } = require('../../utils/request'); Page({ data: { spaces: [] }, onLoad() { request('/space/free').then(res => { this.setData({ spaces: res.data }); }).catch(err => { wx.showToast({ title: '加载失败', icon: 'none' }); }); } });

逻辑说明：onLoad时拉数据，setData更新视图。参数说明：res.data是后端返回的 data 字段。失败时给用户提示，别让页面白屏。

5. 避坑与排查：这几处翻车我见过太多次

5.1 现象：启动报数据库连接失败

原因：驱动类名和 MySQL 版本不匹配，或连接串缺serverTimezone。解决：8.0 用com.mysql.cj.jdbc.Driver并加时区参数，5.7 用老驱动；确认 MySQL 服务已启动、端口 3306 没被占。

5.2 现象：小程序请求一直 404

原因：url 前缀和 Tomcat context 不一致，或后端没配@ResponseBody。解决：浏览器直接访问接口地址看是否通，检查Application context和BASE_URL是否一致，controller 方法加@ResponseBody或类上加@RestController。

5.3 现象：中文乱码

原因：数据库字符集、连接串字符集、Tomcat 编码三处不统一。解决：库和表用utf8mb4，连接串加characterEncoding=utf8，Tomcat 的server.xml里 Connector 加URIEncoding="UTF-8"。

5.4 现象：预约后车位状态没变

原因：service 里更新状态和插入订单没放在同一个事务里，或者 update 的 id 传错。解决：在 service 方法上加@Transactional，确认传入的 spaceId 是数据库真实主键，不是页面下标。

5.5 现象：真机调试请求失败但工具里正常

原因：真机不能用 localhost，且 http 请求在正式环境受限。解决：本地真机用电脑局域网 IP，手机和电脑同一 WiFi；正式上线必须 https 加已配置的域名。

6. 让这套毕设更耐问：事务、分页与答辩演示技巧

把基本功能跑通只是及格线，想答辩时不被问倒，得在几个点上做扎实。第一是事务，预约车位这个动作涉及「改车位状态」和「生成订单」两步，必须原子。在 service 实现类的方法上加@Transactional，并在 Spring 配置里开启<tx:annotation-driven/>，否则注解不生效，这是很多人不知道的隐藏条件。

第二是分页。订单列表数据一多，一次性查出来会卡。用 MyBatis 的limit手写分页，或者引 PageHelper。手写更透明：

<select id="listByUser" resultType="com.parking.entity.Order"> SELECT * FROM `order` WHERE user_id = #{userId} ORDER BY create_time DESC LIMIT #{offset}, #{pageSize} </select>

offset是跳过的条数，pageSize是每页数量，前端传页码，后端算 offset。参数说明：offset = (pageNum - 1) * pageSize。这样老师问「数据量大怎么办」你有话说。

第三是演示准备。答辩现场网络不一定好，提前把数据准备好，演示路径走一遍：登录 → 查空闲车位 → 预约 → 支付（可模拟）→ 查看订单。每一步的预期结果记下来，出问题能快速定位。我一般会准备一个「降级方案」，比如支付接口用假数据返回成功，保证演示不中断。

最后一个习惯：把关键配置和改动记在一个README里，包括数据库密码、接口地址、启动步骤。过两周自己回头看，没有这个文件就是黑匣子。这套停车场小程序 + SSM 的组合，技术不新，但胜在完整、可讲、可改，认真做一遍，Java Web 的整套流程就通了。希望帮到你。

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