前言

??該系統采用SpringBoot+Vue前后端分離開發，前端是一個單獨的項目，后端是一個單獨的項目。
??技術棧：SpringBoot+Vue+Mybatis+Redis+Mysql
??開發工具：IDEA、Vscode
??瀏覽器：Chrome
??開發環境：JDK1.8、Maven3.3.9、Node 16.6.0、MySql 5.7

一、功能劃分

1、用戶功能

2、管理員功能

二、頁面展示部分

1、注冊登錄

2、系統首頁

3、商品分類頁面

4、購物車頁面

5、訂單頁面

6、個人信息頁面

7、后臺頁面

三、系統源碼

1、前端

前端項目結構

部分核心代碼

<!--* 前臺首頁 相關內容** @Author: ShanZhu* @Date: 2023-11-11
-->
<template><div><search @search="handleSearch"></search><div class="main-box"><div class="block" style="margin: 10px auto"><!--商品分類--><div class="good-menu"><ul v-for="(item, index) in icons" :key="index"><li><i class="iconfont" v-html="item.value"></i><!--跳轉到商品分類對應列表--><span v-for="(category, index2) in item.categories" :key="index2"><router-link:to="{path: '/goodlist',query: { categoryId: category.id },}"><a href="/person"><span style="color: #3186cb">{{ category.name }}</span></a></router-link><span v-if="index2 != item.categories.length - 1">/</span></span></li></ul></div><!--輪播圖--><div><el-carousel height="370px" style="border-radius: 20px; width: 600px"><el-carousel-item v-for="carousel in carousels" :key="carousel.id"><router-link :to="'/goodview/' + carousel.goodId"><img style="height: 370px; width: 600px":src="baseApi + carousel.img"/></router-link></el-carousel-item></el-carousel></div></div><!--推薦商品--><div style="margin-top: 30px"><span style="color: #e75c09">推薦商品</span></div><div style="margin: 20px auto"><el-row :gutter="20"><el-col:span="6"v-for="good in good":key="good.id"style="margin-bottom: 20px"><router-link :to="'goodview/' + good.id"><el-card :body-style="{ padding: '0px', background: '#3472a6' }"><img:src="baseApi + good.imgs"style="width: 100%; height: 300px"/><div style="padding: 5px 10px"><!--商品名稱--><span style="font-size: 18px; color: #ffffff">{{ good.name }}</span><br/><!--商品價格--><span style="color: #ffffff; font-size: 15px">￥{{ good.price }}</span></div></el-card></router-link></el-col></el-row></div></div></div>
</template><script>
import search from "../../components/Search";
export default {name: "TopView",//頁面初始化數據data() {return {//輪播圖carousels: [],//推薦商品good: [],baseApi: this.$store.state.baseApi,//分類icon，每個icon包含id、value、categories對象數組.category：id，nameicons: [],//搜索內容searchText: "",baseApi: this.$store.state.baseApi,};},components: {search,},//頁面創建created() {this.request.get("/api/good").then((res) => {if (res.code === "200") {this.good = res.data;} else {this.$message.error(res.msg);}});this.request.get("/api/icon").then((res) => {if (res.code === "200") {this.icons = res.data;if(this.icons.length > 6) {// 截取前六個分類this.icons = this.icons.slice(0, 6);}}});this.request.get("/api/carousel").then((res) => {if (res.code === "200") {this.carousels = res.data;}});},//方法methods: {//搜索按鈕觸發handleSearch(text) {this.searchText = text;this.$router.push({path: "/goodList",query: { searchText: this.searchText },});},},
};</script><style scoped>
.main-box {background-color: white;border: white 2px solid;border-radius: 40px;padding: 20px 40px;margin: 5px auto;
}
.good-menu {float: left;height: 370px;margin-right: 130px;
}
.good-menu li {list-style: none;overflow: hidden;margin-bottom: 35px;
}
.good-menu li a,
span {font-size: 20px;color: #6c6969;
}
.good-menu a span:hover {color: #00b7ff;
}
</style>

2、后端

項目結構

核心代碼

/*** 商品 控制層** @author: ShanZhu* @date: 2023-11-10*/
@RestController
@RequestMapping("/api/good")
@RequiredArgsConstructor
public class GoodController {private final GoodService goodService;private final StandardService standardService;/*** 查詢商品** @param id 商品id* @return 商品*/@GetMapping("/{id}")public R<Good> findGood(@PathVariable Long id) {return R.success(goodService.getGoodById(id));}/*** 查詢商品規格** @param id 商品規格id* @return 商品規格*/@GetMapping("/standard/{id}")public R<String> getStandard(@PathVariable Integer id) {return R.success(goodService.getStandard(id));}/*** 查詢推薦商品，即recommend=1** @return 商品*/@GetMappingpublic R<GoodVo> findFrontGoods() {return R.success(goodService.findFrontGoods());}/*** 商品銷售額排行** @return 商品*/@GetMapping("/rank")public R<List<Good>> getSaleRank(@RequestParam int num) {return R.success(goodService.getSaleRank(num));}/*** 保存商品** @param good 商品信息* @return 商品id*/@PostMappingpublic R<Long> save(@RequestBody Good good) {return R.success(goodService.saveOrUpdateGood(good));}/*** 更新商品** @param good 商品信息*/@PutMappingpublic R<Void> update(@RequestBody Good good) {goodService.update(good);return R.success();}/*** 刪除商品** @param id 商品id*/@DeleteMapping("/{id}")public R<Void> delete(@PathVariable Long id) {goodService.loginDeleteGood(id);return R.success();}/*** 保存商品規格** @param standards 商品規格列表* @param goodId    商品id*/@PostMapping("/standard")public R<Void> saveStandard(@RequestBody List<Standard> standards,@RequestParam int goodId) {//先刪除全部舊記錄standardService.deleteAll(goodId);//然后插入新記錄for (Standard standard : standards) {standard.setGoodId(goodId);if (!standardService.save(standard)) {return R.error(Status.CODE_500, "商品id: " + goodId + " ,規格保存失敗");}}return R.success();}/*** 刪除商品規格** @param standard 商品規格列表*/@DeleteMapping("/standard")public R<Void> delStandard(@RequestBody Standard standard) {if (BooleanUtil.isTrue(standardService.delete(standard))) {return R.success();} else {return R.error(Status.CODE_500, "刪除失敗");}}/*** 修改商品推薦** @param id          商品id* @param isRecommend 是否推薦* @return 結果*/@GetMapping("/recommend")public R<Void> setRecommend(@RequestParam Long id,@RequestParam Boolean isRecommend) {return R.success(goodService.setRecommend(id, isRecommend));}/*** 分頁查詢商品 - 帶查詢條件** @param pageNum    頁數* @param pageSize   分頁大學* @param searchText 查詢文本* @param categoryId 分類id* @return 商品列表*/@GetMapping("/page")public R<IPage<GoodVo>> findGoodPage(@RequestParam(required = false, defaultValue = "1") Integer pageNum,@RequestParam(required = false, defaultValue = "10") Integer pageSize,@RequestParam(required = false, defaultValue = "") String searchText,@RequestParam(required = false) Integer categoryId) {return R.success(goodService.findPage(pageNum, pageSize, searchText, categoryId));}/*** 分頁查詢全部商品** @param pageNum    頁數* @param pageSize   分頁大學* @param searchText 查詢文本* @param categoryId 分類id* @return 商品列表*/@GetMapping("/fullPage")public R<IPage<GoodVo>> findGoodFullPage(@RequestParam(required = false, defaultValue = "1") Integer pageNum,@RequestParam(required = false, defaultValue = "10") Integer pageSize,@RequestParam(required = false, defaultValue = "") String searchText,@RequestParam(required = false) Integer categoryId) {return R.success(goodService.findFullPage(pageNum, pageSize, searchText, categoryId));}}

四、系統源碼+答辯PPT

系統源碼鏈接地址：僅供參考學習。

公眾號：熱愛技術的小鄭。

回復：商城系統，即可獲取到系統源碼。