Spring Cloud + Vue前后端分离-第5章 单表管理功能前后端开发

Spring Cloud + Vue前后端分离-第5章 单表管理功能前后端开发

完成单表的增删改查

控台单表增删改查的前后端开发，重点学习前后端数据交互，vue ajax库axios的使用等

通用组件开发:分页、确认框、提示框、等待框等

常用的公共组件:确认框、提示框、等待框，统一日志拦截器等。使用vue自定义组件制作分页组件，mybatis分页插件pagehelper的使用等

5-1 大章列表查询功能开发1

增加maven子项目business

1.增加business模块，并增加初始启动代码

Shift+F6重命名。重命名也是一种重构，会将所有引用到的地方都一起改名，甚至是注释掉的代码也会一起改掉

application.properties

spring.application.name=business
server.servlet.context-path=/business
server.port=9002
eureka.client.service-url.defaultZone=http://localhost:8761/eureka/

大章表设计及持久层代码生成

将sql脚本和代码放一起的好处是，可以通用git提交记录来查看sql的变更记录，方便追溯

一般的表结构设计，都会有一个ID字段，作为主键，与业务无关

1.增加大章chapter表sql，生成持久层代码

小技巧:可以将常用的文件放入收藏夹，方便查找

注:每次要生成新表代码时，旧的表不要删除，但要注释掉。(同时生产多个表也可以，但没必要）

自动生成的代码

完成后端列表查询接口

同样，在business里的controller层也是一样的创建方法 

启动注册中心，再启动business服务

1.增加dto层，用于controller和service层 

DTO : Data Transfer Object 数据传输对象，用于数据传输

又是一个约定: domain内的实体，是mybatis generator自动生成的，不允许手动修改。一旦修改，再次生成实体类时， 所做的修改会被覆盖

domain作用于service和mapper;dto作用于controller和service

Ctrl+Alt+V为表达式生成一个变量

拓展：编写自己的for语句代码

for(int $INDEX$ = 0, l = $LIST$.size(); $INDEX$ < l; $INDEX$++) {
    $END$
}

1. 点击按钮弹出变量设置窗口

2.设置这两个变量

BeanUtils是Spring提供的一个工具类，用于实体间的复制。后续我们会对BeanUtils做封闭，简化使用，提高开发效率

2.增加ChapterDto

是chapter复制的
3.修改ChapterService，将返回Chapter改成返回ChapterDto

5-2 大章列表查询功能开发2

从这个地方开始，我换mac了，嘿嘿

前端页面开发

row col-xs-12都是bootstrap栅格系统的内置样式，用于响应式页面的布局，需熟练掌握

选中全部，Shift+Tab，反向缩进

点击sidebar菜单实现页面跳转

二级菜单要显示成激活状态，只需要添加active样式

接下来完成功能：点击左侧菜单，该菜单变成激活状态，并跳到相应的路由页面

siblings，jquery的方法，获取所有兄弟节点

约定：id 的命名要和路由相关。后续我们会用到这个约定。

，类似于，用于链接跳转

为每一个路由都加上一个name属性，后续做通用的sidebar激活样式方法时会用到

 

通用的sidebar 点击激活样式方法

通用的功能，要尽量做个通用的方法，要学会“懒”。

1.通用的sidebar点击激活样式方法，使用watch 监听路由变化

vue 内置的watch，用来监测vue 实例上的数据变动，$route 也是一个变量。

通过name 属性值，得到菜单id 的值。前面有约定：id 的命名要和路由相关。程序开发中有一项设计范式叫：约定大于配置（按约定编程）。

此时如果从login页面点击登录跳到welcome页面，welcome并不会有激活样式。这里的watch，只在admin下面的子组件互相跳转时有效

js中有this 关键字，代表当前执行方法的对象。养成习惯，在方法开头，声明本地变量_this 代替this。后面会介绍直接用this的坑。

5-3 大章列表查询功能开发3

集成axios 完成前后端交互

vue也支持使用jquery ajax 来请求后端借口，推荐使用vue axios

注意：要先进到vue cli 项目，再安装插件

--save:在package.json添加依赖。（不加-- save的话，只是去下载插件，项目中并没有依赖插件）

1.安装axios

npm install axios --save

2.以vue属性的方式使用axios

修改main.js

import axios from 'axios'

Vue.prototype.$ajax = axios;

Vue.prototype.xxx,可以理解为Vue组件的全局变量。可以在任意Vue组件中，使用this.xxx 来获取这个值。$ 是代表Vue 全局属性的一个约定

3.chapter.vue 中使用$ajax

list() {
  let _this = this;
  _this.$ajax.get("http://127.0.0.1:9002/business/admin/chapter/list").then((response) => {
    console.log("查询大章列表结果", response);
  })
}

/admin 用于控台类的接口，/web 用于网站类的接口。接口设计中，用不同的请求前缀代表不同的入口，做接口隔离，方便做鉴权、统计、监控等

启动serve、注册中心EurekaApplication、BusinessApplication

CORS,Cross-Origin Resource Sharing 跨站点资源分享，属于跨域问题。同个IP的不同端口间访问也属于跨域。前后端分离必然有跨域问题

4.解决跨域的问题

1.集成axios 完成前后端交互

2.增加CorsConfig，解决前后端跨域的问题

增加CorsConfig.java

package com.course.server.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedHeaders(CorsConfiguration.ALL)
                .allowedMethods(CorsConfiguration.ALL)
                .allowCredentials(true)
                .maxAge(3600); // 1小时内不需要再预检（发OPTIONS请求）
    }

}

页面改造显示真实数据

1.大章页面显示真实数据

Ctrl+Shift+减号：收起所有节点，包括所有的子节点。

Ctrl+Shift+加号：展开所有的层级。

使用data定义组件内的变量，可用于做双向数据绑定，双向数据绑定是vue 的核心功能之一。

使用this.xxx来访问组件内的变量

使用gateway 路由转发

1.使用gateway 路由转发，vue页面只访问gateway的端口

spring.cloud.gateway.routes[1].id=business
spring.cloud.gateway.routes[1].uri=http://127.0.0.1:9002
spring.cloud.gateway.routes[1].predicates[0].name=Path
spring.cloud.gateway.routes[1].predicates[0].args[0]=/business/**

这里的请求地址目前是写死在代码中的，后续我们会做优化，对请求地址做多环境的配置。

 扩展：1.解决gateway 跨域问题

gateway跨域配置

在gateway 启动类里增加

/**
     * 配置跨域
     * @return
     */
    @Bean
    public CorsWebFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();

        config.setAllowCredentials(Boolean.TRUE);
        config.addAllowedMethod("*");
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.setMaxAge(3600L);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
        source.registerCorsConfiguration("/**", config);

        return new CorsWebFilter(source);
    }

把CorsConfig.java注释掉

把服务重新启动

是否直接访问gateway就不需要跨域配置里呢？需要再验证一下

单个SpringBoot 应用使用CorsConfig 解决跨域问题。使用SpringCloud Gateway的，使用CorsWebFilter解决跨域问题。

扩展：2.使用lb://+注册中心名称作路由转发

lb意思是loadbalance  负载均衡

问题：如果配置的是IP端口，那发布到生产时就可能会访问不到，就算配置了maven多环境，也需要提前知道上线后的IP和端口，提前配好。

#spring.cloud.gateway.routes[1].uri=http://127.0.0.1:9002
spring.cloud.gateway.routes[1].uri=lb://business

5-4 分页功能开发

集成分页插件pagehelper

1.集成分页插件pagehelper，注意页码从1开始

mybatis-generator 生成的代码是不带分页功能的，使用pagehelper插件来扩展分页功能。

父包

  
     com.github.pagehelper
     pagehelper-spring-boot-starter
     1.2.10
  

server子包

  
     com.github.pagehelper
     pagehelper-spring-boot-starter
  

ChapterService.java

PageHelper.startPage(1,1);

PageHelper 的分页参数：pageNum是从1开始的 

分页功能的关键字：limit。从日志可以看出，该sql 执行的是limit 1，相当于limit 0,1 ,即从第0行开始，查1条。

插件分页语句规则：调用startPage 方法之后，执行的第一个select 语句会进行分页。

limit 1,1  :从行号1（行号是从0开始）开始，查1条

分页查询功能需要两条sql ,一条是查总记录数（通过每页条数计算出总共有多少页），一条是查当前页的记录。

分页参数前后端交互

1.分页参数前后端交互，axios 的post 请求默认是以流的方式传递参数，所以controller 里的参数要加@RequestBody 注解

泛型需要熟练掌握，在写一些通用类，工具类时很好用。

扩展：使用泛型的地方都可以用Object 代替，但是泛型可以在编译期就发现问题，并且避免了代码中写强制类型转换。

PageDto 即用来接收入参，也用来返回结果。

 当传入的分页参数不合法时，比如0,0 ,程序不会报错，而是查全部记录，分页不生效。

经验分享：在开发完代码后，需要进行测试，特别要针对一些边界值做测试。

 

接口请求参数传递，尽量使用post。使用get 请求在url 里拼参数的话，会使url 变得很长，有些浏览器或服务器会对url 长度做限制，导致请求失败。

private static final Logger LOG = LoggerFactory.getLogger($CLASSNAME$.class);

日志输出时，变量使用点位符，比如LOG.info("输出:id={},姓名={}",id,name),而不是LOG.info("输出:id=“+ id +”,姓名=" + name)

post请求有多种参数传递，通过header里的Content-Type来标识，常见的有两种，一种是表单的方式，另一种是json（流）的方式。

jquery 默认是以表单的方式，vue angular 默认是用json 的方式。

5-5 前端分页组件的使用

增加刷新功能

注意：