当前位置： 首页 > article >正文

Vue-数据监听

article 2025/6/3 12:40:48

数据监听

基础信息

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base{padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><h3>年龄：{{boy.age}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy:{name:'刘德华',age:30,hobby:['唱歌','演戏','耍帅'],friend:[{id:'001',name:'张学友',age:30},{id:'002',name:'郭富城',age:30},{id:'003',name:'黎明',age:30}],}},methods:{},});</script>
</html>
  • 运行效果
    在这里插入图片描述

修改年龄

刘德华 的 年龄 - 1

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},},});</script>
</html>
  • 运行效果

在这里插入图片描述

点击 按钮 年龄-1

在这里插入图片描述

添加性别

刘德华 增加 性别属性 值为男 （基于 vue2）

Vue.set

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex(){console.log("刘德华 有性别了 （Vue.set）")Vue.set(this.boy,'sex',"男")}},});</script>
</html>
  • 运行效果

在这里插入图片描述

点击 按钮 添加性别

在这里插入图片描述

vm.$set

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听(vue2)</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex() {//   console.log("刘德华 有性别了 （Vue.set）");//   Vue.set(this.boy, "sex", "男");console.log("刘德华 有性别了 Vm.$set）");this.$set(this.boy, "sex", "男");}},});</script>
</html>
  • 运行效果

在这里插入图片描述

点击 按钮 添加性别

在这里插入图片描述

修改性别

刘德华 修改性别 男 => 猛男

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听(vue2)</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><button @click="updateSex">修改性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex() {//   console.log("刘德华 有性别了 （Vue.set）");//   Vue.set(this.boy, "sex", "男");console.log("刘德华 有性别了 Vm.$set）");this.$set(this.boy, "sex", "男");},updateSex(){console.log("刘德华 改变性别了 ");this.boy.sex = '猛男'}},});</script>
</html>
  • 运行效果

刘德华 添加 性别 男

在这里插入图片描述

点击 按钮 修改性别

在这里插入图片描述

修改朋友姓名

修改第一个朋友姓名为 张学良

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听(vue2)</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><button @click="updateSex">修改性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><button @click="updateFriendName">修改朋友姓名</button><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex() {//   console.log("刘德华 有性别了 （Vue.set）");//   Vue.set(this.boy, "sex", "男");console.log("刘德华 有性别了 Vm.$set）");this.$set(this.boy, "sex", "男");},updateSex(){console.log("刘德华 改变性别了 ");this.boy.sex = '猛男'},updateFriendName(){console.log("修改第一个朋友姓名了 ");this.boy.friend[0].name = "张学良"}},});</script>
</html>
  • 运行效果

在这里插入图片描述

点击 按钮 修改朋友姓名

在这里插入图片描述

首位新增朋友

刘德华 朋友列表 首位新增朋友 周杰伦

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听(vue2)</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><button @click="updateSex">修改性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><button @click="updateFriendName">修改朋友姓名</button><button @click="addFriend">首位新增朋友</button><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.id}} - {{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex() {//   console.log("刘德华 有性别了 （Vue.set）");//   Vue.set(this.boy, "sex", "男");console.log("刘德华 有性别了 Vm.$set）");this.$set(this.boy, "sex", "男");},updateSex(){console.log("刘德华 改变性别了 ");this.boy.sex = '猛男'},updateFriendName(){console.log("修改第一个朋友姓名了 ");this.boy.friend[0].name = "张学良"},addFriend(){console.log("首位新增一个朋友 ");this.boy.friend.unshift({ id: "004", name: "周杰伦", age: 26 })}},});</script>
</html>
  • 运行效果

在这里插入图片描述

点击 按钮 首位新增朋友

在这里插入图片描述

增加爱好

刘德华 爱好 增加 首位增加一个喝酒 末位增加一个健身

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听(vue2)</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><button @click="updateSex">修改性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><button @click="addHobby">增加爱好</button><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><button @click="updateFriendName">修改朋友姓名</button><button @click="addFriend">首位新增朋友</button><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.id}} - {{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex() {//   console.log("刘德华 有性别了 （Vue.set）");//   Vue.set(this.boy, "sex", "男");console.log("刘德华 有性别了 Vm.$set）");this.$set(this.boy, "sex", "男");},updateSex(){console.log("刘德华 改变性别了 ");this.boy.sex = '猛男'},updateFriendName(){console.log("修改第一个朋友姓名了 ");this.boy.friend[0].name = "张学良"},addFriend(){console.log("首位新增一个朋友 ");this.boy.friend.unshift({ id: "004", name: "周杰伦", age: 26 })},addHobby(){console.log("首位新增一个爱好 <喝酒>");this.boy.hobby.unshift("喝酒")console.log("末位新增一个爱好 <健身>");this.boy.hobby.push("健身")}},});</script>
</html>
  • 运行效果

在这里插入图片描述

点击 按钮 增加爱好

在这里插入图片描述

修改爱好

修改 刘德华的第一个爱好 唱歌 => 爬山

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听(vue2)</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><button @click="updateSex">修改性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><button @click="addHobby">增加爱好</button><button @click="updateHobby">修改爱好</button><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><button @click="updateFriendName">修改朋友姓名</button><button @click="addFriend">首位新增朋友</button><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.id}} - {{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex() {//   console.log("刘德华 有性别了 （Vue.set）");//   Vue.set(this.boy, "sex", "男");console.log("刘德华 有性别了 Vm.$set）");this.$set(this.boy, "sex", "男");},updateSex(){console.log("刘德华 改变性别了 ");this.boy.sex = '猛男'},updateFriendName(){console.log("修改第一个朋友姓名了 ");this.boy.friend[0].name = "张学良"},addFriend(){console.log("首位新增一个朋友 ");this.boy.friend.unshift({ id: "004", name: "周杰伦", age: 26 })},addHobby(){console.log("首位新增一个爱好 <喝酒>");this.boy.hobby.unshift("喝酒")console.log("末位新增一个爱好 <健身>");this.boy.hobby.push("健身")},updateHobby(){console.log("修改 刘德华的第一个爱好了 ");// Vue.set(this.boy.hobby, 0, '爬山');// this.$set(this.boy.hobby, 0, '爬山');// 必须得用 push、pop、shift、unshift、splice、sort、reverse修改才能响应式，直接通过数组下标修改元素无法响应式this.boy.hobby.splice(0,1,'爬山')}},});</script>
</html>
  • 运行效果

在这里插入图片描述

点击 按钮 修改爱好
在这里插入图片描述

总结

  • vue 会监听data中 所有层级的数据

通过 setter实现监听 且是在初始化vue实例就定义好的数据 data

  1. 对象后追加的属性，默认vue不做响应式处理
  2. 如后追加的属性想要响应式处理，使用特定的API进行增加属性
    - Vue.set(target, propertyName/index, value )
    - vm.$set(target, propertyName/index, value )
  • 如何监听数组中的数据

通过包装数组更新元素的方法进行实现，本质做了两件事：

  1. 调用原生对应的方法对数组进行更新
  2. 重新解析模板，更新页面
  • Vue2 中修改数组中元素 且 需要响应式，必须使用指定的方法：
  1. push、pop、shift、unshift、splice、sort、reverse
  2. Vue.set(target, propertyName/index, value )
  3. vm.$set(target, propertyName/index, value )
  • Vue.set() 和 vm.$set() 不能给vm以及根数据对象（data） 追加属性

相关文章：

Vue-数据监听

数据监听 基础信息 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>数据监听</title><!-- 引入Vue --><script type"text/javascript" src"../js/vue.js&qu…...

编程日记 2025/6/3 12:40:48

当前用户的Git全局配置情况：git config --global --list

通过config命令可以查询当前用户的全局配置情况。这些配置项定义了 Git 在全局范围内的行为&#xff0c;包括如何处理大文件、SSL 证书验证以及提交时的用户信息。 git config --global --list http.sslVerifyfalse 这个配置项禁用了 SSL 证书验证。这在与自签名证书的 Git 服…...

编程日记 2025/6/3 15:42:28

AI生态警报：MCP协议风险与应对指南（中）——MCP Server运行时安全​​

作为连接AI模型与外部工具的“USB-C接口”&#xff0c;MCP协议成为AI生态的核心枢纽&#xff0c;其安全风险已从理论威胁转化为实际攻击目标。 AI生态警报&#xff1a;MCP协议风险与应对指南&#xff08;上&#xff09;——架构与供应链风险https://blog.csdn.net/WangsuSecur…...

编程日记 2025/6/3 8:37:53

day15 leetcode-hot100-29（链表8）

19. 删除链表的倒数第 N 个结点 - 力扣&#xff08;LeetCode&#xff09; 1.暴力法 思路 &#xff08;1&#xff09;先获取链表的长度L &#xff08;2&#xff09;然后再次遍历链表到L-n的位置&#xff0c;直接让该指针的节点指向下下一个即可。 2.哈希表 思路 &#xff0…...

编程日记 2025/6/3 6:20:26

DeepSeek 赋能文化遗产数字化修复：AI 重构千年文明密码

目录 一、引言二、文化遗产数字化修复概述2.1 文化遗产数字化修复的意义2.2 传统数字化修复方法与局限 三、DeepSeek 技术剖析3.1 DeepSeek 技术原理与核心优势3.2 相比其他技术的独特之处 四、DeepSeek 在文化遗产数字化修复中的应用4.1 破损文物的智能修复4.2 文化遗产的虚拟…...

编程日记 2025/6/3 15:45:33

MonitorSDK_性能监控（从Web Vital性能指标、PerformanceObserver API和具体代码实现）

性能监控 性能指标 在实现性能监控前&#xff0c;先了解Web Vitals涉及的常见的性能指标 Web Vitals 是由 Google 推出的网页用户体验衡量指标体系&#xff0c;旨在帮助开发者量化和优化网页在实际用户终端上的性能体验。Web Vitals 强调“以用户为中心”的度量&#xff0c;而不…...

编程日记 2025/6/3 4:42:47

Spring Boot整合JWT实现认证与授权

概述 JSON Web Token (JWT) 是一种开放标准 (RFC 7519)&#xff0c;它定义了一种紧凑且自包含的方式&#xff0c;用于在各方之间安全地传输信息。在Web应用中&#xff0c;JWT常用于身份验证和信息交换。 依赖配置 首先需要在项目中添加JWT依赖&#xff1a; <!-- JWT依赖…...

编程日记 2025/6/3 3:57:46

在 Linux 系统上连接 GitHub 的方法 (适用2025年)

在2025年&#xff0c;使用 Linux 系统连接 GitHub 的推荐方式是通过 SSH (Secure Shell) 协议进行身份验证。这种方式不仅安全&#xff0c;还能免去每次操作时输入用户名和密码的繁琐。 &#x1f6e0;️ 步骤一&#xff1a;检查并安装 Git 首先&#xff0c;确保你的系统已安装…...

编程日记 2025/6/2 2:26:43

解决matlab两个库文件名冲突的问题

解决matlab两个库文件名冲突的问题 1、删除一个路径的文件&#xff08;不推荐&#xff09;2、改变优先级&#xff08;让不想要的版本shadowed&#xff09;3、更改文件名 添加一个库&#xff0c;发现总是调用另一个库的同名文件&#xff0c;这是由于路径中优先级问题。 which -…...

编程日记 2025/6/3 8:30:35

PHP 垃圾回收机制解析与应用案例

PHP 垃圾回收机制解析与应用案例 什么是 PHP 垃圾回收机制&#xff1f; PHP 的垃圾回收&#xff08;Garbage Collection, GC&#xff09;机制是其内存管理的重要组成部分。它的主要职责是管理内存的分配与释放&#xff0c;尤其是处理复杂的循环引用问题&#xff0c;确保 PHP …...

编程日记 2025/6/2 2:24:40

es6 函数解构

对象的解构赋值是内部机制&#xff0c;先找回同名属性&#xff0c;再赋值给对应的变量&#xff0c;真正被赋值的是后者。 let node {type:Identifier,name:foo,loc:{start:{line:1,column:1},end:{line:1,column:4}},method:function(){console.log(method);},range:[0,3] };…...

编程日记 2025/6/2 2:23:37

offset三大家族

以下是关于 offset 三大家族的知识点总结&#xff1a; 1. offsetParent 定义&#xff1a;offsetParent 是距离目标元素最近的已定位&#xff08;position 不为 static&#xff09;的祖先元素。特点&#xff1a; 如果父级元素都没有定位&#xff0c;则 offsetParent 为 body。…...

编程日记 2025/6/2 2:22:35

RSTP介绍加实操

简介 STP协议虽然能够解决环路问题&#xff0c;但是收敛速度慢&#xff0c;影响了用户通信质量。如果STP网络的拓扑结构频繁变化&#xff0c;网络也会频繁失去连通性&#xff0c;从而导致用户通信频繁中断。IEEE于2001年发布的802.1w标准定义了快速生成树协议RSTP&#xff08;R…...

编程日记 2025/6/3 6:42:03

Elasticsearch父子关系解析

引言 在复杂业务场景中&#xff0c;数据关联查询是搜索与分析的核心需求。以电商订单、文章评论、客户关系等场景为例&#xff0c;传统关系型数据库通过外键实现的多表关联&#xff0c;在分布式搜索场景下面临性能与扩展性挑战。Elasticsearch通过父子关系&#xff08;Parent-…...

编程日记 2025/6/3 3:43:59

33、请求处理【源码分析】Servlet API参数解析原理

33、请求处理【源码分析】Servlet API参数解析原理 在 Spring Boot 中&#xff0c;请求处理过程中涉及到 **Servlet API 参数解析** 的核心机制&#xff0c;主要依赖于 HandlerMethodArgumentResolver 接口及其相关实现类。以下是其原理的详细分析&#xff1a; --- ### **1. 参…...

编程日记 2025/6/2 2:19:30

基于深度学习的三维图像生成项目开发方案

基于深度学习的三维图像生成项目开发方案 一、项目概述 本项目旨在开发一个基于生成对抗网络（GAN）的三维图像生成系统，能够从随机噪声中生成高质量的三维体素数据。该系统可应用于医学影像合成、游戏内容生成、材料科学等领域。 二、技术架构 #mermaid-svg-JZqC6oWtS9sQ6…...

编程日记 2025/6/2 2:18:29

面试题——计算机网络：HTTP和HTTPS的区别？

HTTP&#xff08;HyperText Transfer Protocol&#xff09;&#xff1a;作为互联网上应用最广泛的网络通信协议&#xff0c;HTTP是基于TCP/IP协议族的应用层协议。它采用标准的请求-响应模式进行通信&#xff0c;通过简洁的报文格式&#xff08;包含请求行、请求头、请求体等&a…...

编程日记 2025/6/3 3:53:06

Flutter 包依赖升级指南：让项目保持最新状态

在 Flutter 开发过程中&#xff0c;依赖项管理是确保项目顺利运行和持续优化的关键环节。依赖项是项目中不可或缺的外部库&#xff0c;它们提供了各种功能&#xff0c;从 UI 组件到数据处理工具&#xff0c;帮助开发者快速构建应用。然而&#xff0c;随着时间的推移&#xff0c…...

编程日记 2025/6/3 14:57:41

LeeCode 98. 验证二叉搜索树

给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。节点的右子树只包含 大于 当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。 提示&#xff1a; 树中节…...

编程日记 2025/6/3 4:59:57

JVM类加载高阶实战：从双亲委派到弹性架构的设计进化

前言 作为Java开发者&#xff0c;我们都知道JVM的类加载机制遵循"双亲委派"原则。但在实际开发中&#xff0c;特别是在金融支付、插件化架构等场景下&#xff0c;严格遵循这个原则反而会成为系统扩展的桎梏。本文将带你深入理解双亲委派机制的本质&#xff0c;并分享…...

编程日记 2025/6/3 2:19:10

[网页五子棋][用户模块]数据库设计和配置(MyBatis)、约定前后端交互接口、服务器开发

文章目录 数据库数据库设计配置 MyBatis1. Spring 配置2. 创建实体类3. 创建 Mapper 接口4. 使用 MyBatis 约定前后端交互接口登录接口注册接口获取用户信息 服务器开发loginregistergetUserInfo完整代码 数据库 数据库设计 完成注册登录以及用户分数管理 使用数据库来保存上…...

编程日记 2025/6/3 7:35:15

maven编译时跳过test过程

如果代码里有无法在打包环境中测试的部分&#xff0c;则直接运行mvn clean package&#xff0c;因为测试失败&#xff0c;会导致打包失败。目前有两种方式可以跳过测试&#xff1a; 1. mvn clean package -DskipTests&#xff0c;这会跳过执行阶须&#xff0c;但仍会生成测试所…...

编程日记 2025/6/2 2:12:01

threejsPBR材质与纹理贴图

1. PBR材质简介 本节课没有具体的代码&#xff0c;就是给大家科普一下PBR材质&#xff0c;所谓PBR就是&#xff0c;基于物理的渲染(physically-based rendering)。 Three.js提供了两个PBR材质相关的APIMeshStandardMaterial和MeshPhysicalMaterial,MeshPhysicalMaterial是Mes…...

编程日记 2025/6/2 2:10:57

深兰科技董事长陈海波受邀出席2025苏商高质量发展(常州)峰会，共话AI驱动产业升级

5月29日&#xff0c;2025苏商高质量发展峰会在常州隆重开幕。本次峰会聚焦新质生产力培育与产业创新转型&#xff0c;汇聚了众多江苏省内知名企业家、专家学者及政府代表。深兰科技创始人、董事长陈海波作为人工智能领域的领军企业代表&#xff0c;受邀出席盛会并参与重要活动环…...

编程日记 2025/6/2 2:09:55

【计算机网络】子网划分

文章目录 【计算机网络】子网划分&#xff08;知识点详细&#xff09;一、子网划分基础概念1. **为什么需要子网划分&#xff1f;**2. **关键术语** 二、子网划分核心原理1. **借位规则**2. **子网划分步骤** 三、子网划分实战案例案例1&#xff1a;标准C类网划分&#xff08;等…...

编程日记 2025/6/2 2:08:53

Git入门到精通：30分钟掌握核心技巧

目录 一、基础理论片 Git简介 Git安装 Git仓库 Git基本命令用法 仓库别名 二、实操命令篇 远程分支 分支的新建和合并 实操演示 1 本地新建仓库 2 gitee新建仓库 3 建立关系 4 新建分支 5 开发新功能 6 推送新分支 7 合并新分支到主分支 三、可视化工具篇 G…...

编程日记 2025/6/3 3:57:31

Redis7底层数据结构解析

redisObject 在 Redis 的源码中&#xff0c;Redis 会将底层数据结构&#xff08;如 SDS、hash table、skiplist 等&#xff09;统一封装成一个对象&#xff0c;这个对象叫做 redisObject&#xff0c;也简称 robj。 typedef struct redisObject {unsigned type : 4; // 数…...

编程日记 2025/6/3 6:31:31

Android 异步编程中协程的完整实战示例

一、全链路数据加载&#xff1a;网络请求 数据库缓存 在实际开发中&#xff0c;数据加载通常需要先检查本地缓存&#xff0c;若缓存失效则从网络获取&#xff0c;并将结果更新到本地。以下是完整的 MVVM 架构示例&#xff1a; 1. 项目结构 app/ ├── data/ …...

编程日记 2025/6/3 7:49:10

多部手机连接同一wifi的ip一样吗？

在家庭和办公环境中&#xff0c;多台手机同时连接同一个WiFi路由器已成为常态。不少用户会产生疑问&#xff1a;这些设备的IP地址会相同吗&#xff1f;下面就一起来了解一下吧。 一、多部手机连接同一WiFi的IP‌一样吗 多部手机连接同一WiFi时的IP地址是否相同&#xff0c;需要…...

编程日记 2025/6/3 4:38:55

大语言模型值ollama使用（1）

ollama为本地调用大语言模型提供了便捷的方式。下面列举如何在windows系统中快捷调用ollama。 winR打开运行框&#xff0c;输入cmd 1、输入ollama list 显示已下载模型 2、输入ollama pull llama3 下载llama3模型 3、 输入 ollama run llama3 运行模型 4、其他 ollama li…...

编程日记 2025/6/3 6:51:52