SpringBoot+Vue墙绘交易平台：业务设计、订单状态机与前后端联调实战

上个月在整理一批SpringBootVue的项目源码时翻到一个墙绘产品展示交易平台管理系统。原本以为又是一个普通的商品交易后台结果越看越觉得这个选题挺讲究——市面上的管理系统源码十个里有八个是图书管理、学生管理能落到一个具体的垂直行业还要把展示、交易、后台管理完整串起来确实不多。这套系统后端用SpringBootMyBatisMySQL前端用Vue全家桶功能覆盖作品展示、在线下单、后台管理这几个核心闭环拿来写课程设计、毕业设计或者想系统学一遍前后端分离的人都挺合适。这篇文章不打算做成文档式的项目说明书而是想聊几个真正值得琢磨的地方墙绘这个品类对交易流程提出了哪些普通电商没有的要求数据库里的订单状态到底怎么设计才不会乱前后端联调时那些不跑一遍根本发现不了的坑。最后再讲一下拿到源码之后怎么快速把项目跑起来。1. 墙绘交易平台的项目定位这个垂直品类比普通电商多出哪些隐藏需求1.1 三个核心模块谁在看、谁在买、谁在管很多人在看这类项目时习惯把目光直接扎进代码里先翻Controller再翻Mapper。我建议反过来先从业务边界看起。墙绘产品展示交易平台本质上是一个“半展示、半交易”的垂直电商系统它的功能边界通常可以切成三块。第一块是展示端面向的是游客和潜在买家。首页推荐位、作品分类、墙绘案例详情页、多图预览这些负责解决“让用户看到作品、喜欢作品”的问题。墙绘是视觉消费展示端做得够不够精致直接影响用户有没有继续了解下去的欲望。第二块是交易端面向的是真正有墙面装饰需求的客户。购物车或直接下单、填写施工地址和定制需求、支付或定金流程、订单状态跟踪、确认验收这些解决的是“把喜欢变成交易”的问题。普通电商下单只要填个收货地址就行但墙绘交易远不止这一步。第三块是管理端面向的是平台运营者和入驻画师。作品上架、下架、分类管理、创作者信息维护、订单处理、用户管理这些是平台能不能持续运转的后台保障。一个“管理平台”真正值钱的不是CRUD代码本身而是这三块模块的边界切得是否清楚。展示端给游客看交易端给客户用管理端给运营和画师用接口和权限如果混在一起后面每加一个功能都会很难受。1.2 墙绘品类的三个特殊点定制、图片、线下施工墙绘产品和普通商品有三个非常大的差异这几个差异直接决定了数据库和流程设计我专门展开说一下。第一定制属性极强。普通商品是标品用户选择下单就完事了。但墙绘的尺寸常常需要根据实际墙面来定风格也可能要结合家居环境去调整。所以平台在下单环节势必要留出定制需求入口比如墙面尺寸、期望风格、施工时间、预算范围等等。这些字段如果不在设计时留好后面想补会非常痛苦。第二图片是绝对的主角。墙绘作品的效果完全靠照片呈现一个作品往往有多张图从概念图到上墙实拍图画质要求高、数量要求多。这意味着作品表不能只放一个图还需要考虑主图和附图的关系以及前端大图预览的体验。图片上传的存储方式也得提前想好是存本地磁盘还是走对象存储OSS接口设计差别很大。第三带有线下施工环节。墙绘不是“发货”就能完成交易的商品它可能包含量尺、出稿、现场施工、验收等一系列线下动作。这就让订单状态比普通电商复杂很多至少要有“待确认、施工中、待验收、已完成”这么几个环节每个环节该由谁触发、由谁确认都是业务逻辑里必须理清楚的部分。把这三个点想透了再看整个项目的表结构和状态设计就会觉得很多字段不是凭空来的每张表都是为了扛住一个具体的业务问题。1.3 适合谁来学能学到什么如果你是准备写毕业设计或者课程设计的大学生这类项目比“图书管理系统”有优势得多。图书管理只有单纯的人书关系写来写去都是列表和增删改查答辩时很难讲出深度。墙绘平台则天然带有“垂直行业理解”的加分项你可以把定制需求、画师入驻、订单状态机这些东西讲清楚显得你是真的做过业务设计。如果你是工作后想转Java后端、需要拿项目练手的人这套系统也是合适的完整样本。它麻雀虽小五脏俱全从前端的Vue组件化开发到后端的JWT鉴权、动态SQL查询、文件上传再到MySQL表设计每个环节都是日常开发中会反复接触的东西。从这套系统里你能学到的最重要东西其实不是某个酷炫的框架技巧而是一条完整思路拿到一个业务需求之后怎么划分模块、怎么设计表、怎么定接口、怎么让前后端舒服地协作。这套能力比任何单一框架知识都值钱。2. 技术栈分工与选型理由SpringBoot、Vue、MyBatis、MySQL各自的担子与版本陷阱2.1 为什么这个组合直到2025年依然是稳妥之选很多人会问2025年了新技术那么多为什么还在用SpringBootVueMyBatisMySQL这一套答案很简单稳定、够用、资料多、上手快。SpringBoot负责后端服务和业务接口。它简化了Spring的配置流程内嵌Tomcat一个jar包就能跑起来不需要额外部署容器对个人项目和课程设计非常友好。它的自动配置机制也让开发者不用整天跟XML配置搏斗。Vue负责前端页面和交互。组件化开发让页面复用变得很轻松比如作品卡片组件在首页用一次、在搜索结果页又用一次写一遍就能到处用。Vue的响应式系统也符合中后台系统的开发习惯数据一变页面自动更新不用手动操作DOM。MyBatis负责数据库操作。它是一个半自动ORM框架SQL还是要自己写的但结果映射给你封装好了。刚接触时觉得手写SQL麻烦实际做多了会发现复杂查询反而更可控。尤其是墙绘平台这种需要多条件动态拼SQL的场景手写SQL的灵活性是那些全自动ORM比不了的。MySQL负责最终落数据。免费、稳定、安装教程遍地都是学生系统、中小型项目用它完全没有瓶颈。这四样组合在一起恰好就是国内JavaWeb岗位最常用的一套技能栈。学完这套东西你出去面试聊项目时面试官不会有陌生感你聊到的每个技术名词他都能马上接上话。2.2 原生MyBatis与MyBatis-Plus拿到源码先看这个再决定改哪套这个项目标题里写的是MyBatis不是MyBatis-Plus这是一个需要留意的信息。市面上同类的SpringBootVue项目有的用了MyBatis-Plus的BaseMapper有的用原生MyBatis手写XML。用原生MyBatis的项目SQL会写在XML文件里动态查询的写法更直观但增删改查的样板代码确实多一点。拿到的源码如果走的是原生MyBatis我建议别急着改成MyBatis-Plus先跑通再说。MyBatis的XML动态SQL在复杂查询场景下非常灵活墙绘作品的筛选条件多——风格、场景、尺寸、价格区间、关键词——这些条件组合起来用原生XML的where加if标签拼SQL思路特别清晰。分页是这类项目必用的功能。MyBatis体系里最常见的分页方案是PageHelper插件用法很简单PageHelper.startPage(pageNum, pageSize); ListWallPaintingVO list wallPaintingMapper.selectByCondition(query); PageInfoWallPaintingVO pageInfo new PageInfo(list);startPage之后紧跟的第一条查询会被自动拦截拼接limit语句查完之后用PageInfo取总条数、总页数这些信息。需要注意一个老坑startPage后面只能紧跟一条Mapper查询中间如果夹了别的查询分页会跑到那条查询上数据就乱了。MyBatis的缓存也从得从“选型”的角度被理解。一级缓存默认是SqlSession级别的同一个会话里重复查同一条SQL会命中缓存二级缓存默认关闭开启后是Mapper级别的。在实际个人项目里二级缓存我是不建议开的因为墙绘作品和订单数据更新频率并不低一旦缓存和数据库数据不一致又没人注意到比慢一点更麻烦。2.3 Vue2还是Vue3、Element UI还是Element Plus先看package.json再动手这套源码如果写得比较早很可能是Vue2Element UI的组合如果是2025年整理的新版本大概率已经切到Vue3Element Plus了。拿到源码第一步先打开前端目录下的package.json确认vue、element-ui或element-plus、vue-router、axios这些核心依赖的版本再决定后续的安装操作。为什么这个东西值得强调因为Vue2和Vue3的生态环境差挺大的。很多老项目用的node-sass在较新的Node版本下装都装不上得换成dart-sassElement UI的组件在Vue3里没法直接用必须用Element Plus而且部分组件的API还有变化。如果一上来盲目npm install很可能被一堆红字报错搞得心态崩了。我的习惯是拿到项目先看依赖再核对自己机器上的Node版本最后才动手安装依赖。Node版本和依赖版本匹配这件事值得多花几分钟提前确认比事后排查半天省事得多。3. 数据库设计复盘墙绘作品画像、订单状态机与定制需求字段3.1 核心表划分用户、作品、订单各管一摊这类交易平台的数据库设计通常会围绕五张左右的核心表展开用户表、作品表、订单表、分类表或者不做单独表直接字段、以及可能是订单附属信息表。表不在多关键是每张表能不能承载完整的业务信息。用户表最简单但背后的角色模型要想清楚。墙绘平台至少有三种用户角色普通买家、入驻画师、平台管理员。简单做法是表里放一个role字段用字符串或数字区分角色拦截器里判断权限。如果做成角色权限系统那就要拆出角色表、用户角色关联表、权限表复杂度会上一个台阶。个人项目建议先用role字段撑住够用了。作品表是整个平台的核心资产需要重点设计订单表是交易链路的主干状态字段一定要严谨。这两张表我单独展开讲。3.2 作品表墙绘不只是“商品”它是一张带尺寸和场景的画墙绘作品表的设计比普通商品表要多考虑几个维度。拿我拆解这套源码时的理解来说核心字段至少包括以下这些字段含义为什么要设计它id作品唯一编号主键所有关联的入口title作品名称列表和详情页展示cover_url封面图地址列表页卡片缩略图加载速度比大图有要求images附图地址集合详情页多图轮播JSON数组或逗号分隔style风格标签现代简约、欧式、中国风、儿童卡通等筛选核心维度scene适用场景客厅、卧室、餐厅、商业空间等另一个筛选维度size参考尺寸墙绘按面积算价值尺寸字段影响询价和定制判断price参考价格交易核心字段注意区分一口价还是起价artist_id创作者ID关联到画师用户展示“创作者”信息status上架状态0下架 1上架管理端审核控制容易忽略的一个点是images字段的设计。把多张图片存成一个字段查询简单、写入方便但如果以后要针对单张图做管理比如删除某一张、给某张图补水印就会发现这个设计很别扭。我自己更倾向单独建一张作品图片表主从结构一拆操作空间就大了。不过个人项目用JSON字符串也能接受成本低逻辑直观。还有分类问题。墙绘作品风格之间没有严格界限一个作品可能既算“现代风”又算“抽象风”。用单独分类表加关联关系固然标准但在课程设计这个层面用字段存风格标签、再配合模糊查询实现起来更轻盈也够用。先能跑再说优雅。3.3 订单状态机从下单到验收一共有几个状态订单表是交易系统的神经中枢。墙绘平台的订单状态不能简单照搬电商的“待付款、待发货、待收货、已完成”因为多了线下施工环节状态至少要拆成这样状态编码含义谁来触发0待付款用户提交订单后1待确认用户付款后等待画师/平台确认是否接单和上门量尺2施工中量尺完成、方案确认后开始现场绘制3待验收施工完成等待用户确认效果4已完成用户验收通过订单闭环5已取消用户或平台取消购买流程终止这样设计的原因很实际墙绘交易不是“线上一手交钱一手交货”就结束的中间有大量线下沟通和现场工作。状态字段如果不把“待确认”“施工中”“待验收”这些环节撑出来画师和买家都会处于一种说不清进度到哪了的尴尬状态。订单表里还要留几个容易被忽视的字段custom_remark存定制需求备注大概率是“墙面多大、想要什么风格、什么时候能施工”这类信息contact_address存施工地址appointment_time存期望施工时间order_no存业务订单号用时间戳加随机数生成避免直接暴露自增ID。订单状态流转的后端校验也很重要不能让接口随便跳状态。最简单的做法是在Service层写一个状态流转校验方法只允许合法的变化路径比如“施工中”不能直接跳回“待付款”必须走验收或取消分支。这种细节往往是答辩时能讲出东西来的地方。4. 后端核心代码拆解JWT登录、动态SQL查询、分页与全局过滤器4.1 登录鉴权小项目用JWT拦截器就够了用户登录、后台权限控制是管理系统绕不开的功能。很多教程一上来就推Spring Security但个人项目里我建议谨慎评估。Spring Security功能非常强大但概念也足够多搞不清楚配置很容易被它绕晕。墙绘平台这种量级的系统用JWT生成令牌配合一个拦截器做登录校验完全够用。每次登录成功后后端把用户ID、用户名、角色等信息加密进Token里前端把Token存起来每次请求放在请求头里带过去拦截器负责解密和校验身份。整个链路清晰出了问题也好排查。JWT的核心代码如下String token Jwts.builder() .setSubject(user.getUsername()) .claim(role, user.getRole()) .claim(userId, user.getId()) .setExpiration(new Date(System.currentTimeMillis() 7 * 24 * 3600 * 1000)) .signWith(SignatureAlgorithm.HS256, secretKey) .compact();拦截器里做的事情就是取出请求头的Authorization字段解析Token把用户信息放到ThreadLocal里供后续使用。管理端接口再判断一下角色是不是管理员不是就返回403。这套组合拳对个人项目来说性价比很高。4.2 动态SQL查询墙绘筛选条件多手写where比注解拼字符串更省心墙绘作品的筛选条件至少包含关键词、风格、场景、价格区间、上架状态五个维度。最难处理的是这些条件用户可能只填一部分只选了风格、价格为空或者只搜了关键词、风格没选。这时候用固定SQL会非常别扭动态SQL才是正解。MyBatis的XML里用where加if可以优雅解决select idselectByCondition resultTypecom.example.vo.WallPaintingVO select * from wall_painting where if testkeyword ! null and keyword ! and title like concat(%, #{keyword}, %) /if if teststyle ! null and style ! and style #{style} /if if testscene ! null and scene ! and scene #{scene} /if if testminPrice ! null and price gt; #{minPrice} /if if testmaxPrice ! null and price lt; #{maxPrice} /if and status 1 /where order by create_time desc /select这里最关键的是where标签会自动处理第一个条件前面的and不用写“where 11”这种丑写法。gt;和lt;是XML里大于等于和小于等于的转义写法这个细节很容易忘记写错了还会报SQL语法错误。我在整理这套源码时发现很多初学者喜欢把条件拼接放在Java代码里用字符串一层层拼SQL既难读也不安全。改成XML动态SQL之后维护起来舒服多了这也是原生MyBatis值得坚持用的原因。4.3 分页和图片上传项目中最容易翻车的两个地方分页的逻辑上面已经提到用PageHelper是最快的路。但要注意分页插件拦截的是SQL如果查询后面还跟了其他Mapper操作分页会出错。所以原则就是startPage后面紧跟目标查询中间不插任何别的数据库操作。图片上传这块墙绘平台绕不开。因为作品图质量普遍比较高对存储方式和上传接口都有要求。课程设计级的项目最常见的方案是MultipartFile接收文件、保存到本地磁盘指定目录、再把访问路径返回给前端。PostMapping(/upload) public Result upload(RequestParam(file) MultipartFile file) { if (file.isEmpty()) { return Result.error(请选择文件); } String originalFilename file.getOriginalFilename(); String extName originalFilename.substring(originalFilename.lastIndexOf(.)); String fileName UUID.randomUUID() extName; String savePath uploadDir fileName; file.transferTo(new File(savePath)); String visitUrl /upload/ fileName; return Result.success(visitUrl); }这里最容易踩的坑是路径问题。如果上传目录不存在transferTo会直接报错另外SpringBoot默认不会把本地磁盘目录映射成可访问的静态路径要么在配置类里加一个资源映射器要么在application.yml里配置StaticResourceLocation。很多项目跑起来之后图片裂了十有八九就是这一环漏了。配置一个资源映射器的代码不算复杂Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/upload/**) .addResourceLocations(file: uploadDir); }这样前端就能通过/upload/xxx.jpg直接访问到图片文件了。4.4 顺手加一个XSS全局过滤器关系不大但很有用整理项目时如果看到“全局过滤器”“XSS攻击”这些关键词建议顺手把代码捋一遍不要跳过。墙绘平台的管理端有作品标题、描述、分类名等多个文本录入入口这些内容会渲染在前端页面上如果不做过滤很容易留下XSS注入的口子。常规做法是写一个OncePerRequestFilter对请求体里的参数做一层转义处理把script、onerror这类危险内容过滤掉。具体实现可以基于Jsoup的clean方法把HTML标签白名单之外的都清洗掉。简单项目的重点是只要你在拦截器链条里加了过滤器所有请求参数都会过一遍配置成本很低但安全收益是实实在在的。答辩时能主动提到XSS防护是加分项。5. 前端页面与交互实现路由传参、Axios拦截、图片预览与跨域代理5.1 页面到底拆几张前台四页、后台一区前端页面的组织决定了项目的骨架是否清晰。这套墙绘平台的前端我建议按“前台展示”和“后台管理”两个大类来组织。前台至少有四类页面首页、作品列表页、作品详情页、订单结算或个人中心页。首页放轮播图和推荐作品列表页支持条件筛选和分页详情页是重头戏多图轮播、创作者信息、定制需求表单都在这一页订单结算页则引导用户确认商品信息、填写定制需求、生成订单。后台管理区的页面可以有作品管理页、分类管理页、订单管理页、用户管理页。这四块的布局高度相似都可以复用同一个管理框架模板只是表格列和表单字段不同。Vue的组件化在这里的价值会体现得很明显一个ImageUpload组件前台后台都能用。5.2 路由传参的坑params和query别混用作品列表页跳转详情页是最高频的路由跳转。很多小白在这里写串过我也一样。Vue Router里传参有两种方式params结合动态路由使用query像URL查询参数一样暴露在地址栏里。// 第一种params 动态路由 this.$router.push({ name: productDetail, params: { id: 1 } }) // 路由定义{ path: /product/:id, name: productDetail } // 第二种query this.$router.push({ path: /product, query: { id: 1 } })params传参的优势是短、干净缺点是刷新页面后参数会丢必须配合动态路由从路径里再取一遍query传参则会把参数明晃晃挂在URL上分享链接的时候参数还在但看起来不够清爽。我的习惯是详情页用动态路由加params方式列表页的筛选条件用query方式传这样前端刷新后筛选项还能保留。这些细节不用记太多只要知道两种方式什么时候用、各有什么代价就行。5.3 Axios封装和路由守卫token丢了就跳登录前端的鉴权逻辑一般通过Axios二次封装加路由守卫来完成。Axios封装要做两件事请求拦截器统一加Token响应拦截器统一处理错误。// 请求拦截器每次请求自动带上 token service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config }) // 响应拦截器token失效时统一踢回登录页 service.interceptors.response.use( response response.data, error { if (error.response error.response.status 401) { localStorage.removeItem(token) router.push(/login) } return Promise.reject(error) } )路由守卫则是把拦截逻辑写在跳转之前比如后台管理页面必须在已登录状态下才能访问router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next(/login) } else { next() } })这套组合拳做下来前端就不会出现“没登录硬闯后台”“Token过期还在调接口”的尴尬情况了。5.4 作品图片预览与保护展示效果和原图保护的权衡墙绘作品图是平台的核心资产前端展示既要效果好也要考虑一定程度上的保护。页面里可以用Element UI的el-image组件配合preview-src-list属性实现点击缩略图弹出大图预览代码很少体验却很好。el-image :srccoverUrl :preview-src-listimageList fitcover /el-image关于原图保护我个人的体会是课程设计层面不必过度追求防盗链、加密那些重型方案但有两个低成本的做法可以做。一是上传时压缩生成缩略图列表页只加载小图详情页再加载大图二是前端给图片加水印或者在后端输出图片地址时不暴露原路径。这些手段虽然挡不住真正想盗图的人但能挡住大部分顺手牵羊的行为同时也说明你考虑到了画师作品版权的问题。6. 从源码到本地跑通环境准备与最容易翻车的三个环节6.1 环境版本建议表写这类源码分享时最怕的一件事就是环境不兼容。我把自己跑通类似项目时的环境版本整理出来供参考软件推荐版本备注JDK1.8 或 11老项目建议JDK8新项目可用JDK11Maven3.6.3用IDEA自带Maven也行MySQL5.7 或 8.08.0更常见注意utf8mb4字符集Node.js14.x ~ 18.x太新的Node可能和旧依赖冲突npm源阿里云镜像国内下载依赖快很多前端包管理器npm 或 pnpm看项目本身用哪个锁文件如果你用的是MySQL 8.0连接驱动要配合com.mysql.cj.jdbc.DriverserverTimezoneAsia/Shanghai这个参数也要写上否则会报时区错误。6.2 后端启动三步建库、改配置、跑起来后端跑通的步骤非常简单但每一步都有要注意的细节。第一步建库导数据。用Navicat或命令行执行项目里的SQL文件先创建数据库再导入表结构和初始化数据。注意看SQL文件开头是CREATE DATABASE还是只建表不带建库语句如果是后者需要手动先建一个同名的库再导入。第二步改配置。打开application.yml把数据库地址、账号、密码改成本地的。如果源码里还配置了文件上传路径把upload-dir改成你本机的绝对路径并且确保这个目录已存在。很多人卡在这一步其实就是一个斜杠的问题。第三步启动。IDEA里右键运行Application类看到Spring Boot的启动日志打印出来没有红色ERROE后端就差不多了。然后用浏览器直接访问后端接口地址能返回JSON就说明启动成功。还有一个小细节Maven下载依赖时如果很慢记得在settings.xml里配置阿里云镜像。这个不配置等待时间可能会让人怀疑人生。6.3 前端启动三步装依赖、配代理、跑起来前端流程同样三步。第一步npm install。进入前端目录执行安装命令。如果报node-sass相关的错大概率是Node版本太新或者node-sass本身不兼容解决方法是卸载node-sass装dart-sass然后重新install。如果项目用的是package-lock.json直接按锁文件装一般最稳。第二步配置代理。开发环境下前端跑在5173或8080端口后端跑在8080端口两者之间会产生跨域问题。前端项目里通常有一个vue.config.js里面会配devServer的proxymodule.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }这样前端请求/api/...的接口会被代理转发到后端8080端口跨域问题就解决了。如果没有vue.config.js也可以在后端配置CORS跨域两种方案二选一。第三步npm run dev。启动之后看控制台输出的访问地址打开浏览器访问。如果页面能正常加载出作品数据说明前后端联调成功整个项目就通了。6.4 最容易翻车的三个环节跑通之后回头复盘翻车点主要集中在三个地方。第一个是端口冲突。后端的8080端口很容易被别的Java进程占用启动时报“Port 8080 was already in use”。解决方式很简单改后端端口或者找到占用进程杀掉。前端SpringBoot改端口记得同步改前端代理配置。第二个是MySQL连接失败。密码错了、库没创建、时区没配、驱动类加载不了这四种情况各有各的报错。建议把报错信息完整贴到搜索引擎里比盯着控制台猜更高效。排查时先确认数据库能直连再谈项目连接的事情。第三个是图片上传后404。这个上面埋过伏笔十有八九是没配资源映射器或者上传目录没有创建。只要在配置类里加好/upload/**指向本地磁盘的映射图片就能正常访问了。如果你是想拿这套源码做毕业设计我强烈建议你在跑通之后花两天时间把关键流程从头到尾走一遍注册一个用户登录浏览作品下一个订单去后台把订单状态改一遍。这个流程走完你对整个系统的理解会比只看代码深得多。答辩的时候老师问什么你都不虚。