easymock_前后端分离_mybatisplus

最新推荐文章于 2024-09-12 10:15:00 发布

CsbLanca

最新推荐文章于 2024-09-12 10:15:00 发布

阅读量587

点赞数 1

分类专栏：前端文章标签： easymock

本文链接：https://blog.youkuaiyun.com/CsbLanca/article/details/89983370

版权

前端专栏收录该内容

11 篇文章

订阅专栏

前后端分离介绍

1.前端项目流程部分介绍
–启动项目前,先将项目放在正确的项目结构位置中

访问下面地址
http://localhost:8080
得到如下界面,能够访问

esaymock介绍

EasyMock相当于是mock服务端,会自动生成数据

是一个前端模拟后台数据的服务器,通过配置能够拿到和后台一样的数据,方便在前后端分离开发中做测试,不会因为后端数据问题影响开发进度

以登录请求方式为列

登录简单流程
main.js

/*
   *如果user对象不存在,和 访问路径不是/login,跳转到登录界面
   * 简单解释就是必须登录才能访问,没有登录,就跳转到登录页面
   */
  if (!user && to.path != '/login') {
    next({ path: '/login' })
  } else {
    next()
  }

在这里插入图片描述

以上是在模拟数据服务器端模拟访问

当我们真正和后端联调的时候,我们需要将地址修改

当和后端数据接通之后,我们会遇见一个跨域访问被拒绝的错误,如何解决呢

这里我们需要解决跨域访问被拒绝的情况

事实上，SpringMVC已经帮我们写好了CORS的跨域过滤器：CorsFilter ,内部已经实现了刚才所讲的判定逻辑，我们直接用就好了。
在网关中加入跨域文件的解决方案配置
配置信息如下

GlobalCorsConfig

@Configuration  //注解该类为配置类
public class GlobalCorsConfig {
    @Bean   //bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) 允许的域,不要写*，否则cookie就无法使用了
        //允许访问的列表,跨域添加多个,列表
        config.addAllowedOrigin("http://127.0.0.1:8080");
        //2) 是否发送Cookie信息
        config.setAllowCredentials(true);
        //3) 允许的请求方式
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        // 4）允许的头信息
        config.addAllowedHeader("*");
        //2.添加映射路径，我们拦截一切请求
        UrlBasedCorsConfigurationSource configSource = new
                UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);
        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}