携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情

角色查询和新增

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

查询和新增

在上一节，我们通过 Express 开发完成了的一个角色的查询和新增接口的定义，并暴露给前端进行使用

在这一节，我们主要将前端查询和新增的页面搭建及逻辑处理完毕

首先将这两个接口，在前端进行引用，位置 src\api\sys\index.ts 文件中

const API = {
  getAllRoles: '/roles',
  addRole: '/add-role',
}

/**
 * 获取所有的角色
 */
export const getAllRoles = (data: any) => GET(commonAPI + prefix + API.getAllRoles, data)

/**
 * 添加角色
 */
export const addRole = (data: any) => POST(commonAPI + prefix + API.addRole, data)

查询

由于查询的页面，已经在之前搭建完毕，点这里

所以我们引入查询接口即可，在页面选然后，调用接口，即可查询成功

import { getAllRoles } from '@/api'

const state = reactive({
  tableData: []
})

const getRoles = () => {
  getAllRoles({})
    .then((res: any) => {
      state.tableData = res.roles
    })
    .catch((err) => {
      console.log('err', err)
    })
}

onMounted(() => {
  getRoles()
})