spring-webmvc练习-日程管理-新增日程功能

1、main.js

javascript 复制代码

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

javascript 复制代码

import axios from "axios";

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

export default request

3、api/schedule.js

javascript 复制代码

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

4、App.vue

javascript 复制代码

<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.$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">取消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确定</el-button>
      </span>
      </template>
    </el-dialog>
  </el-container>

</template>

<script lang="ts" setup>
import {getScheduleList, saveSchedule, updateSchedule} from './api/schedule.js';
import {onMounted, reactive, ref} from 'vue';

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=()=>{
  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 = (index: number, row: scheduleList) => {
  console.log(index, row)
}
</script>

5、ScheduleController.java

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、async

在Vue3中，async是一个关键字，用于定义异步函数。异步函数可以用于处理需要花费一定时间的操作，如网络请求、读取文件等。使用async关键字可以确保异步操作不会阻塞程序的执行，使得程序可以继续执行其他任务，而不需要等待异步操作完成。

在Vue3中，async函数通常用于处理异步请求，例如从后端API获取数据。通过使用async函数，可以在不阻塞整个程序的情况下等待异步操作完成，并返回结果。这使得Vue3可以更高效地处理异步操作，并提高程序的响应速度和性能。

下面是一个使用async函数的示例：

javascript 复制代码

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，并等待响应完成。在等待的过程中，程序不会阻塞，可以继续执行其他任务。当响应完成时，程序会返回响应数据，并可以在需要时使用这些数据进行渲染。如果请求失败，程序会捕获错误并处理。