0
点赞
收藏
分享

微信扫一扫

个人在线学习网站(第四章 前后端交互整合)

单调先生 2022-02-03 阅读 72

Access-Control-Allow-Origin表示跨域,来自一个ip端口的页面(vue页面),要访问另一个ip端口的资源(springboot请求接口),会产生跨域接口

IDEA定位文件Ctrl+shift+F

集成axios需要导入axios
import axios from 'axios';

setup():Vue3新增的初始化方法

解决跨域问题:增加配置类

尽量把初始化方法写到onMounted()里面

<pre></pre>标签就是里面长什么样,原封不动的展示出来

多环境配置

  • 多环境配置文件要放在web根目录下

  • .env.xxx,后缀xxx和package.json里的指令的–mode xxx对应

  • 增加–port参数来修改启动端口
    前端端口的改变:启动配置后面加--port xxxx修改启动端口号

  • 自定义变量必须以VUE_APP_开头

  • 通过设置axios.defaults.baseURL,来统一设置后端的IP端口或域名
    Home.vue中请求命令不应该是写死的
    如何通过只配置一次,而不需要每次去配置这一段呢?
    想到配置的代码,就要想到main.ts
    导入axios
     

    import axios from 'axios';
    
    axios.defaults.baseURL = process.env.VUE_APP_SERVER;

    地址直接写后面就行

使用axios拦截器打印前端日志

SpringBootAOP的使用

加@Aspect注解

@Component注解,表示这个类交给Spring来管理

定义一个切点,就是针对所以的Controller 所有的方法 所有的参数

过滤器、拦截器、aop选一个就可以了

高频面试题

  1. Vue怎么调用后端接口?你一般用什么组件?
    使用Axios,npm install axios --save安装,
//发送get请求
      axios.get("http://localhost:8880/ebook/list?name=Vue").then((response) => {
        console.log(response);
      });
  1. Vue3的setup方法起什么作用?
    初始化方法,组件加载完后初始执行的方法。setup执行的时候界面没有渲染好
  2. 简单谈一谈你对跨域的理解?
    来自一个IP端口的页面(vue项目8080端口),要访问另一个IP端口的资源(springboot请求端口8880),就会产生跨域访问。解决方法,跨域配置:
@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")   //映射请求地址,针对所有接口
                .allowedOrigins("*")   //允许来源所有
                .allowedHeaders(CorsConfiguration.ALL)
                .allowedMethods(CorsConfiguration.ALL)
                .allowCredentials(true)   //允许携带凭证sessionId,cookie
                .maxAge(3600);//1小时内不需要再预检(发OPTIONS请求)
    }
}
  1. Vue3实现数据绑定有几种方法
    ref():const ebooks = ref(); ebooks.value = response.data.content;
    reactive里面放一个对象,自定义属性:
const ebooks1 = reactive({books: []});
ebooks1.books = response.data.content;
...
 return {
      ebooks,
      ebooks2: toRef(ebooks1, "books")
    }
  1. 说几个Vue组件生命周期函数
    生命周期:组件或界面从加载到销毁的过程
    onCreate:渲染前
    onMounted:组件加载完毕,界面渲染完毕后执行
  2. 双向数据绑定是什么意思?
    当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化
  3. Vue怎么配置多环境?
    增加开发和生产配置文件,放在web根目录下:.env.dev和 .env.prod
    自定义参数:VUE_APP_XXX
    修改package.json中的编译和启动命令:
  "scripts": {
    "serve-dev": "vue-cli-service serve --mode dev",
    "serve-prod": "vue-cli-service serve --mode prod",
    "build-dev": "vue-cli-service build --mode dev",
    "build-prod": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint"
  },
  1. axios拦截器用过吗?能用来做什么?
    使用axios拦截器打印请求日志和返回参数
    main.ts
/**
 * axios拦截器
 */
axios.interceptors.request.use(function (config) {
    console.log('请求参数:', config);
    return config;
}, error => {
    return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
    console.log('返回结果:', response);
    return response;
}, error => {
    console.log('返回错误:', error);
    return Promise.reject(error);
});
  1. 过滤器用过吗?有什么用?
    配置过滤器打印接口耗时。
    过滤器Filter为J2EE Servlet组件,使用时实现Filter接口,重写其中的doFilter方法,对请求和响应进行统一拦截,

  2. 过滤器能注入类吗?
    可以

  3. 过滤器和拦截器有什么区别?
    拦截器是Spring框架特有的,用于登录校验,权限校验,请求日志打印。分为preHandle和postHandle,preHandle返回true才会向后执行,还需要增加一个全局配置类
    而过滤器只在doFilter方法编写逻辑。
    执行顺序是过滤器先于拦截器。过滤器的范围更大,因为它在tomcat容器内,然后再进入到容器内的springboot应用中

  4. 拦截器能注入类吗?
    可以,@Component注解将拦截器注成一个 bean。然后使用@Autowired注解将类注入到拦截器

  5. 是否用过AOP?一般用来做什么?
    AOP是面向切面编程,采用横向抽取机制,取代传统纵向继承机制,将业务无关的代码解耦,适用于性能监视,操作日志的记录,权限校验等。横向抽取即通过代理向目标方法织入增强方法。

  6. AOP的切点、切面是什么意思?
    Pointcut切点:我们所要对哪些连接点进行拦截的定义,使用execution函数定义切点的方法切入
    Advice通知,拦截到方法以后要做的事情。分为前置通知,后置通知、环绕通知等。
    织入:动词,将增强应用到目标对象来创建新的代理对象的过程
    Aspect切面:切点+通知

  7. AOP有哪些通知?
    前置通知@Before,后置通知@After、环绕通知@Around等。

  8. AOP能注入类吗?
    可以

  9. 过滤器、拦截器、AOP有什么区别?
    见上文

举报

相关推荐

0 条评论