Vite+vue3+ts +Element-puls （vant）进阶 第六章 分页查询

api.ts

import service from "./index";

// 用过用户名查询
interface ListDatas {
    page: number
    pageSize: number
    name:string
}
export function NameList(params: ListDatas) {
    return service(
        {
            url: '/employee/page',
            method: 'get',
            params
        }
    )
}

index.ts

import axios, { AxiosRequestConfig, AxiosResponseHeaders } from 'axios'
import { ElNotification } from 'element-plus'

// 处理  类型“AxiosResponse<any, any>”上不存在属性“errorinfo”。ts(2339) 脑壳疼！关键一步。
declare module "axios" {
    interface AxiosResponse<T = any> {
        errorinfo: null;
        code: Number | string
        token: string;
        data: T;
        msg: string
        // 这里追加你的参数
    }
    export function create(config?: AxiosRequestConfig): AxiosInstance;
    interface AxiosHeaders<T = any> {
        errorinfo: null;
        code: Number | string
        token: string;
        data: T;
        pageNum:string
        // 这里追加你的参数
    }
    export function create(config?: AxiosRequestConfig): AxiosInstance;
}
//创建axios实例
const service = axios.create({
    //baseURL: 'http://www.javavue.cn:9991',
    baseURL: '/api',
    timeout: 5000,
    headers: { 'Content-Type': 'application/json;charset=utf-8' }
});
//请求拦截
service.interceptors.request.use((config) => {
    config.headers = config.headers || {}
    if (localStorage.getItem('token')) {
        config.headers.token = localStorage.getItem('token') || ''
    }
    return config
})


//响应拦截
service.interceptors.response.use((res) => {
    const code: number = res.data.code
    if (code !== 1) {
        ElNotification({
            message: res.data.msg,
            type: 'warning',
        })
        return Promise.reject(res.data)
    }
    return res.data
}, (error) => {
    
    console.log(error)
})




export default service

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
  plugins: [
    vue()
  ],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, "./src")
      }
    ]
  },  
  server: {
    // host设置为true才可以使用network的形式，以ip访问项目
    host: true,
    // 自动打开浏览器
    open: true,
    // 跨域设置允许
    cors: true,
    // 如果端口已占用直接退出
    strictPort: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        cookiePathRewrite: {
          '^/api': "/",
          method: ''
        },
        changeOrigin: true,//是否跨域
        ws: true,
        secure: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
      host:'localhost',
      port:'8080'
    },

  },

})
function AutoImport(arg0: {
  imports: string[] // 自动导入vue和vue-router相关函数
  dts: string // 生成 `auto-import.d.ts` 全局声明
}): import("vite").PluginOption {
  throw new Error('Function not implemented.')
}

 Type.vue

<template>
  <van-nav-bar title="分类" @click-left="onClickLeft" />
  <van-tabs v-model:active="activeName">
    <van-tab title="用户" name="a">
      <!-- 搜索 -->
      <van-search to="/Search" shape="round"  v-model="value" placeholder="请输入员工姓名" />
      <!-- 列表 -->
      <el-table :data="reactiveData.tableData" style="width: 100%">
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="username" label="账号" />
        <el-table-column prop="phone" label="手机" />
        <el-table-column label="状态">
          <template #default="scope">
            <el-popover>
              <template #reference>
                <el-tag>{{ scope.row.status }}</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <div style="padding: 10px 0">
        <el-pagination :current-page="page" :page-size="page.pageSize" :page-sizes="[2, 5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </van-tab>
    <van-tab title="分类" name="b">内容 2</van-tab>
    <van-tab title="菜品" name="c">内容 3</van-tab>
  </van-tabs>
  <!-- 底部组件 -->
  <Home />
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { NameList } from '@/request/api'
import Home from './Home.vue'
let value = ref('') //查询
const reactiveData = reactive<any>({
  tableData: []
})
//table当前分页参数
let total = ref() //总条数
const page = reactive({//配置对应的查询参数
  page: 0,
  pageSize: 2,
  name: value
});

// 向后端获取表格数据(分页)
const getList = async () => {
  const namelists = await NameList(page)
  reactiveData.tableData = namelists.data.records || []
  total = namelists.data.total

};
getList();
const handleSizeChange = (val: number) => {
  page.pageSize = val
  console.log(val)
  getList();
}
const handleCurrentChange = (val: number) => {
  page.page = val
  console.log(val)
  getList();

}
const activeName = ref();
// 参数
interface User {
  name: string
  username: string
  phone: string
  status: string
}

// 分页管理
const onClickLeft = () => {
  console.log(onClickLeft)
}
// 编辑
const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
</script>