1、main.js
javascriptimport { 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
javascriptimport axios from "axios"; let request = axios.create({ baseURL: "http://localhost:8080", timeout: 50000 }); export default request
3、api/schedule.js
javascriptimport request from "../util/request.js"; export let getScheduleList = () => { return request.get('/schedule') }; export let updateSchedule=data=>{ return request.put("/schedule",data) } export let saveSchedule=data=>{ return request.post("/schedule",data) } export let delSchedule=id=>{ return request.delete(`/schedule/${id}`) }
4、App.vue
html<template> <el-container> <el-row> <el-button type="primary" plain @click="toAdd">新增</el-button> </el-row> <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-button size="small" type="danger" @click="handleDelete(scope.row.id)">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">取消</el-button> <el-button type="primary" @click="saveOrUpdate">确定</el-button> </span> </template> </el-dialog> </el-container> </template> <script lang="ts" setup> import {delSchedule, getScheduleList, saveSchedule, updateSchedule} from './api/schedule.js'; import {onMounted, reactive, ref} from 'vue'; import {ElMessage, ElMessageBox} from "element-plus"; let dialogFormVisible = ref(false); let form = reactive({ id: 0, title: '', completed: false }) let form0 = reactive({ id: 0, title: '', completed: false }) let resetFormData = () => { Object.assign(form, form0); } let scheduleList = reactive([]) let loadData = () => { scheduleList.length = 0; getScheduleList().then(response => { Object.assign(scheduleList, response.data.data) }) } let saveOrUpdate = () => { if (form.id === 0) { save(); } else { update(); } } let save = async () => { await saveSchedule(form) dialogFormVisible.value = false resetFormData(); loadData(); } let toAdd = () => { resetFormData(); dialogFormVisible.value = true; } onMounted(() => { loadData(); }) let update = async () => { await updateSchedule(form) dialogFormVisible.value = false loadData(); } interface scheduleList { id: Number title: string completed: boolean } const handleEdit = row => { dialogFormVisible.value = true; Object.assign(form, row); } const handleDelete = id => { ElMessageBox.confirm( '是否确认删除?', '提示', { confirmButtonText: '是', cancelButtonText: '否', type: 'warning', } ) .then(async () => { await delSchedule(id) dialogFormVisible.value = false loadData(); }) .catch(() => { ElMessage({ type: 'info', message: '你取消了操作', }) }) }; </script>
5、ScheduleController.java
javapackage 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 { @Autowired private ScheduleService scheduleService; @GetMapping public Result list() { return Result.ok(scheduleService.getScheduleList()); } @PostMapping public Result save(@RequestBody Schedule schedule) { scheduleService.add(schedule); return Result.ok(); } @PutMapping public 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、await
在Vue3中,await是一个关键字,用于等待一个Promise对象的完成或拒绝。Promise是JavaScript中用于处理异步操作的对象,它代表了一个异步操作的最终完成(或失败)及其结果值的表示。await关键字可以用于等待Promise对象的完成,并返回Promise对象的结果值。
在Vue3中,await通常用于等待异步请求的响应,例如使用axios库发送HTTP请求到后端API。通过使用await关键字,可以确保在异步请求完成之前程序不会继续执行后面的代码,而会等待异步操作完成后再继续执行。这样可以避免出现竞态条件和数据不一致等问题,并确保数据的正确性和一致性。
下面是一个使用await等待Promise对象完成的示例:
javascriptasync function fetchData() { try { const response = await axios.get('https://api.example.com/data'); const data = response.data; // 处理数据 return data; } catch (error) { // 处理错误 } }
在这个示例中,使用async关键字定义了一个异步函数fetchData(),它使用axios库发送一个GET请求到指定的URL,并使用await关键字等待响应完成。如果响应成功完成,程序会返回响应数据,并可以在需要时使用这些数据进行渲染。如果请求失败,程序会捕获错误并处理。
spring-webmvc练习-日程管理-实现删除日程功能
丁总学Java2023-11-27 9:54
相关推荐
xChive1 天前
优化表单交互:在 el-select 组件中嵌入表格显示选项半度℃温热6 天前
ERROR TypeError: AutoImport is not a function邱自强9 天前
el-table 行列文字悬浮超出屏幕宽度不换行的问题getaxiosluo13 天前
vue3使用element-plus,树组件el-tree增加引导线Beamon__15 天前
element-plus按需引入报错AutoImport is not a function貂蝉空大17 天前
vue el-table组件实现展开行 默认展开全部前端烨21 天前
element-plus版本过老,自写选项弹框增删功能宁波阿成22 天前
pnpm install安装element-plus的版本跟package.json指定的版本不一样清灵xmf24 天前
UI 组件的二次封装Serenity_Qin1 个月前
vue3 + ts + element-plus 二次封装 el-dialog