分布式前后端分离项目开发步骤

时间：2020-08-05 22:44:25 阅读：311 评论：0 收藏：0 [点我收藏+]

一、项目的简介

我们做的是电商项目，和淘宝，京东，微信小程序，小米商城这些东西非常的相似！

电商项目将会越来越流行！

工厂->商品-> 第三方的代理商--层层代理-> 你

工厂（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

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

技术分享图片

删除所有的规则：

技术分享图片

添加一个新的：

技术分享图片

得到自己的公网地址：

技术分享图片

五、项目的创建（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的文件变颜色了

技术分享图片

九、修改页面的login，head

技术分享图片

9.1 修改head

技术分享图片

9.2 更换图标

打开该文件夹：

技术分享图片

把自己的图片命名为：

技术分享图片

十、把代码提交一下

技术分享图片

Git add

Git commit -m “”

Git push

一、项目的简介

我们做的是电商项目，和淘宝，京东，微信小程序，小米商城这些东西非常的相似！

电商项目将会越来越流行！

工厂->商品-> 第三方的代理商--层层代理-> 你

工厂（IT部，开发一个商城）-> 你

我们的项目，涉及的模块比较多，有人员的管理，商品的管理，门店的管理（广告轮播图），购物车，订单管理，支付管理，消息的管理！

二、技术选型（分布式项目）

如果你们公司要做分布式项目：那我写的技术就是你们以后做技术选型时的首选技术

需要知道这些框架有什么作用，以后公司若要替换为别的技术点，就可以轻易的切换起来了

Spring Boot ：

Mybatis Plus：

Dubbo：

三、项目的架构（理解项目的架构是第一步）

理解项目的架构，我们可以做到从整体去把握这个项目！

项目的架构里面，一般隐含技术的选型，各个模块的职责和功能！

3.1 项目的预览

项目的工厂截图：

技术分享图片

后台管理系统：（管理员使用的系统）

技术分享图片

前台系统：（一般而已，是针对一个用户的/会员的）

技术分享图片

3.2 项目的架构图

技术分享图片

四、软件的准备

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

技术分享图片

删除所有的规则：

技术分享图片

添加一个新的：

技术分享图片

得到自己的公网地址：

技术分享图片

五、项目的创建（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的文件变颜色了

技术分享图片

九、修改页面的login，head

技术分享图片

9.1 修改head

技术分享图片

9.2 更换图标

打开该文件夹：

技术分享图片

把自己的图片命名为：

技术分享图片

十、把代码提交一下

技术分享图片

Git add

Git commit -m “”

Git push

分布式前后端分离项目开发步骤

原文：https://www.cnblogs.com/lcbxiuxiu/p/13443048.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)