谷粒商城项目搭建思路

基础篇

核心技术点

微服务基础开发：

1. 逆向工程、微服务基础开发
2. SpringBoot、Mybatis、MybatisPlus、JCR303、Restful
3. Maven、Git、Vagrant、Linux、Docker
4. Aliyun-Oss、MySQL、Redis
5. ES6、Vue、element-ui
6. 目标：从0开始做一个合格的小全栈程序员

1. 搭建环境

1.1 安装Linux虚拟机

使用VirtualBox搭建虚拟机环境，开源，需要cpu开启虚拟化，设置主板，下载vagrant，调整网络

1.2 安装Docker

在虚拟机中安装docker，方便安装使用各种软件，

安装MySQL、Redis，并对其进行配置

1.3 统一开发环境

• 本机安装JDK1.8，maven，IDEA插件lombok，MybatisX，
• 安装Visual Studio Code，以及相关插件
• 安装git，准备gitee仓库，配置git，使用git秘钥免密提交
• idea拉取gitee仓库代码得到本地项目，以后的代码就都在这里添加
• idea创建微服务项目，每个服务都是一个springboot，添加项目起始必要依赖，创建聚合项目整合整个微服务
• 修改gitignore，忽略不需要提交的文件
• 第一次提交并推送整个初始项目到git
• 安装powerdesigner，查看表结构，我们不使用表外键，而是使用逻辑外键，因为电商项目数据量大，物理外键非常不便
• 每个微服务都创建自己对应的数据库，创建各个数据库、数据表

1.4 搭建后台管理项目

• 使用开源项目-人人开源，作为我们后台管理项目，减轻开发压力
• 人人开源使用前后分离，包括前端项目、后端项目，同时我们也下载generator代码生成器
• 将人人开源后台项目放到我们谷粒聚合项目中，
• 创建人人开源后台管理的数据库(项目自带了sql)
• 修改人人后台项目配置能够连接后台管理数据库
• vscode打开人人前端项目，配置相关环境，安装node.js，确保支持vue，配置npm镜像地址，
• 初始化npm，下载前端所需依赖
• 运行人人前端项目、后端项目、联调地址、端口，联通整个人人管理项目

1.5 逆向工程

• 使用generator，添加至谷粒项目中，修改配置匹配当前项目，指定需要逆向的数据库，快速生成增删改查代码
• 将对应数据库生成的所有代码替换到各个谷粒微服务中，生成的代码会爆红，需要我们准备各个依赖以及公共类
• 逆向工程创建的代码有许多需要的工具类和依赖都可以到人人后台项目中找到，可以将其复制到其他微服务中

1.6 测试商品服务功能

• 整合mybatis-plus，依赖、配置，注意数据库的版本对应的驱动
• 配置springboot核心配置文件
• 测试增删改查

1.7 修改配置其他微服务代码

• 方法同商品服务类似

2. 添加分布式组件

• SpringCloud 部分组件已经停止维护，且配置比较麻烦
• 使用SpringCloud Alibaba 组件可以解决这些问题，可视化界面更加友好，
• 注意SpringCloud 与 SpringCloud Alibaba 版本的对应
• 引入alibaba依赖

2.1 添加注册中心-Nacos

官方文档有步骤演示

• 引入依赖，下载Nacos server 并运行，配置Nacos地址
• 配置微服务核心配置，注册到注册中心
• 查看Nacos控制台，检测服务之间远程调用，使用openfeign；将各个服务都注册到配置中心
• nacos还可添加配置文件，让服务启动时加载配置，便于我们动态获取一些参数，免去修改源码打包
• 如果nacos和微服务中properties都配置了相同项，则优先加载nacos的配置

nacos细节

• 命名空间：默认新增的配置命名空间为public，我们可以使用命名空间来区分dev/test/pro环境，yml加载不同的配置，区分环境；也可以基于微服务隔离，每个服务也可以建立自己的命名空间，进一步区分
• 配合集：所有的配置的集合
• 配置集ID：类似于文件名，
• 配置分组：一类配置集可以放在一个分组中，比如双十一使用一个配置集，
• 谷粒项目的配置情况：每个微服务区分命名空间，配置分组区分dev/test/prod

加载多配置集

• 我们将微服务的配置都交给nacos管理，按照分类区分放置在配置中，比如数据源、mybatis、springcloud等等
• 微服务项目中的配置文件只需要加载nacos中的各个配置即可
• 在微服务的启动日志中可以查看，微服务启动时都加载了哪些nacos配置
• 任何配置信息、配置文件都可以放在nacos中，只需要在properties中说明加载哪些配置文件即可
• 开发期间我们还是先放在微服务配置文件中，方便查看

2.2 添加API网关-Gateway

• 用户的任何请求都要经过网关，网关动态发给各个服务，并从注册中心中实时感知某个服务的上线下线，将用户请求路由到正确的位置
• 每个请求加上权限，在网关层面做权限控制
• gateway是springcloud的第二代网关，比zuul性能更强
• springcloud官方文档有gateway的介绍、实例代码
• 路由、断言、过滤器

核心流程

• 请求到达网关，网关通过断言判断该请求是否符合某个路由规则，如果符合规则就路由到指定的服务，还要经过一系列过滤器过滤
• 难点在于怎样指定路由规则，断言该如何配置，过滤器怎么过滤
• 官方稳定提供了各种过滤规则、断言规则的实例

在谷粒项目中创建网关服务

• 添加至注册中心，添加依赖，修改配置
• 开启网关的注册发现，访问网关测试

3. 前端基础知识

技术栈：

• vscode使用
• ES6：重点
• Node.js
• Vue：重点
• Babel
• Webpack

3.1 ES6

• ECMAScript是浏览器脚本语言的规范，我们熟知的js语言如，JavaScript则是规范的具体实现
• 使用vscode创建项目文件，测试ES6各个功能特性

3.2 Vue

4. 商品服务API

4.1 三级分类（拖拽功能比较绕，需要多练习）

• 商品服务数据库，导入商品分类表数据
• 修改商品服务接口，查询商品分类数据，已树形结构组装起来，使用现有方法listwithtree
• 将分类数据保存菜单中返回，使用sort对菜单信息排序
• 修改前端项目的分类代码，商品系统-菜单管理-添加菜单
• 添加组件，让点击每个菜单都会显示菜单分类页面，使用elementui属性控件
• 调整前端项目配置，转发请求，注册人人项目能够被网关发现，可以处理验证码信息
• 解决人人登录时的跨域访限制，跨域的流程详解
• 添加菜单的删除逻辑，前台逻辑、后台逻辑
• 编写前端，点击按钮删除菜单，发起请求，后台逻辑删除响应的菜单
• 优化删除动作，添加弹窗提示确认是否删除，如果删除成功，有提示消息，也要展开删除节点的父节点
• 添加菜单，需要添加对话框，在对话框显示表单项，可以输入子分类
• 区分修改对话框和添加对话框，修改时要回显数据
• 通过拖拽节点改变节点的父子关系，使用elementui的draggable属性，需要我们保证节点能够被放置在指定位置
• 拖拽成功之后，相应的数据的收集使用handle-drop工具
• 添加开关，控制是否开启拖拽功能，添加批量保存，避免每次拖拽都访问数据库，而是一次性提交拖拽结果
• 节点批量删除，

4.2 品牌管理（阿里云服务使用，JSR303校验）

• 添加前端菜单-品牌管理，路由、相关信息，添加逆向工程生成的品牌相关代码
• 监听状态，管理品牌的显示和隐藏，添加品牌logo的文件上传功能