spring-webmvc练习-日程管理-点击编辑按钮显示编辑对话框

本文主要是介绍spring-webmvc练习-日程管理-点击编辑按钮显示编辑对话框，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、main.js

import { createApp } from 'vue'
import App from './App.vue'import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'import zhCn from 'element-plus/dist/locale/zh-cn.mjs'let app = createApp(App);
app.use(ElementPlus, {locale: zhCn,
})
app.mount('#app')

2、util/request.js

import axios from "axios";let request = axios.create({baseURL: "http://localhost:8080",timeout: 50000
});export default request

3、api/schedule.js

import request from "../util/request.js";export let getScheduleList = () => {return request.get('/schedule')
};

4、App.vue

<template><el-container><el-table :data="scheduleList" style="width: 100%"><el-table-column label="编号" width="180"><template #default="scope"><div style="display: flex; align-items: center"><span style="margin-left: 10px">{{ scope.row.id }}</span></div></template></el-table-column><el-table-column label="学习计划" width="180"><template #default="scope"><div style="display: flex; align-items: center"><span style="margin-left: 10px">{{ scope.row.title }}</span></div></template></el-table-column><el-table-column label="是否完成" width="180"><template #default="scope"><div style="display: flex; align-items: center"><span style="margin-left: 10px">{{ scope.row.completed?'完成':'未完成' }}</span></div></template></el-table-column><el-table-column label="其他操作"><template #default="scope"><el-button size="small" @click="handleEdit(scope.row)">Edit</el-button><el-buttonsize="small"type="danger"@click="handleDelete(scope.$index, scope.row)">Delete</el-button></template></el-table-column></el-table><el-dialog v-model="dialogFormVisible" title="Shipping address"><el-form :model="form"><el-form-item label="标题"><el-input v-model="form.title" autocomplete="off" /></el-form-item><el-form-item label="Zones" ><el-radio-group v-model="form.completed"><el-radio :label="true">完成</el-radio><el-radio :label="false">未完成</el-radio></el-radio-group></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="dialogFormVisible = false">Cancel</el-button><el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button></span></template></el-dialog></el-container></template><script lang="ts" setup>
import {getScheduleList} from './api/schedule.js';
import {onMounted, reactive, ref} from 'vue';let dialogFormVisible = ref(false);let form=reactive({id: 0,title: '',completed: false
})let scheduleList=reactive([])onMounted(()=>{getScheduleList().then(response=>{Object.assign(scheduleList,response.data.data)})
})interface scheduleList {id: Numbertitle: stringcompleted: boolean
}const handleEdit = row => {dialogFormVisible.value = true;Object.assign(form, row);
}
const handleDelete = (index: number, row: scheduleList) => {console.log(index, row)
}
</script>

5、ScheduleController.java

package com.atguigu.schedule;
import com.atguigu.schedule.controller.Result;
import com.atguigu.schedule.pojo.Schedule;
import com.atguigu.schedule.service.ScheduleService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@CrossOrigin
@RestController
@RequestMapping("/schedule")
public class ScheduleController {@Autowiredprivate ScheduleService scheduleService;@GetMappingpublic Result list() {return Result.ok(scheduleService.getScheduleList());}@PostMappingpublic Result save(@RequestBody Schedule schedule) {scheduleService.add(schedule);return Result.ok();}@PutMappingpublic Result update(@RequestBody Schedule schedule) {scheduleService.update(schedule);return Result.ok();}@DeleteMapping("/{id}")public Result del(@PathVariable Integer id) {scheduleService.del(id);return Result.ok();}
}

 6、onMounted

onMounted是在Vue.js中经常使用的一个钩子函数，它在组件挂载完成后被调用。这个钩子函数可以让我们在组件已经挂载到DOM后执行某些操作，比如访问组件的DOM元素等。在onMounted钩子中返回的对象，可以包含组件实例中需要使用的数据、方法和生命周期钩子等。

      在Vue3中，onMounted是一个生命周期钩子函数，它会在组件挂载后立即被调用。与Vue2的mounted钩子非常相似，但onMounted在Vue3中是一个独立的函数而不是一个选项，这使得开发更加灵活。

      当组件挂载到DOM后，onMounted函数将立即被调用，这时候我们可以执行许多操作，例如发送请求、操作DOM元素、初始化数据等。在onMounted中，我们通常可以在组件第一次渲染时请求接口以更新组件中的数据。这样，当组件第一次渲染时，我们就可以获取到我们需要的数据。

      在Vue3中，onMounted是一个生命周期钩子函数，用于在组件渲染后执行。当组件挂载到DOM后，onMounted函数将立即被调用。与Vue2的mounted钩子非常相似，但在Vue3中，它是一个独立的函数而不是一个选项，这使得开发更加灵活。在onMounted中，我们可以执行许多操作，例如发送请求，操作DOM元素，初始化数据等。

     在Vue3中，onMounted是一个生命周期钩子函数，它在组件挂载到DOM后立即调用，类似于Vue2的mounted钩子函数。

     onMounted的作用是在组件挂载到DOM后执行一些初始化操作或者发送网络请求等异步操作。例如，可以使用onMounted钩子函数来初始化某些数据、绑定事件监听器、创建定时器等操作。

在Vue3中，onMounted钩子函数的用法如下：

import { onMounted } from 'vue'export default {setup() {onMounted(() => {// 在组件挂载到DOM后执行的逻辑console.log('组件已经挂载到DOM了')// 其他初始化操作或异步请求等等})}
}

这篇关于spring-webmvc练习-日程管理-点击编辑按钮显示编辑对话框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---