标签搜索
隐藏侧边栏

【Vue3+Express实战-10】使用弹窗实现编辑课程信息

搞前端的半夏
2022-05-28 / 0 评论 / 0 点赞 / 489 阅读 / 2,927 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-28,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

在上一节课程中,我们已经成功的使用ID获取当前课程,获取到当前课程之后,我们就可以进行修改了。

在日常开发中,修改功能的实现,我们通常有两种方式,第一种是弹窗修改,第二种是跳转页面修改!

如果修改的字段项特别多,那肯定最好是跳转页面进行修改,我们可以在handleEdit中获取ID,然后跳转页面时传参(这里可以使用Vue-router进行路由跳转和传参)!在新的页面通过ID获取数据并修改!

如果修改的字段项比较少,那肯定直接弹窗修改就可以了!

这两种方式,我们在本课程中,都会去实现!本节我们先来实现弹窗修改课程信息!

后台

controller层

到目前为止,这是我们第四个controller方法,按照老套路,我们第一步要找到,sequelize中更新数据的方法!

这里我们使用的是update方法!update接受一个数据对象和一个配置参数。这里的配置参数和select方法一致!

exports.update = (req, res) => {
  let id =req.body.id
  Tutorial.update(req.body,{
    where:{
      id:id,
    }
  }).then((data) => {
      if(data){
        res.send({
          message:"更新成功",
        });

      }else{
        res.status(404).send({
          message: "更新失败",
        });
      }
    })
    .catch((err) => {
      res.status(500).send({
        message: err.message || "更新失败",
      });
    });
};

router

router.post('/update',tutorials.update);

postman 测试

image-20220528164345601

前台

修改流程

通过弹窗修改的方式,需要以下几步:

  1. 获取当前数据
  2. 弹出弹窗
  3. 修改数据
  4. 关闭弹窗,
  5. 查询所有数据

TutorialDataApi添加调用方法

update(data){
    return axiosUtil.post("/tutorials/update",data)
}

使用elementui dialog

弹窗的用法

这里其实我们直接复制,新增课程页面的代码就可以了!因为只是演示,我这里没有去进行封装组件!

    <el-dialog v-model="updateDialog" title="修改课程">
      <el-form :model="tutorial" label-width="120px">
        <el-form-item label="课程名称">
          <el-input v-model="tutorial.title" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="tutorial.description" type="textarea" />
        </el-form-item>
        <el-form-item label="是否公开">
          <el-select v-model="tutorial.published">
            <el-option label="是" :value="true" />
            <el-option label="否" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="Submit">创建课程</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="updateDialog = false">取消</el-button>
          <el-button type="primary" @click="updateTutorial">提交</el-button>
        </span>
      </template>
    </el-dialog>

这里我们使用ref变量updateDialog控制弹窗的显示!

let updateDialog = ref(false);

同时将新增课程的表单数据,拷贝过来。

const tutorial = reactive({
  title: "",
  description: "",
  published: false,
});

添加updateTutorial方法

在这个方法里,

  1. 先调用api更新数据
  2. 然后再关闭弹窗
  3. 重新数据表单数据
const updateTutorial = () => {
  TutorialDataApi.update(tutorial)
    .then((data) => {
      if ((data.message = "更新成功")) {
        updateDialog.value = false;
        getALLTutorial();
      } else {
        console.log("更新出错");
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

getALLTutorial方法

const getALLTutorial = () => {
  TutorialDataApi.getAll()
    .then((data) => {
      Object.assign(tutorialList, data);
      console.log(tutorialList);
    })
    .catch((err) => {
      console.log(err);
    });
};

改造handleEdit方法

在这个方法里我们

  1. 先获取当前数据
  2. 赋值变量
  3. 打开弹出框
const handleEdit = (index, row) => {
  console.log(index, row.id);
  TutorialDataApi.getOneByID(row.id)
    .then((data) => {
      Object.assign(tutorial, data);
  		updateDialog.value = true;

      console.log(data);
    })
    .catch((err) => {
      console.log(err);
    });
};
0

评论区