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) }
4、App.vue
javascript<template> <el-container> <el-row> <el-button type="primary" plain>新增</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="update">确定</el-button> </span> </template> </el-dialog> </el-container> </template> <script lang="ts" setup> import {getScheduleList, updateSchedule} 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([]) let loadData=()=>{ getScheduleList().then(response=>{ Object.assign(scheduleList,response.data.data) }) } 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
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、Object.assign
在Vue3中,Object.assign()方法主要用于合并对象,也可以用于浅拷贝对象。这个方法将所有可枚举的自身属性从一个或多个源对象复制到目标对象,返回目标对象。
在Vue3中,Object.assign()通常用于合并对象,如Vue的组件选项。
例如
javascriptlet options1 = {a: 1}; let options2 = {b: 2}; let options3 = {c: 3}; let mergedOptions = Object.assign({}, options1, options2, options3);
在上面的例子中,
mergedOptions
将会得到{a: 1, b: 2, c: 3}
。在Vue3中,Object.assign()也常用于拷贝数据。由于它执行的是浅拷贝,对于深层对象,它只会拷贝对象的引用而不是拷贝整个对象。所以如果你需要深层拷贝对象,可能需要使用其他方法,比如使用JSON的
parse()
和stringify()
方法,或者使用递归函数来实现深拷贝。在Vue3中,Object.assign() 并不是一个特别重要的方法,但它仍然可以用于合并对象或克隆对象。Vue3主要使用 ES6 的新特性,如 Proxy, Reflect, WeakMap, Symbol等,因此 Object.assign() 不再是 Vue3 的主要工具。
Object.assign() 是一个用于将所有可枚举属性的值从一个或多个源对象复制到目标对象的方法,它将返回目标对象。但在 Vue3 中,更推荐使用深度复制或克隆对象的方法,如 JSON 的 parse() 和 stringify() 方法,或者使用一个专门的深度复制库,如 lodash 的 _.cloneDeep() 方法。
Vue3 更重视的是响应式系统,它使用 ES6 的 Proxy 和 Reflect 来实现响应式数据。当你改变一个响应式对象的属性时,Vue3 会跟踪这个变化并更新相关的视图。因此,Object.assign() 在 Vue3 中的使用场景并不多,但在某些特定情况下,例如你需要合并或克隆一些普通的 JavaScript 对象时,你仍然可以使用它。
spring-webmvc练习-日程管理-修改功能实现以及增加新增按钮
丁总学Java2023-11-28 9:52
相关推荐
lsjweiyi4 个月前
github.com/gin-contrib/timeout应前置使用丁总学Java9 个月前
SSM项目实战-登录验证成功并路由到首页面,Vue3+Vite+Axios+Element-Plus技术丁总学Java9 个月前
spring-webmvc数据校验丁总学Java9 个月前
spring-webmvc文件下载丁总学Java9 个月前
spring-webmvc练习-日程管理-后端展示日程列表功能实现丁总学Java9 个月前
spring-webmvc练习-日程管理-访问后端展示列表数据丁总学Java9 个月前
spring-webmvc练习-日程管理-实现删除日程功能丁总学Java9 个月前
spring-webmvc练习-日程管理-新增日程功能RollingPin1 年前
iOS 蓝牙连接 connectionSupervisionTimeout 是720ms 还是 2~6s