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