08. 开发管理员管理页面并对接后台接口

982 字约 2 分钟读完821 次阅读更新于 2026/5/3

怎么写页面？

利用模板

页面结构是什么样子的

  • 查询
  • 表格（数据渲染和删除操作）
  • 表单（新增和修改）
  • 数据请求

怎么显示页面

配置路由
配置菜单

开始开发

https://element-plus.gitee.io/zh-CN/component/pagination.html

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

@current-change 触发翻页效果

学会看网络请求的数据
image.png

必须写动态sql

<select id="selectAll" resultType="com.example.entity.Admin">
    select * from admin
    <where>
        <if test="name != null">
            name like concat('%', #{name}, '%')
        </if>
    </where>
    order by id desc
</select>

image.png

新增和删除共用一个函数

// 保存数据
const save = () => {
  request.request({
    method: data.form.id ? 'PUT' : 'POST',
    url: data.form.id ? '/admin/update' : '/admin/add',
    data: data.form
  }).then(res => {
    if (res.code === '200') {  //成功
      ElMessage.success('操作成功')
      data.formVisible = false // 关闭弹窗
      load()  // 重新加载表格数据
    } else {
      ElMessage.error(res.msg)
    }
  })
}

注意删除要二次确认（重点）

const del = (id) => {
  ElMessageBox.confirm('删除后数据无法恢复，您确认删除吗？', '确认删除', { type: 'warning' }).then(res => {
    request.delete('/admin/delete/' + id).then(res => {
      if (res.code === '200') {  //成功
        ElMessage.success('操作成功')
        load()  // 重新加载表格数据
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(err => {
    console.log(err)
  })
}