一、运行环境与开发工具​1.运行环境Java版本需≥8建议使用 Java JDK 1.8该版本经过实测运行稳定其他版本理论上也能兼容。​MySQL版本需≥5.75.7 或 8.0 版本均可正常使用。​Node.js版本需≥14特别提醒若未学习过 Node.js不建议尝试该前后端分离项目以免在搭建和运行过程中遇到困难。2.开发环境后端eclipse、idea、myeclipse、sts 等开发工具都可完成配置运行其中 IDEA 凭借强大的功能和便捷的操作是推荐使用的开发工具。​前端WebStorm、VSCode、HBuilderX 等工具均适用可根据个人使用习惯选择。​二、环境要求​运行环境优先选择 Java JDK 1.8系统在该平台上完成了大量测试运行稳定性最佳。​IDE 环境IDEA、Eclipse、Myeclipse 等均能满足开发需求IDEA 在智能代码补全 、项目管理等方面表现出色更受开发者青睐。​硬件环境Windows 7/8/10 系统内存 1G 以上即可Mac OS 系统同样支持。​数据库MySql 5.7 或 8.0 版本都能正常使用可根据实际情况选择。​项目类型本项目是 Maven 项目方便进行项目依赖管理和构建。​三、技术栈​后端基于 SpringBoot 框架进行快速开发结合 MyBatis 实现数据持久化操作高效处理业务逻辑与数据库交互。​前端采用 Vue 构建用户界面搭配 ElementUI 组件库打造美观、易用的交互界面。​四、功能页面展示五、部分代码展示/** * 登录 */ IgnoreAuth PostMapping(value /login) public R login(String username, String password, String captcha, HttpServletRequest request) { UserEntity user userService.selectOne(new EntityWrapperUserEntity().eq(username, username)); if(usernull || !user.getPassword().equals(password)) { return R.error(账号或密码不正确); } String token tokenService.generateToken(user.getId(),username, users, user.getRole()); return R.ok().put(token, token); } /** * 注册 */ IgnoreAuth PostMapping(value /register) public R register(RequestBody UserEntity user){ // ValidatorUtils.validateEntity(user); if(userService.selectOne(new EntityWrapperUserEntity().eq(username, user.getUsername())) !null) { return R.error(用户已存在); } userService.insert(user); return R.ok(); } /** * 退出 */ GetMapping(value logout) public R logout(HttpServletRequest request) { request.getSession().invalidate(); return R.ok(退出成功); } /** * 密码重置 */ IgnoreAuth RequestMapping(value /resetPass) public R resetPass(String username, HttpServletRequest request){ UserEntity user userService.selectOne(new EntityWrapperUserEntity().eq(username, username)); if(usernull) { return R.error(账号不存在); } user.setPassword(123456); userService.update(user,null); return R.ok(密码已重置为123456); }el-table-column label索引 v-ifcontents.tableIndex typeindex width50 / el-table-column :sortablecontents.tableSortable :aligncontents.tableAlign propyonghuming header-aligncenter label用户名 template slot-scopescope {{scope.row.yonghuming}} /template /el-table-column el-table-column :sortablecontents.tableSortable :aligncontents.tableAlign propmima header-aligncenter label密码 template slot-scopescope {{scope.row.mima}} /template /el-table-column el-table-column :sortablecontents.tableSortable :aligncontents.tableAlign propxingming header-aligncenter label姓名 template slot-scopescope {{scope.row.xingming}} /template /el-table-column el-table-column :sortablecontents.tableSortable :aligncontents.tableAlign propxingbie header-aligncenter label性别 template slot-scopescope {{scope.row.xingbie}} /template /el-table-column el-table-column :sortablecontents.tableSortable :aligncontents.tableAlign proptouxiang header-aligncenter width200 label头像 template slot-scopescope div v-ifscope.row.touxiang img :srcscope.row.touxiang.split(,)[0] width100 height100 /div div v-else无图片/div /template /el-table-column el-table-column :sortablecontents.tableSortable :aligncontents.tableAlign propshenfenzheng header-aligncenter label身份证 template slot-scopescope {{scope.row.shenfenzheng}} /template /el-table-column el-table-column :sortablecontents.tableSortable :aligncontents.tableAlign propshouji header-aligncenter label手机 template slot-scopescope {{scope.row.shouji}} /template /el-table-column el-table-column :sortablecontents.tableSortable :aligncontents.tableAlign propyouxiang header-aligncenter label邮箱 template slot-scopescope {{scope.row.youxiang}} /template /el-table-column el-table-column :sortablecontents.tableSortable :aligncontents.tableAlign propdizhi header-aligncenter label地址 template slot-scopescope {{scope.row.dizhi}} /template /el-table-column el-table-column width300 :aligncontents.tableAlign header-aligncenterspan :style{padding:0 12px 0 0,minWidth:94px,fontSize:14px,color:rgba(19, 175, 105, 1),textAlign:left}商品类型/span span :style{padding:5px 15px,boxShadow:0 0 0px #FF9012,borderColor:rgba(0,0,0,.3),backgroundColor:#fff,color:#333,borderRadius:4px,textAlign:left,borderWidth:0,width:auto,lineHeight:auto,fontSize:14px,borderStyle:solid} classdesc {{detail.shangpinleixing}} /span /div div :style{padding:6px 15px,boxShadow:0 0 6px rgba(255,0,0,0),margin:0,borderColor:rgba(203, 169, 169, 0.3),backgroundColor:#fff,borderRadius:0,borderWidth:0 0 1px 0,borderStyle:solid} classdetail-item span :style{padding:0 12px 0 0,minWidth:94px,fontSize:14px,color:rgba(19, 175, 105, 1),textAlign:left}价格/span span :style{padding:5px 15px,boxShadow:0 0 0px #FF9012,borderColor:rgba(0,0,0,.3),backgroundColor:#fff,color:#333,borderRadius:4px,textAlign:left,borderWidth:0,width:auto,lineHeight:auto,fontSize:14px,borderStyle:solid} classdesc {{detail.jiage}} /span /div div :style{padding:6px 15px,boxShadow:0 0 6px rgba(255,0,0,0),margin:0,borderColor:rgba(203, 169, 169, 0.3),backgroundColor:#fff,borderRadius:0,borderWidth:0 0 1px 0,borderStyle:solid} classdetail-item span :style{padding:0 12px 0 0,minWidth:94px,fontSize:14px,color:rgba(19, 175, 105, 1),textAlign:left}活动时间/span span :style{padding:5px 15px,boxShadow:0 0 0px #FF9012,borderColor:rgba(0,0,0,.3),backgroundColor:#fff,color:#333,borderRadius:4px,textAlign:left,borderWidth:0,width:auto,lineHeight:auto,fontSize:14px,borderStyle:solid} classdesc {{detail.huodongshijian}} /span /div div :style{padding:6px 15px,boxShadow:0 0 6px rgba(255,0,0,0),margin:0,borderColor:rgba(203, 169, 169, 0.3),backgroundColor:#fff,borderRadius:0,borderWidth:0 0 1px 0,borderStyle:solid} classdetail-item