SpringBoot3+Vue3实现查询功能

安装axios封装前后端对接数据工具

npm i axios -S

通过requst.js工具类发起请求

import axios from "axios";
import {ElMessage} from "element-plus";

const request = axios.create({
    baseURL:'http://localhost:8080',//后端统一的请求地址
    timeout:30000 //后台接口时间
})
//request 拦截器
//可以自请求发送前对请求做一些处理
request.interceptors.request.use(config =>{
    //统一的数据传输格式为json，统一的编码utf-8
    config.headers['Content-Type']='application/json;charset=utf-8';
    return config;
},error=>{
    return Promise.reject(error)
});
//response拦截器
//可以在接口响应后统一处理结果
request.interceptors.response.use(
    response =>{
        let res=response.data;
        //兼容服务端返回的字符串数据
        if(typeof  res === 'string'){
            //如果是string，转成json
            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

import request from "@/utils/request.js";

遇到了跨域错误

 在Springboot里面设置统一的跨域处理（common中添加一个类CorsConfig）

package com.example.springboot1.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 {
    @Bean
    public 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.get('/yonghu/selectAll').then(res =>{
  console.log(res);//控制台打印
  data.yonghuList=res.data;//res.data是用户的列表，是一个数组
  console.log(data.yonghuList);//控制台打印
})

 分页查询数据

分页查询：后端显示到前端表格

<div class="card" style="margin-bottom: 5px">
      <el-table :data="data.tableData" stripe>
        <el-table-column label="创建时间" prop="addTime" show-overflow-tooltip />
        <el-table-column label="用户账号" prop="yongHuZhangHao" />
        <el-table-column label="密码" prop="miMa" />
        <el-table-column label="用户姓名" prop="yongHuXingMing" />
        <el-table-column label="性别" prop="xingBie" />
        <el-table-column label="联系方式" prop="lianXiFangShi" />
        <el-table-column label="身份证" prop="ShenFenZheng" show-overflow-tooltip />
        <el-table-column label="邮箱" prop="youXiang" show-overflow-tooltip />
        <el-table-column label="头像" prop="touXiang" show-overflow-tooltip />
      </el-table>
    </div>
    <div style="margin-top: 10px">
      <el-pagination
          @size-change="load"
          @current-change="load"
          v-model:current-page="data.pageNum"
          v-model:page-size="data.pageSize"
          :page-sizes="[4, 8, 12, 24]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.total"
      />
    </div>

import request from "@/utils/request.js";
const data=reactive({
  name:null,
  tableData:[],
  pageNum:1,
  pageSize:5,
  total:0
})
const load = () => {
  request.get('/yonghu/selectPage',{
    params:{
      pageNum:data.pageNum,
      pageSize:data.pageSize,
    }
  }).then(res=>{
    data.tableData=res.data.list
    data.total=res.data.total
  })
}
load()

 条件查询

动态条件模糊查询

<select id="selectAll" resultType="com.example.springboot1.entity.YongHu">
    select * from yonghu
    <where>
        <if test="yonghuxingming != null">yonghuxingming like concat('%',#{yongHuXingMing},'%')</if>
    </where>
    order by id desc
</select>

查询sql