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

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

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

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

 

相关文章:

  • 2021-08-26
  • 2021-09-25
  • 2021-08-16
  • 2021-10-09
  • 2022-12-23
  • 2021-09-06
  • 2021-12-08
  • 2021-08-29
猜你喜欢
  • 2021-11-17
  • 2022-12-23
  • 2021-09-05
  • 2021-11-02
  • 2022-12-23
  • 2021-10-06
  • 2022-02-07
相关资源
相似解决方案