在实际的计算机专业毕业设计或课程设计中选择一个具有明确业务场景、技术栈主流且功能完整的项目是很多同学面临的第一个挑战。一个围绕特定地域文化或旅游资源的“分享平台”类项目因其业务逻辑清晰、数据模型典型、且易于扩展常成为热门选题。本文将以“丽江市旅游分享平台小程序”为蓝本详细拆解如何从零开始使用 Java Spring Boot Vue 这套经典技术栈构建一个前后端分离的完整项目。这不仅是一个毕业设计的实现指南更是一套可复用于其他类似“XX分享平台”项目的工程实践模板。我们将遵循企业级开发的常见流程从需求分析与技术选型开始到搭建 Spring Boot 后端 API 服务、设计数据库再到使用 Vue 构建小程序前端页面最后完成前后端联调与部署。文章会重点解释每个环节的技术决策、核心代码实现以及开发中必然会遇到的“坑”及其解决方案。无论你是正在寻找毕业设计题目的学生还是希望巩固全栈开发技能的开发者都能通过本文获得一个清晰、可落地的项目构建路径。1. 项目需求分析与技术栈选型在动手写代码之前明确项目要做什么以及用什么技术来做是避免后期大量返工的关键。1.1 业务需求梳理丽江市旅游分享平台核心功能一个旅游分享平台的核心是“内容”游记、攻略、图片和“互动”评论、点赞、收藏。围绕丽江这个具体场景我们可以抽象出以下核心功能模块用户系统注册、登录含微信小程序授权登录、个人信息管理。内容发布与管理发布图文游记/攻略。上传并管理旅游照片。对内容进行分类如“古城漫步”、“雪山游记”、“美食探店”。内容展示与发现首页信息流按时间或热度展示游记。内容详情页展示图文、作者、发布时间、互动数据。分类浏览、搜索功能按标题、标签、地点。社交互动对游记进行点赞、收藏。发表和回复评论。旅游资源模块增值功能丽江景点、酒店、美食店铺的信息展示与简单推荐。用户可以为这些地点打卡或评分。这些功能构成了一个典型的 UGC用户生成内容平台的基本骨架数据关系明确非常适合作为毕业设计项目。1.2 技术栈选型与理由根据项目标题和主流实践我们选择以下技术栈后端Java Spring BootSpring Boot极大地简化了 Spring 应用的初始搭建和开发过程内嵌 Tomcat无需打包成 WAR 部署是 Java 领域构建 RESTful API 的事实标准。Spring Data JPA / MyBatis-Plus用于数据库操作。JPA 更面向对象开发速度快MyBatis-Plus 则更灵活SQL 可控性强。本文示例将使用 MyBatis-Plus因其在国内更流行且对复杂查询的支持更直观。MySQL成熟稳定的关系型数据库适合存储用户、内容、评论等结构化数据。Redis可选用于缓存热点数据如首页信息流、存储用户会话或点赞状态的快速读写。前端Vue.js 小程序框架Vue.js渐进式 JavaScript 框架易于上手生态丰富。对于小程序开发我们通常不直接使用 Vue但原理相通。微信小程序作为前端载体。小程序开发有其特定的框架WXML、WXSS、JS。我们可以使用Uni-app或Taro这类多端框架它们支持 Vue 语法开发小程序一份代码可多端发布极大提高开发效率。本文将以Uni-app为例进行讲解。Vant Weapp或uView UI优秀的小程序 UI 组件库能快速搭建美观的界面。开发与部署工具MavenJava 项目依赖管理和构建工具。IDEA / EclipseJava 集成开发环境。HBuilderX / 微信开发者工具小程序开发 IDE。Node.js npm前端构建环境。为什么选择这个组合Spring Boot 和 Vue 是当前企业开发中非常成熟和流行的前后端分离组合。Spring Boot 提供稳健、高效的后端服务Vue或类 Vue 框架提供灵活、响应式的前端交互。小程序作为移动端入口用户体验好无需安装。这个技术栈覆盖面广能充分体现一个本科毕业设计对前后端技术的掌握程度。2. 后端工程搭建与核心实现我们将首先构建后端 API 服务这是整个应用的数据和业务逻辑核心。2.1 初始化 Spring Boot 项目与基础配置使用 Spring Initializr https://start.spring.io/ 或 IDEA 内置的 Spring Boot 项目创建向导生成项目基础结构。关键依赖选择pom.xmldependencies !-- Web 支持 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- 数据库驱动 -- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency !-- MyBatis-Plus 增强 -- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency !-- Lombok 简化实体类 -- dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency !-- 参数校验 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-validation/artifactId /dependency !-- 单元测试 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-test/artifactId scopetest/scope /dependency /dependencies应用配置文件application.ymlserver: port: 8080 # 服务端口 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/lijiang_travel?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: yourpassword servlet: multipart: max-file-size: 10MB # 文件上传大小限制 max-request-size: 20MB # MyBatis-Plus 配置 mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 控制台打印SQL生产环境关闭 global-config: db-config: id-type: auto # 主键自增 logic-delete-field: deleted # 全局逻辑删除字段 logic-delete-value: 1 # 逻辑已删除值 logic-not-delete-value: 0 # 逻辑未删除值2.2 数据库设计与实体类映射根据需求设计核心表结构。以下是简化版的核心表1. 用户表 (user)CREATE TABLE user ( id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 主键, openid varchar(255) DEFAULT NULL COMMENT 微信openid用于小程序登录, nickname varchar(100) DEFAULT NULL COMMENT 昵称, avatar_url varchar(500) DEFAULT NULL COMMENT 头像, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, deleted tinyint(1) DEFAULT 0 COMMENT 逻辑删除, PRIMARY KEY (id), UNIQUE KEY uk_openid (openid) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户表;2. 游记表 (travel_note)CREATE TABLE travel_note ( id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 主键, user_id bigint(20) NOT NULL COMMENT 作者ID, title varchar(200) NOT NULL COMMENT 标题, cover_image varchar(500) DEFAULT NULL COMMENT 封面图, content longtext COMMENT 内容富文本或Markdown, summary varchar(500) DEFAULT NULL COMMENT 摘要, view_count int(11) DEFAULT 0 COMMENT 浏览数, like_count int(11) DEFAULT 0 COMMENT 点赞数, collect_count int(11) DEFAULT 0 COMMENT 收藏数, category varchar(50) DEFAULT NULL COMMENT 分类, location varchar(200) DEFAULT NULL COMMENT 地点, status tinyint(4) DEFAULT 1 COMMENT 状态1-审核中2-已发布3-已下架, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, deleted tinyint(1) DEFAULT 0 COMMENT 逻辑删除, PRIMARY KEY (id), KEY idx_user_id (user_id), KEY idx_category (category), KEY idx_create_time (create_time) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT游记表;3. 评论表 (comment)CREATE TABLE comment ( id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 主键, travel_note_id bigint(20) NOT NULL COMMENT 游记ID, user_id bigint(20) NOT NULL COMMENT 评论者ID, parent_id bigint(20) DEFAULT 0 COMMENT 父评论ID0表示顶级评论, content text NOT NULL COMMENT 评论内容, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, deleted tinyint(1) DEFAULT 0 COMMENT 逻辑删除, PRIMARY KEY (id), KEY idx_travel_note_id (travel_note_id), KEY idx_parent_id (parent_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT评论表;类似地还需要设计like点赞关系表、collection收藏关系表、resource旅游资源表等。使用 MyBatis-Plus我们可以快速生成对应的实体类、Mapper 接口和 Service。这里以TravelNote实体类为例package com.lijiang.platform.entity; import com.baomidou.mybatisplus.annotation.*; import lombok.Data; import java.time.LocalDateTime; Data TableName(travel_note) public class TravelNote { TableId(type IdType.AUTO) private Long id; private Long userId; private String title; private String coverImage; private String content; private String summary; private Integer viewCount; private Integer likeCount; private Integer collectCount; private String category; private String location; private Integer status; TableField(fill FieldFill.INSERT) private LocalDateTime createTime; TableField(fill FieldFill.INSERT_UPDATE) private LocalDateTime updateTime; TableLogic private Integer deleted; }2.3 核心业务逻辑与 RESTful API 实现我们以实现游记的增删改查和列表查询为例。1. 创建 Service 层package com.lijiang.platform.service; import com.baomidou.mybatisplus.extension.service.IService; import com.lijiang.platform.entity.TravelNote; import com.lijiang.platform.vo.TravelNoteVO; import java.util.List; public interface TravelNoteService extends IServiceTravelNote { // 保存或更新游记 boolean saveOrUpdateNote(TravelNote travelNote, Long userId); // 分页查询游记列表 ListTravelNoteVO getNotePage(Integer pageNum, Integer pageSize, String category, String keyword); // 获取游记详情包含作者信息 TravelNoteVO getNoteDetail(Long id); }2. 实现 ServiceService public class TravelNoteServiceImpl extends ServiceImplTravelNoteMapper, TravelNote implements TravelNoteService { Autowired private UserService userService; Override public boolean saveOrUpdateNote(TravelNote travelNote, Long userId) { if (travelNote.getId() null) { // 新增 travelNote.setUserId(userId); travelNote.setViewCount(0); travelNote.setLikeCount(0); travelNote.setCollectCount(0); travelNote.setStatus(1); // 默认审核中 return this.save(travelNote); } else { // 更新校验权限只能修改自己的游记 TravelNote oldNote this.getById(travelNote.getId()); if (oldNote null || !oldNote.getUserId().equals(userId)) { throw new RuntimeException(无权修改此游记); } travelNote.setUserId(userId); // 防止篡改作者 return this.updateById(travelNote); } } Override public ListTravelNoteVO getNotePage(Integer pageNum, Integer pageSize, String category, String keyword) { PageTravelNote page new Page(pageNum, pageSize); LambdaQueryWrapperTravelNote queryWrapper new LambdaQueryWrapper(); queryWrapper.eq(TravelNote::getStatus, 2) // 只查询已发布的 .eq(StringUtils.isNotBlank(category), TravelNote::getCategory, category) .like(StringUtils.isNotBlank(keyword), TravelNote::getTitle, keyword) .orderByDesc(TravelNote::getCreateTime); PageTravelNote notePage this.page(page, queryWrapper); // 将 TravelNote 转换为 TravelNoteVO包含作者昵称、头像等 return notePage.getRecords().stream().map(this::convertToVO).collect(Collectors.toList()); } // ... 其他方法实现 }3. 创建 Controller 层RESTful APIRestController RequestMapping(/api/travel-note) public class TravelNoteController { Autowired private TravelNoteService travelNoteService; PostMapping public Result saveOrUpdate(RequestBody TravelNote travelNote, RequestHeader(X-User-Id) Long userId) { boolean success travelNoteService.saveOrUpdateNote(travelNote, userId); return success ? Result.success() : Result.fail(操作失败); } GetMapping(/page) public Result getPage(RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String category, RequestParam(required false) String keyword) { ListTravelNoteVO list travelNoteService.getNotePage(pageNum, pageSize, category, keyword); return Result.success(list); } GetMapping(/{id}) public Result getDetail(PathVariable Long id) { TravelNoteVO detail travelNoteService.getNoteDetail(id); if (detail null) { return Result.fail(游记不存在); } // 增加浏览量可异步处理 travelNoteService.incrementViewCount(id); return Result.success(detail); } DeleteMapping(/{id}) public Result delete(PathVariable Long id, RequestHeader(X-User-Id) Long userId) { // 权限校验逻辑... boolean success travelNoteService.removeById(id); return success ? Result.success() : Result.fail(删除失败); } }这里的Result是一个统一的响应体封装类RequestHeader(X-User-Id)表示从请求头中获取当前登录用户的 ID需在拦截器中解析 token 后设置。2.4 用户认证与文件上传1. 微信小程序登录小程序前端通过wx.login()获取code传给后端。后端调用微信接口用appid、secret和code换取openid和session_key。Service public class AuthService { public String wxLogin(String code) { // 1. 构造请求URL调用微信接口 String url String.format(https://api.weixin.qq.com/sns/jscode2session?appid%ssecret%sjs_code%sgrant_typeauthorization_code, appId, appSecret, code); // 2. 使用 RestTemplate 或 HttpClient 发送请求获取 openid // 3. 根据 openid 查询或创建用户 User user userService.getByOpenid(openid); if (user null) { user new User(); user.setOpenid(openid); userService.save(user); } // 4. 生成自定义 Token如 JWT并返回给前端 return JwtUtil.generateToken(user.getId()); } }2. 文件上传图片Spring Boot 处理文件上传非常方便。我们需要一个接口接收MultipartFile。RestController RequestMapping(/api/upload) public class UploadController { Value(${file.upload.path}) // 在配置文件中定义如: file.upload.path/data/upload/ private String uploadPath; PostMapping(/image) public Result uploadImage(RequestParam(file) MultipartFile file) { if (file.isEmpty()) { return Result.fail(文件为空); } // 生成唯一文件名防止覆盖 String originalFilename file.getOriginalFilename(); String fileExt originalFilename.substring(originalFilename.lastIndexOf(.)); String newFileName UUID.randomUUID().toString() fileExt; // 保存文件 File dest new File(uploadPath newFileName); try { file.transferTo(dest); // 返回访问路径需配置静态资源映射或使用云存储URL String accessUrl /upload/ newFileName; return Result.success(accessUrl); } catch (IOException e) { return Result.fail(上传失败); } } }同时需要在配置中允许跨域请求CORS以便小程序前端能访问 API。3. 前端小程序开发基于 Uni-app我们将使用 Uni-app它允许我们使用 Vue 的语法来编写小程序代码。3.1 Uni-app 项目初始化与配置安装 HBuilderX新建 Uni-app 项目选择“默认模板”。项目结构主要包括pages/页面文件。static/静态资源。components/自定义组件。App.vue应用入口。main.js应用配置。manifest.json应用配置如小程序 AppID。pages.json页面路由与样式配置。安装必要的 npm 包如uview-uiUI 组件库和flyio网络请求库。npm install uview-ui flyio在main.js中引入 uView。import uView from uview-ui; Vue.use(uView);3.2 首页与游记列表页实现1. 首页 (pages/index/index.vue)首页通常包含轮播图、导航入口和游记列表。template view classcontainer !-- 轮播图 -- u-swiper :listbannerList height300/u-swiper !-- 分类导航 -- view classcategory-nav view v-foritem in categories :keyitem.value clickswitchCategory(item.value) text :class{active: currentCategory item.value}{{ item.label }}/text /view /view !-- 游记列表 -- view classnote-list view v-foritem in noteList :keyitem.id classnote-item clickgoToDetail(item.id) image :srcitem.coverImage modeaspectFill/image view classinfo text classtitle{{ item.title }}/text view classmeta text{{ item.authorName }}/text text{{ item.createTime }}/text view classcounts u-icon nameeye/u-icon {{ item.viewCount }} u-icon nameheart/u-icon {{ item.likeCount }} /view /view /view /view /view !-- 加载更多 -- u-loadmore :statusloadStatus / /view /template script import { getTravelNotePage } from /api/travelNote.js; export default { data() { return { bannerList: [], // 从后端获取 categories: [ { label: 全部, value: }, { label: 古城漫步, value: gucheng }, { label: 雪山游记, value: xueshan }, // ... ], currentCategory: , noteList: [], pageNum: 1, pageSize: 10, loadStatus: loadmore // loadmore, loading, nomore }; }, onLoad() { this.loadData(); }, onReachBottom() { // 触底加载更多 if (this.loadStatus nomore) return; this.pageNum; this.loadData(); }, methods: { async loadData() { this.loadStatus loading; try { const res await getTravelNotePage({ pageNum: this.pageNum, pageSize: this.pageSize, category: this.currentCategory }); if (this.pageNum 1) { this.noteList res.data; } else { this.noteList [...this.noteList, ...res.data]; } // 判断是否还有更多数据 this.loadStatus res.data.length this.pageSize ? nomore : loadmore; } catch (error) { this.loadStatus loadmore; uni.showToast({ title: 加载失败, icon: none }); } }, switchCategory(category) { this.currentCategory category; this.pageNum 1; this.loadData(); }, goToDetail(id) { uni.navigateTo({ url: /pages/detail/detail?id${id} }); } } }; /script2. 网络请求封装 (utils/request.js)统一处理请求、响应和错误。import Fly from flyio; const request new Fly(); // 请求拦截器添加 token request.interceptors.request.use((request) { const token uni.getStorageSync(token); if (token) { request.headers[Authorization] Bearer ${token}; // 或者根据后端要求如 request.headers[X-User-Id] userId; } return request; }); // 响应拦截器统一处理错误 request.interceptors.response.use( (response) { const res response.data; if (res.code 200) { // 假设成功码为200 return res.data; } else { uni.showToast({ title: res.message || 请求失败, icon: none }); return Promise.reject(new Error(res.message)); } }, (error) { uni.showToast({ title: 网络错误, icon: none }); return Promise.reject(error); } ); // 配置基地址 request.config.baseURL http://localhost:8080/api; // 开发环境生产环境需替换 export default request;3. API 模块化 (api/travelNote.js)import request from /utils/request.js; export function getTravelNotePage(params) { return request.get(/travel-note/page, { params }); } export function getTravelNoteDetail(id) { return request.get(/travel-note/${id}); } export function createTravelNote(data) { return request.post(/travel-note, data); } // ... 其他 API3.3 用户登录与状态管理小程序登录流程需要与后端配合。1. 登录页面逻辑script import { wxLogin } from /api/auth.js; export default { methods: { async handleLogin() { // 1. 调用 uni.login 获取 code const [err, loginRes] await uni.login(); if (err) return; const code loginRes.code; // 2. 调用后端登录接口 try { const token await wxLogin({ code }); // 3. 存储 token 和用户信息 uni.setStorageSync(token, token); // 4. 跳转回原页面或首页 uni.switchTab({ url: /pages/index/index }); } catch (error) { uni.showToast({ title: 登录失败, icon: none }); } } } }; /script2. 全局状态管理简单方案对于中小型项目可以使用 Vue 的globalData或Vue.prototype来共享用户状态。 在App.vue中script export default { globalData: { userInfo: null }, onLaunch() { // 启动时尝试从缓存恢复登录状态 const token uni.getStorageSync(token); if (token) { // 验证 token 有效性并获取用户信息 this.getUserInfo(); } }, methods: { async getUserInfo() { // 调用获取用户信息的接口 // 成功后更新 globalData.userInfo } } }; /script在页面中通过getApp().globalData.userInfo访问。3.4 发布游记与图片上传发布页面涉及表单处理和图片上传。template view classpublish-container u-form :modelform refuForm u-form-item label标题 proptitle u-input v-modelform.title placeholder请输入标题 / /u-form-item u-form-item label封面图 u-upload :fileListcoverList afterReadafterCoverRead maxCount1/u-upload /u-form-item u-form-item label分类 u-select v-modelform.category :listcategoryList/u-select /u-form-item u-form-item label内容 propcontent !-- 使用富文本编辑器组件如 uParse 或自定义 -- textarea v-modelform.content placeholder分享你的旅行故事... / /u-form-item /u-form button clicksubmit发布/button /view /template script import { createTravelNote } from /api/travelNote.js; import { uploadImage } from /api/upload.js; export default { data() { return { form: { title: , category: , content: , coverImage: }, coverList: [], categoryList: [ /* ... */ ] }; }, methods: { // 封面图上传回调 async afterCoverRead(event) { const file event.file; // 调用上传接口 const url await uploadImage(file); this.form.coverImage url; this.coverList [{ url: url }]; }, async submit() { // 表单验证... try { await createTravelNote(this.form); uni.showToast({ title: 发布成功 }); setTimeout(() uni.navigateBack(), 1500); } catch (error) { uni.showToast({ title: 发布失败, icon: none }); } } } }; /script4. 前后端联调、部署与常见问题4.1 联调环境配置与跨域处理开发时前端运行在微信开发者工具或 HBuilderX 的内置服务器如localhost:8081后端运行在localhost:8080存在跨域问题。后端解决Spring Boot 配置 CORSConfiguration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) // 生产环境应指定具体前端域名 .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }前端配置代理HBuilderX 的 manifest.json 或 vue.config.js在manifest.json的h5节点下或创建vue.config.jsmodule.exports { devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, pathRewrite: { ^/api: } } } } }4.2 数据库连接与 MyBatis-Plus 常见问题问题现象可能原因检查与解决Failed to configure a DataSource未配置数据源或配置有误检查application.yml中的spring.datasource配置确保数据库服务已启动。Invalid bound statement (not found)Mapper XML 文件未找到或路径不对1. 检查application.yml中mybatis-plus.mapper-locations配置。2. 检查 Mapper 接口是否被Mapper注解或主类是否有MapperScan。插入数据时create_time未自动填充未配置元对象处理器创建配置类实现MetaObjectHandler重写insertFill和updateFill方法。逻辑删除查询无效未在实体类字段加TableLogic或全局配置不对确认实体类中逻辑删除字段有TableLogic且全局配置logic-delete-value和logic-not-delete-value正确。4.3 小程序端常见问题问题现象可能原因检查与解决真机预览请求失败报request:fail url not in domain list未配置服务器域名登录微信小程序后台在“开发”-“开发设置”-“服务器域名”中配置 request 合法域名需 HTTPS。开发阶段可在开发者工具中勾选“不校验合法域名”。图片上传失败或预览失败图片路径不对或未配置 uploadFile 域名1. 上传图片的接口域名需加入 uploadFile 域名列表。2. 确保后端返回的图片 URL 是完整可访问的。getUserProfile或getUserInfo无法获取用户信息小程序接口权限调整使用button open-typegetUserInfo引导用户授权或在需要时调用wx.getUserProfile。页面样式在 iOS 和 Android 表现不一致平台差异多使用 Flex 布局测试真机。注意rpx单位的兼容性。4.4 项目部署简要指南后端部署使用 Maven 打包mvn clean package -DskipTests。生成target/*.jar文件。在服务器Linux上安装 Java 运行环境JRE 8。上传 jar 包使用命令nohup java -jar your-app.jar app.log 21 后台运行。建议使用 Nginx 反向代理配置 SSL 证书HTTPS 是小程序要求。前端部署小程序在 HBuilderX 或微信开发者工具中点击“发行”-“小程序-微信”。上传代码到微信小程序平台。在微信小程序后台提交审核审核通过后即可发布。数据库建议将本地 MySQL 数据导出在服务器上导入。生产环境务必修改默认密码并考虑定期备份。5. 项目优化与扩展方向一个基础的毕业设计项目完成后可以考虑以下优化点来提升项目的深度和复杂度这也能在答辩时体现你的思考。5.1 性能与体验优化图片处理与云存储本地存储图片有容量和带宽限制。可集成云存储服务如阿里云 OSS、腾讯云 COS并在上传时生成缩略图。缓存策略使用 Redis 缓存首页热点游记列表、用户信息等。例如将热门游记列表缓存 5 分钟减少数据库压力。异步处理将浏览量更新、发送通知等非实时操作放入消息队列如 RabbitMQ或使用 Spring 的Async异步执行。前端骨架屏与懒加载列表页使用骨架屏提升体验图片使用懒加载Uni-app 的image组件有lazy-load属性。5.2 功能扩展搜索优化集成 Elasticsearch 实现全文搜索支持对游记标题、内容、标签进行高效检索。推荐系统基于用户浏览、点赞、收藏行为实现简单的协同过滤或基于内容的推荐。消息通知实现评论回复、点赞通知功能可使用 WebSocket 实现实时推送。管理员后台使用 Vue Element Admin 或 Ant Design Pro 搭建一个独立的管理后台用于内容审核、用户管理、数据统计。地图集成在小程序端集成腾讯地图或百度地图 API让用户发布游记时标记位置并在地图上展示热门游记地点。5.3 安全加固SQL 注入防护MyBatis-Plus 使用预编译语句本身已能防护。但仍需避免在代码中拼接 SQL。XSS 防护用户输入的富文本内容在存储和展示前要进行过滤或转义。接口防刷对登录、短信、评论等接口增加频率限制可使用 Redis 记录 IP 或用户操作次数。敏感信息脱敏日志中不要打印密码、token 等敏感信息。5.4 毕业设计文档与答辩准备一个完整的毕业设计除了代码还需要配套的文档。你的项目应该能清晰阐述以下几点项目背景与意义为什么做丽江旅游分享平台解决了什么痛点需求分析用用例图或功能模块图说明你的系统有哪些角色和功能。系统设计包括技术架构图前端、后端、数据库、核心数据库 E-R 图、关键 API 设计。核心实现展示 1-2 个关键业务流程的代码和说明例如“用户发布游记的数据流转”。测试至少进行功能测试并展示测试用例和结果。有条件可做性能压力测试。总结与展望项目的亮点、不足以及未来可以改进的方向。通过本文的步骤你不仅能够完成“丽江市旅游分享平台小程序”这个具体的毕业设计更重要的是掌握了一套构建 Spring Boot Vue 全栈应用的标准方法。在实际开发中请务必关注日志记录、异常处理、代码规范等工程细节这些是区分“玩具项目”与“可维护项目”的关键。
在实际的计算机专业毕业设计或课程设计中选择一个具有明确业务场景、技术栈主流且功能完整的项目是很多同学面临的第一个挑战。一个围绕特定地域文化或旅游资源的“分享平台”类项目因其业务逻辑清晰、数据模型典型、且易于扩展常成为热门选题。本文将以“丽江市旅游分享平台小程序”为蓝本详细拆解如何从零开始使用 Java Spring Boot Vue 这套经典技术栈构建一个前后端分离的完整项目。这不仅是一个毕业设计的实现指南更是一套可复用于其他类似“XX分享平台”项目的工程实践模板。我们将遵循企业级开发的常见流程从需求分析与技术选型开始到搭建 Spring Boot 后端 API 服务、设计数据库再到使用 Vue 构建小程序前端页面最后完成前后端联调与部署。文章会重点解释每个环节的技术决策、核心代码实现以及开发中必然会遇到的“坑”及其解决方案。无论你是正在寻找毕业设计题目的学生还是希望巩固全栈开发技能的开发者都能通过本文获得一个清晰、可落地的项目构建路径。1. 项目需求分析与技术栈选型在动手写代码之前明确项目要做什么以及用什么技术来做是避免后期大量返工的关键。1.1 业务需求梳理丽江市旅游分享平台核心功能一个旅游分享平台的核心是“内容”游记、攻略、图片和“互动”评论、点赞、收藏。围绕丽江这个具体场景我们可以抽象出以下核心功能模块用户系统注册、登录含微信小程序授权登录、个人信息管理。内容发布与管理发布图文游记/攻略。上传并管理旅游照片。对内容进行分类如“古城漫步”、“雪山游记”、“美食探店”。内容展示与发现首页信息流按时间或热度展示游记。内容详情页展示图文、作者、发布时间、互动数据。分类浏览、搜索功能按标题、标签、地点。社交互动对游记进行点赞、收藏。发表和回复评论。旅游资源模块增值功能丽江景点、酒店、美食店铺的信息展示与简单推荐。用户可以为这些地点打卡或评分。这些功能构成了一个典型的 UGC用户生成内容平台的基本骨架数据关系明确非常适合作为毕业设计项目。1.2 技术栈选型与理由根据项目标题和主流实践我们选择以下技术栈后端Java Spring BootSpring Boot极大地简化了 Spring 应用的初始搭建和开发过程内嵌 Tomcat无需打包成 WAR 部署是 Java 领域构建 RESTful API 的事实标准。Spring Data JPA / MyBatis-Plus用于数据库操作。JPA 更面向对象开发速度快MyBatis-Plus 则更灵活SQL 可控性强。本文示例将使用 MyBatis-Plus因其在国内更流行且对复杂查询的支持更直观。MySQL成熟稳定的关系型数据库适合存储用户、内容、评论等结构化数据。Redis可选用于缓存热点数据如首页信息流、存储用户会话或点赞状态的快速读写。前端Vue.js 小程序框架Vue.js渐进式 JavaScript 框架易于上手生态丰富。对于小程序开发我们通常不直接使用 Vue但原理相通。微信小程序作为前端载体。小程序开发有其特定的框架WXML、WXSS、JS。我们可以使用Uni-app或Taro这类多端框架它们支持 Vue 语法开发小程序一份代码可多端发布极大提高开发效率。本文将以Uni-app为例进行讲解。Vant Weapp或uView UI优秀的小程序 UI 组件库能快速搭建美观的界面。开发与部署工具MavenJava 项目依赖管理和构建工具。IDEA / EclipseJava 集成开发环境。HBuilderX / 微信开发者工具小程序开发 IDE。Node.js npm前端构建环境。为什么选择这个组合Spring Boot 和 Vue 是当前企业开发中非常成熟和流行的前后端分离组合。Spring Boot 提供稳健、高效的后端服务Vue或类 Vue 框架提供灵活、响应式的前端交互。小程序作为移动端入口用户体验好无需安装。这个技术栈覆盖面广能充分体现一个本科毕业设计对前后端技术的掌握程度。2. 后端工程搭建与核心实现我们将首先构建后端 API 服务这是整个应用的数据和业务逻辑核心。2.1 初始化 Spring Boot 项目与基础配置使用 Spring Initializr https://start.spring.io/ 或 IDEA 内置的 Spring Boot 项目创建向导生成项目基础结构。关键依赖选择pom.xmldependencies !-- Web 支持 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- 数据库驱动 -- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency !-- MyBatis-Plus 增强 -- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency !-- Lombok 简化实体类 -- dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency !-- 参数校验 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-validation/artifactId /dependency !-- 单元测试 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-test/artifactId scopetest/scope /dependency /dependencies应用配置文件application.ymlserver: port: 8080 # 服务端口 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/lijiang_travel?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: yourpassword servlet: multipart: max-file-size: 10MB # 文件上传大小限制 max-request-size: 20MB # MyBatis-Plus 配置 mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 控制台打印SQL生产环境关闭 global-config: db-config: id-type: auto # 主键自增 logic-delete-field: deleted # 全局逻辑删除字段 logic-delete-value: 1 # 逻辑已删除值 logic-not-delete-value: 0 # 逻辑未删除值2.2 数据库设计与实体类映射根据需求设计核心表结构。以下是简化版的核心表1. 用户表 (user)CREATE TABLE user ( id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 主键, openid varchar(255) DEFAULT NULL COMMENT 微信openid用于小程序登录, nickname varchar(100) DEFAULT NULL COMMENT 昵称, avatar_url varchar(500) DEFAULT NULL COMMENT 头像, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, deleted tinyint(1) DEFAULT 0 COMMENT 逻辑删除, PRIMARY KEY (id), UNIQUE KEY uk_openid (openid) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户表;2. 游记表 (travel_note)CREATE TABLE travel_note ( id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 主键, user_id bigint(20) NOT NULL COMMENT 作者ID, title varchar(200) NOT NULL COMMENT 标题, cover_image varchar(500) DEFAULT NULL COMMENT 封面图, content longtext COMMENT 内容富文本或Markdown, summary varchar(500) DEFAULT NULL COMMENT 摘要, view_count int(11) DEFAULT 0 COMMENT 浏览数, like_count int(11) DEFAULT 0 COMMENT 点赞数, collect_count int(11) DEFAULT 0 COMMENT 收藏数, category varchar(50) DEFAULT NULL COMMENT 分类, location varchar(200) DEFAULT NULL COMMENT 地点, status tinyint(4) DEFAULT 1 COMMENT 状态1-审核中2-已发布3-已下架, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, deleted tinyint(1) DEFAULT 0 COMMENT 逻辑删除, PRIMARY KEY (id), KEY idx_user_id (user_id), KEY idx_category (category), KEY idx_create_time (create_time) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT游记表;3. 评论表 (comment)CREATE TABLE comment ( id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 主键, travel_note_id bigint(20) NOT NULL COMMENT 游记ID, user_id bigint(20) NOT NULL COMMENT 评论者ID, parent_id bigint(20) DEFAULT 0 COMMENT 父评论ID0表示顶级评论, content text NOT NULL COMMENT 评论内容, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, deleted tinyint(1) DEFAULT 0 COMMENT 逻辑删除, PRIMARY KEY (id), KEY idx_travel_note_id (travel_note_id), KEY idx_parent_id (parent_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT评论表;类似地还需要设计like点赞关系表、collection收藏关系表、resource旅游资源表等。使用 MyBatis-Plus我们可以快速生成对应的实体类、Mapper 接口和 Service。这里以TravelNote实体类为例package com.lijiang.platform.entity; import com.baomidou.mybatisplus.annotation.*; import lombok.Data; import java.time.LocalDateTime; Data TableName(travel_note) public class TravelNote { TableId(type IdType.AUTO) private Long id; private Long userId; private String title; private String coverImage; private String content; private String summary; private Integer viewCount; private Integer likeCount; private Integer collectCount; private String category; private String location; private Integer status; TableField(fill FieldFill.INSERT) private LocalDateTime createTime; TableField(fill FieldFill.INSERT_UPDATE) private LocalDateTime updateTime; TableLogic private Integer deleted; }2.3 核心业务逻辑与 RESTful API 实现我们以实现游记的增删改查和列表查询为例。1. 创建 Service 层package com.lijiang.platform.service; import com.baomidou.mybatisplus.extension.service.IService; import com.lijiang.platform.entity.TravelNote; import com.lijiang.platform.vo.TravelNoteVO; import java.util.List; public interface TravelNoteService extends IServiceTravelNote { // 保存或更新游记 boolean saveOrUpdateNote(TravelNote travelNote, Long userId); // 分页查询游记列表 ListTravelNoteVO getNotePage(Integer pageNum, Integer pageSize, String category, String keyword); // 获取游记详情包含作者信息 TravelNoteVO getNoteDetail(Long id); }2. 实现 ServiceService public class TravelNoteServiceImpl extends ServiceImplTravelNoteMapper, TravelNote implements TravelNoteService { Autowired private UserService userService; Override public boolean saveOrUpdateNote(TravelNote travelNote, Long userId) { if (travelNote.getId() null) { // 新增 travelNote.setUserId(userId); travelNote.setViewCount(0); travelNote.setLikeCount(0); travelNote.setCollectCount(0); travelNote.setStatus(1); // 默认审核中 return this.save(travelNote); } else { // 更新校验权限只能修改自己的游记 TravelNote oldNote this.getById(travelNote.getId()); if (oldNote null || !oldNote.getUserId().equals(userId)) { throw new RuntimeException(无权修改此游记); } travelNote.setUserId(userId); // 防止篡改作者 return this.updateById(travelNote); } } Override public ListTravelNoteVO getNotePage(Integer pageNum, Integer pageSize, String category, String keyword) { PageTravelNote page new Page(pageNum, pageSize); LambdaQueryWrapperTravelNote queryWrapper new LambdaQueryWrapper(); queryWrapper.eq(TravelNote::getStatus, 2) // 只查询已发布的 .eq(StringUtils.isNotBlank(category), TravelNote::getCategory, category) .like(StringUtils.isNotBlank(keyword), TravelNote::getTitle, keyword) .orderByDesc(TravelNote::getCreateTime); PageTravelNote notePage this.page(page, queryWrapper); // 将 TravelNote 转换为 TravelNoteVO包含作者昵称、头像等 return notePage.getRecords().stream().map(this::convertToVO).collect(Collectors.toList()); } // ... 其他方法实现 }3. 创建 Controller 层RESTful APIRestController RequestMapping(/api/travel-note) public class TravelNoteController { Autowired private TravelNoteService travelNoteService; PostMapping public Result saveOrUpdate(RequestBody TravelNote travelNote, RequestHeader(X-User-Id) Long userId) { boolean success travelNoteService.saveOrUpdateNote(travelNote, userId); return success ? Result.success() : Result.fail(操作失败); } GetMapping(/page) public Result getPage(RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String category, RequestParam(required false) String keyword) { ListTravelNoteVO list travelNoteService.getNotePage(pageNum, pageSize, category, keyword); return Result.success(list); } GetMapping(/{id}) public Result getDetail(PathVariable Long id) { TravelNoteVO detail travelNoteService.getNoteDetail(id); if (detail null) { return Result.fail(游记不存在); } // 增加浏览量可异步处理 travelNoteService.incrementViewCount(id); return Result.success(detail); } DeleteMapping(/{id}) public Result delete(PathVariable Long id, RequestHeader(X-User-Id) Long userId) { // 权限校验逻辑... boolean success travelNoteService.removeById(id); return success ? Result.success() : Result.fail(删除失败); } }这里的Result是一个统一的响应体封装类RequestHeader(X-User-Id)表示从请求头中获取当前登录用户的 ID需在拦截器中解析 token 后设置。2.4 用户认证与文件上传1. 微信小程序登录小程序前端通过wx.login()获取code传给后端。后端调用微信接口用appid、secret和code换取openid和session_key。Service public class AuthService { public String wxLogin(String code) { // 1. 构造请求URL调用微信接口 String url String.format(https://api.weixin.qq.com/sns/jscode2session?appid%ssecret%sjs_code%sgrant_typeauthorization_code, appId, appSecret, code); // 2. 使用 RestTemplate 或 HttpClient 发送请求获取 openid // 3. 根据 openid 查询或创建用户 User user userService.getByOpenid(openid); if (user null) { user new User(); user.setOpenid(openid); userService.save(user); } // 4. 生成自定义 Token如 JWT并返回给前端 return JwtUtil.generateToken(user.getId()); } }2. 文件上传图片Spring Boot 处理文件上传非常方便。我们需要一个接口接收MultipartFile。RestController RequestMapping(/api/upload) public class UploadController { Value(${file.upload.path}) // 在配置文件中定义如: file.upload.path/data/upload/ private String uploadPath; PostMapping(/image) public Result uploadImage(RequestParam(file) MultipartFile file) { if (file.isEmpty()) { return Result.fail(文件为空); } // 生成唯一文件名防止覆盖 String originalFilename file.getOriginalFilename(); String fileExt originalFilename.substring(originalFilename.lastIndexOf(.)); String newFileName UUID.randomUUID().toString() fileExt; // 保存文件 File dest new File(uploadPath newFileName); try { file.transferTo(dest); // 返回访问路径需配置静态资源映射或使用云存储URL String accessUrl /upload/ newFileName; return Result.success(accessUrl); } catch (IOException e) { return Result.fail(上传失败); } } }同时需要在配置中允许跨域请求CORS以便小程序前端能访问 API。3. 前端小程序开发基于 Uni-app我们将使用 Uni-app它允许我们使用 Vue 的语法来编写小程序代码。3.1 Uni-app 项目初始化与配置安装 HBuilderX新建 Uni-app 项目选择“默认模板”。项目结构主要包括pages/页面文件。static/静态资源。components/自定义组件。App.vue应用入口。main.js应用配置。manifest.json应用配置如小程序 AppID。pages.json页面路由与样式配置。安装必要的 npm 包如uview-uiUI 组件库和flyio网络请求库。npm install uview-ui flyio在main.js中引入 uView。import uView from uview-ui; Vue.use(uView);3.2 首页与游记列表页实现1. 首页 (pages/index/index.vue)首页通常包含轮播图、导航入口和游记列表。template view classcontainer !-- 轮播图 -- u-swiper :listbannerList height300/u-swiper !-- 分类导航 -- view classcategory-nav view v-foritem in categories :keyitem.value clickswitchCategory(item.value) text :class{active: currentCategory item.value}{{ item.label }}/text /view /view !-- 游记列表 -- view classnote-list view v-foritem in noteList :keyitem.id classnote-item clickgoToDetail(item.id) image :srcitem.coverImage modeaspectFill/image view classinfo text classtitle{{ item.title }}/text view classmeta text{{ item.authorName }}/text text{{ item.createTime }}/text view classcounts u-icon nameeye/u-icon {{ item.viewCount }} u-icon nameheart/u-icon {{ item.likeCount }} /view /view /view /view /view !-- 加载更多 -- u-loadmore :statusloadStatus / /view /template script import { getTravelNotePage } from /api/travelNote.js; export default { data() { return { bannerList: [], // 从后端获取 categories: [ { label: 全部, value: }, { label: 古城漫步, value: gucheng }, { label: 雪山游记, value: xueshan }, // ... ], currentCategory: , noteList: [], pageNum: 1, pageSize: 10, loadStatus: loadmore // loadmore, loading, nomore }; }, onLoad() { this.loadData(); }, onReachBottom() { // 触底加载更多 if (this.loadStatus nomore) return; this.pageNum; this.loadData(); }, methods: { async loadData() { this.loadStatus loading; try { const res await getTravelNotePage({ pageNum: this.pageNum, pageSize: this.pageSize, category: this.currentCategory }); if (this.pageNum 1) { this.noteList res.data; } else { this.noteList [...this.noteList, ...res.data]; } // 判断是否还有更多数据 this.loadStatus res.data.length this.pageSize ? nomore : loadmore; } catch (error) { this.loadStatus loadmore; uni.showToast({ title: 加载失败, icon: none }); } }, switchCategory(category) { this.currentCategory category; this.pageNum 1; this.loadData(); }, goToDetail(id) { uni.navigateTo({ url: /pages/detail/detail?id${id} }); } } }; /script2. 网络请求封装 (utils/request.js)统一处理请求、响应和错误。import Fly from flyio; const request new Fly(); // 请求拦截器添加 token request.interceptors.request.use((request) { const token uni.getStorageSync(token); if (token) { request.headers[Authorization] Bearer ${token}; // 或者根据后端要求如 request.headers[X-User-Id] userId; } return request; }); // 响应拦截器统一处理错误 request.interceptors.response.use( (response) { const res response.data; if (res.code 200) { // 假设成功码为200 return res.data; } else { uni.showToast({ title: res.message || 请求失败, icon: none }); return Promise.reject(new Error(res.message)); } }, (error) { uni.showToast({ title: 网络错误, icon: none }); return Promise.reject(error); } ); // 配置基地址 request.config.baseURL http://localhost:8080/api; // 开发环境生产环境需替换 export default request;3. API 模块化 (api/travelNote.js)import request from /utils/request.js; export function getTravelNotePage(params) { return request.get(/travel-note/page, { params }); } export function getTravelNoteDetail(id) { return request.get(/travel-note/${id}); } export function createTravelNote(data) { return request.post(/travel-note, data); } // ... 其他 API3.3 用户登录与状态管理小程序登录流程需要与后端配合。1. 登录页面逻辑script import { wxLogin } from /api/auth.js; export default { methods: { async handleLogin() { // 1. 调用 uni.login 获取 code const [err, loginRes] await uni.login(); if (err) return; const code loginRes.code; // 2. 调用后端登录接口 try { const token await wxLogin({ code }); // 3. 存储 token 和用户信息 uni.setStorageSync(token, token); // 4. 跳转回原页面或首页 uni.switchTab({ url: /pages/index/index }); } catch (error) { uni.showToast({ title: 登录失败, icon: none }); } } } }; /script2. 全局状态管理简单方案对于中小型项目可以使用 Vue 的globalData或Vue.prototype来共享用户状态。 在App.vue中script export default { globalData: { userInfo: null }, onLaunch() { // 启动时尝试从缓存恢复登录状态 const token uni.getStorageSync(token); if (token) { // 验证 token 有效性并获取用户信息 this.getUserInfo(); } }, methods: { async getUserInfo() { // 调用获取用户信息的接口 // 成功后更新 globalData.userInfo } } }; /script在页面中通过getApp().globalData.userInfo访问。3.4 发布游记与图片上传发布页面涉及表单处理和图片上传。template view classpublish-container u-form :modelform refuForm u-form-item label标题 proptitle u-input v-modelform.title placeholder请输入标题 / /u-form-item u-form-item label封面图 u-upload :fileListcoverList afterReadafterCoverRead maxCount1/u-upload /u-form-item u-form-item label分类 u-select v-modelform.category :listcategoryList/u-select /u-form-item u-form-item label内容 propcontent !-- 使用富文本编辑器组件如 uParse 或自定义 -- textarea v-modelform.content placeholder分享你的旅行故事... / /u-form-item /u-form button clicksubmit发布/button /view /template script import { createTravelNote } from /api/travelNote.js; import { uploadImage } from /api/upload.js; export default { data() { return { form: { title: , category: , content: , coverImage: }, coverList: [], categoryList: [ /* ... */ ] }; }, methods: { // 封面图上传回调 async afterCoverRead(event) { const file event.file; // 调用上传接口 const url await uploadImage(file); this.form.coverImage url; this.coverList [{ url: url }]; }, async submit() { // 表单验证... try { await createTravelNote(this.form); uni.showToast({ title: 发布成功 }); setTimeout(() uni.navigateBack(), 1500); } catch (error) { uni.showToast({ title: 发布失败, icon: none }); } } } }; /script4. 前后端联调、部署与常见问题4.1 联调环境配置与跨域处理开发时前端运行在微信开发者工具或 HBuilderX 的内置服务器如localhost:8081后端运行在localhost:8080存在跨域问题。后端解决Spring Boot 配置 CORSConfiguration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) // 生产环境应指定具体前端域名 .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }前端配置代理HBuilderX 的 manifest.json 或 vue.config.js在manifest.json的h5节点下或创建vue.config.jsmodule.exports { devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, pathRewrite: { ^/api: } } } } }4.2 数据库连接与 MyBatis-Plus 常见问题问题现象可能原因检查与解决Failed to configure a DataSource未配置数据源或配置有误检查application.yml中的spring.datasource配置确保数据库服务已启动。Invalid bound statement (not found)Mapper XML 文件未找到或路径不对1. 检查application.yml中mybatis-plus.mapper-locations配置。2. 检查 Mapper 接口是否被Mapper注解或主类是否有MapperScan。插入数据时create_time未自动填充未配置元对象处理器创建配置类实现MetaObjectHandler重写insertFill和updateFill方法。逻辑删除查询无效未在实体类字段加TableLogic或全局配置不对确认实体类中逻辑删除字段有TableLogic且全局配置logic-delete-value和logic-not-delete-value正确。4.3 小程序端常见问题问题现象可能原因检查与解决真机预览请求失败报request:fail url not in domain list未配置服务器域名登录微信小程序后台在“开发”-“开发设置”-“服务器域名”中配置 request 合法域名需 HTTPS。开发阶段可在开发者工具中勾选“不校验合法域名”。图片上传失败或预览失败图片路径不对或未配置 uploadFile 域名1. 上传图片的接口域名需加入 uploadFile 域名列表。2. 确保后端返回的图片 URL 是完整可访问的。getUserProfile或getUserInfo无法获取用户信息小程序接口权限调整使用button open-typegetUserInfo引导用户授权或在需要时调用wx.getUserProfile。页面样式在 iOS 和 Android 表现不一致平台差异多使用 Flex 布局测试真机。注意rpx单位的兼容性。4.4 项目部署简要指南后端部署使用 Maven 打包mvn clean package -DskipTests。生成target/*.jar文件。在服务器Linux上安装 Java 运行环境JRE 8。上传 jar 包使用命令nohup java -jar your-app.jar app.log 21 后台运行。建议使用 Nginx 反向代理配置 SSL 证书HTTPS 是小程序要求。前端部署小程序在 HBuilderX 或微信开发者工具中点击“发行”-“小程序-微信”。上传代码到微信小程序平台。在微信小程序后台提交审核审核通过后即可发布。数据库建议将本地 MySQL 数据导出在服务器上导入。生产环境务必修改默认密码并考虑定期备份。5. 项目优化与扩展方向一个基础的毕业设计项目完成后可以考虑以下优化点来提升项目的深度和复杂度这也能在答辩时体现你的思考。5.1 性能与体验优化图片处理与云存储本地存储图片有容量和带宽限制。可集成云存储服务如阿里云 OSS、腾讯云 COS并在上传时生成缩略图。缓存策略使用 Redis 缓存首页热点游记列表、用户信息等。例如将热门游记列表缓存 5 分钟减少数据库压力。异步处理将浏览量更新、发送通知等非实时操作放入消息队列如 RabbitMQ或使用 Spring 的Async异步执行。前端骨架屏与懒加载列表页使用骨架屏提升体验图片使用懒加载Uni-app 的image组件有lazy-load属性。5.2 功能扩展搜索优化集成 Elasticsearch 实现全文搜索支持对游记标题、内容、标签进行高效检索。推荐系统基于用户浏览、点赞、收藏行为实现简单的协同过滤或基于内容的推荐。消息通知实现评论回复、点赞通知功能可使用 WebSocket 实现实时推送。管理员后台使用 Vue Element Admin 或 Ant Design Pro 搭建一个独立的管理后台用于内容审核、用户管理、数据统计。地图集成在小程序端集成腾讯地图或百度地图 API让用户发布游记时标记位置并在地图上展示热门游记地点。5.3 安全加固SQL 注入防护MyBatis-Plus 使用预编译语句本身已能防护。但仍需避免在代码中拼接 SQL。XSS 防护用户输入的富文本内容在存储和展示前要进行过滤或转义。接口防刷对登录、短信、评论等接口增加频率限制可使用 Redis 记录 IP 或用户操作次数。敏感信息脱敏日志中不要打印密码、token 等敏感信息。5.4 毕业设计文档与答辩准备一个完整的毕业设计除了代码还需要配套的文档。你的项目应该能清晰阐述以下几点项目背景与意义为什么做丽江旅游分享平台解决了什么痛点需求分析用用例图或功能模块图说明你的系统有哪些角色和功能。系统设计包括技术架构图前端、后端、数据库、核心数据库 E-R 图、关键 API 设计。核心实现展示 1-2 个关键业务流程的代码和说明例如“用户发布游记的数据流转”。测试至少进行功能测试并展示测试用例和结果。有条件可做性能压力测试。总结与展望项目的亮点、不足以及未来可以改进的方向。通过本文的步骤你不仅能够完成“丽江市旅游分享平台小程序”这个具体的毕业设计更重要的是掌握了一套构建 Spring Boot Vue 全栈应用的标准方法。在实际开发中请务必关注日志记录、异常处理、代码规范等工程细节这些是区分“玩具项目”与“可维护项目”的关键。
