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

新增数据

引言

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

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

新增数据

在上一节中，我们简单将菜单的页面结构搭建完毕

但是还有一些不妥的地方，并没有处理好

例如：

应该添加一个 顶级菜单

而且 顶级菜单 是不需要添加 上级菜单 的，它的 pid 的值为 0

主要修改的代码为这部分，很简单就处理好了

  <el-row v-if="ruleForm.type !== 0">
    <el-col :span="24">
      <el-form-item label="上级菜单" prop="pid">
        <el-tree-select v-model="ruleForm.pid" :data="data" check-strictly :render-after-expand="false" show-checkbox check-on-click-node />
      </el-form-item>
    </el-col>
  </el-row>
  
  

  const state = reactive({
    typeName: ['顶级菜单', '菜单', '按钮']
  })

新增

后端接口设计

下面就是我们添加数据了，还是 Express 来将数据接口设计好

在 controller\sys\index.js 文件夹下，编写 插入方法 和 sql

const insertMenu = (req, res, next) => {
  try {
    const { name, icon, type, url, pid, sort } = req.body

    const sql = sqlAll.insertMenu
    const sqlArr = [name, icon, type, url, pid, sort]

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

      const code = 200
      const data = {
        message: '插入成功！'
      }
      useResSend(res, code, data)
    }

    sqlConnect(sql, sqlArr, callback)

  } catch (err) {
    next(err)
  }
}

并且在路由位置处，添加访问接口路径 api/sys/add-menu

至此后端的接口设计完毕

前端接口设计

前端接口只需要配置下即可，将 addMenu 接口方法，暴露出去

前后联调

前端进行表格数据填写，并判断是否是 顶级菜单，如果是，则将 pid 设置为 0 即可

if (ruleForm.type === 0) {
    ruleForm.pid = 0
}

addMenu({ ...ruleForm })

查看后端数据库，可以看到 添加成功

总结

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

至此，我们的 新增数据 功能，添加完毕