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

菜单管理-按钮 和 页面

引言

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

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

按钮

终于到了页面最后一个操作，按钮

而为什么需要 按钮，其实是对应着我们的 按钮权限

后续 按钮权限 会通过自定义指令的方式，来绑定相关 dom 的节点

以此来判断 该 dom 是否进行展示

更新 menu 数据库表

首先 这里先把 menu 数据库表的一些坑，填补一下

之前，我们并没有添加权限 以及 需要更新 类型使用 bit(2) 这种方式

• 添加 权限 字段 perms

• 修改 类型 字段为 bit(2)

它们两个对 菜单表 的 sql 操作如下

// 添加
`alter table menu add perms varchar(255) default '' comment '权限'`


// 修改
`alter table menu modify type bit(2) default b'0' comment '菜单类型'`

上面的修改

也间接的导致了 我们的 新增菜单 和 编辑菜单 的 sql 也要修改

const insertMenu = `insert into menu(name,icon,type,url,pid,sort,perms) values(?,?,?,?,?,?,?);`

const editMenu = `update menu set name=?,icon=?,type=?,url=?,pid=?,sort=?,state=?,perms=? where id=?;`

按钮页面

首先页面的效果如下图

可以看到，在我们点击 按钮 位置时

我们的 url地址 表单项不在了，取而代之的是 权限 表单项

  <el-row>
    <el-col :span="24" v-if="ruleForm.type !== 2">
      <el-form-item label="url 地址" prop="url">
        <el-input v-model="ruleForm.url" />
      </el-form-item>
    </el-col>
  </el-row>
  <el-row v-if="ruleForm.type === 2">
    <el-col :span="24">
      <el-form-item label="权限" prop="perms">
        <el-input v-model="ruleForm.perms" placeholder="sys:menu:add" />
      </el-form-item>
    </el-col>
  </el-row>

可以看到我们 在选择 上级菜单 的时候， 只能选择 菜单 项

页面

处理菜单数据，将数据变成下方的结构

最终的 页面展示效果图，如下

总结

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

至此，菜单管理的 按钮 逻辑，及 页面的搭建 处理完毕