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

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 {

    @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对象完成的示例：

async 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关键字等待响应完成。如果响应成功完成，程序会返回响应数据，并可以在需要时使用这些数据进行渲染。如果请求失败，程序会捕获错误并处理。