10.前后端联调发送axios请求实现分页带条件查询

预期效果

页面开发

整个主题分三部分组成

直接去 elementUI 官方组件复制即可

https://element.eleme.cn/#/zh-CN/component/installation

发送 axios 请求

1.环境变量配置

前端项目开发完成后，一般会通过nginx部署，需要在nginx中根据特定的路径前缀反向代理到相应的后端，所以给前端项目请求统一添加一个前缀，方便nginx解析

新建.env.development

# 开发环境配置
ENV = 'development'
VUE_APP_BASE_API = '/dev-api'

新建.env.production

# 生产环境配置
ENV = 'production'
VUE_APP_BASE_API = '/prod-api'

修改axios.js

取代jquery.ajax，功能更专一，性能更好

…….
let config = {
  // baseURL: process.env.baseURL || process.env.apiUrl || ""
  // timeout: 60 * 1000, // Timeout
  // withCredentials: true, // Check cross-site Access-Control   /dev-api
  baseURL: process.env.VUE_APP_BASE_API
};
……

在最后一行添加，导出变量给其他模块使用

export {_axios as request}

2.配置代理解决跨域问题

后端接口开发完成后，开发时需要通过代理服务器路由到后端，不再使用mock，所以配置如下，在根目录（跟package.json同级）添加vue.config.js配置代理服务器，将/dev-api开头的请求代理到后端服务器http://localhost:8888

module.exports = {
  devServer:{
    host:'localhost',
    port:8088, //前端项目端口号
    open: true,
    proxy:{
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8888`, //后端项目地址
        changeOrigin: true,
        pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: ''}
      }
    }
  }
}

表示如果通过axios请求后端/user/add的接口，axios会自动加上前缀/dev-api，变成/dev-api/user/add，代理服务器拦截所有/dev-api开头的请求，去掉/dev-api,自动转发到http://localhost:8888/user/add；这样就可以区分静态请求和动态请求了(根据.env配置文件获取前缀)

如果ssm项目未部署在tomcat根目录，则配置target:`http://localhost:tomcat端口号/项目名字`

3.自定义请求后端js

以news api为例，路径：src/api/news.js

此js文件定义调用后端所有功能的js函数

import {request} from '@/plugins/axios'
import ApiPath from '@/api/api_path'

export function list(query) {
    return request({
        url: '/news',
        method: 'GET',
        params: query
    })
}

4. 修改news.vue页面

路径：（src/views/news/index.vue）

在<script>下引入api

import {list,del,add,update} from '@/api/news'

然后就可以在页面中调用上面import的函数访问后端了……

后端注意：前端通过axios发送Post或Put请求时，默认是使用的json格式，后端控制器参数需要些@RequetBody 实体类方式接收参数