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

前言

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

1、項目背景

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

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

2、圖靈商城架構圖

• 前后端分離 基礎版

微服務形成之前的架構形態

前后端分離 ，基于vue的后臺管理系統

為什么要使用前后端分離架構：

1.為了后續能夠平順、無障礙進入高級架構師中《微服務三高》架構版。

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

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

微服務三高架構版

3、前置知識

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

4、結構介紹

后端項目

項目演示

專門為前端提供rest接口

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

使用技術

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

數據庫表概覽

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

數據庫表前綴說明

• cms_*：內容管理模塊相關表（暫不關心）
• oms_*：訂單管理模塊相關表
• pms_*：商品模塊相關表
• sms_*：營銷模塊相關表（暫不關心）
• ums_*：會員模塊相關表

搭建

后端開發環境、工具

a. 環境：jdk1.8 maven3.6+ 、 mysql 、 redis

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

i. 實在不會提供2份文檔給你：

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

提供后端腳手架

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

i. 項目結構

導入提供的腳手架

執行sql腳本：執行sql/tiny.sql

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

后臺前端項目

項目演示

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

核心功能：

商品模塊

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

訂單模塊

• 訂單管理

使用技術

技術選型

項目布局

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

搭建：

環境工具：

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

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

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

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

前臺前端項目

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

使用技術

完整視頻教程

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