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

菜单表

引言

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

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

菜单表

通过上面，我们将静态菜单已经配置完毕

做到可以访问不同的路由，来对应到不同的页面中，以此展示不同的内容。

但是我们后续是要做成 动态路由 也可以说是 动态菜单 的一个形式

所以这一节，来处理一下 菜单表

设计 菜单表

首先需要设计我们的 菜单表，菜单需要一下几个重要的东西：

• 菜单的id
• 菜单名
• 图标
• 类型（一级菜单，二级菜单，三级菜单... 最后是我们的 按钮）
• 菜单的url
• 父级菜单的 id
• 排序（可能会有）
• 是否启用
• 创建时间

通过上面的思考，我们可以设计如下的一个 菜单表

const createTableMenu = `
create table if not exists menu(
  id int primary key auto_increment comment '主键',
  name varchar(255) default '' comment '菜单名',
  icon varchar(255) comment '图标',
  type varchar(255) default '' comment '类型',
  url varchar(255) not null default '' comment '菜单url',
  pid bigint(20) not null comment '父级菜单id',
  sort bigint(20) not null comment '排序',
  create_time datetime not null default current_timestamp comment '创建时间',
  state bit(1) default b'0' comment '是否启用'
) comment '菜单表';
`

跟之前一样，需要先将这个 菜单表 生成到 数据库 中，

const init = (req, res, next) => {
  try {
    const createTableMenu = sqlAll.createTableMenu

    const sqlArr = []
    const callback = (error, results) => {
      if (error) {
        console.log('连接出错')
        return
      }

      res.send({
        list: results,
        message: '创建成功'
      })
    }

    sqlConnect(createTableMenu, sqlArr, callback4)
  } catch (err) {
    next(err)
  }
}

请求 菜单表

在 express\controller\sys 下 新建 index.js 和 sql.js

index.js
const sqlConnect = require('../../model/index')
const { useResSend } = require('../../utils/useRes')
const sqlAll = require('./sql')

const getAllMenus = (req, res, next) => {
  try {
    const sql = sqlAll.getMenusAll
    const sqlArr = []

    const callback = (error, results) => {
      if (error) {
        console.log('连接出错')
        return
      }

      console.log(results, 'results')

      const code = 200
      const data = {
        message: '查询成功！',
        res: results
      }
      useResSend(res, code, data)
    }

    sqlConnect(sql, sqlArr, callback)
  } catch (err) {
    next(err)
  }
}

module.exports = {
  getAllMenus,
}

// sql

const getMenusAll = `select * from menu;`

module.exports = {
  getMenusAll,
}

并且在我们的 路由 位置处进行配置 地址

新建一个 index.js 文件，来设置我们的接口，我们的接口暴露出去。

地址为： api/sys/menus

const express = require('express')
const router = express.Router()
const { sysController } = require('../../controller/index')

const Api = {
  menua: '/menus',
}

/* 作用 */
router.get(Api.menua, sysController.getAllMenus)

module.exports = router

之后在我们的 前端 页面进行请求

可以成功请求，说明我们的接口暴露成功。

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目

实现 设计了一个 菜单表，并且可以 成功 访问菜单表。