悟空聊架构-公众号

悟空聊架构-公众号

关注
发信
关注(28)粉丝(399)

21.SpringCloud实战项目-后台题目类型功能

1.环境准备

cnpm install
npm run dev

2. 添加目录和菜单

刷新页面,就可以看到题目中心菜单

可以看到数据库新增了两条记录,分别对应两个菜单

点击类型维护菜单,打开了链接:http://localhost:8002/#/question-type,页面显示空白页面.

3.自动生成前端页面

用renren-generator自动生成前端代码,可以参考这篇:13.SpringCloud实战项目-自动生成前后端代码

拷贝question目录到前端目录 \src\views\modules

4. 测试类型维护功能

点击类型维护菜单,可以看到请求报404

http://localhost:8080/renren-fast/question/type/list?t=1587825969456&page=1&limit=10&key=

SpringCloud整合网关可以看之前写的一篇文章：20.SpringCloud整合Gateway网关

6.配置请求到网关

文件：\static\config\index.js

api接口请求地址替换为gateway的地址

window.SITE_CONFIG['baseUrl'] = 'http://localhost:8080/renren-fast';
替换为
window.SITE_CONFIG['baseUrl'] = 'http://localhost:8060'; // 网关地址

刷新页面，发现会回到登录页面，而且验证码获取不到，F12调试工具可以看到验证码请求发送到网关上，而网关上找不到这个请求地址(http://localhost:8060/captcha.jpg)，所以报404。其实验证码请求应该访问renren-fast服务，所以我们要将验证码请求通过网关转发到renren-fast服务(http://localhost:8080/renren-fast/captcha.jpg)。

# 验证码请求：
GET http://localhost:8060/captcha.jpg?uuid=1ce21f53-1866-40b1-8b20-2f4515d59f0d 404 (Not Found)

6.注册renren-fast服务

<dependency>
    <groupId>com.jackson0714.passjava</groupId>
    <artifactId>passjava-common</artifactId>
    <version>0.0.1-SNAPSHOT</version>
</dependency>
cloud:
  nacos:
    discovery:
      server-addr:127.0.0.1:8848
application:
  name:renren-fast

7. 添加网关路由规则

passjava-gateway项目中application.yml文件配置路由规则，并重启passjava-gateway服务

spring:
  cloud:
    gateway:
      routes:
        -id:route_portal# 路由规则id
          uri:lb://renren-fast# 负载均衡，renren-fast服务
          predicates:# 断言
            -Path=/api/**# 如果前端请求路径包含 api，则应用这条路由规则
          filters:#过滤器
            -RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}# 将访问路径中包含的api替换成renren-fast，但是替换的url不会在前端显示，还是网关的访问路径。这里不是跳转到新的路径，而是转发请求。

文件：\static\config\index.js

请求路径添加api

window.SITE_CONFIG['baseUrl'] = 'http://localhost:8086';
 替换为
 window.SITE_CONFIG['baseUrl'] = 'http://localhost:8060/api'; // 添加api
http://localhost:8060/api/captcha.jpg?uuid=84d36089-07ae-4201-85c0-8217b032f21b

8.跨域问题

9.解决跨域问题

package com.jackson0714.passjava.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;

@Configuration
publicclass PassJavaCorsConfiguration {

    @Bean
    public CorsWebFilter corsWebFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        CorsConfiguration corsConfiguration = new CorsConfiguration();

        // 配置跨域
        corsConfiguration.addAllowedHeader("*"); // 允许所有请求头跨域
        corsConfiguration.addAllowedMethod("*"); // 允许所有请求方法跨域
        corsConfiguration.addAllowedOrigin("*"); // 允许所有请求来源跨域
        corsConfiguration.setAllowCredentials(true); //允许携带cookie跨域，否则跨域请求会丢失cookie信息

        source.registerCorsConfiguration("/**", corsConfiguration);

        returnnew CorsWebFilter(source);
    }
}

10.配置题目服务的路由规则

我们访问题目中心的类型页面，发现还是报404找不到资源

所以我们需要配置题目服务的路由规则，将题目中心的页面请求经网关转发到题目服务。

spring:
  cloud:
    gateway:
      routes:
        -id:route_question# 题目微服务路由规则
          uri:lb://passjava-question# 负载均衡，将请求转发到注册中心注册的renren-fast服务
          predicates:# 断言
            -Path=/api/question/**# 如果前端请求路径包含 api/question，则应用这条路由规则
          filters:#过滤器
            -RewritePath=/api/(?<segment>.*),/$\{segment}# 将跳转路径中包含的api替换成question

11.测试类型维护功能

下节预告

代码地址

https://github.com/Jackson0714/PassJava-Platform

点击“阅读原文”，查看在线文档。 

帅的人都点了在看！ 21.SpringCloud实战项目-后台题目类型功能-LMLPHP


本文分享自微信公众号 - 悟空聊架构（PassJava666）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

05-28 09:04
Powered by LMLPHP ©2025 悟空聊架构-公众号 0.052478