项目技术：
系统使用技术：SpringBoot+Spring Data Jpa
前端技术：Ant Design、js、css
开发工具：idea/vscode
数据库：mysql5.7
项目介绍：
本系统是一个前后端分离的商城系统，适用于课题：前后端分离、商城、体育用品商城、手机商城、服饰商城等各类商城系统，含有详细的数据库设计文档，以及系统介绍，只需要替换商品信息及系统标题即可。系统采用springboot+vue整合开发，前端主要使用了Vue框架、Ant Design技术，项目后端主要使用了springboot等一系列框架，数据层采用Spring Data Jpa。
功能概述：
轮播图展示管理、商品分类展示管理、商品展示管理、商品搜索、推荐商品管理展示、订单管理、购物车管理、登录注册、商品评论展示、商品详情信息展示、商品介绍跑马灯。
文档详情：
部分功能展示：
系统登录：
系统前台首页
查看系统首页，显示不同分类，以及推荐商品
分类查看商品
根据分类查看商品
商品详情
查看商品详情
购物车
选中商品后可以将商品加入购物车
我的订单
可以查看个人订单信息，以及不同状态
评价
商品收货成功后，可以进行评价
个人中心
更新个人信息
后台-分类管理
维护分类信息
后台-商品管理
维护商品信息，可以添加商品
后台-订单管理
查看订单信息，可以进行发货操作
后台-轮播图管理
维护首页轮播图
部分代码：
后端代码，含注释：
/** * 获取所有轮播图 * * @param type 类型 * @return ResponseEntity */ @GetMapping("/carousels") public ResponseEntity<?> getAll(@RequestParam(required = false, defaultValue = "-1") int type) { return RestModel.ok(carouselService.getAll(type)); } /** * 添加走马灯 * * @param loginUser 登录用户 * @param url URL * @param link 链接 * @param type 类型 * @return ResponseEntity */ @PostMapping("/carousel") public ResponseEntity<?> add(@MustAdminLogin LoginUser loginUser, @RequestParam String url, @RequestParam String link, @RequestParam int type) { return RestModel.created(carouselService.add(url, link, type)); } /** * 删除走马灯 * * @param loginUser 登录用户 * @param id ID * @return ResponseEntity */ @DeleteMapping("/carousel/{id}") public ResponseEntity<?> del(@MustAdminLogin LoginUser loginUser, @PathVariable String id) { carouselService.del(id); return RestModel.noContent(); }
前端代码：
<template> <div> <p>商品共计：{{pagination.totalElements}} <a-button type="link" @click="$router.push('/admin/product_new').catch(error=>{})">新增商品</a-button> </p> <AdminProductItem v-for="item in data" :key="item.id" :id="item.id" :img="item.imgMain" :title="item.name" :time="item.time" :price="item.price" :stock="item.stock" :type="item.commodityType" :recommended="item.recommended" :productType="productType" @change="handleSave" @del="handleDel" @btnClick="handleClick"/> <div class="product-pagination"> <a-pagination showSizeChanger @showSizeChange="onShowSizeChange" @change="onPageChange" :total="pagination.totalElements" /> </div> <div> <a-modal title="轮播图和商品介绍" :visible="modify.visible" @ok="handleOk" :confirmLoading="modify.confirmLoading" @cancel="handleModalClose" > <div style="margin:12px 0"> <p>轮播图设置：</p> <div style="margin-bottom: 12px" v-for="(item,index) in modify.imgSecondArray"> <a-input placeholder="轮播图片" style="width: 90%" v-model="modify.imgSecondArrayNew[index]"/> <a-icon type="close" style="margin-left: 6px" @click="modify.imgSecondArrayNew.splice(index,1)"/> </div> <a-button type="primary" @click="handleAddInput">添加轮播图</a-button> </div> <div> <p>商品介绍：</p> <a-textarea v-model="modify.detail"/> </div> </a-modal> </div> </div> </template>
以上就是部分功能展示，从整体上来看，本系统功能是十分完整的，而且也与当前的热点话题关联，界面设计简洁大方，交互友好，数据库设计也很合理，规模适中，比较适合毕业设计和课程设计的相关应用。
