安装 axios 封装前后端对接数据工具
npm i axios -S
简单测试 axios
axios.get("http://localhost:9999/admin/selectAll").then(res =>{console.log(res)
})
跨域处理
跨域错误：
在 Springboot 里面设置统一的跨域处理
package com.example.common;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 {@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedOrigin("*"); //1 设置访问源地址corsConfiguration.addAllowedHeader("*"); //2 设置访问源请求头corsConfiguration.addAllowedMethod("*");//3 设置访问源请求方法source.registerCorsConfiguration("/**", corsConfiguration);//4 对接口配置跨域设置return new CorsFilter(source);}
}
设置完记得重启
封装统一的请求工具 request.js
import axios from "axios";
import {ElMessage} from "element-plus";const request = axios.create({baseURL:'http://localhost:9999',timeout:30000 //后台接口超过时间
})//request 拦截器
//可以自请求发送前对请求做一些处理
request.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json;charest=utf-8';return config
},error => {return Promise.reject(error)
});//respond 拦截器
//可以在接口响应后统一处理结果
request.interceptors.response.use(response => {let res = response.data;//兼容服务端返回的字符串数据if (typeof res == 'string'){res = res ? JSON.parse(res) : res}return res;},error => {if (error.response.status === 404){ElMessage.error('未找到请求接口')}else if (error.response.status ===500){ElMessage.error('系统异常，请查看后端控制台报错')}else {console.error(error.message)}return Promise.reject(error)}
)export default request
测试前后端数据查询
使用 request 工具发起一次请求
if (res.code === '200'){console.log(res)}else {ElMessage.error(res.msg)}
})
获取的数据样例
分页查询
分页对象
total：数据库表的所有数据总的个数
list：返回的数据数组
pageNumber：当前的页码
pageSize：每页展示的个数
使用 PageHelper 插件
在 pom.xml 里面添加依赖
<!-- 分页插件pageHelper --><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.4.6</version><exclusions><exclusion><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId></exclusion></exclusions></dependency>
后端返回的分页对象
分页查询的请求方法
<div class="card" style="margin-bottom: 5px"><el-table :data="data.tableData" style="width: 100%" :header-cell-style="{color:'#333',backgroundColor:'#eaf4ff'}"><el-table-column type="selection" width="55" /><el-table-column prop="username" label="账号" /><el-table-column prop="name" label="名称" /><el-table-column prop="phone" label="电话" /><el-table-column prop="email" label="邮箱" /></el-table><div class="card"><el-paginationv-model:current-page="data.pageNum"v-model:page-size="data.pageSize"layout="total, sizes,prev, pager, next,jumper":page-sizes="[5,10,20]":total="data.total"@current-change="load"@size-change="load"/></div></div>
const load = () => {request.get('/admin/selectPage',{params:{pageNum:data.pageNum,pageSize:data.pageSize}}).then(res => {if(res.code === '200'){data.tableData = res.data.listdata.total = res.data.total}else {ElMessage.error(res.msg)}})
}
load()
排查问题：页面数据少了，不展示怎么办？
看网络请求的数据对不对
卸载 vue 的 dev-tools
npm uninstall vite-plugin-vue-devtools
条件查询
前端传入条件，后端输出结果，注意看 sql 语句
在网络请求的载荷里面有数据
条件查询 sql 语句
<select id="selectAll" resultType="com.example.entity.Admin">select * from `admin`<where><if test="username != null">username like concat('%', #{username}, '%')</if><if test="name != null">and name like concat('%', #{name}, '%')</if> <!-- 相当于 like '%1%'--></where>order by id desc</select>
vue 调用：
const data = reactive({username:null,name:null,pageNum:1,pageSize:5,total:3,tableData:[]
})const load = () => {request.get('/admin/selectPage',{params:{pageNum:data.pageNum,pageSize:data.pageSize,username:data.username,name:data.name}}).then(res => {if(res.code === '200'){data.tableData = res.data.listdata.total = res.data.total}else {ElMessage.error(res.msg)}})
}
load()const reset = () => {data.username = nulldata.name = nullload()
}