企业官网建设流程全解析

简介：一份基于Java微信小程序的宠物店商城毕业设计项目，适用于计算机相关专业毕业生、SSM框架与小程序开发初学者。项目后端采用SSM框架，后台管理页面基于Vue，搭配微信小程序客户端与MySQL数据库，实现宠物信息发布与销售、商品购买、服务预约、日志管理、订单管理等功能，并区分管理员、用户、商家三类操作角色。压缩包包含1662个文件，以Java源码、Vue页面、JavaScript脚本、JSON配置、WXML/WXSS小程序页面及PNG图片为主，涵盖后端逻辑、管理界面、交互逻辑、小程序页面与界面素材，另含SQL数据库脚本、毕业论文文档、环境工具包及详细安装教程，打包后约为52.19MB。已有123人学习/下载。压缩包内含可直接运行的完整工程和数据库脚本，并附带同框架项目的安装教程，能有效辅助读者完成环境部署、理解SSM与小程序前后端交互流程，也可作为毕业设计写作参考或二次开发的基础项目。

1. 什么是宠物店商城小程序毕业设计：一个能跑通的 SSM 全家桶项目

第一次看到这个标题的人，多半会以为又是“换个皮就能交差”的源码包。但真拿到手你会发现，它拆开就是三块东西：微信小程序做前端展示、Java 的 SSM 做后台接口、MySQL 存数据，再配一份部署文档和教程。业务外壳是宠物店，换成食堂订餐、校园跑腿、二手集市也完全成立，因为骨架是一样的。

选这个题目的人，通常是毕业设计需要交付一个“能演示、能答辩、不缺模块”的小程序商城。它能帮你解决的是：从零搭建一个包含商品列表、购物车、下单流程、后台管理的完整闭环，同时用 SSM 这套经典框架把 Java Web 的知识点串起来。它适合需要快速出活的学生，也适合想验证宠物店线上商城想法的小团队；但不适合直接拿去做大规模生产系统，单体架构和单机部署决定了它的上限。明白了它是什么，下面就从后台开始，一步步把整个链路搭起来。

2. SSM 后台怎么落地：从建表到返回 JSON 的商品接口

2.1 为什么是 SSM：它不是古董，而是答辩和面试的素材

SSM 是 Spring、SpringMVC、MyBatis 三个框架的缩写。放到这个项目里，它们的分工很清晰：Spring 管业务对象和事务，SpringMVC 管请求分发和参数绑定，MyBatis 管 SQL 和数据库映射。很多学生拿到源码后只想赶紧跑通，但答辩时老师最常问的就是“你为什么用 SSM 而不是 Spring Boot”。这时候如果你能说清楚三层结构，比背十篇论文都管用。

这类项目的代码结构也基本固定：Controller 层接收小程序发来的请求，Service 层写业务逻辑，Mapper 层操作数据库。三层职责单一，改起来不互相踩脚。下面我按这个结构把后台从空项目跑到能返回 JSON 商品列表，过程中会用到一个简化版的宠物商品表，其他用户表、订单表按同样的方式扩展即可。

2.2 建库建表和 Maven 工程骨架：先给数据安个家

先建数据库和商品表，我给出一份可以直接执行的 SQL。表名和字段名用反引号包起来，避免和 MySQL 关键字冲突。

CREATE DATABASE IF NOT EXISTS pet_mall DEFAULT CHARACTER SET utf8mb4; USE pet_mall; CREATE TABLE `tb_pet` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(50) DEFAULT NULL COMMENT '宠物昵称', `category` varchar(20) DEFAULT NULL COMMENT '分类：狗/猫/小宠', `price` decimal(10,2) DEFAULT NULL COMMENT '售价', `image` varchar(255) DEFAULT NULL COMMENT '商品图 URL', `stock` int(11) DEFAULT '0' COMMENT '库存', `status` tinyint(1) DEFAULT '1' COMMENT '1 上架，0 下架', `create_time` datetime DEFAULT NULL COMMENT '创建时间', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='宠物商品表';

这段 SQL 的核心在三个地方：utf8mb4保证 emoji 和特殊字符不乱码；create_time用datetime而不用timestamp，因为小程序后台接口经常要返回创建时间，datetime的展示更直观；status字段用于上下架，小程序端只查status = 1的商品，后台管理可以查全部。

Maven 工程方面，常见做法是用war包部署到 Tomcat。依赖坐标容易出错的就这几个：

<properties> <spring.version>5.2.5.RELEASE</spring.version> </properties> <dependencies> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.5.6</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>2.0.6</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.21</version> </dependency> </dependencies>

这里最容易踩的坑是mybatis-spring版本和 Spring 版本不匹配。比如 Spring 4 配mybatis-spring 2.x会直接报NoSuchMethodError。所以我一般建议 Spring 5.x 配mybatis-spring 2.0.x，Spring 4.x 配mybatis-spring 1.3.x。另外javax.servlet-api和jackson-databind也要补上，前者编译HttpServlet相关类，后者负责把 Controller 返回值转成 JSON。

2.3 三件套整合：Spring 容器、SpringMVC 分发、MyBatis 映射

SSM 的整合配置是整套源码里最劝退新人的地方。我见过太多人卡在web.xml、spring-mvc.xml、applicationContext.xml三个文件来回改。下面给出一份能用的最小配置，再解释每个参数为什么这么写。

applicationContext.xml负责 Spring 容器和 MyBatis：

<context:component-scan base-package="com.petmall.service"/> <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"> <property name="driverClassName" value="com.mysql.cj.jdbc.Driver"/> <property name="url" value="jdbc:mysql://localhost:3306/pet_mall?useUnicode=true&amp;characterEncoding=utf8&amp;serverTimezone=Asia/Shanghai"/> <property name="username" value="root"/> <property name="password" value="root"/> </bean> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <property name="dataSource" ref="dataSource"/> <property name="mapperLocations" value="classpath:mapper/*.xml"/> </bean> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="com.petmall.mapper"/> </bean>

这里的serverTimezone=Asia/Shanghai一定要加，MySQL 8 的驱动不带时区会直接报The server time zone value错误。mapperLocations指向classpath:mapper/*.xml，MyBatis 的 SQL 映射文件就放在这里。MapperScannerConfigurer的basePackage是 Mapper 接口所在的包，配置后不需要手动写实现类，MyBatis 会自动生成代理对象。

spring-mvc.xml负责 SpringMVC 的请求分发：

<context:component-scan base-package="com.petmall.controller"/> <mvc:annotation-driven/> <mvc:default-servlet-handler/> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/views/"/> <property name="suffix" value=".jsp"/> </bean>

annotation-driven是标配，它会自动注册 JSON 转换器，Controller 方法上加了@ResponseBody就能返回 JSON。default-servlet-handler解决静态资源被 DispatcherServlet 拦截的问题，不然访问images/xxx.jpg会是 404。视图解析器在这个项目里其实用不到，因为小程序不需要 JSP 页面，但保留它能让以后写后台管理页面时少改配置。

2.4 第一个商品列表接口：把分页参数传明白

后台接口最常见的需求是商品列表分页。小程序端每次请求传page和size，后台返回当前页的数据和总条数。Controller 这样写：

@Controller @RequestMapping("/api/pet") public class PetController { @Autowired private PetService petService; @ResponseBody @GetMapping("/list") public Map<String, Object> list(@RequestParam(defaultValue = "1") int page, @RequestParam(defaultValue = "10") int size, @RequestParam(required = false) String keyword) { int offset = (page - 1) * size; Map<String, Object> result = new HashMap<>(); result.put("code", 0); result.put("rows", petService.findPage(offset, size, keyword)); result.put("total", petService.count(keyword)); return result; } }

这段代码做了三件事：接收page、size、keyword三个参数；调用 service 查分页数据；把结果统一包成{code, rows, total}结构。前端拿到total才能判断还有没有更多数据，拿到rows才能渲染列表。

对应的PetMapper.xml里，分页查询和总数查询长这样：

<select id="findPage" resultType="com.petmall.entity.Pet"> select id, name, category, price, image, stock, status, create_time from tb_pet <where> <if test="keyword != null and keyword != ''"> and name like concat('%', #{keyword}, '%') </if> and status = 1 </where> order by id desc limit #{offset}, #{size} </select> <select id="count" resultType="int"> select count(*) from tb_pet <where> <if test="keyword != null and keyword != ''"> and name like concat('%', #{keyword}, '%') </if> and status = 1 </where> </select>

分页的offset在 Controller 里已经算好了，也就是(page - 1) * size，Mapper 里直接用limit #{offset}, #{size}。这里有个生产环境要注意的点：limit分页在数据量过万后会变慢，但宠物店商品几百条足够用。答辩时如果老师问性能，你能说出“数据量大时可以改成id > lastId的游标分页”，已经算加分项。

3. 小程序前端怎么接后台：商品列表、购物车与登录态

3.1 页面骨架与顶部导航高度：别把内容顶进状态栏

小程序端用原生开发还是uni-app取决于源码类型，我见过的大多数毕业设计源码是原生微信小程序，目录结构更直观。app.json是全局配置，页面注册、导航栏样式、底部 tabBar 都在这里：

{ "pages": [ "pages/index/index", "pages/category/category", "pages/cart/cart", "pages/user/user" ], "window": { "navigationBarTitleText": "萌宠商城", "navigationBarBackgroundColor": "#ffb6c1", "navigationBarTextStyle": "white" }, "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/category/category", "text": "分类" }, { "pagePath": "pages/cart/cart", "text": "购物车" }, { "pagePath": "pages/user/user", "text": "我的" } ] } }

pages数组的第一项是启动页，tabBar的list最多 5 项，pagePath必须在pages里注册过。导航栏这里有个容易被忽略的细节：顶部导航栏高度不是固定值，不同机型不一样。如果你做自定义导航栏，也就是"navigationStyle": "custom"，就不要自己写死 44px，要用wx.getMenuButtonBoundingClientRect()拿到胶囊按钮的位置，再算状态栏高度。否则 iPhone SE 和 iPhone 14 Pro Max 上的标题位置会完全不同。

3.2 首页商品列表：加载更多与防重复请求

商品列表页的核心是wx.request请求后台接口，再用setData渲染。下面这段代码专门处理“触底加载更多”这个高频需求：

Page({ data: { pets: [], page: 1, size: 10, hasMore: true, loading: false }, onLoad() { this.loadPets(true); }, onReachBottom() { if (this.data.loading || !this.data.hasMore) return; this.loadPets(false); }, loadPets(reset) { if (this.data.loading) return; this.setData({ loading: true }); wx.request({ url: 'http://localhost:8080/petmall/api/pet/list', data: { page: reset ? 1 : this.data.page, size: this.data.size }, success: (res) => { const rows = res.data.rows || []; this.setData({ pets: reset ? rows : this.data.pets.concat(rows), page: reset ? 2 : this.data.page + 1, hasMore: rows.length >= this.data.size, loading: false }); }, fail: () => { wx.showToast({ title: '加载失败', icon: 'none' }); this.setData({ loading: false }); } }); } });

这里的reset参数区分首次加载和加载更多。首次加载用第 1 页，成功后将page设为 2；触底加载时用当前page请求，成功后page + 1。hasMore判断依据是“返回行数是否等于请求的 size”，如果后台返回不足 10 条，说明没有更多数据了，后续触底请求直接拦截。

loading锁的作用是防止onReachBottom连续触发导致重复请求。必须注意：请求发出前加锁，成功或失败后再解锁，不能在wx.request回调外面解锁，否则网络慢的时候会发出去一堆重复请求。触底加载的 WXML 循环也很简单：

<view class="pet-card" wx:for="{{pets}}" wx:key="id"> <image src="{{item.image}}"></image> <text>{{item.name}}</text> <text>￥{{item.price}}</text> </view> <view wx:if="{{loading}}">加载中...</view>

3.3 购物车本地存储：setStorageSync 够不够用

购物车在这类毕业设计里基本都放在本地存储，不走后端接口。这样做的好处是省去接口设计和表结构，坏处是换设备购物车会丢。对演示项目来说，本地存储完全够用：

addToCart(pet) { const cart = wx.getStorageSync('cart') || []; const index = cart.findIndex(item => item.id === pet.id); if (index > -1) { cart[index].count += 1; } else { cart.push({ ...pet, count: 1 }); } wx.setStorageSync('cart', cart); wx.showToast({ title: '已加入购物车' }); }

wx.setStorageSync是同步 API，存完立刻生效，读取时用wx.getStorageSync('cart')。本地存储上限 10MB，存购物车这种小型对象数组不会有压力。需要注意{ ...pet, count: 1 }是把整个商品对象复制进购物车，包括image和price字段，这样购物车列表不需要再查一次商品详情。如果商品价格会变动，这种设计就有问题；但毕业设计里商品价格基本是静态的，这是最常见做法。

3.4 登录态设计：wx.login 换 code，后台换 token

微信登录是另一块容易把新手绕晕的部分。小程序端不能直接拿到用户身份，只能通过wx.login拿到一个临时code，然后交给后台，后台再用这个code去微信接口换openid。前端代码就两步：

wx.login({ success: (res) => { wx.request({ url: 'http://localhost:8080/petmall/api/user/login', method: 'POST', data: { code: res.code }, success: (r) => { wx.setStorageSync('token', r.data.token); } }); } });

后台拿到code后，调https://api.weixin.qq.com/sns/jscode2session接口换openid和session_key，再生成自己的token返回给小程序。这里最容易被误解的是：code只能用一次，过期时间是五分钟，不能拿它当登录凭证反复使用。

后台生成 token 的常见做法是 UUID 加存库：

String token = UUID.randomUUID().toString().replace("-", ""); user.setToken(token); userMapper.updateToken(user);

这只是简化版。生产环境里 token 一般放 Redis 并设置过期时间，但毕业设计把 token 字段加到用户表里就算完整方案了。后续需要登录的接口，在小程序请求头里带上token，后台用一个拦截器校验即可。

4. 联调避坑 5 条：跨域、时间戳、真机预览、重复请求与模拟支付

4.1 开发工具里请求报错：url 不在合法域名列表或跨域

现象：小程序开发工具的 Network 面板里请求标红，控制台提示“不在以下 request 合法域名列表中”，或者后台接口明明在浏览器里能打开，小程序里就是请求失败。

原因：这是两件事混在一起了。本地开发时，微信开发者工具默认校验合法域名，localhost和局域网 IP 都不在白名单里；此外，开发者工具本身模拟了浏览器环境，如果后台接口没有返回跨域头，也会被拦。

解决：本地调试阶段，在微信开发者工具的“详情 -> 本地设置”里勾选“不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书”。同时给后台加一个 CORS 过滤器，我这里给出最常用的一种：

public class CorsFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; HttpServletRequest request = (HttpServletRequest) req; response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS"); response.setHeader("Access-Control-Allow-Headers", "Content-Type, token"); if ("OPTIONS".equalsIgnoreCase(request.getMethod())) { response.setStatus(HttpServletResponse.SC_OK); return; } chain.doFilter(req, res); } }

重点在OPTIONS请求的处理。小程序端如果设置了自定义请求头，比如token，就会先发一个预检请求，后台不处理OPTIONS的话，真正请求永远到不了 Controller。Access-Control-Allow-Origin配成*只适合本地开发，项目要部署上线时，最好收窄成你自己的域名。

4.2 后端返回的时间成了“1970 年”

现象：商品列表里的create_time字段，前端显示成“1970-01-01”或者一串1600000000000这样的数字。

原因：Java 的Date类型默认序列化成时间戳，也就是自 1970 年 1 月 1 日以来的毫秒数，前端没做转换直接渲染，看起来就是 1970 年。这是我见过最频繁的翻车点，几乎每个 SSM 项目都会遇到。

解决：在实体的时间字段上加@JsonFormat注解，指定输出格式：

@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8") private Date createTime;

timezone参数必须写，不然本地环境会按 UTC 时区处理，返回的时间比实际慢 8 小时。这个坑不显眼，但答辩演示时很容易被一眼看穿。加了注解后，前端收到的就是2025-04-10 15:30:00这样的字符串，直接展示就行。

4.3 真机预览：图片裂图、请求失败，开发工具却是好的

现象：开发工具里一切正常，点“预览”用手机扫码打开后，商品图片裂了，接口请求也报错。

原因：开发工具勾选了“不校验合法域名”，但是真机环境不会跳过。小程序里有两个限制：一是request请求的 URL 必须是 HTTPS 且在小程序后台配置过合法域名；二是image标签加载图片不受downloadFile合法域名限制，但图片 URL 如果是localhost或者相对路径，手机根本访问不到你的电脑。

解决：分两步走。第一步，后台地址改成电脑的局域网 IP，比如http://192.168.1.100:8080/petmall，手机和电脑连同一个 Wi-Fi，用开发者工具里的“真机调试”模式打开，这样才能联调。第二步，商品图片不要用相对路径/upload/xxx.jpg，要么在后台配置静态资源映射并返回完整 URL，要么直接把图片传到对象存储，在数据库里存完整访问地址。

另外提醒一句：Tomcat 默认只监听localhost，要想让局域网手机访问，启动时确认server.xml里Connector的address没被设置成127.0.0.1，或者干脆注释掉这个属性。这个隐蔽配置能卡住一晚上。

4.4 滑到底部，接口被连续请求了四五次

现象：列表页快速滑动到底部，后台日志里同一个list请求瞬间出现多次，有的还返回重复数据。

原因：onReachBottom在快速滑动时会多次触发，如果没有锁，每次触发都会发请求。我见过很多新手只在onReachBottom里判断hasMore，却忘了判断loading，结果就是请求风暴。

解决：在所有发请求的入口处加同一个锁判断，这是最简单有效的办法：

loadPets(reset) { if (this.data.loading) return; this.setData({ loading: true }); // wx.request 成功和失败回调里再 setData({ loading: false }) }

这个锁的逻辑是：请求发出去之后，loading一直为true，后续触发直接return，直到请求结束才解锁。注意必须在success和fail两个回调里都解锁，不然一次请求失败后，页面就永远处于“加载中”，再也发不出新请求。

4.5 点击“立即支付”报 invalid request，越查越懵

现象：小程序端调用wx.requestPayment，返回invalid request或者requestPayment:fail，查文档也不知道缺什么。

原因：微信支付不是调一个 API 就能用的。它需要提前申请微信支付商户号、绑定小程序 AppID、配置支付证书、完成签约。个人主体的毕业设计基本没有这些权限，代码里直接调wx.requestPayment必然失败。这不是代码 bug，是账号权限问题。

解决：毕业设计阶段把支付按钮改成“模拟支付”或“货到付款”，这是最稳妥的做法。模拟支付就是提交订单时不调微信支付，而是直接标记为已支付：

submitOrder() { const mockPay = true; // 没有微信支付商户号时保持 true if (mockPay) { // 提交订单，订单状态直接设为“已支付（模拟）” } else { wx.requestPayment({ timeStamp: '', nonceStr: '', package: '', signType: 'MD5', paySign: '', // 真实支付参数需要后台配合生成 }); } }

把mockPay这个开关留在代码里，同时文档中写明“真实支付需要商户号和证书”，答辩时不但不扣分，反而能体现你对支付流程边界的理解。我在类似项目里吃过这个亏，答辩前一晚才意识到个人资质根本走不通，连夜改成模拟支付，那叫一个血泪教训。

5. 更进一步的技巧：交付目录、接口验证与 Spring Boot 升级路线

5.1 给源码和文档排个交付目录

标题里写着“源码含文档含教程”，但很多同学拿到源码后跑不起来，问题往往出在交付目录太乱。我自己的习惯是把工程拆成四个部分，拿到手十分钟内就能定位问题：

有这个结构后，跑项目的第一步永远是改数据库密码，第二步是把pet_mall.sql导进 MySQL，第三步启动后台，最后再用开发者工具打开小程序端。顺序反了就会出现“接口连接不上”的假象，其实后台还没起来。

5.2 后台接口冒烟验证：不用等前端就能确认接口可用

后台写完，先别急着写小程序。用命令行直接请求一下接口，能最快确认整个链路通没通。基于 Maven 的 SSM 项目，打包并部署到 Tomcat 后这样做：

# 打包，跳过单元测试 mvn clean package -DskipTests # 把 war 包复制到 Tomcat 的 webapps 目录 cp pet-mall-server/target/petmall.war $CATALINA_HOME/webapps/ # 启动 Tomcat $CATALINA_HOME/bin/startup.sh # 实时看日志 tail -f $CATALINA_HOME/logs/catalina.out

启动完成后，用curl验证商品列表接口：

curl "http://localhost:8080/petmall/api/pet/list?page=1&size=5"

如果返回 JSON 且包含rows和total，说明 SpringMVC 和 MyBatis 链路正常。如果curl返回 404，先看 Tomcat 日志里有没有报 Mapper 绑定异常；如果 8080 端口被占，用lsof -i:8080查占用进程，改server.xml里的端口。这一步能帮你把前后端联调的时间缩短一半，因为接口问题在命令行阶段就暴露了。

5.3 从 SSM 升级到 Spring Boot：把老项目变成面试谈资

如果你做完这个项目还想在简历上多写一笔，或者以后接手 Spring Boot 项目，可以按下面的路线做一次升级。SSM 和 Spring Boot 的本质是一样的，只是把配置从 XML 挪到了注解和自动配置里：

升级时最省力的路径是：Service 层和 Mapper 层代码尽量不动，只替换配置层。把applicationContext.xml的内容拆成@Configuration/@Bean，把spring-mvc.xml的annotation-driven换成 Spring Boot 的自动配置，再把 MyBatis 的mapper-locations写进application.yml。Spring Boot 的自动配置会减少大量样板代码，但 SSM 时期理解的那些原理反而是面试时拉开差距的地方，比如“Spring Boot 的 starter 到底自动配置了什么”。这两个项目能串起来讲，会比单纯背八股文生动得多。

最后分享一个我自己的习惯：拿到这种项目源码，先跑通，再拆解，最后换一个业务场景重新实现一遍，比如把宠物店换成鲜花店。第一遍照着做是完成，第二遍独立改代码才是理解。当初我要是早点把边界条件看清楚，也不会在支付上浪费一周。踩过的坑都变成文档里的注意事项，每次启动项目前扫一眼，能省下大量时间。希望帮到你。

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