---

前言

本文是博主在实现一个简单的前后端分离开发的Java商城项目中所做的一些笔记，其中记录了一些实现过程中所使用的一些工具和容易犯的错误。记录如有错误，欢迎指正。

一、环境搭建

  后端开发使用IDEA编译器

Maven

  专门用于构建和管理Java相关项目的工具。

  使用Maven管理的Java 项目都有着相同的项目结构。有一个pom.xml 用于维护当前项目都用了哪些jar包；所有的java代码都放在 src/main/java 下面；所有的测试代码都放在src/test/java 下面。

  Maven便于统一维护jar包。只需设置依赖，就可自动下载相关jar包。

SpringBoot

  Spring 开源组织下的子项目，是 Spring 组件一站式解决方案，主要是简化了使用 Spring 的难度，简省了繁重的配置，提供了各种启动器，开发者能快速上手。

  新加入项目需要设置project structure

二、SpringBoot开发后端接口

介绍

  后端：负责开发接口(Restful API),Springboot实现开发接口。SpringCloud实现微服务的解决方案。

  ORM（Object Relational Mapping）框架采用元数据来描述对象与关系映射的细节，元数据一般采用XML格式，并且存放在专门的对象一映射文件中。简单理解为一种框架的格式

  目前主流的ORM框架: JPA 、Mybatis、MybatisPlus(升级版)
  SpringDataJpa 属于JPA的规范—》JAVAEE的规范

  前端：用户交互，提升用户体验。大前端时代(在不同移动设备运行)PC、平板、手机、笔记本、微信小程序、app等。

  注意连接数据库的账号密码正确。

热部署

按Ctrl+Alt+Shift+/打开下图窗口，打√

Lombok

  Lombok识别@Entity类似的注解，省去写实体类的setter、getter、constructor、toString、hasCode、equals等方法。
  使用Lombok也需要添加依赖

MybatisPlus

MybatisPlus实现数据库操作的两种方式：
  ①通过继承BaseMapper，这个BaseMapper是一个接口，里面已经封装了对单表增删改查的所有方法，用户只需要继承BaseMapper即可
  ②通过IService来实现单表的CRUD。
  注意：必须在启动类上添加扫描Mapper包的注解@MapperScan().

  ServiceImpl<Mapper,Users> 是mybatisplus自己实现的基类service的实现类。只需要传进去两个泛型参数接口，一个表示Mapper，一个表示类型。 继承这个类，就会自动实现单表所有CRUD的方法。
  Service比BaseMapper功能更强大。

测试接口工具postman

注解

1. @RestController ：表示这个类是控制类(接口)，每个方法返回的都是json对象。
2. @GetMapping 和 @PostMapping就是GET请求和POST请求，通常GET请求用于查询操作，POST请求一般做插入操作。用户登录相当于查询用户名和密码，使用GET请求，用户注册就是向数据库插入。同理，若是修改用户资料一般发生PUT请求，如果是删除资料，发送DELETE请求。
3. @RequestMapping(“users”)

  不同接口风格不同(代码规范不同)
  RESTFUL API规定url里面不能出现动词（GET、POST、PUT、DELETE）
  POST一定是给后端传入一个json对象，一般而言POST请求不会带任何参数。

调用关系

调用关系，从上到下。不同层用不同注解。

后端接口开发流程

用springboot开发后端接口的大体流程：
第一步：创建实体类，生成表。
第二步：编写service和service impl层。
第三步：编写单元测试，测试service层是否正常
第四步：编写controller层，就是接口层。
第五步：使用swagger或者postman进行接口测试。

一些注意事项

1. 只有int、long类型才能设为auto_increment，字符串不能设

2. 单元测试要添加Junit依赖

3. @Data注解的作用是省去了写setter/getter/构造方 法/toString/hashCode/equals
   @Entity帮助自动生成表结构

4. 通常让Mapper继承BaseMapper，因为BaseMapper中就已经含有了基本的增删改查方法。

5. @RunWith(SpringRunner.class)
   @SpringBootTest
   测试类上面必须添加的两个注解

6. @Autowired
   自动注入

7. 注意：getOne或者selectOne一定要确保返回的一条记录，如果查询出来多条记录，则会抛出异常。

三、前端开发环境搭建

前端开发使用Vue

springboot一般打为jar包(设置跳过测试)
Webstorm 前端开发利器

单向绑定:改一个值，另一个不变 v-value
双向绑定:改一个值，另一个同样改变 v-model

Vue+axios发送异步请求

前端如何调用后端接口？
Axios请求发送完返回一个promise对象。
可以使用then箭头函数处理请求

一般而言，发送POST请求就是传递json对象，不推荐传参数的。如果一定要传参，后端接口函数写入传入参数，后端只需在后面加params。(与get相似)

Axios的增删改查

不同端口的跨域请求：后端:设置config(常用) 前端:jsonp
首先后端配置CrosConfig解决跨区请求问题。前端引入axios类库，分别发送get/post/put/delete请求即可。

小结

四、 前端工程化思想/完成商城首页效果

本项目前端使用vue-cli项目
首先检查 Git/Node.js/vue-cli 是否配置成功

从vue-cli3后，webpack配置目录就已被隐藏。
一般前端端口占用80

Vue.config.js 配置修改端口号

首先需要给vue添加路由组件router

可以直接使用ElementUI添加组件
导航栏 + 轮播组件 + 内容列表 + 页面尾部

跨域请求问题

前端解决跨域问题：
Vue 在vue.config.js中配置

前后端分离开发经常会遇到跨域请求问题，浏览器默认不允许跨域请求的。
跨域请求的情况：
1.域名不同
2.端口不同
3，协议不同(http/https)

解决方法：
1.后端解决：在springboot的config包下创建一个CorsConfig的配置类即可
2.前端解决：vue.config.js里面设置代理(proxy)代码如上图。
如果前后端都解决跨域问题更好，这样是双保险。

Vue项目结构

assets放静态资源 components 放视图组件 mock 放测试接口
plugins放第三方插件 router 路由 store 状态管理
util 用户封装工具类 views 视图

五、登录认证

@Column(length = 20)
可以限制字段长度

凡是有登录注册的模块的web应用都必须要解决两个核心问题。
1.登录认证
系统有一些功能是要求必须登录后才能使用的，必须要检查登录认证。
2.权限认证
登录之后，有些操作必须要检查是否有对应的权限(角色)，才能操作。

无论是登录还是权限认证，都需借助第三方工具来完成。目前主流的工具有：Shiro apache
Spring Security Spring
(以上两个学习成本较高，较复杂)

本项目使用的是国内的较简洁的工具：sa-token权限认证框架
(直接到官网复制使用)

Redis 经常当做服务器端的缓存
Redis是一个key-value 存储系统，跨平台的非关系型数据库。
Redis 是一个开源的使用 ANSI C 语言编写、遵守 BSD 协议、支持网络、可基于内存、分布式、可选持久性的键值对(Key-Value)存储数据库，并提供多种语言的 API。
Redis 通常被称为数据结构服务器，因为值（value）可以是字符串(String)、哈希(Hash)、列表(list)、集合(sets)和有序集合(sorted sets)等类型。

Redis可以持久化会话(session)，即便服务器重启。

六、验证码与权限认证

问题：
前端中MyNavigator的isLogin的值(boolean值)是参考服务器的登录认证，还是参考浏览器的本地缓存？

登录验证

在 NodeJS web server 项目上，我们需要做登录验证，通过 用户名和密码 换取 token 是常用的方式。
JSON Web Token是一种 JSON 表达的 token 格式。一个 token 包含了三部分：header，payload，signature。
header 是 token 的一部分，用来存放 token 的类型和编码方式，通常是使用 base-64 编码。
payload 包含了信息。你可以存放任一种信息，比如用户信息，产品信息等。它们都是使用 base-64 编码方式进行存储。
signature 包括了 header，payload 和密钥的混合体。signature 必须安全地保存储在服务端。

临时字段(例如验证码),可以不映射入表内，加上注解：
@Transient //JPA的注解
@TableField(exist = false) //Mybatis

验证码实现思路

前端发送token，服务器收到token，以token为键，验证码为值，保存到redis缓存中，设置过期时间。
注册的时候，post请求携带前端的token，服务器比对有没有该token的键在redis缓存中，如果有则取出来，和regUser.validateCode属性对比，如果一样则验证码通过。
记住我  的功能要通过前端的cookie实现。
前端只能保存每次最后一次登录成功的用户信息到本地缓存里面。
这里和后端再次判断登录状态本身不冲突。
在试验cookie效果的时候，先清空一下浏览器缓存(清除浏览数据)。

有效验证一定要通过邮箱验证，或者手机短信验证才能实现。

权限认证

权限认证:同样使用了sa-token中的角色认证
创建一个角色表和一个用户和角色的关系表

判断用户的角色和权限一定是在用户登录成功之后才能判断。

七、设计商品分类查询接口

SpringCloud管理微服务模块

后端负责“三高”: 高并发，高负载，高性能

实际项目开发时，前端使用mock测试来模拟后端的接口和数据。

前后端分离后，项目如何部署

  后端项目打包成war包或者jar包，使用docker或者直接部署到linux服务器上运行。
（打包名需与pom文件中的finalName一致。同时需在pom文件中设置跳过测试。从Maven的Lifecycle中的package，右键Run Maven Build，成功后，在targe文件夹下就会出现一个jar包）

  前端通常部署到Nginx服务器上。Nginx通常使用linux版本。
  当Nginx不识别代理接口时，需要在Nginx中配置反向代理(nginx常用功能之一，还有动静分离，负载均衡等)。
（前端使用npm build即可打包。会出现一个dist文件夹，将其下所有文件复制到Nginx的HTML下。运行程序即可。前端端口一般设置80。）

Nginx一次可以部署多个项目，在HTML文件夹下可以划分子目录。

小结

八、SpringCloud 微服务框架

学习网站 ：方志朋

前后端可以都放到idea上
idea把Vue插件安装后，也可以开发Vue项目
前端 package.json npm server

SpringCloud 提供全套的分布式系统解决方案

nacos配置

nacos作为注册中心，有standalone(单机版–>一般用于demo测试),cluster(集群)两种运行方式。

先将nacos中nacos_mysql.sql文件导入MySQL中(需将配置文档中的数据库用户名和密码改为自己的)，创建出nacos所需要用的表。
在bin下startup.cmd中改ＭＯＤＥ（运行模式）,之后启动该文件即可(占用8848端口)。

SpringCloud 项目建立流程

首先在事先创建好的工作空间中创建Empty Project;
项目开始前的setting准备工作:
File Encoding: UTF-8
Maven: Execute goals recursively ; Always update snapshots ;
Update Incices on project open
Compiler: Build project automatically

接下来在空项目中创建Maven模块作为父模块(实际就是一个pom)，并在pom中添加父模块依赖，删除其src;
GroupId需与要测试项目的GroupId一致，本项目是com.oracle。

创建服务提供者(provider)：
后端mall_serve当服务提供者，将其(后端项目)放入Springcloud项目的工作空间下就行(与父模块，服务消费者平级)。
(还需在idea中将其引入，此时为平行关系，再将mall_serve中pom中的GroupId改为父模块的值，之后在父模块的pom中添加mall_serve,还需将服务提供者的依赖添加到mall_serve的pom中。之后在mall_serve的application.yml中spring下添加配置，最后在启动类中添加一个注解@EnableDiscoveryClient)

创建服务消费者(consumer)：
父模块目录与子模块目录是平级的，在Empty project中创建子模块，将其pom中部分内容与父模块一致(需要注意子模块自己的artifactId的值)，还需在父模块的pom的中添加comsumer，同样也需要将服务消费者的依赖添加到comsumer的pom中，其application.yml也需要添加配置。启动类上同样也需要添加三个注解。最后创建一个接口和一个controller去调用provider。
【注.所添加的依赖和配置都是通过网上复制来的，比如说方志朋的教程中的。】

Allow parallel run的√要打上，表示可以启动多个实例。

出现bug，多问互联网。

九、gateway和sentinel

gateway

gateway 服务网关: 路由转发、权限校验、限流控制等。
建立gateway模块，配置过程同provider 和 consumer。
(不要忘记启动类加注解)
不要忘记设置pom中的<java.version>1.8<>和<maven.compiler.source / target>1.8<>。

yml配置文件中代码出现黄色，大多是缺少依赖。首先看Maven下依赖是否导入完成，若还是黄色，则可能是代码层次结构不对(类似python的缩进)。

sentinel

sentinel(哨兵)作为熔断器，为微服务提供流量控制，熔断降级。
(占用8748端口)，直接在comsummer上进行改造(也可放在gateway上)，添加依赖

sleuth + zipkin 实现链路跟踪

sleuth在分布式系统中提供追踪解决方案，并且兼容支持了zipkin，只需要在pom文件中引入相应的依赖即可。
zipkin实现链路跟踪，占用9411端口。需要在provider、consumer和gateway 的pom上都添加zipkin依赖。也可以直接在父模块的pom中添加(子模块自动全导)。同样需要给三个文件的yml添加配置。
调用关系：
首先调用gateway网关的一个接口，网关再去调用consummer接口，comsummer才去调用真正的服务提供者的接口。

小结

前后端分离开发
后端：接口，三高(高并发、高性能、高可靠性)，算法，业务逻辑实现
前端：调用后端接口，负责数据显示，提升用户体验，用户体验优化，
浏览器优化，性能优化等