从远端服务器请求数据，并且完善员工管理列表

1.env

里面变量值换为真实目标服务器地址

2引入登录api

3.$confirm

调用它默认会返回一个Promise对象便于进行后续操作的处理
调用$confirm方法即可打开消息提示，它模拟了系统的 confirm。Message Box 组件也拥有极高的定制性，我们可以传入options作为第三个参数，它是一个字面量对象。type字段表明消息类型，可以为success，error，info和warning，无效的设置将会被忽略。注意，第二个参数title必须定义为String类型，如果是Object，会被理解为options。在这里我们用了 Promise 来处理后续响应。

发送一个http请求数据

# 这里会返回一个成功的Promise实例
Promise 链特性 ：

• promise.then() 和 promise.catch() 都会返回新的 Promise
• 只要回调函数正常执行（不抛出异常），返回的 Promise 就会是 resolved 状态
• 只有当回调函数抛出异常时，返回的 Promise 才会是 rejected 状态
  只是说根据请求成功还是失败，返回的是一个不同的数组
  
  通过http发送的数据，返回的awaitTo(request);
  

js文件需要引入element-ui

！success的统一处理

所以直接下面这种写法就行

关于网络请求响应拦截

一个查询的页码重置规范

查询的时候需要把页码重置为1， 这个是一个统一的行业规范

1. searchForm 是搜索条件的“状态容器”
   它保存用户在表单中输入的实时值（姓名、用户名、手机号、状态等）。
   初始值为空字符串 “”，表示“无筛选条件”。
   不是由 getList() 填充的，而是由用户输入或重置操作控制。
2. “空条件” ≠ “查不到数据”
   当所有 searchForm 字段为空时，后端会忽略这些条件，执行无 WHERE 的查询。
   结果是：返回全表数据的第一页（如前 10 条），只要数据库有数据就不会为空。
   只有当输入了具体条件但无匹配记录时，才会返回空列表。
3. 分页由 pageNo 和 pageSize 控制
   后端根据这两个参数进行 LIMIT offset, size 查询。
   前端只展示当前页数据，不是一次性加载全部（服务端分页）。
   total（总条数）用于计算总页数和显示“共 X 条”。
4. 点击【查询】时必须重置页码为 1

handleQuery(){this.pagination.pageNo=1;// 👈 关键！this.getList();}

原因：避免用户在第 5 页搜索新条件，但新条件只有 2 页 → 返回空白。
这是标准用户体验设计。
5. 每次 getList() 都合并最新状态

编辑

constparams={...this.searchForm,// ← 实时、完整的搜索条件pageNo:this.pagination.pageNo,pageSize:this.pagination.pageSize};

无论条件是否为空，都会传给后端。
后端自行决定如何处理空值（通常忽略）。
6. 数据是“手动触发查询”，不是自动实时搜索
用户必须点击【查询】按钮才发起请求。
优点：避免频繁请求，适合复杂条件组合。
（若需自动搜索，可用 @input + debounce 实现）
7. 初始加载 = 无条件 + 第一页
mounted() 中调用 getList()。
发送参数：{ name: “”, …, pageNo: 1, pageSize: 10 }
后端返回：全表第一页数据（非全部数据）。

更新分页

插槽

子组件控制插槽展示什么位置，父组件控制插槽展示什么内容
具名插槽slot有name="xxx"属性，父组件的子组件标签需要#xxx绑定
作用插槽，子组件可以向父组件传值，
子组件

<template><div><slot:item="item":index="index"></slot></div></template>

父组件

<template><Child v-slot="{ item, index }"><div>姓名：{{item.name}}，序号：{{index}}</div></Child></template>

或简写

Child #default="{ item, index }"><!--内容--></Child>