當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

mall商城 -小程序，h5和pc vue前后端分离

發(fā)布時間：2023/12/10 vue 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 mall商城 -小程序，h5和pc vue前后端分离小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

# mall

下載地址

https://gitee.com/JiaGou-XiaoGe/mall

qq 951449465

## 說明

> 后臺管理項目fork自 ?https://github.com/macrozheng/mall
> 基于SpringBoot+MyBatis的電商系統(tǒng)，包括前臺商城系統(tǒng)及后臺管理系統(tǒng)。

> 如果該項目對您有幫助，您可以點右上角 "Star" 支持一下謝謝！

> 或者您可以 "follow" 一下，該項目將持續(xù)更新，不斷完善功能。

> 項目交流QQ群：195405248

> 如有問題或者好的建議可以在 Issues 中提。

## 前言

`mall`項目致力于打造一個完整的電商系統(tǒng)，采用現(xiàn)階段流行技術(shù)實現(xiàn)。

## 項目介紹

`mall`項目是一套電商系統(tǒng)，包括前臺商城系統(tǒng)及后臺管理系統(tǒng),h5,小程序，基于SpringBoot+MyBatis實現(xiàn)。
前臺商城系統(tǒng)包含首頁門戶、商品推薦、商品搜索、商品展示、購物車、訂單流程、會員中心、客戶服務(wù)、幫助中心等模塊。
后臺管理系統(tǒng)包含商品管理、訂單管理、會員管理、促銷管理、運營管理、內(nèi)容管理、統(tǒng)計報表、財務(wù)管理、權(quán)限管理、設(shè)置等模塊。

### 項目演示

> 后臺管理系統(tǒng)

前端項目`mall-admin-web`地址：https://github.com/macrozheng/mall-admin-web?

后臺演示
??
后臺管理演示

小程序演示
?

> 前臺商城系統(tǒng)

h5前端項目`vue-js-master`地址請加群下載 ?320860169
pc前端項目`Mall-Vue-master`地址請加群下載 ?https://powerdos.github.io/Mall-Vue/#/
小前端項目`wechatapp`地址請加群下載

##h5項目效果圖

![](https://images.gitee.com/uploads/images/2019/0217/112713_f4cb24ab_134431.png)

![](https://images.gitee.com/uploads/images/2019/0217/112713_a17c828d_134431.png)

![](https://images.gitee.com/uploads/images/2019/0217/112713_a7afcc52_134431.png)

![](https://images.gitee.com/uploads/images/2019/0217/112713_2d82d3c8_134431.png)

![](https://images.gitee.com/uploads/images/2019/0217/112714_62baf63a_134431.png)

![](https://images.gitee.com/uploads/images/2019/0217/112715_c571472d_134431.png)

### 組織結(jié)構(gòu)

``` lua
mall
├── mall-mbg -- MyBatisGenerator生成的數(shù)據(jù)庫操作代碼
├── mall-admin -- 后臺商城管理系統(tǒng)接口
├── mall-search -- 基于Elasticsearch的商品搜索系統(tǒng)
├── mall-portal -- 前臺商城系統(tǒng)接口
```

### 技術(shù)選型

#### 后端技術(shù)

技術(shù) | 說明 | 官網(wǎng)
----|----|----
Spring Boot | 容器+MVC框架 | [https://spring.io/projects/spring-boot](https://spring.io/projects/spring-boot)
Spring Security | 認(rèn)證和授權(quán)框架 | [https://spring.io/projects/spring-security](https://spring.io/projects/spring-security)
MyBatis | ORM框架 ?| [http://www.mybatis.org/mybatis-3/zh/index.html](http://www.mybatis.org/mybatis-3/zh/index.html)
MyBatisGenerator | 數(shù)據(jù)層代碼生成 | [http://www.mybatis.org/generator/index.html](http://www.mybatis.org/generator/index.html)
PageHelper | MyBatis物理分頁插件 | [http://git.oschina.net/free/Mybatis_PageHelper](http://git.oschina.net/free/Mybatis_PageHelper)
Swagger-UI | 文檔生產(chǎn)工具 | [https://github.com/swagger-api/swagger-ui](https://github.com/swagger-api/swagger-ui)
Hibernator-Validator | 驗證框架 | [http://hibernate.org/validator/](http://hibernate.org/validator/)
Elasticsearch | 搜索引擎 | [https://github.com/elastic/elasticsearch](https://github.com/elastic/elasticsearch)
RabbitMq | 消息隊列 | [https://www.rabbitmq.com/](https://www.rabbitmq.com/)
Redis | 分布式緩存 | [https://redis.io/](https://redis.io/)
MongoDb | NoSql數(shù)據(jù)庫 | [https://www.mongodb.com/](https://www.mongodb.com/)
Docker | 應(yīng)用容器引擎 | [https://www.docker.com/](https://www.docker.com/)
Druid | 數(shù)據(jù)庫連接池 | [https://github.com/alibaba/druid](https://github.com/alibaba/druid)
OSS | 對象存儲 | [https://github.com/aliyun/aliyun-oss-java-sdk](https://github.com/aliyun/aliyun-oss-java-sdk)
JWT | JWT登錄支持 | [https://github.com/jwtk/jjwt](https://github.com/jwtk/jjwt)
LogStash | 日志收集 | [https://github.com/logstash/logstash-logback-encoder](https://github.com/logstash/logstash-logback-encoder)
Lombok | 簡化對象封裝工具 | [https://github.com/rzwitserloot/lombok](https://github.com/rzwitserloot/lombok)

#### 前端技術(shù)

技術(shù) | 說明 | 官網(wǎng)
----|----|----
Vue | 前端框架 | [https://vuejs.org/](https://vuejs.org/)
Vue-router | 路由框架 | [https://router.vuejs.org/](https://router.vuejs.org/)
Vuex | 全局狀態(tài)管理框架 | [https://vuex.vuejs.org/](https://vuex.vuejs.org/)
Element | 前端UI框架 | [https://element.eleme.io/](https://element.eleme.io/)
Axios | 前端HTTP框架 | [https://github.com/axios/axios](https://github.com/axios/axios)
v-charts | 基于Echarts的圖表框架 | [https://v-charts.js.org/](https://v-charts.js.org/)
Js-cookie | cookie管理工具 | [https://github.com/js-cookie/js-cookie](https://github.com/js-cookie/js-cookie)
nprogress | 進度條控件 | [https://github.com/rstacruz/nprogress](https://github.com/rstacruz/nprogress)

#### 架構(gòu)圖

##### 系統(tǒng)架構(gòu)圖

![系統(tǒng)架構(gòu)圖](document/resource/mall_system_arch.png)

##### 業(yè)務(wù)架構(gòu)圖

![系統(tǒng)架構(gòu)圖](document/resource/mall_business_arch.png)

#### 模塊介紹

##### 后臺管理系統(tǒng) `mall-admin`

- 商品管理：[功能結(jié)構(gòu)圖-商品.jpg](document/resource/mind_product.jpg)
- 訂單管理：[功能結(jié)構(gòu)圖-訂單.jpg](document/resource/mind_order.jpg)
- 促銷管理：[功能結(jié)構(gòu)圖-促銷.jpg](document/resource/mind_sale.jpg)
- 內(nèi)容管理：[功能結(jié)構(gòu)圖-內(nèi)容.jpg](document/resource/mind_content.jpg)
- 用戶管理：[功能結(jié)構(gòu)圖-用戶.jpg](document/resource/mind_member.jpg)

##### 前臺商城系統(tǒng) `mall-portal`

[功能結(jié)構(gòu)圖-前臺.jpg](document/resource/mind_portal.jpg)

#### 開發(fā)進度

![項目開發(fā)進度圖](document/resource/mall_dev_flow.png)

## 環(huán)境搭建

### 開發(fā)工具

工具 | 說明 | 官網(wǎng)
----|----|----
IDEA | 開發(fā)IDE | https://www.jetbrains.com/idea/download
RedisDesktop | redis客戶端連接工具 | https://redisdesktop.com/download
Robomongo | mongo客戶端連接工具 | https://robomongo.org/download
SwitchHosts| 本地host管理 | https://oldj.github.io/SwitchHosts/
X-shell | Linux遠(yuǎn)程連接工具 | http://www.netsarang.com/download/software.html
Navicat | 數(shù)據(jù)庫連接工具 | http://www.formysql.com/xiazai.html
PowerDesigner | 數(shù)據(jù)庫設(shè)計工具 | http://powerdesigner.de/
Axure | 原型設(shè)計工具 | https://www.axure.com/
MindMaster | 思維導(dǎo)圖設(shè)計工具 | http://www.edrawsoft.cn/mindmaster
ScreenToGif | gif錄制工具 | https://www.screentogif.com/
ProcessOn | 流程圖繪制工具 | https://www.processon.com/
PicPick | 屏幕取色工具 | https://picpick.app/zh/

### 開發(fā)環(huán)境

工具 | 版本號 | 下載
----|----|----
JDK | 1.8 | https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Mysql | 5.7 | https://www.mysql.com/
Redis | 3.2 | https://redis.io/download
Elasticsearch | 2.4.6 | https://www.elastic.co/downloads
MongoDb | 3.2 | https://www.mongodb.com/download-center
RabbitMq | 5.25 | http://www.rabbitmq.com/download.html
nginx | 1.10 | http://nginx.org/en/download.html

### 搭建步驟

> 本地環(huán)境搭建

- 本地安裝開發(fā)環(huán)境中的所有工具并啟動，具體參考[deploy-windows.md](document/reference/deploy-windows.md);
- 克隆源代碼到本地，使用IDEA或Eclipse打開，并完成編譯;
- 在mysql中新建mall數(shù)據(jù)庫，導(dǎo)入document/sql下的mall.sql文件；
- 啟動mall-admin項目：直接運行com.macro.mall.MallAdminApplication的main方法即可，
? 接口文檔地址：http://localhost:8080/swagger-ui.html;
- 啟動mall-search項目：直接運行com.macro.mall.search.MallSearchApplication的main方法即可，
? 接口文檔地址：http://localhost:8081/swagger-ui.html;
- 啟動mall-portal項目：直接運行com.macro.mall.portal.MallPortalApplication的main方法即可，
? 接口文檔地址：http://localhost:8085/swagger-ui.html;
- 克隆`mall-admin-web`項目，并導(dǎo)入到IDEA中并完成編譯[傳送門](https://github.com/macrozheng/mall-admin-web);
- 運行命令：npm run dev,訪問地址：[http://localhost:8090](http://localhost:8090) 即可打開后臺管理系統(tǒng)頁面;

- 克隆`Mall-Vue-master`項目，并導(dǎo)入到IDEA中并完成編譯[傳送門]();
- 運行命令：npm run dev,訪問地址：即可打開pc商城頁面;
- 克隆`vue-jd-master`項目，并導(dǎo)入到IDEA中并完成編譯[傳送門]();
- 運行命令：npm run dev,訪問地址：即可打開h5商城頁面;
- ELK日志收集系統(tǒng)的搭建：參考[elk.md](document/elk/elk.md)。

> docker環(huán)境部署

- 在VirtualBox或其他環(huán)境中安裝CenterOs7.2;
- 配置本地host:參考[host.txt](document/docker/host.txt),將ip地址改為虛擬機的ip地址;
- 使用maven構(gòu)建`mall-admin`、`mall-search`、`mall-portal`的docker鏡像，參考[docker.md](document/reference/docker.md)中的使用maven構(gòu)建Docker鏡像;
- 部署步驟參考[docker-deploy.md](document/docker/docker-deploy.md)進行部署。

## 參考資料

- [Spring實戰(zhàn)（第4版）](https://book.douban.com/subject/26767354/)
- [Spring Boot實戰(zhàn)](https://book.douban.com/subject/26857423/)
- [Spring Cloud微服務(wù)實戰(zhàn)](https://book.douban.com/subject/27025912/)
- [Spring Cloud與Docker微服務(wù)架構(gòu)實戰(zhàn)](https://book.douban.com/subject/27028228/)
- [Spring Data實戰(zhàn)](https://book.douban.com/subject/25975186/)
- [MyBatis從入門到精通](https://book.douban.com/subject/27074809/)
- [深入淺出MySQL](https://book.douban.com/subject/25817684/)
- [循序漸進Linux（第2版）](https://book.douban.com/subject/26758194/)
- [Elasticsearch 技術(shù)解析與實戰(zhàn)](https://book.douban.com/subject/26967826/)
- [MongoDB實戰(zhàn)(第二版)](https://book.douban.com/subject/27061123/)
- [Kubernetes權(quán)威指南](https://book.douban.com/subject/26902153/)

## 許可證

總結(jié)

以上是生活随笔為你收集整理的mall商城 -小程序，h5和pc vue前后端分离的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： php .htaccess 的作用,ph
下一篇： python标准库（一）