保姆級(jí)別的一個(gè)基于spring boot開發(fā)的前后端分離商城教程
2022-04-29 13:56:41

前言

推薦一個(gè)基于spring boot開發(fā)前后端分離商城，有完整的代碼筆記和視頻教程，希望對(duì)正在找項(xiàng)目練手的同學(xué)有所幫助。

1、項(xiàng)目背景

5中常見的電商模式 B2B 、B2C、C2B、C2C、O2O ?

• B2B 模式 Business to Business, 是指商家與商家建立的商業(yè)關(guān)系， 如：阿里巴巴
• B2C 模式(圖靈商城模式)*Business to Consumer ， 商家直接把商品賣給用戶（個(gè)人），既“商對(duì)客”模式，也就是場(chǎng)所的商業(yè)零售，直接面向消費(fèi) 者銷售產(chǎn)品和服務(wù)。如：蘇寧易購(gòu)、京東
• C2B 模式 Consumer to Business ， 消費(fèi)者對(duì)企業(yè)，現(xiàn)有消費(fèi)者需求產(chǎn)生而后有企業(yè)生產(chǎn)
• C2C 模式 Consumer to Consumer ,客戶銷售給客戶， 如：咸魚、淘寶
• O2O 模式 Online To Offline, 線上銷售、線下服務(wù)。如：餓了么，淘淘票

2、圖靈商城架構(gòu)圖

• 前后端分離 基礎(chǔ)版

微服務(wù)形成之前的架構(gòu)形態(tài)

前后端分離 ，基于vue的后臺(tái)管理系統(tǒng)

為什么要使用前后端分離架構(gòu)：

1.為了后續(xù)能夠平順、無障礙進(jìn)入高級(jí)架構(gòu)師中《微服務(wù)三高》架構(gòu)版。

2.企業(yè)中當(dāng)開發(fā)一個(gè)新項(xiàng)目時(shí)不會(huì)一上來就考慮三高、微服務(wù)…等特性，一般為了規(guī)避成本 風(fēng)險(xiǎn)，會(huì)使用開發(fā)成本較低，但是后續(xù)好擴(kuò)展好改造的架構(gòu)

![](https://img-blog.csdnimg.cn/img_convert/5ef52415b90d26abeb1efded9746cdad.png

微服務(wù)三高架構(gòu)版

3、前置知識(shí)

• 熟悉springboot及常用第三方框架整合
• 熟悉SSM 框架使用
• 熟悉Mysql數(shù)據(jù)庫(kù)
• 熟悉maven、 redis
• 了解html、css、js
• 熟練使用idea

4、結(jié)構(gòu)介紹

后端項(xiàng)目

項(xiàng)目演示

專門為前端提供rest接口

后臺(tái)項(xiàng)目演示：http://localhost:8081/

使用技術(shù)

![](https://img-blog.csdnimg.cn/img_convert/8ad6e786e783af1bd6207284ef538c5f.png

數(shù)據(jù)庫(kù)表概覽

項(xiàng)目目前有71張數(shù)據(jù)表，業(yè)務(wù)邏輯有一定復(fù)雜度，當(dāng)然我們?cè)陂_發(fā)中不一定會(huì)全用到， 這里所有的表是我們整個(gè)圖靈商 城的完整版

數(shù)據(jù)庫(kù)表前綴說明

• cms_*：內(nèi)容管理模塊相關(guān)表（暫不關(guān)心）
• oms_*：訂單管理模塊相關(guān)表
• pms_*：商品模塊相關(guān)表
• sms_*：營(yíng)銷模塊相關(guān)表（暫不關(guān)心）
• ums_*：會(huì)員模塊相關(guān)表

搭建

后端開發(fā)環(huán)境、工具

a. 環(huán)境：jdk1.8 maven3.6+ 、 mysql 、 redis

b. 工具：idea2019（mybatis插件、 lombok插件、translation插件）、 Postman 、Navicat、RedisStudio（github） redisdesktop

i. 實(shí)在不會(huì)提供2份文檔給你：

1. mall在Linux環(huán)境下的部署（基于Docker容 器）.note
2. mall在windows環(huán)境下運(yùn)行.note

提供后端腳手架

a. 基于SpringBoot+MyBatis-Plus的快速開發(fā)腳手架，擁有完整的權(quán)限管理功能， 可對(duì)接Vue前端，開箱即用。

i. 項(xiàng)目結(jié)構(gòu)

導(dǎo)入提供的腳手架

執(zhí)行sql腳本：執(zhí)行sql/tiny.sql

• 修改本地的數(shù)據(jù)庫(kù) 配置信息和 redis配置信息
• 運(yùn)行Main方法

后臺(tái)前端項(xiàng)目

項(xiàng)目演示

后臺(tái)項(xiàng)目演示：http://localhost:8090/#/login

核心功能：

商品模塊

• 商品管理
• 商品分類管理
• 商品類型管理
• 品牌管理

訂單模塊

• 訂單管理

使用技術(shù)

技術(shù)選型

項(xiàng)目布局

src ‐‐ 源碼目錄
├── api ‐‐ axios網(wǎng)絡(luò)請(qǐng)求定義
├── assets ‐‐ 靜態(tài)圖片資源文件
├── components ‐‐ 通用組件封裝
├── icons ‐‐ svg矢量圖片文件
├── router ‐‐ vue‐router路由配置
├── store ‐‐ vuex的狀態(tài)管理
├── styles ‐‐ 全局css樣式
├── utils ‐‐ 工具類
└── views ‐‐ 前端頁(yè)面
├── home ‐‐ 首頁(yè)
├── layout ‐‐ 通用頁(yè)面加載框架
├── login ‐‐ 登錄頁(yè)
├── oms ‐‐ 訂單模塊頁(yè)面
├── pms ‐‐ 商品模塊頁(yè)面
└── sms ‐‐ 營(yíng)銷模塊頁(yè)面

搭建：

環(huán)境工具：

• 安裝vscode
• 安裝vscode插件
• 解壓前端開源項(xiàng)目：mall-admin-web-master-前端.zip
• 在VSCode中選擇“文件”—>“打開 文件夾” 選擇解壓后的項(xiàng)目所在目錄
• 安裝nodejs (因?yàn)橐胣pm功能）
• 該項(xiàng)目為前后端分離項(xiàng)目，訪問本地訪問接口需搭建后臺(tái)環(huán)境。(已完成http://localhost:8099/)
• 在VsCode終端窗口中運(yùn)行命令：npm install,下載相關(guān)依賴;

運(yùn)行項(xiàng)目之前需要將config/dev.env.js文件中的BASE_API改為http://localhost:你的后端項(xiàng)目的端口/

在VsCode終端窗口中運(yùn)行命令：npm run dev,運(yùn)行項(xiàng)目;

訪問地址：http://localhost:8090 即可打開后臺(tái)管理系統(tǒng)頁(yè)面;

前臺(tái)前端項(xiàng)目

項(xiàng)目演示：http://localhost:8081/

使用技術(shù)

完整視頻教程

篇幅所限就先寫到這里吧，后續(xù)的一些開發(fā)筆記太長(zhǎng)了。