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

前言

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

1、項目背景

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

• B2B 模式 Business to Business, 是指商家與商家建立的商業(yè)關(guān)系， 如：阿里巴巴
• B2C 模式(圖靈商城模式)*Business to Consumer ， 商家直接把商品賣給用戶（個人），既“商對客”模式，也就是場所的商業(yè)零售，直接面向消費 者銷售產(chǎn)品和服務(wù)。如：蘇寧易購、京東
• C2B 模式 Consumer to Business ， 消費者對企業(yè)，現(xiàn)有消費者需求產(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ǒng)

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

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

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

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

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

3、前置知識

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

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

后端項目

項目演示

專門為前端提供rest接口

后臺項目演示：http://localhost:8081/

使用技術(shù)

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

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

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

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

• cms_*：內(nèi)容管理模塊相關(guān)表（暫不關(guān)心）
• oms_*：訂單管理模塊相關(guān)表
• pms_*：商品模塊相關(guān)表
• sms_*：營銷模塊相關(guān)表（暫不關(guān)心）
• ums_*：會員模塊相關(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. 實在不會提供2份文檔給你：

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

提供后端腳手架

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

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

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

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

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

后臺前端項目

項目演示

后臺項目演示：http://localhost:8090/#/login

核心功能：

商品模塊

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

訂單模塊

• 訂單管理

使用技術(shù)

技術(shù)選型

項目布局

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

搭建：

環(huán)境工具：

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

運行項目之前需要將config/dev.env.js文件中的BASE_API改為http://localhost:你的后端項目的端口/

在VsCode終端窗口中運行命令：npm run dev,運行項目;

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

前臺前端項目

項目演示：http://localhost:8081/

使用技術(shù)

完整視頻教程

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