npm i axios -S

import axios from "axios";
axios.get("http://localhost:8080/user/findAll").then(res => {
  console.log(res.data);
});

package com.qcby.schoolshop.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() {
        // 1. 創(chuàng)建CORS配置對象
        CorsConfiguration config = new CorsConfiguration();
        // 允許的源（前端地址，*表示允許所有源，生產(chǎn)環(huán)境建議指定具體地址）
        config.addAllowedOrigin("http://localhost:5173");
        // 允許的請求頭（*表示允許所有）
        config.addAllowedHeader("*");
        // 允許的請求方法（*表示允許所有，也可以指定GET、POST、PUT等）
        config.addAllowedMethod("*");
        // 允許攜帶Cookie（如果需要跨域傳遞Cookie，需要開啟這個，且前端請求也要配置withCredentials: true）
        config.setAllowCredentials(true);
        // 預(yù)檢請求的緩存時間（單位：秒，減少預(yù)檢請求的次數(shù)）
        config.setMaxAge(3600L);
        // 2. 配置路徑映射（/**表示所有路徑）
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        // 3. 返回CORS過濾器
        return new CorsFilter(source);
    }
}

 import axios from "axios";
 axios.get('http://localhost:8080/user/findAll').then(res=>{
     console.log(res)
 })

import axios from "axios";
import {ElMessage} from "element-plus";
const request = axios.create({
  baseURL: 'http://localhost:9999',
  timeout: 30000  // 后臺接口超時時間
})
// request 攔截器
// 可以自請求發(fā)送前對請求做一些處理
request.interceptors.request.use(config => {
  config.headers['Content-Type'] = 'application/json;charset=utf-8';
  return config
}, error => {
  return Promise.reject(error)
});
// response 攔截器
// 可以在接口響應(yīng)后統(tǒng)一處理結(jié)果
request.interceptors.response.use(
  response => {
    let res = response.data;
    // 兼容服務(wù)端返回的字符串?dāng)?shù)據(jù)
    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('系統(tǒng)異常，請查看后端控制臺報錯')
    } else {
      console.error(error.message)
    }
    return Promise.reject(error)
  }
)
export default request

<!--注意最后別寫;-->
<select id="findAll" resultType="com.qcby.vuespringbootdemo.entity.User">
    select * from user order by id desc 
</select>

<!-- 分頁插件pagehelper -->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.4.6</version>
    <!--排除和我們引入的mybatis的影響-->
    <exclusions>
        <exclusion>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
        </exclusion>
    </exclusions>
</dependency>

public PageInfo<User> selectPage(Integer pageNum,Integer pageSize){
    //開啟分頁查詢
    PageHelper.startPage(pageNum,pageSize);
    List<User> users = userDao.findAll();
    return PageInfo.of(users);
}

@GetMapping("/selectPage")
@ResponseBody
public Result selectPage(@RequestParam(defaultValue = "1") Integer pageNum,
                         @RequestParam(defaultValue = "5")Integer pageSize){
    PageInfo<User> userPageInfo = userService.selectPage(pageNum, pageSize);
    return Result.success(userPageInfo);
}

<div class="card" style="margin-bottom: 5px">
      <el-table :data="data.tableData" style="width: 100%" :header-cell-style="{ color: '#333', backgroundColor: '#eaf4ff' }">
        <!-- type="selection"：這指定該列將包含用于行選擇的復(fù)選框。它允許用戶在表格中選擇一行或多行。 -->
        <el-table-column type="selection" width="55" />
        <el-table-column prop="username" label="用戶名" width="180" />
        <el-table-column prop="birthday" label="生日" width="180" />
        <el-table-column prop="sex" label="性別" width="80" />
        <el-table-column prop="address" label="地址" width="180" />
      </el-table>
    </div>

import { reactive } from "vue";
import {Search} from "@element-plus/icons-vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
const data = reactive({
  name: null,
  pageNum: 1,
  pageSize: 5,
  total:0,
  tableData: []
})
const load = () => {
  request.get('/user/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize
    }
  }).then(res => {
    if (res.code === '200') {
      data.tableData = res.data.list
      data.total = res.data.total
    } else {
      ElMessage.error(res.msg)
    }
  })
}
load()

// 添加日期格式化函數(shù)
const dateFormat = (row, column, cellValue) => {
  if (!cellValue) return ''
  const date = new Date(cellValue)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

<div class="card">
      <el-pagination
          v-model:current-page="data.pageNum"
          :page-size="data.pageSize"
          layout="total, prev, pager, next"
          :total="data.total"
          @current-change="load"
          @size-change="load"
      />
    </div>

<div class="card" style="margin-bottom: 5px">
      <el-input clearable @clear="load" style="width: 260px; margin-right: 5px" v-model="data.username" placeholder="請輸入用戶名查詢" :prefix-icon="Search"></el-input>
      <el-input clearable @clear="load" style="width: 260px; margin-right: 5px" v-model="data.address" placeholder="請輸入地址查詢" :prefix-icon="Search"></el-input>
      <el-button type="primary" @click="load">查 詢</el-button>
      <el-button @click="reset">重 置</el-button>
</div>

//搜索重置
const reset = () => {
  data.username = null
  data.address = null
  load()
}

<select id="findAll" resultType="com.qcby.springboot.entity.User"
        parameterType="com.qcby.springboot.entity.User">
    select * from user
        <where>
           <if test="username!=null">
               username like concat('%', #{username}, '%')
           </if>
            <if test="address!=null">
                and address  like concat('%', #{address}, '%')
            </if>
        </where>
    order by id
</select>

@Override
public PageInfo<User> selectPage(Integer pageNum, Integer pageSize,User user) {
    //開啟分頁查詢
    PageHelper.startPage(pageNum,pageSize);
    List<User> users = userDao.findAll(user);
    return PageInfo.of(users);
}

@GetMapping("/selectPage")
@ResponseBody
public Result selectPage(@RequestParam(defaultValue = "1") Integer pageNum,
                         @RequestParam(defaultValue = "5")Integer pageSize,
                         User user){
    System.out.println(user.toString());
    PageInfo<User> userPageInfo = userService.selectPage(pageNum, pageSize,user);
    return Result.success(userPageInfo);
}