分佈式先後端分離項目開發步驟

1、 項目的簡介

咱們作的是電商項目，和淘寶，京東，微信小程序，小米商城這些東西很是的類似！

電商項目將會愈來愈流行！

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

工廠（IT部，開發一個商城）-> 你

咱們的項目，涉及的模塊比較多，有人員的管理，商品的管理，門店的管理（廣告輪播圖），購物車，訂單管理，支付管理，消息的管理！

2、 技術選型（分佈式項目）

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、 項目的架構（理解項目的架構是第一步）

理解項目的架構，咱們能夠作到從總體去把握這個項目！

項目的架構裏面，通常隱含技術的選型，各個模塊的職責和功能！

3.1 項目的預覽

項目的工廠截圖：

後臺管理系統：（管理員使用的系統）

 

 

前臺系統：（通常而已，是針對一個用戶的/會員的）

3.2 項目的架構圖

 

4、 軟件的準備

4.1 開發的軟件準備

Idea/Maven

IntelliJ IDEA 2019.3.2 x64

Maven：apache-maven-3.2.2

4.2 服務器和Docker

Mysql，redis，solr，zk，fastdfs...

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 防火牆的配置（不挖坑，就靠它了）

 

刪除全部的規則：

 

添加一個新的：

 

 

 

獲得本身的公網地址：

 

5、 項目的建立（gitlab 項目的管理）

5.1 新建一個項目

 

5.2 clone 這個遠程的項目

 

5.3 在該文件夾裏面新建

 

5.3 在idea 裏面建立一個空的項目

 

新建一個空的項目，這個空的項目將用來保存咱們的idea 的設置！

5.4 設置idea

 

 

5.5 提交咱們的項目到gitlb 裏面

 

 

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

6.1 下載這個壓縮包

6.2 把它複製到項目的文件夾裏面

6.3 導入數據庫

6.3.1 新建數據庫

6.3.2 導入sql

6.3.3 數據庫裏面的表

7、 安裝附件的軟件

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、 前端的運行

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的文件變顏色了

9、 修改頁面的login，head

9.1 修改head

9.2 更換圖標

打開該文件夾：

把本身的圖片命名爲：

10、 把代碼提交一下

Git add

Git  commit -m 「」

 

Git push

1、 項目的簡介

咱們作的是電商項目，和淘寶，京東，微信小程序，小米商城這些東西很是的類似！

電商項目將會愈來愈流行！

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

工廠（IT部，開發一個商城）-> 你

咱們的項目，涉及的模塊比較多，有人員的管理，商品的管理，門店的管理（廣告輪播圖），購物車，訂單管理，支付管理，消息的管理！

2、 技術選型（分佈式項目）

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、 項目的架構（理解項目的架構是第一步）

理解項目的架構，咱們能夠作到從總體去把握這個項目！

項目的架構裏面，通常隱含技術的選型，各個模塊的職責和功能！

3.1 項目的預覽

項目的工廠截圖：

後臺管理系統：（管理員使用的系統）

 

 

前臺系統：（通常而已，是針對一個用戶的/會員的）

3.2 項目的架構圖

 

4、 軟件的準備

4.1 開發的軟件準備

Idea/Maven

IntelliJ IDEA 2019.3.2 x64

Maven：apache-maven-3.2.2

4.2 服務器和Docker

Mysql，redis，solr，zk，fastdfs...

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 防火牆的配置（不挖坑，就靠它了）

 

刪除全部的規則：

 

添加一個新的：

 

 

 

獲得本身的公網地址：

 

5、 項目的建立（gitlab 項目的管理）

5.1 新建一個項目

 

5.2 clone 這個遠程的項目

 

5.3 在該文件夾裏面新建

 

5.3 在idea 裏面建立一個空的項目

 

新建一個空的項目，這個空的項目將用來保存咱們的idea 的設置！

5.4 設置idea

 

 

5.5 提交咱們的項目到gitlb 裏面

 

 

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

6.1 下載這個壓縮包

6.2 把它複製到項目的文件夾裏面

6.3 導入數據庫

6.3.1 新建數據庫

6.3.2 導入sql

6.3.3 數據庫裏面的表

7、 安裝附件的軟件

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、 前端的運行

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的文件變顏色了

9、 修改頁面的login，head

9.1 修改head

9.2 更換圖標

打開該文件夾：

把本身的圖片命名爲：

10、 把代碼提交一下

Git add

Git  commit -m 「」

Git push