基于springboot+vue的商城/体育用品商城/衣服商城系统(前后端分离)

项目技术：

系统使用技术：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-modaltitle="轮播图和商品介绍":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>

以上就是部分功能展示，从整体上来看，本系统功能是十分完整的，而且也与当前的热点话题关联，界面设计简洁大方，交互友好，数据库设计也很合理，规模适中，比较适合毕业设计和课程设计的相关应用。

好了，今天就到这儿吧，小伙伴们点赞、收藏、评论，一键三连走起呀，下期见~~