【探花交友DAY 10】网关和后台系统

1. Spring Gateway

1.1 使用背景

探花交友客户端的基本功能已经完善，下面要做的是后台管理系统，也是一个独立的微服务。这样会产生一个问题，就是后台管理系统和客户端都要访问后台服务器的不同微服务，他们的端口和IP可能不同，如何实现配置相同IP来实现访问不同的微服务呢。

解决上述的问题可以使用网关，所有的请求都发送到网关，网关根据不同的请求路径，将请求路由到对应的微服务模块上即可。API网关有很多实现方式，我们通过SpringCloud Gateway实现。

1.2 使用方法

引入依赖

<dependencies><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifactId></dependency><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId></dependency><!-- 监控检查--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-actuator</artifactId></dependency><!-- nacos配置中心依赖支持<dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId></dependency>--><dependency><groupId>com.itheima</groupId><artifactId>tanhua-commons</artifactId><version>1.0-SNAPSHOT</version></dependency>
</dependencies>

引导类

@SpringBootApplication
public class GatewayApplication {public static void main(String[] args) {SpringApplication.run(GatewayApplication.class, args);}
}

跨域问题配置类

package com.itheima.gateway.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
import org.springframework.web.util.pattern.PathPatternParser;/*** 跨域支持*/
@Configuration
public class CorsConfig {@Beanpublic CorsWebFilter corsFilter() {CorsConfiguration config = new CorsConfiguration();config.addAllowedMethod("*");config.addAllowedOrigin("*");config.addAllowedHeader("*");UrlBasedCorsConfigurationSource source =new UrlBasedCorsConfigurationSource(new PathPatternParser());source.registerCorsConfiguration("/**", config);return new CorsWebFilter(source);}
}

配置文件

server:port: 8888
spring:profiles:active: prodapplication:name: tanhua-gatewaycloud:nacos:discovery:server-addr: 192.168.136.160:8848gateway:globalcors:add-to-simple-url-handler-mapping: truecorsConfigurations:'[/**]':allowedHeaders: "*"allowedOrigins: "*"allowedMethods:- GET- POST- DELETE- PUT- OPTIONroutes:# 探花系统- id: tanhua-app-serveruri: lb://tanhua-app-serverpredicates:- Path=/app/**filters:- StripPrefix= 1# 后台系统- id: tanhua-adminuri: lb://tanhua-adminpredicates:- Path=/admin/**filters:- StripPrefix= 1
gateway:excludedUrls: /user/login,/user/loginVerification,/system/users/verification,/system/users/login

1.3 登陆统一鉴权

在引入了网关以后，登陆鉴权的相关操作也应该移动到网关中去做。因此，我们在网关的微服务中添加过滤器，对用户登陆的权限进行验证。鉴权的逻辑和之前是一样的。具体代码如下：

@Component
@Order(1)
public class AuthFilter implements GlobalFilter {@Value("#{'${gateway.excludedUrls}'.split(',')}")private List<String> excludedUrls;@Overridepublic Mono<Void> filter(ServerWebExchange exchange, GatewayFilterChain chain) {String url = exchange.getRequest().getURI().getPath();if (excludedUrls.contains(url)) {// 如果请求连接属于排除的url，那么直接访问return chain.filter(exchange);}// 获取tokenString token = exchange.getRequest().getHeaders().getFirst("Authorization");if(!StringUtils.isEmpty(token)){token = token.replace("Bearer ", "");}if (!JwtUtils.verifyToken(token)) {// token不合法Map<String, Object> responseData = new HashMap<>();responseData.put("errCode", 401);responseData.put("errMessage", "用户未登录");return responseError(exchange.getResponse(),responseData);}return chain.filter(exchange);}private Mono<Void> responseError(ServerHttpResponse response, Map<String, Object> responseData){// 将信息转换为 JSONObjectMapper objectMapper = new ObjectMapper();byte[] data = new byte[0];try {data = objectMapper.writeValueAsBytes(responseData);} catch (JsonProcessingException e) {e.printStackTrace();}// 输出错误信息到页面DataBuffer buffer = response.bufferFactory().wrap(data);response.setStatusCode(HttpStatus.UNAUTHORIZED);response.getHeaders().add("Content-Type", "application/json;charset=UTF-8");return response.writeWith(Mono.just(buffer));}

不要忘记添加@Component注解，这个过滤器才能生效。

2. Nacos注册中心

2.1 使用背景

我们想象一下，如果有多个微服务的配置信息需要修改，那么我们还需要手动的修改每一个微服务的代码，那样的话效率就太低了。我们可以借助Nacos的配置中心，统一的对配置文件进行配置。

2.2 使用方法

引入依赖

<dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
</dependency>

编写配置文件

需要注意时，我们在启动的时候需要根据配置文件找到nacos配置中心，然后读取配置文件。这样一看似乎是一个死循环。实际上，我们要把关于配置中心的配置写入bootstrap.yml。它的执行顺序比application.yml早。

server:port: 8888
spring:profiles:active: prodapplication:name: tanhua-gatewaycloud:nacos:discovery:server-addr: 192.168.136.160:8848config:server-addr: 192.168.136.160:8848file-extension: yml

配置完成后，在启动的时候，会根据application name + profiles active + file-extension到配置中心中加载对应的配置并执行。此外Nacos配置中心还支持热部署模式，具体的详情参见https://blog.csdn.net/lyx7762/article/details/128122623

3. 探花交友后台管理系统

探花交友APP建立的后台管理系统，目的是完成探花交友项目的业务闭环，主要功能包括：用户管理、动态管理、审核管理以及系统管理。

后台系统拥有独立的数据库，具体的表如下所示：

3.1 环境搭建

将资料中的tanhua-admin.sql引入到mysql数据库中

导入静态页面

后台系统也是采用前后端分离的方式，前端采用Vue.js实现，关于前端系统我们不进行实现，拿来直接使用。

nginx安装将资料中提供的nginx解压到合适的位置

其中html目录中为，vue编译后的所有页面。修改Nginx的/conf/nginx.conf配置文件：

    server {listen       8088;  #请求端口server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;location / {root   html;index  index.html index.htm;}location  /management {proxy_pass http://127.0.0.1:18083/;  #转发后台地址}#....略}

• 访问vue页面的路径：localhost:8088
• 其中内部调用java服务器的路径 ： http://127.0.0.1:18083/

测试

双击nginx.exe,待启动完成后访问：http://127.0.0.1:8088即可访问后台项目

后端直接引入tanhua-admin模块即可。

3.2 用户登陆

用户登陆的业务分为三个部分

• 首先前端发送请求，请求验证码，后台生成验证码图像后以流的形式返回给前端
• 前端发送验证码以及账号密码到后端，后端验证后，如果通过则返回一个token
• 前端发送token，后端接收，验证无误后，查询登陆用户的信息并跳转到主页面。

我们先来完成获取验证码的功能。

3.2.1 验证码获取

具体的业务逻辑如下。

• 前端获取UUID，作为参数传递给后端，后端获取后，生成验证码
• 同时后端将验证码以UUID作为key保存到redis中。
• 将图片以流的形式写回前端。

具体的接口如下：

代码如下所示：

/*** 获取验证码图片** @param uuid* @param response* @throws IOException*/
@GetMapping("/verification")
public void verificationCode(String uuid, HttpServletResponse response) throws IOException {// 获取验证码LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(299, 97);// 保存到Redisthis.redisTemplate.opsForValue().set(Constants.CAP_CODE + uuid, lineCaptcha.getCode());// 将图片写入前端lineCaptcha.write(response.getOutputStream());
}

这里我们使用了hutool工具类来生成验证码

3.2.2 用户登陆

用户登陆的业务逻辑如下：

• 前端传递账号密码验证码和UUID
• 后端进行从Redis中获取验证码进行校验，通过后继续验证用户名和密码
• 都通过后生成token返回给前端

流程如下：

具体代码如下：

/*** 登录获取token** @param map* @return*/
@PostMapping("/login")
public ResponseEntity login(@RequestBody Map map) {Map retMap = this.adminService.login(map);return ResponseEntity.ok(map);
}

public Map login(Map map) {// 获取参数String username = map.get("username").toString();String password = map.get("password").toString();String verificationCode = map.get("verificationCode").toString();String uuid = map.get("uuid").toString();// 验证验证码String redisCode = this.redisTemplate.opsForValue().get(Constants.CAP_CODE + uuid);if (StringUtils.isEmpty(redisCode) || !redisCode.equals(verificationCode)) {throw new BusinessException("验证码错误");}// 验证账号密码LambdaQueryWrapper<Admin> queryWrapper = new LambdaQueryWrapper<>();queryWrapper.eq(Admin::getUsername, username);queryWrapper.eq(Admin::getPassword, password);Admin admin = this.adminMapper.selectOne(queryWrapper);if (admin == null) {throw new BusinessException("用户名或密码错误！");}// 生成tokenMap tokenMap = new HashMap();tokenMap.put("id", admin.getId());tokenMap.put("username", admin.getUsername());String token = JwtUtils.getToken(tokenMap);// 封装结果Map retMap = new HashMap();retMap.put("token", token);return retMap;}

3.2.3 获取用户资料跳转页面

• 获取到token后，前端将向后端发送请求，携带token
• 后端解析token，并查询登陆用户的详细信息返回给前端
• 前端跳转页面

具体代码如下：

public AdminVo profile() {Long userId = AdminHolder.getUserId();Admin admin = this.adminMapper.selectById(userId);return AdminVo.init(admin);
}

public AdminVo profile() {Long userId = AdminHolder.getUserId();Admin admin = this.adminMapper.selectById(userId);return AdminVo.init(admin);
}

3.2 用户管理

用户管理：对探花交友客户端注册用户的管理（查询业务数据），使用Dubbo的形式调用tanhua-dubbo-service获取响应的数据结果。后台管理系统可以对所有注册用户进行统一管理。如查看用户列表，用户详情，用户发布的视频/动态等

3.2.1 查询用户列表

分页查询所有的用户列表，接口定义如下：

具体代码如下：

/*** 查询用户列表** @return*/
@GetMapping("/users")
public ResponseEntity users(@RequestParam(defaultValue = "1") Integer page,@RequestParam(defaultValue = "20") Integer pagesize) {PageResult result = this.manageService.getUsers(page, pagesize);return ResponseEntity.ok(result);
}

public PageResult getUsers(Integer page, Integer pagesize) {IPage<UserInfo> iPage = this.userInfoApi.getUsers(page, pagesize);List<UserInfo> userInfoList = iPage.getRecords();for (UserInfo userInfo : userInfoList) {String key = USER_FREEZE + userInfo.getId();if (Boolean.TRUE.equals(this.redisTemplate.hasKey(key))) {userInfo.setUserStatus("2");}}return new PageResult(page, pagesize, (int) iPage.getTotal(), iPage.getRecords());
}

3.2.2 查看用户详细信息

在用户列表中点击某一个用户，即可展示出用户的详情，包括用户发布的动态和小视频列表。

后端要完成的业务就是根据用户的id，去查询用户的详情，发送的动态详情以及小视频详情。具体涉及到的三个接口定义如下：

这一部分没有什么难度，只要按照有求查询后再封装成VO对象即可，具体代码如下：

/*** 获取用户详情** @param userId* @return*/
@GetMapping("/users/{userId}")
public ResponseEntity getUserByUserId(@PathVariable(name = "userId") Long userId) {UserInfo userInfo = this.manageService.getUserByUserId(userId);return ResponseEntity.ok(userInfo);
}/*** 查询指定用户的视频列表** @param page* @param pagesize* @param uid* @return*/
@GetMapping("/videos")
public ResponseEntity getVideosByUserId(@RequestParam(defaultValue = "1") Integer page,@RequestParam(defaultValue = "20") Integer pagesize,Long uid) {PageResult result = this.manageService.getVideosByUserId(page, pagesize, uid);return ResponseEntity.ok(result);
}/*** 查询指定用户的所有动态列表** @param page* @param pagesize* @param uid* @param state* @return*/
@GetMapping("/messages")
public ResponseEntity getMovementByUserId(@RequestParam(defaultValue = "1") Integer page,@RequestParam(defaultValue = "20") Integer pagesize,Long uid, Integer state) {PageResult result = this.manageService.getMovementByUserId(page, pagesize, uid, state);return ResponseEntity.ok(result);
}

public UserInfo getUserByUserId(Long userId) {UserInfo userInfo = this.userInfoApi.getUserInfoById(userId);String key = USER_FREEZE + userInfo.getId();if (Boolean.TRUE.equals(this.redisTemplate.hasKey(key))) {userInfo.setUserStatus("2");}return userInfo;
}

public PageResult getVideosByUserId(Integer page, Integer pagesize, Long uid) {return this.videoApi.getVideosByUserId(page, pagesize, uid);
}