毕设——分页查询前后端实验

created():

vue.js中created方法是一个生命周期钩子函数，一个vue实例被生成后会调用这个函数。一个vue实例被生成后还要绑定到某个html元素上，之后还要进行编译，然后再插入到document中。每一个阶段都会有一个钩子函数，方便开发者在不同阶段处理不同逻辑。

一般可以在created函数中调用ajax获取页面初始化所需的数据。

1.在创建好后端分页查询接口后，将前后端链接！！！

 home.vue

 created() {
     // 请求分页查询数据    .json() 字符串转json
    fetch( "http://localhost:9090/user/page?pageNum=1&pageSize=2").then(res =>res.json()).then(res =>{
      console.log(res)
    })

运行vue 检查：跨域（后端9090端口+前端端口8080）

解决跨域问题

在Springboot项目里加上这个配置文件CorsConfig.java，重启之后即可实现跨域访问，前端无需再配置跨域。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

注意，加完这个配置类后一定要 重启后台 ！！！

前后端数据配置：

前后端字段保持一致，一致才能将后端的数据显现在前端

后端：User.java

前端：home.vue 

前后端字段一致后配置前端，将后端数据导入（total值为分页查询展示个数）