分布式前后端分離項目開發步驟


一、項目的簡介

我們做的是電商項目,和淘寶,京東,微信小程序,小米商城這些東西非常的相似!

電商項目將會越來越流行!

工廠->商品-> 第三方的代理商--層層代理->

工廠(IT部,開發一個商城)->

我們的項目,涉及的模塊比較多,有人員的管理,商品的管理,門店的管理(廣告輪播圖),購物車,訂單管理,支付管理,消息的管理!

二、技術選型(分布式項目)

Spring Boot + Mybatis Plus + Dubbo + Zookeeper +Shiro + Redis + Solr + ActiveMQ + FastDFS + Swagger2 + Hutool + Orika(對象映射工具) + fst (序列化工具)+ Mycat + Mysql +Nginx + Docker + Linux + VPC網絡 + ECS

 

如果你們公司要做分布式項目:那我寫的技術就是你們以后做技術選型時的首選技術

需要知道這些框架有什么作用,以后公司若要替換為別的技術點,就可以輕易的切換起來了

Spring Boot

Mybatis Plus

Dubbo

三、項目的架構(理解項目的架構是第一步)

理解項目的架構,我們可以做到從整體去把握這個項目!

項目的架構里面,一般隱含技術的選型,各個模塊的職責和功能!

3.1 項目的預覽

項目的工廠截圖:

后台管理系統:(管理員使用的系統)

 

 

前台系統:(一般而已,是針對一個用戶的/會員的)

3.2 項目的架構圖

 

四、軟件的准備

4.1 開發的軟件准備

Idea/Maven

IntelliJ IDEA 2019.3.2 x64

Mavenapache-maven-3.2.2

4.2 服務器和Docker

Mysqlredissolrzkfastdfs...

4.2.1 准備一個ecs 服務器(若你有,重置一下)

 

 

4.2.2 安裝docker 和配置加速

安裝:

curl -sSL https://get.daocloud.io/docker | sh

 

 

安裝成功后:

加速:

curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s 阿里雲提供的

 

我的: https://s5r1xz3p.mirror.aliyuncs.com

curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s https://s5r1xz3p.mirror.aliyuncs.com

 

4.2.3 啟動docker 並且設置開機自動啟動

啟動:

systemctl start docker

 

開機自啟動:

systemctl enable docker

4.3 軟件的安裝

4.3.1 redis

docker run --name  redis -p 6379:6379 -d redis

4.3.2 mysql

docker run --name mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 -d mysql:5.7 --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci

 

4.3.3 zookeeper

docker run --name zk -p 2181:2181 -d zookeeper

 

4.3.4 solr

docker run --name solr -p 8983:8983 -d solr:7.7.2

 

4.3.5 activemq

docker run --name mq -p 8161:8161 -p 61616:61616 -d rmohr/activemq

 

4.3.6 fastdfs(暫時不要安裝,特別浪費資源)

 

 

4.3.7 dubbo-admin(看服務的提供者和消費者的)

docker run --name dubbo-admin -p 8080:8080 -e dubbo.registry.address=zookeeper://localhost:2181 -e dubbo.admin.root.password=root -e dubbo.admin.guest.password=guest  -d chenchuxin/dubbo-admin

 

 

4.3.8 安裝完成后

Mysql

Redis

Solr

ActIveMQ

Zk 都必須安裝成本

 

4.3.9 先暫時關閉不要的軟件

solr mq fastdfs

4.4 防火牆的配置(不挖坑,就靠它了)

 

刪除所有的規則:

 

添加一個新的:

 

 

 

得到自己的公網地址:

 

五、項目的創建(gitlab 項目的管理)

5.1 新建一個項目

 

5.2 clone 這個遠程的項目

 

5.3 在該文件夾里面新建

 

5.3 idea 里面創建一個空的項目

 

新建一個空的項目,這個空的項目將用來保存我們的idea 的設置!

5.4 設置idea

 

 

5.5 提交我們的項目到gitlb 里面

 

 

六、下載數據庫腳本文件來導入的Mysql 里面

6.1 下載這個壓縮包

6.2 把它復制到項目的文件夾里面

6.3 導入數據庫

6.3.1 新建數據庫

6.3.2 導入sql

6.3.3 數據庫里面的表

七、安裝附件的軟件

7.1 安裝typora

7.2 vscode的安裝

安裝過的,就不需要安裝了

7.3 安裝node.js

7.3.1 把他復制到軟件目錄里面

7.3.2 解壓該壓縮文件

7.3.3 配置環境變量

7.3.4 測試版本

 

輸入:node -v

Tip: 若有的同學輸入node -v 沒有反應,你把你的電腦重啟一下就可以了

7.4 配置node的加速鏡像

Node 里面有個包安裝的工具,類似maven ,我們需要配置加速鏡像

我們將采用taobao的源:

執行:

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

 

7.5微信開發者工具的安裝

八、前端的運行

8.1 后台管理系統

打開vscode

 

 

vscode 里面打開一個控制台:

執行:

等待上一個

執行完成后,執行下面的命令

cnpm install

 

 

等待安裝完畢:

成功的標准:

8.2 微信小程序的運行

8.2.1 使用微信掃描登錄

8.2.2 導入我們的項目

 

微信小程序暫時不用,我們把后台管理系統開發好了后,在開發微信小程序

 

8.3 使用vscode 運行后台管理系統

輸入:

npm run dev

 

 

訪問前端:

8.4 vscode 里面插件的安裝

8.4.1 中文的安裝

8.4.2 vue 插件的安裝

隨便打開一個后綴名為vue 的文件。

點擊install ,就會發現已經在安裝了

 

安裝成功后,發現vue的文件變顏色了

九、修改頁面的loginhead

9.1 修改head

9.2 更換圖標

打開該文件夾:

把自己的圖片命名為:

十、把代碼提交一下

Git add

Git  commit -m “”

 

Git push

一、項目的簡介

我們做的是電商項目,和淘寶,京東,微信小程序,小米商城這些東西非常的相似!

電商項目將會越來越流行!

工廠->商品-> 第三方的代理商--層層代理->

工廠(IT部,開發一個商城)->

我們的項目,涉及的模塊比較多,有人員的管理,商品的管理,門店的管理(廣告輪播圖),購物車,訂單管理,支付管理,消息的管理!

二、技術選型(分布式項目)

Spring Boot + Mybatis Plus + Dubbo + Zookeeper +Shiro + Redis + Solr + ActiveMQ + FastDFS + Swagger2 + Hutool + Orika(對象映射工具) + fst (序列化工具)+ Mycat + Mysql +Nginx + Docker + Linux + VPC網絡 + ECS

 

如果你們公司要做分布式項目:那我寫的技術就是你們以后做技術選型時的首選技術

需要知道這些框架有什么作用,以后公司若要替換為別的技術點,就可以輕易的切換起來了

Spring Boot

Mybatis Plus

Dubbo

三、項目的架構(理解項目的架構是第一步)

理解項目的架構,我們可以做到從整體去把握這個項目!

項目的架構里面,一般隱含技術的選型,各個模塊的職責和功能!

3.1 項目的預覽

項目的工廠截圖:

后台管理系統:(管理員使用的系統)

 

 

前台系統:(一般而已,是針對一個用戶的/會員的)

3.2 項目的架構圖

 

四、軟件的准備

4.1 開發的軟件准備

Idea/Maven

IntelliJ IDEA 2019.3.2 x64

Mavenapache-maven-3.2.2

4.2 服務器和Docker

Mysqlredissolrzkfastdfs...

4.2.1 准備一個ecs 服務器(若你有,重置一下)

 

 

4.2.2 安裝docker 和配置加速

安裝:

curl -sSL https://get.daocloud.io/docker | sh

 

 

安裝成功后:

加速:

curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s 阿里雲提供的

 

我的: https://s5r1xz3p.mirror.aliyuncs.com

curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s https://s5r1xz3p.mirror.aliyuncs.com

 

4.2.3 啟動docker 並且設置開機自動啟動

啟動:

systemctl start docker

 

開機自啟動:

systemctl enable docker

4.3 軟件的安裝

4.3.1 redis

docker run --name  redis -p 6379:6379 -d redis

4.3.2 mysql

docker run --name mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 -d mysql:5.7 --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci

 

4.3.3 zookeeper

docker run --name zk -p 2181:2181 -d zookeeper

 

4.3.4 solr

docker run --name solr -p 8983:8983 -d solr:7.7.2

 

4.3.5 activemq

docker run --name mq -p 8161:8161 -p 61616:61616 -d rmohr/activemq

 

4.3.6 fastdfs(暫時不要安裝,特別浪費資源)

 

 

4.3.7 dubbo-admin(看服務的提供者和消費者的)

docker run --name dubbo-admin -p 8080:8080 -e dubbo.registry.address=zookeeper://localhost:2181 -e dubbo.admin.root.password=root -e dubbo.admin.guest.password=guest  -d chenchuxin/dubbo-admin

 

 

4.3.8 安裝完成后

Mysql

Redis

Solr

ActIveMQ

Zk 都必須安裝成本

 

4.3.9 先暫時關閉不要的軟件

solr mq fastdfs

4.4 防火牆的配置(不挖坑,就靠它了)

 

刪除所有的規則:

 

添加一個新的:

 

 

 

得到自己的公網地址:

 

五、項目的創建(gitlab 項目的管理)

5.1 新建一個項目

 

5.2 clone 這個遠程的項目

 

5.3 在該文件夾里面新建

 

5.3 idea 里面創建一個空的項目

 

新建一個空的項目,這個空的項目將用來保存我們的idea 的設置!

5.4 設置idea

 

 

5.5 提交我們的項目到gitlb 里面

 

 

六、下載數據庫腳本文件來導入的Mysql 里面

6.1 下載這個壓縮包

6.2 把它復制到項目的文件夾里面

6.3 導入數據庫

6.3.1 新建數據庫

6.3.2 導入sql

6.3.3 數據庫里面的表

七、安裝附件的軟件

7.1 安裝typora

7.2 vscode的安裝

安裝過的,就不需要安裝了

7.3 安裝node.js

7.3.1 把他復制到軟件目錄里面

7.3.2 解壓該壓縮文件

7.3.3 配置環境變量

7.3.4 測試版本

 

輸入:node -v

Tip: 若有的同學輸入node -v 沒有反應,你把你的電腦重啟一下就可以了

7.4 配置node的加速鏡像

Node 里面有個包安裝的工具,類似maven ,我們需要配置加速鏡像

我們將采用taobao的源:

執行:

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

 

7.5微信開發者工具的安裝

八、前端的運行

8.1 后台管理系統

打開vscode

 

 

vscode 里面打開一個控制台:

執行:

等待上一個

執行完成后,執行下面的命令

cnpm install

 

 

等待安裝完畢:

成功的標准:

8.2 微信小程序的運行

8.2.1 使用微信掃描登錄

8.2.2 導入我們的項目

 

微信小程序暫時不用,我們把后台管理系統開發好了后,在開發微信小程序

 

8.3 使用vscode 運行后台管理系統

輸入:

npm run dev

 

 

訪問前端:

8.4 vscode 里面插件的安裝

8.4.1 中文的安裝

8.4.2 vue 插件的安裝

隨便打開一個后綴名為vue 的文件。

點擊install ,就會發現已經在安裝了

 

安裝成功后,發現vue的文件變顏色了

九、修改頁面的loginhead

9.1 修改head

9.2 更換圖標

打開該文件夾:

把自己的圖片命名為:

十、把代碼提交一下

Git add

Git  commit -m “”

Git push

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM