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

一、项目的简介

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

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

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

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