前后端并行开发时，前端怎么测接口（PPT 第 26 页）#

PPT 第 26 页在这一节夹了一个很实际的问题：

前后端分离开发模式中，前后端是并行开发的，前端如何进行接口请求测试？

给的两个答案：

为什么需要这个？因为前后端并行开发的特点就是前端开工时后端接口往往还没写完：前端的页面、数据流不能卡在这里等。所以先用 Mock 地址顶上——只要假数据的结构和接口文档一致，将来把地址一换就能无缝切到真接口。

PPT 第 28 页（下一节）贴的那行代码就是 Apifox Mock 的典型样子：

1
const result = await axios.get('https://apifoxmock.com/m1/3128855-default/depts');

apifoxmock.com 这个域名一看就知道：它是 Apifox 按项目（3128855）生成的一条 Mock 地址，路径 /depts 和真接口一致。

① utils/request.js：axios 实例 + 响应拦截器#

把”发请求这件事”封成一个工具类（课程代码）：

1
import axios from 'axios'
2

3
//创建axios实例对象
4
const request = axios.create({
5
  baseURL: '/api',        // 所有请求的公共前缀（PPT 里这里是 Mock 地址）
6
  timeout: 600000         // 超时时间（毫秒）
7
})
8

9
//axios的响应 response 拦截器
10
request.interceptors.response.use(
11
  (response) => { //成功回调
12
    return response.data          // 剥掉"响应体"那一层：业务代码直接拿到 Result 对象
13
  },
14
  (error) => { //失败回调
15
    return Promise.reject(error)  // 出错了继续往外抛，交给调用方处理
16
  }
17
)
18

19
export default request

两个东西各解决一个问题：

② api/dept.js：按模块封装接口#

再把”部门这个模块有哪些接口”集中到一个文件里（课程代码，一篇笔记里能一次看全整个部门的接口）：

1
import request from "@/utils/request";
2

3
//查询全部部门数据
4
export const queryAllApi = () =>  request.get('/depts');
5

6
//新增
7
export const addApi = (dept) =>  request.post('/depts', dept);
8

9
//根据ID查询
10
export const queryByIdApi = (id) =>  request.get(`/depts/${id}`);
11

12
//修改
13
export const updateApi = (dept) =>  request.put('/depts', dept);
14

15
//删除
16
export const deleteByIdApi = (id) =>  request.delete(`/depts?id=${id}`);

这一层的价值在于**“接口清单”有了一个固定的家**：

• 一个函数就是”一个接口”，函数名说明它是干什么的（queryAllApi 查全部、addApi 新增）；
• 组件里不再出现任何 URL——只 import { queryAllApi } from '@/api/dept' 然后调用（PPT 第 29 页末尾那段 dept/index.vue 就是这么写的）；
• 接口要改（路径变了、参数变了），只改这个文件，用到它的组件不用动。

③ vite.config.js：配置代理#

前两件解决的是”代码里怎么写”，这一件解决”请求到底发给谁”。PPT 第 30 页的配置（vite.config.js）：

1
export default defineConfig({
2
  plugins: [vue()],
3
  resolve: {
4
    alias: {
5
      '@': fileURLToPath(new URL('./src', import.meta.url))   // @ = src（路由表、api 里的 '@/...' 靠它）
6
    }
7
  },
8
  server: {
9
    proxy: {
10
      '/api': {                                        // 只代理以 /api 开头的请求
11
        target: 'http://localhost:8080',               // 目标：后端服务
12
        secure: false,
13
        changeOrigin: true,                            // 转发时把请求头的 host 改成目标主机的
14
        rewrite: (path) => path.replace(/^\/api/, '')  // 转发前把 '/api' 前缀去掉
15
      }
16
    }
17
  }
18
})

为什么要有代理？因为 baseURL 写的是 /api，这是一个”相对路径”——请求发出去时是打给前端自己的服务器（5173）的：http://localhost:5173/api/depts。Vite 的开发服务器接住它，按规则”转发”给后端，并把前缀 /api 抹掉。好处有两个：

• 统一前缀：所有接口都带 /api，一眼能看出”这是给后端的请求”；
• 避开跨域：浏览器只跟”自己这个域”（5173）打交道，跨域问题在开发阶段就不存在了（这跟 59 篇在 nginx 上做反向代理是同一个道理，一个开发期、一个部署期）。

完整链路（PPT 第 30 页那张图）#

PPT 第 30 页把上面三个文件串成了一条链，每个环节的”URL 变成了什么”都标了出来：

1
dept/index.vue      queryAllApi()                        ← 组件只管调函数
2
     │
3
     ▼
4
api/dept.js         request.get('/depts')                ← 接口名（不带前缀）
5
     │
6
     ▼
7
utils/request.js    实例拼上 baseURL：'/api' + '/depts' = '/api/depts'
8
     │
9
     ▼
10
浏览器（5173）      http://localhost:5173/api/depts      ← 请求打给前端自己的服务器
11
     │
12
     ▼
13
vite.config.js      代理命中 '/api'、rewrite 去掉前缀 → '/depts'
14
     │
15
     ▼
16
后端 8080           http://localhost:8080/depts          ← Tomcat 上的真接口

PPT 第 31 页把三件套的职责总结成三行，这三行值得背下来：

一、知识回顾（读完直接做下面的实践题）#

1. 部门管理四个功能：列表查询 / 新增部门 / 修改部门 / 删除部门；本篇做的是列表查询——它是地基，另外三个功能做完都要调它刷新表格
2. 做页面的起手式（PPT 第 25 页）：根据页面原型、需求说明、接口文档，先完成页面的基本布局，再谈数据
3. 列表查询页面用两个组件：Button 按钮组件（<el-button>，type="primary" 蓝、type="danger" 红）+ Table 表格组件（<el-table :data="deptList"> + <el-table-column>）
4. 表格四列与接口字段：序号（type="index"，表格自动编号）、部门名称（prop="name"）、最后操作时间（prop="updateTime"）、操作（用 <template #default="scope"> 自定义列，scope.row 是当前行数据）；数据来自 GET /depts，响应是 {code, msg, data}，部门对象有 id、name、createTime、updateTime
5. “打开页面自动加载数据”靠两样：钩子函数 onMounted（组件挂载完成后执行）+ Axios 发送异步请求；拿到的数组赋给 ref([]) 声明的变量，表格的 :data 绑它
6. 前后端并行开发时怎么测接口：Mock.js 生成测试的假数据 / 基于 Apifox 提供的 Mock 服务进行测试（PPT 第 28 页那行 https://apifoxmock.com/m1/3128855-default/depts 就是 Apifox Mock 地址）
7. 直接在组件里写 axios 的两个问题：请求路径难以维护（地址散落在组件里）、数据解析繁琐（每处都要 result.data.code / result.data.data 逐层剥）
8. 程序优化三件套：① utils/request.js 封装 axios 实例（baseURL、timeout）+ 响应拦截器（成功回调 return response.data）；② api/dept.js 按模块封装接口（queryAllApi = () => request.get('/depts')）；③ vite.config.js 配置代理规则（server.proxy['/api'] → target、changeOrigin、rewrite 去掉 /api）
9. 完整链路：组件 queryAllApi() → request.get('/depts') → 实例拼上 baseURL 得 /api/depts → 打到前端自己的 5173 → 代理命中 /api、rewrite 抹掉前缀 → http://localhost:8080/depts（后端）
10. 本机实测：页面有表头（序号 / 部门名称 / 最后操作时间 / 操作）+ 6 行真实数据 + ”+ 新增部门”按钮；环境是前端 5173 + 课程后端 8081 + 代理 /api；代理 target 必须和后端端口对上，否则前端会拿到”别的服务”返回的东西、表格表现为”暂无数据”；时间列带 T（2024-09-30T21:26:24）是课程没做格式化

二、裸写题#

• 2-1 把”部门管理”页面的布局搭出来（先不要数据） 要求：照着页面原型做——最上面一行是大标题”部门管理”；标题下面左边一个”+ 新增部门”的蓝色按钮；再下面是表格，四列依次是 序号、部门名称、最后操作时间、操作；“操作”那一列每行放两个按钮：蓝色的”编辑”和红色的”删除”；给表格加上边框、让每一列的文字居中。数据部分先留一个空数组，让表格表头能显示出来就行。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：三件事——标题、按钮、表格；关键是”序号列不用给数据""操作列没有现成字段可用”这两处要特殊处理 二级 · 方法：<el-button type="primary">；<el-table :data="deptList" border> + <el-table-column>（label 表头、prop 字段、align="center" 居中）；序号列用 type="index"；操作列用 <template #default="scope"> 自定义，里面放两个 <el-button>（type="primary" / type="danger"，size="small"） 三级 · 骨架：<h1>部门管理</h1> / <el-button ____="primary"> + 新增部门</el-button> / <el-table :____="deptList" ____> / <el-table-column ____="index" label="序号"/> / <el-table-column ____="name" label="部门名称"/> / <el-table-column label="操作"><template #____="scope"><el-button …>{{ scope.____.id }}</el-button></template></el-table-column>

  参考答案（做完再点开）

  1
  <script setup>
  2
  import { ref } from 'vue';
  3
  
  4
  const deptList = ref([]);     // 先空着，2-2 再填数据
  5
  </script>
  6
  
  7
  <template>
  8
    <h1>部门管理</h1>
  9
    <div class="container">
  10
      <el-button type="primary"> + 新增部门</el-button>
  11
    </div>
  12
  
  13
    <div class="container">
  14
      <el-table :data="deptList" border style="width: 100%">
  15
        <el-table-column type="index" label="序号" width="100" align="center"/>
  16
        <el-table-column prop="name" label="部门名称" width="300" align="center"/>
  17
        <el-table-column prop="updateTime" label="最后操作时间" width="350" align="center"/>
  18
        <el-table-column label="操作" align="center">
  19
          <template #default="scope">
  20
            <el-button type="primary" size="small"><el-icon><EditPen /></el-icon> 编辑</el-button>
  21
            <el-button type="danger" size="small"><el-icon><Delete /></el-icon> 删除</el-button>
  22
          </template>
  23
        </el-table-column>
  24
      </el-table>
  25
    </div>
  26
  </template>
  27
  
  28
  <style scoped>
  29
  .container {
  30
    margin: 15px 0px;
  31
  }
  32
  </style>

  显示更多显示更少

  对照 PPT 第 25 页和课程工程 src/views/dept/index.vue 的模板。检查点：① 表头四列都在、文字居中；② 序号列显示 1、2、3（不是 undefined）；③ 表格下面显示”暂无数据”——这是正常的，因为 deptList 还是空数组，数据要等 2-2。

• 2-2 打开页面就自动把部门数据查出来 要求：页面一打开就自动向 GET /depts 发一次请求，把返回的部门数组交给表格显示（表格用 2-1 那张）。接口信息：地址 /depts，响应结构 { "code": 1, "msg": "success", "data": [ { "id": 1, "name": "教研部", "createTime": "...", "updateTime": "..." } ] }，code 为 1 表示成功。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：两件事——“什么时候查”（页面加载完）和”怎么查”（发请求、判断成功、把数据交给表格的变量） 二级 · 方法：ref([]) 声明数据源变量；async 函数里 await 请求；“页面加载完”用钩子函数注册回调；请求用封装好的 request（或本项目的 queryAllApi），从 result.code 判断成功、result.data 取数组 三级 · 骨架：import { ref, ____ } from 'vue' / import { queryAllApi } from '@/api/dept' / const deptList = ref([]) / const search = async () => { const result = await ____(); if(result.____) { deptList.____ = result.____ } } / ____(() => { search() })

  参考答案（做完再点开）

  1
  <script setup>
  2
  import { ref, onMounted } from 'vue';
  3
  import { queryAllApi } from '@/api/dept';
  4
  
  5
  // 表格数据源
  6
  const deptList = ref([])
  7
  
  8
  // 查询：调接口，成功后把数组交给 deptList
  9
  const search = async () => {
  10
    const result = await queryAllApi();     // 用了"程序优化"之后的写法
  11
    if (result.code) {                      // 1 表示成功
  12
      deptList.value = result.data;         // 注意：拦截器已经剥过一层，这里不再写 result.data.data
  13
    }
  14
  }
  15
  
  16
  // 钩子函数：组件挂载完成后执行 → 页面一打开就自动查一次
  17
  onMounted(() => {
  18
    search();
  19
  })
  20
  </script>
  21
  
  22
  <template>
  23
    <h1>部门管理</h1>
  24
    <div class="container">
  25
      <el-button type="primary"> + 新增部门</el-button>
  26
    </div>
  27
  
  28
    <div class="container">
  29
      <el-table :data="deptList" border style="width: 100%">
  30
        <el-table-column type="index" label="序号" width="100" align="center"/>
  31
        <el-table-column prop="name" label="部门名称" width="300" align="center"/>
  32
        <el-table-column prop="updateTime" label="最后操作时间" width="350" align="center"/>
  33
        <el-table-column label="操作" align="center">
  34
          <template #default="scope">
  35
            <el-button type="primary" size="small"><el-icon><EditPen /></el-icon> 编辑</el-button>
  36
            <el-button type="danger" size="small"><el-icon><Delete /></el-icon> 删除</el-button>
  37
          </template>
  38
        </el-table-column>
  39
      </el-table>
  40
    </div>
  41
  </template>
  42
  
  43
  <style scoped>
  44
  .container {
  45
    margin: 15px 0px;
  46
  }
  47
  </style>

  显示更多显示更少

  检查点：① 刷新页面，表格里自动出现部门数据、序号自动从 1 开始；② 把 queryAllApi() 换成最朴素的 axios.get(...)，数据能显示但代码立刻变啰嗦（这就是 2-3 要解决的）；③ 如果写了 result.data.data，表格一定空白——这一层是拦截器帮我们剥掉的。

• 2-3 把”写死在组件里的请求”改成程序优化三件套 素材：现在组件里有这么一段——请求地址直接写死在业务函数里，取数还要一层层剥。

  1
  import axios from 'axios';
  2
  
  3
  const search = async () => {
  4
    const result = await axios.get('http://localhost:8080/depts');   // 地址写死在组件里
  5
    if (result.data.code) {
  6
      deptList.value = result.data.data;                              // 解析繁琐
  7
    }
  8
  };

  要求：① 建一个”请求处理工具类”，把 axios 实例（统一前缀、超时）和响应处理（统一剥一层、统一抛错）封装进去；② 建一个”部门模块的 api 文件”，把”查全部部门”封成一个函数；③ 在 Vite 配置里加代理规则，让前端请求统一带某个前缀、再转发到后端；④ 改完后的组件里不出现任何 URL，只有一行”调用 api 函数”。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：三个层次各管一件事——工具类管”怎么发”、api 文件管”有哪些接口”、构建配置管”发给谁” 二级 · 方法：axios.create({ baseURL, timeout })；request.interceptors.response.use(成功回调, 失败回调)，成功回调里 return response.data；api 文件里 export const 函数名 = () => request.get('/depts')；vite.config.js 里 server.proxy，键是统一前缀 /api，值是 { target, changeOrigin, rewrite }，rewrite 用 path.replace(/^\/api/, '') 抹掉前缀 三级 · 骨架：utils/request.js：const request = axios.____({ baseURL: '/api', ____: 600000 }) + request.interceptors.response.use((response) => response.____, (error) => Promise.____(error))；api/dept.js：export const queryAllApi = () => ____.get('/depts')；vite.config.js：server: { ____: { '/api': { ____: 'http://localhost:8080', ____: true, rewrite: (path) => path.replace(/^\/api/, '') } } }；组件里 const result = await ____()

  参考答案（做完再点开）

  1
  // src/utils/request.js —— ① 请求处理工具类
  2
  import axios from 'axios'
  3
  
  4
  //创建axios实例对象
  5
  const request = axios.create({
  6
    baseURL: '/api',       // 所有接口的公共前缀（配了代理之后交给 Vite 转发）
  7
    timeout: 600000
  8
  })
  9
  
  10
  //axios的响应 response 拦截器
  11
  request.interceptors.response.use(
  12
    (response) => { //成功回调
  13
      return response.data          // 剥掉"响应体"这层，业务代码直接拿 Result
  14
    },
  15
    (error) => { //失败回调
  16
      return Promise.reject(error)
  17
    }
  18
  )
  19
  
  20
  export default request

  显示更多显示更少

  1
  // src/api/dept.js —— ② 按模块封装接口
  2
  import request from "@/utils/request";
  3
  
  4
  //查询全部部门数据
  5
  export const queryAllApi = () =>  request.get('/depts');

  1
  // vite.config.js —— ③ 代理规则（只贴新增的 server 段）
  2
  server: {
  3
    proxy: {
  4
      '/api': {
  5
        target: 'http://localhost:8080',               // 后端服务地址（端口要对上！）
  6
        secure: false,
  7
        changeOrigin: true,
  8
        rewrite: (path) => path.replace(/^\/api/, '')  // 转发前去掉 /api
  9
      }
  10
    }
  11
  }

  1
  // src/views/dept/index.vue —— ④ 组件里只剩"调用"
  2
  import { ref, onMounted } from 'vue';
  3
  import { queryAllApi } from '@/api/dept';
  4
  
  5
  const deptList = ref([])
  6
  
  7
  const search = async () => {
  8
    const result = await queryAllApi();
  9
    if (result.code) {
  10
      deptList.value = result.data;
  11
    }
  12
  }
  13
  
  14
  onMounted(() => {
  15
    search();
  16
  })

  显示更多显示更少

  检查点：① 改完刷新页面，数据照旧能显示（说明三层都接上了）；② 在浏览器 F12 的 Network 里看请求地址——应该是 /api/depts（不是 localhost:8080/depts）；③ 把 target 改成别的端口，页面立刻”暂无数据”——说明请求真的被转发到了 target 指的地址。

• 2-4 说清楚”链路”和”排查顺序” ① 按三件套的写法，search() 里的 result 到底是什么？为什么可以直接写 result.data，而不是 21 篇里的 result.data.data？ ② 页面上表格一直显示”暂无数据”，请按”一次请求走过的顺序”列出至少三个要检查的点（提示：从后端往前端倒着查更快）。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：① 关键在那段”响应回来之前先加工一次”的代码；② 顺着链路倒着走——数据源头（后端）→ 转发规则（代理）→ 地址拼接（实例前缀）→ 业务代码（取值和判断） 二级 · 方法：① 响应拦截器的成功回调 return response.data，于是组件拿到的是后端的 Result 对象本身（code、msg、data 都在它上面）；② 依次查——后端有没有起、端口是不是代理 target 写的那个；代理规则的前缀和 rewrite 对不对；请求地址是不是 /api/depts；if 判断和赋值是不是写成了 result.data.data 三级 · 骨架：① request.interceptors.response.____(成功回调里 return ____.data)；② 排查清单：后端端口 ↔ ____、baseURL 前缀 ↔ 代理键、result.____ 的层级、控制台 Network 里的真实请求地址

  参考答案（做完再点开）

  ① result 就是后端的 Result 对象（{code, msg, data}）。因为 request.js 里加了响应拦截器：请求成功回来时先执行成功回调 (response) => { return response.data }——把 axios 响应对象里的响应体（也就是那个 Result）剥出来返回，组件里 await 拿到的就是它。所以取数组写 result.data；即便如此还要先 if (result.code) 判断业务上是否成功（接口返回 200，但 code 可能是 0）。 ② 排查清单（从后往前）：

  顺序	查什么	常见症状
  1	后端服务有没有起、端口是多少	根本没起 → 代理报错/连接失败；端口不对 → 请求打到”别人”身上（本机实测：代理指向被占用的 8080，拿到的是另一个项目的 401 JSON，页面上就是”暂无数据”）
  2	代理 target 与后端端口是否一致	不一致 = 上一行的第二种情况
  3	代理前缀与 baseURL 是否对得上（/api ↔ /api）、rewrite 有没有把前缀去掉	对不上 → 代理不匹配或后端 404
  4	F12 → Network 里看真实请求	地址应该是 /api/depts；如果还是写死的 http://localhost:8080/...，说明组件没换成 api 函数（跨域也会在这时暴露）
  5	代码里的取值层级	写成 result.data.data → 拿到 undefined，表格空白；写成 result.data 才对

  记住顺序：先确认”数据源活着”，再看”路有没有走对”，最后才怀疑自己的代码。

三、综合题#

• 3-1 照课程案例做一遍”部门管理-列表查询” 分步做（顺序和 PPT 第 25~31 页一致）：

  1. 打开 98 篇做好的工程，点左侧菜单”部门管理”进入 /dept（此时页面只有一个词）
  2. 照着页面原型把布局搭出来：标题 + ”+ 新增部门”按钮 + 四列表格（序号 / 部门名称 / 最后操作时间 / 操作），操作列放”编辑 / 删除”两个按钮（先不实现点击事件）
  3. 让页面打开就自动加载数据：调”查全部部门”的接口，把返回的数组交给表格（注意先用判断业务状态码再赋值）
  4. 启动后端（课程那套没有登录校验的 tlias-web-management），确认它跑在哪个端口
  5. 做”程序优化三件套”：封装请求工具类（axios 实例 + 响应拦截器）、按模块的 api 文件、Vite 代理配置——组件里从此不出现 URL
  6. 打开浏览器验证：表格自动显示部门数据；再打开 F12 的 Network 看请求是发到 /api/depts 的
  7. 顺手把”排查”练一遍：把代理 target 改成一个错的端口刷新页面，观察表格怎么变；改回来恢复
  提示（先自己想，实在想不出再点开）

  一级 · 思路：这就是”布局 → 数据 → 优化 → 验证”四步；布局照原型抄、数据靠钩子 + 请求、优化就是把”地址”和”解析”两件杂事各归一个文件 二级 · 方法：el-button / el-table / el-table-column（type="index"、prop、#default="scope"）；ref([]) + onMounted + async/await；axios.create + interceptors.response.use；export const queryAllApi = () => request.get('/depts')；server.proxy['/api']（target / changeOrigin / rewrite） 三级 · 骨架：<el-table :data="____" border> / const deptList = ref([]) / const search = async () => { const result = await ____(); if(result.code){ deptList.value = result.____ } } / onMounted(() => { ____() }) / utils/request.js + api/dept.js + vite.config.js 三处各写一段

  参考答案（做完再点开）

  1
  // ① src/utils/request.js —— 请求处理工具类
  2
  import axios from 'axios'
  3
  
  4
  //创建axios实例对象
  5
  const request = axios.create({
  6
    baseURL: '/api',
  7
    timeout: 600000
  8
  })
  9
  
  10
  //axios的响应 response 拦截器
  11
  request.interceptors.response.use(
  12
    (response) => { //成功回调
  13
      return response.data
  14
    },
  15
    (error) => { //失败回调
  16
      return Promise.reject(error)
  17
    }
  18
  )
  19
  
  20
  export default request

  显示更多显示更少

  1
  // ② src/api/dept.js —— 按模块封装接口
  2
  import request from "@/utils/request";
  3
  
  4
  //查询全部部门数据
  5
  export const queryAllApi = () =>  request.get('/depts');

  1
  // ③ vite.config.js —— 配置代理（server 段）
  2
  server: {
  3
    proxy: {
  4
      '/api': {
  5
        target: 'http://localhost:8080',               // 写到后端真实端口上
  6
        secure: false,
  7
        changeOrigin: true,
  8
        rewrite: (path) => path.replace(/^\/api/, '')
  9
      }
  10
    }
  11
  }

  1
  <!-- ④ src/views/dept/index.vue —— 布局 + 加载数据 -->
  2
  <script setup>
  3
  import { ref, onMounted } from 'vue';
  4
  import { queryAllApi } from '@/api/dept';
  5
  
  6
  //钩子函数：页面打开就查一次
  7
  onMounted(() => {
  8
    search();
  9
  })
  10
  
  11
  //查询
  12
  const deptList = ref([])
  13
  const search = async () => {
  14
    const result = await queryAllApi();
  15
    if (result.code) {
  16
      deptList.value = result.data;
  17
    }
  18
  }
  19
  </script>
  20
  
  21
  <template>
  22
    <h1>部门管理</h1>
  23
    <div class="container">
  24
      <el-button type="primary"> + 新增部门</el-button>
  25
    </div>
  26
  
  27
    <!-- 表格 -->
  28
    <div class="container">
  29
      <el-table :data="deptList" border style="width: 100%">
  30
        <el-table-column type="index" label="序号" width="100" align="center"/>
  31
        <el-table-column prop="name" label="部门名称" width="300" align="center"/>
  32
        <el-table-column prop="updateTime" label="最后操作时间" width="350" align="center"/>
  33
        <el-table-column label="操作" align="center">
  34
          <template #default="scope">
  35
            <el-button type="primary" size="small"><el-icon><EditPen /></el-icon> 编辑</el-button>
  36
            <el-button type="danger" size="small"><el-icon><Delete /></el-icon> 删除</el-button>
  37
          </template>
  38
        </el-table-column>
  39
      </el-table>
  40
    </div>
  41
  </template>
  42
  
  43
  <style scoped>
  44
  .container {
  45
    margin: 15px 0px;
  46
  }
  47
  </style>

  显示更多显示更少

  检查点：

  1. 表格里自动出现部门数据（本机实测是 6 行：咨询部 / 行政部 / 学工部 / 就业部 / 人事部 / 教研部），序号列从 1 开始；
  2. F12 → Network 里看到的请求是 /api/depts（相对地址），状态 200，响应里有 code: 1；
  3. 时间列显示成 2024-09-30T21:26:24 这种带 T 的样子——正常，课程没做格式化；
  4. 把代理 target 改成错端口刷新 → 表格”暂无数据”；改回来 → 数据恢复（本机实测：8080 被别的项目占用时就是这样，所以后端和代理要一起改成同一个端口）；
  5. 清空浏览器缓存/换个浏览器再进，数据依然在——因为它来自数据库，不是页面上写死的。 做完这一题，100 篇会在这张表上加”新增 / 修改 / 删除”：每次操作完，回头调的那个 search() 就是本篇写的这个函数。