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-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">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: 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
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、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了') // 其他初始化操作或异步请求等等 }) } }
原文地址:https://blog.csdn.net/m0_65152767/article/details/134630758
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_2667.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!