后台项目 Express-Mysql-Vue3-TS-Pinia 处理 菜单表
引言
通过之前一段时间 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 做出一个 后台系统 项目
实现 设计了一个 菜单表，并且可以 成功 访问菜单表。
作者：旺仔米苏
链接：https://juejin.cn/post/7128043829583675405
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。