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