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

新增数据

引言

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

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

更新数据

既然有 新增数据，肯定是避免不了 更新数据

更新数据 的页面与 新增数据 的页面相类似

但是有一点不同，这里规定在 更新数据 时，上方的 菜单状态 时不允许改变的，与创建时相同，只能在同级进行修改。

由于页面很相似，这里只将不同的位置代码,重点贴一下

const props = defineProps({
  info: {
    type: Object,
    required: true
  }
})


const ruleForm = reactive({
  ...props.info
})

const submitFunc = async (formEl) => {
  await formEl.validate((valid, fields) => {
    if (valid) {
      editMenu({ ...ruleForm }).then((res: any) => {
        ElMessage.success(res.message)
        emits('close', true)
      })
    } else {
      console.log('error')
    }
  })
}

后端api处理

位置在 controller\sys\sql.js 文件下，新添一个 更新数据 的 sql，并将其暴露出来

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

编辑的逻辑处理如下


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

    const newState = state ? 1 : 0

    const sql = sqlAll.editMenu
    const sqlArr = [name, icon, type, url, pid, sort, newState, id]

    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)
  }
}

别忘了，路由的位置处也要进行添加，才能生成接口

const Api = {
  menua: '/menus',
  addMenu: '/add-menu',
  editMenu: '/edit-menu'
}

router.put(Api.editMenu, sysController.editMenu)

前端进行请求

在路由地址处，添加访问的接口 src\api\sys\index.ts

注意请求的方法，为 PUT 请求，用来进行更新操作，并且将该方法暴露出去

此时我们编辑页面数据，

页面数据成功修改，数据库的内容进行改变

总结

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

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

后台项目 Express-Mysql-Vue3-TS-Pinia 更新数据

新增数据

引言

更新数据

后端api处理

前端进行请求

总结