企业官网建设流程全解析

简介：这是一套面向高校计算机相关专业学生的微信小程序毕业设计完整项目，以宠物店商城系统为主题，适合正在准备毕业设计或课程设计、需要小程序与Java后端全栈实战案例的学习者。项目采用微信小程序开发工具配合Java后端与MySQL数据库，实现宠物信息管理、商品销售与服务预约等业务，角色覆盖管理员、用户与商家，功能涉及宠物分类、宠物用品、服务项目、订单及日志管理等模块。压缩包共1659个文件，约48.38MB，包含png图片、js脚本、java源码、vue组件、json配置、wxss与wxml小程序页面文件以及sql建库脚本等，前后端与数据库资源齐全。已有175人学习下载，可作为同类选题的参考方案。随包附演示视频与说明文档，便于快速理解系统结构、梳理功能模块与数据库设计，对照源码完成环境搭建与二次开发，降低毕业设计从选题到落地的实现难度。

1. 宠物店商城小程序毕设：从源码包到能跑起来的完整路径

如果你正在找一份能直接跑通、带演示视频、前后端都有的微信小程序毕业设计，宠物店商城系统这个方向其实比通用电商更讨巧——它天然包含多角色（管理员、商家、用户）、多业务线（活体宠物、宠物用品、服务预约、日志社区），答辩时能讲的东西比单纯卖货的商城多得多。这份资源包给的是微信小程序开发工具 + Java 后端 + MySQL 的经典组合，源码里能看到main.css.bak、update-password.vue.bak、IndexMain.vue.bak这类前端备份文件，也有1-install.bat、2-run.bat、3-build.bat三个批处理脚本和.classpath工程配置，说明它是一套已经整理过启动流程的完整工程，不是散落的代码片段。适合谁？适合需要交课程设计、毕业设计，又不想从零搭框架的计算机相关专业学生，也适合想拿一个真实多角色业务练手 Java + 小程序联调的人。

2. 环境搭建与工程结构：三个 bat 脚本背后的启动逻辑

2.1 先看清这套工程的技术栈边界

拿到压缩包别急着双击运行，先确认技术栈和你本机环境能不能对上。这套系统是典型的前后端分离结构：小程序端用微信开发者工具打开，后端是 Java Web 工程（从.classpath和build.bat判断，大概率是 Eclipse 或 IDEA 导入的 Dynamic Web Project / Maven 工程），数据库是 MySQL。三个 bat 脚本的命名顺序其实已经暗示了启动链路：1-install.bat负责装依赖或初始化，2-run.bat负责启动后端服务，3-build.bat负责打包或编译前端资源。

常见做法是先把后端跑起来，再让小程序去连后端接口。很多人翻车就翻在顺序上——先开小程序，结果请求全部超时，然后回头怀疑代码有问题，其实是后端根本没启动。

这里要提醒一句：.bak后缀的文件是备份，不是运行文件。我见过有人把IndexMain.vue.bak当成正式页面去改，改完发现页面没变化，白白折腾半天。正式文件应该是同名的.vue，.bak只是历史版本留档。

2.2 数据库导入与后端配置修改

后端能不能连上数据库，是这套系统第一个真正的门槛。压缩包里通常会有一个.sql文件，导入之前先建库，字符集选utf8mb4，否则宠物名称里的特殊字符或用户昵称的 emoji 会变问号。

# 登录 MySQL 后执行，库名按 sql 文件里的实际名称来 mysql -u root -p CREATE DATABASE pet_shop DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE pet_shop; SOURCE /你的路径/pet_shop.sql;

导入完成后，去后端工程里找数据库配置文件，通常是db.properties、application.yml或jdbc.properties。要改的就三样：数据库地址、用户名、密码。

# 常见配置文件长这样，按你本机实际情况改 jdbc.driver=com.mysql.cj.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/pet_shop?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai jdbc.username=root jdbc.password=你的密码

参数说明：serverTimezone=Asia/Shanghai这个不能省，MySQL 8 以上版本不配时区会直接报连接异常，这是血泪经验。characterEncoding=utf8保证中文不乱码。改完配置，运行2-run.bat，看到控制台打印出 Tomcat 启动或 Spring Boot 启动的日志，端口监听成功，后端这关才算过。

2.3 小程序端导入与接口地址替换

小程序端用微信开发者工具打开，导入时选小程序源码所在目录。打开后第一件事不是点编译，而是全局搜索接口地址。这套系统的后端地址一般写在一个统一的配置文件里，比如config.js或request.js。

// 小程序端常见的请求封装，重点看 baseUrl const baseUrl = 'http://localhost:8080/pet_shop'; // 真机调试时 localhost 要换成电脑局域网 IP，比如 192.168.1.100

逻辑说明：开发者工具里用localhost能通，是因为工具和后端在同一台机器。但一旦你用手机预览，手机访问的localhost是手机自己，必然连不上。所以真机调试必须换成电脑的局域网 IP，并且保证手机和电脑在同一个 WiFi 下。另外微信开发者工具要在「详情 - 本地设置」里勾上「不校验合法域名」，否则http请求会被拦截。这一步是新手最容易卡住的地方，不是代码错，是工具的安全策略。

3. 多角色业务落地：管理员、商家、用户三条线的实现要点

3.1 角色权限怎么在代码里区分

这套系统有三个角色：管理员、商家、用户。权限区分的常见做法是登录后后端返回一个角色字段，小程序端存进本地缓存，页面加载时根据角色渲染不同入口。

// 登录成功后保存角色，页面里据此判断 wx.setStorageSync('role', res.data.role); // 1管理员 2商家 3用户 // 页面 onLoad 里读取 const role = wx.getStorageSync('role'); if (role === 2) { this.setData({ showMerchantEntry: true }); }

参数说明：角色值具体是 1/2/3 还是字符串，要以你后端实际返回为准，别照抄。这里的关键是——前端隐藏入口只是体验优化，真正的权限校验必须放在后端。我见过只在前端判断角色、后端接口裸奔的毕设，答辩老师一句「我直接调接口能不能越权」就问穿了。所以后端每个涉及角色操作的接口，都要在拦截器或过滤器里再校验一次角色。

3.2 宠物、用品、服务三类业务的表结构差异

这套系统有意思的地方在于它把业务拆成了三条线：宠物信息（活体）、宠物用品（商品）、服务项目（预约）。三者在数据库里通常是三张主表，但订单表是共用的，靠一个类型字段区分。

这种设计的好处是订单逻辑统一，坏处是查询时要按 type 分支处理。写订单列表接口时，如果三种类型字段差异大，常见做法是用UNION或者分三次查再合并。新手容易在这里写出 N+1 查询，列表一长就卡，优化方向是先把订单主表查出来，再用IN批量查关联的宠物/商品/服务信息。

3.3 服务预约与订单状态流转

服务预约是这套系统区别于普通商城的地方，也是答辩时能展开讲的点。预约涉及时间冲突判断——同一个商家同一时间段不能接两个预约。实现上一般是在插入预约记录前先查一次。

-- 插入前检查该商家该时段是否已被占用 SELECT COUNT(*) FROM service_order WHERE merchant_id = ? AND appoint_time = ? AND status IN (0, 1); -- status 0待确认 1已确认，已取消和已完成的不算冲突

逻辑说明：只有待确认和已确认的预约才占用时段，已取消和已完成的要排除，否则用户取消后时段永远释放不出来。这个细节很多现成模板会漏，导致取消一次之后那个时间点再也约不上。订单状态流转建议用状态机思路管理：待付款 → 已付款 → 待服务 → 已完成，每一步只允许特定角色操作，避免状态乱跳。

4. 避坑与排查：这套源码跑不起来时先看这几条

4.1 后端启动报数据库连接失败

现象：运行2-run.bat后控制台刷一堆异常，核心是Communications link failure或Access denied。 原因：九成是数据库配置没改，或者 MySQL 服务没启动，或者密码里有特殊字符没转义。 解决：先确认 MySQL 服务在运行，再用命令行手动mysql -u root -p登录一次验证密码。如果密码含@、#这类字符，配置文件里要么用引号包起来，要么改密码。时区问题就加serverTimezone。

4.2 小程序请求全部失败但后端日志没反应

现象：小程序页面空白或提示网络错误，后端控制台一条请求日志都没有。 原因：请求根本没发到后端，多半是baseUrl地址不对，或者开发者工具没关域名校验。 解决：先在浏览器直接访问后端接口地址，能返回数据说明后端没问题。然后检查小程序baseUrl是否带了多余斜杠、端口是否写错。真机调试换成局域网 IP，并确认防火墙没拦 8080 端口。

4.3 页面改了没效果

现象：改了某个.vue文件，重新编译页面还是老样子。 原因：改的是.bak备份文件，或者改的页面根本没被路由引用。 解决：确认改的是去掉.bak的正式文件，全局搜索这个页面路径看路由指向哪里。小程序端如果是原生写法，页面在pages目录下注册，改完要重新编译，不是热更新。

4.4 中文乱码

现象：宠物名称、用户昵称显示成问号或方块。 原因：数据库字符集不是utf8mb4，或者连接串没指定编码。 解决：建库时就定utf8mb4，连接串加characterEncoding=utf8。已经建好的库可以用ALTER DATABASE和ALTER TABLE改字符集，但已存的乱码数据救不回来，得重新导入。

4.5 图片上传后不显示

现象：后台上传宠物图片成功，但小程序端显示裂图。 原因：图片存的是服务器本地路径，小程序访问时路径拼错，或者后端没配静态资源映射。 解决：确认后端有静态资源映射配置，把上传目录暴露成可访问的 URL。小程序端拼接图片地址时，相对路径前面要补上baseUrl。常见做法是后端返回完整 URL，前端直接用，省得两边拼错。

5. 二次开发与答辩加分：把日志社区和订单统计做出亮点

这套系统里有个容易被忽略的模块——宠物日志。它本质是个轻量社区，用户可以发养宠日常。很多人做毕设只把它当摆设，其实这是答辩时最能体现「业务完整性」的地方。你可以顺着它做两个进阶点。

第一个是日志与宠物的关联。让日志发布时可以选择关联自己的某只宠物，这样个人主页就能展示「这只宠物的成长记录」。实现上在日志表加一个pet_id字段，发布时下拉选择，查询时按pet_id聚合。这个功能不复杂，但演示时很直观，老师一看就懂。

第二个是订单统计看板。管理员端加一个简单的统计页，用 SQL 聚合出每日订单量、各类型业务占比。

-- 按业务类型统计订单量和金额 SELECT type, COUNT(*) AS cnt, SUM(amount) AS total FROM `order` WHERE status = 3 -- 已完成 GROUP BY type;

参数说明：status = 3是已完成状态，具体值以你系统定义为准。这个查询结果直接喂给前端图表库（ECharts 之类）就能出图。答辩时你讲「我不光做了增删改查，还做了数据聚合和可视化」，比单纯罗列功能页有说服力得多。

验证方法上，我一般会走一遍完整业务闭环：注册用户 → 浏览宠物 → 下单 → 商家接单 → 管理员看订单统计，每一步都截图留档。这套流程走通，说明系统没有断链。从那以后我每次拿到一套毕设源码，都强制先跑通一条完整业务线再动任何代码，不然改到一半发现底层不通，后悔药都没得吃。

演示视频建议对着这条闭环录，别只录登录和首页。源码包里的说明文档先看启动章节，.bak文件别乱动，三个 bat 脚本按顺序执行。希望这套宠物店商城系统能帮你把毕设稳稳落地，少走点我当年踩过的弯路。

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