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

vue3第二阶段的开发文档

news 2025/7/6 23:35:07
1
2.1 案例——学习计划表
2.1.1 准备工作
在开发“学习计划表”案例之前，需要先完成一些准备工作，具体步骤如下。
① 打开命令提示符，切换到 D:\vue\chapter02 目录，在该目录下执行如下命令，创建
项目。
npm create vite@4.1.0 learning_schedule -- --template vue
项目创建完成后，执行如下命令进入项目目录，启动项目。
cd learning_schedule
npm install
npm run dev
项目启动后，可以使用 URL 地址 http://127.0.0.1:5173/ 进行访问。
② 使用 VS Code 编辑器打开 D:\vue\chapter02\learning_schedule 目录。
③ 将 src\style.css 文件中的样式代码全部删除，从而避免项目创建时自带的样式代码
影响本案例的实现效果。
④ 打开 D:\vue\chapter02\ learning_schedule 目录，找到 index.html 文件。在文件中引
入 BootStrap 样式文件，具体代码如下。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 ……（原有代码）
5 <link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.c
ss" rel="stylesheet">
6 </head>
7 </html>
上述代码中，第 5 行代码引入 Bootstrap 的 CSS 文件，引用后即可使用 Bootstrap 快速
开发响应式网页，使用全局 CSS 样式美化标签。
⑤ 修改 src\App.vue 文件中的默认内容，具体代码如下。
1 <template>
2 学习计划表
3 </template>
至此，“学习计划表”案例准备工作已完成。 2
2.1.2 渲染表格区域数据
接下来正式进入“学习计划表”案例的开发。在 App 组件中编写表格区域的页面结
构和样式，并在页面上渲染表格数据，具体实现步骤如下。
① 在 <script setup> 标签中定义渲染表格所需的数据，具体代码如下。
1 <script setup>
2 import { ref } from 'vue'
3 const list = ref([
4 {
5 id: '1',
6 subject: 'Vue.js 前端实战开发 ',
7 content: ' 学习指令，例如 v-if 、 v-for 、 v-model 等 ',
8 place: ' 自习室 ',
9 status: false,
10 },
11 ])
12 </script>
上述代码中， list 数组表示渲染表格区域所需的数据， id 属性表示序号， subject 属性
表示学习科目， content 属性表示学习内容， place 属性表示学习地点， status 属性表示学
习计划的完成状态，若属性值为 false ，表示“未完成”，若属性值为 true 表示“已完
成”。
② 根据 Bootstrap 文档找到 Tables ，根据实际需要合适的样式，本案例中表格的结
构样式具体如下。
1 <template>
2 <table class="table table-striped table-hover table-bordered">
3 <thead>
4 <tr>
5 <th scope="col"> 序号 </th>
6 <th scope="col"> 学习科目 </th>
7 <th scope="col"> 学习内容 </th>
8 <th scope="col"> 学习地点 </th>
9 <th scope="col"> 完成状态 </th>
10 <th scope="col"> 操作 </th>
11 </tr>
12 </thead>
13 <tbody>
14 <tr> 3
15 <td> 序号 </td>
16 <td> 学习科目 </td>
17 <td> 学习内容 </td>
18 <td> 学习地点 </td>
19 <td> 完成状态 </td>
20 <td> 操作 </td>
21 </tr>
22 </tbody>
23 </table>
24 </template>
保存上述代码后，在浏览器中打开 http://127.0.0.1:5173/ ，初始页面如图 2-1 所示。
图 2-1
初始页面
③ 接下来通过 v-for 指令循环渲染表格行的数据，修改 <tbody> 标签中的代码，具
体如下。
1 <tbody>
2 <tr v-for="item in list" :key="item.id" >
3 <td>{{ item.id }}</td>
4 <td>{{ item.subject }}</td>
5 <td>{{ item.content }}</td>
6 <td>{{ item.place }}</td>
7 <td>
8 <div class="form-check form-switch">
9 <input class="form-check-input" type="checkbox" role="switch"
id="flexSwitchCheckDefault" v-model="item.status" />
10 <label class="form-check-label" for="flexSwitchCheckDefault" v
if="item.status"> 已完成 </label>
11 <label class="form-check-label" for="flexSwitchCheckDefault" v
else> 未完成 </label>
12 </div>
13 </td>
14 <td>
15 <a href="javascript:;"> 删除 </a> 4
16 </td>
17 </tr>
18 </tbody>
上述代码中，第 2~17 行代码通过 v-for 指令渲染表格行，将 list 数组中的数据渲染到
页面上，每项必须提供一个唯一 key 值；第 3~6 行代码将列表项中序号、学习科目、学
习内容、学习地点通过 Mustache 语法渲染到页面上；第 7~13 行代码将表格行渲染为
switch 开关效果，其中，第 8 行代码将 <input> 标签渲染为开关的效果，通过 v-model 指令
绑定绑定 data 中的 list 数组中每个对象的 status 属性，第 10~11 行代码通过 v-if 、 v-else
条件渲染指令根据 status 属性的属性值渲染“已完成”或“未完成”的 <label> 标签；第
15 行代码定义了 <a> 标签，通过单击删除字段，即可将该行学习计划删除。
保存上述代码后，在浏览器中打开 http://127.0.0.1:5173/ ，渲染表格数据的页面效果
如图 2-2 所示。
图 2-2
渲染表格数据的页面效果
从图 2-2 中可以看出，学习计划列表中的数据被成功渲染。
至此，学习计划表渲染表格区域数据已实现。
2.1.3 实现学习计划的删除功能
在单击表格行最后一列“删除”时，可以对整行的学习计划进行删除操作。在实现
该功能时，在单击“删除”时，传递该行数据所对应的 id 属性，通过调用数组中的
filter() 方法实现数据的过滤。在删除学习计划时，如果完成状态为“未完成”时禁止删
除，完成状态为“已删除”时该学习计划可以进行删除操作。实现学习计划删除功能的
具体步骤如下。
① 修改 <a> 标签，添加单击事件，具体代码如下。
<a href="javascript:;" @click="remove(item.id) "> 删除 </a>
上述代码中，加粗代码为新增代码，为 <a> 标签绑定单击事件，并传递参数 id 。
② 在 <script setup> 标签中编写 remove() 方法，实现学习计划的删除，具体代码如
下。
1 let remove = id => {
2 list.value = list.value.filter(item => item.id !== id)
3 } 5
上述代码中，第 2 行代码通过调用 filter() 方法创建一个新数组，新数组为通过检查指
定 list 数组中符合条件的所有元素。
③ 修改 <a> 标签，在单击“删除”时传递该学习计划的完成状态，具体代码如下。
<a href="javascript:;" @click="remove(item.id, item.status )"> 删除 </a>
④ 修改 remove() 方法，实现对学习计划完成状态的判断，具体代码如下。
1 let remove = (id, status ) => {
2 if (status) {
3 list.value = list.value.filter(item => item.id !== id)
4 } else {
5 alert(' 请完成该学习计划后再进行删除操作！ ')
6 }
7 }
上述代码中，通过 if 进行判断，若 status 为 true ，则执行第 3 行代码进行删除操作，
否则执行第 5 行代码，弹出警告。
保存上述代码后，在浏览器中打开 http://127.0.0.1:5173/ 进行测试。
至此，学习计划表的删除功能已实现。
2.1.4 实现学习计划的添加功能
接下来实现添加学习计划的功能，学生可以自主填写学习科目、学习内容和学习地
点。该功能通过表单来进行实现，在单击“添加”按钮时实现表单中所有信息的提交，
进行添加学习计划的操作。实现学习计划的添加功能具体实现步骤如下。
① 首先在 <script setup> 标签中定义页面所需的数据，具体代码如下。
1 let subject = ref('')
2 let content = ref('')
3 let nextId = ref('')
4 let selectedOption = ref(' 自习室 ')
5 let options = ref([
6 { placeCode: 0, place: ' 自习室 ', },
7 { placeCode: 1, place: ' 图书馆 ', },
8 { placeCode: 2, place: ' 宿舍 ', },
9 ])
上述代码中，第 1 行代码定义了 subject ，表示学习科目；第 2 行代码定义了 content ，
表示学习内容；第 3 行代码定义了 nextId ，表示新添加数据的 id ；第 4 行代码定义了默认
选中的学习地点；第 5~9 行代码定义了 options 数组，表示学习地点，其中 placeCode 属性
表示地点编号， place 属性表示地点名称。
② 卡片区域的整体页面结构，具体代码如下。 6
1 <template>
2 <div class="card">
3 <!-- 标题区域 -->
4 <div class="card-header"> 学习计划表 </div>
5 <!-- 提交区域 -->
6 <div class="card-body">
7 <form>
8 <div class="row g-4">
9 <!-- 学习科目 -->
10 <div class="col-auto"></div>
11 <!-- 学习任务 -->
12 <div class="col-auto"></div>
13 <!-- 学习地点 -->
14 <div class="col-auto"></div>
15 <!-- 添加按钮 -->
16 <div class="col-auto">
17 <button type="submit" class="btn btn-primary"> 添加 </button>
18 </div>
19 </div>
20 </form>
21 </div>
22 </div>
23 <table class="table table-striped table-hover table-bordered">
24 ……（原有代码）
25 </table>
26 </template>
上述代码中，第 2~22 行代码为新增代码，表示卡片区域。第 4 行代码定义了标题区
域，名称为“学习计划表”，第 7~20 行代码定义了表单区域，实现学习计划的添加功
能。第 10 、 12 、 14 行代码分别定义了学习科目、学习任务、学习地点区域，这 3 个区域
的实现在后续步骤中进行讲解。第 16~18 行代码中，定义了“添加”按钮， type 类型为
submit ，当单击该按钮时会触发 <form> 标签的 submit 事件提交表单信息。
③ 添加卡片区域中学习科目区域的页面结构，具体代码如下。
1 <div class="col-auto">
2 <div class="input-group mb-3">
3 <span class="input-group-text" id="basic-addon1"> 学习科目 </span>
4 <input type="text" class="form-control" placeholder=" 请输入学习科目 "
v-model.trim="subject" />
5 </div> 7
6 </div>
上述代码中，第 2~5 行代码定义了学习科目区域，通过 <input> 标签定义的文本框可
以输入学习科目，通过 v-model 指令，将 <input> 标签与 subject 实现数据的双向绑定，即
当更改文本框中的值时 subject 的值更改。同时为 v-model 指令添加了 trim 修饰符，用于
自动过滤用户输入的首尾空白字符。
④ 添加卡片区域中学习任务区域的页面结构，具体代码如下。
1 <div class="col-auto">
2 <div class="input-group mb-3">
3 <span class="input-group-text" id="basic-addon1"> 学习内容 </span>
4 <textarea class="form-control" v-model.trim="content" placeholder="
请输入学习内容 " :style="{ height: '32px' }"></textarea>
5 </div>
6 </div>
上述代码中，第 2~5 行代码定义了学习内容区域，通过 <textarea> 标签定义的多行文
本框可以输入学习内容，通过 v-model 指令与 content 绑定，实现视图与数据的双向绑
定。同时为 v-model 指令添加了 trim 修饰符，用于自动过滤用户输入的首尾空白字符。
⑤ 添加卡片区域中学习地点区域的页面结构，具体代码如下。
1 <div class="col-auto">
2 <div class="input-group mb-3">
3 <span class="input-group-text" id="basic-addon1"> 学习地点 </span>
4 <select class="form-select form-select-sm" v-model="selectedOption" >
5 <option v-for="option in
options" :value="option.place" :key="option.placeCode" >
6 {{ option.place }}
7 </option>
8 </select>
9 </div>
10 </div>
上述代码中，第 2~9 行代码定义了学习地点区域，其中，第 4~8 行代码通过 <select>
标签定义了下拉列表，通过 v-model 指令与 selectedOption 绑定，实现数据的双向绑定。
如果 v-model 指令的初始值不匹配任何一个选项， <select> 标签会渲染成未选择的状态，
所以 selectedOption 属性值为“自习室”，表示 <select> 标签的初始值为“自习室”，自习
室为下拉列表中定义的一个值。第 5~7 行代码通过 v-for 条件渲染指令实现学习地点的渲
染，当下拉列表中选项改变时， selectedOption 属性更改。
⑥ 为 <form> 标签添加 submit 事件，实现单击“添加”按钮时添加信息，具体代码
如下。
<form @submit.prevent="add" >
……（原有代码） 8
</form>
上述代码中，黑色加粗部分为新增代码，添加事件处理函数为 add() ，同时为 submit
事件添加事件修饰符 prevent ，用来阻止表单的默认提交行为。实现在单击按钮后提交表
单，执行 add() 方法。
⑦ 在 <script setup> 标签中编写 add() 方法，实现学习计划的添加，具体代码如下。
1 let add = () => {
2 if (subject.value === '') {
3 alert(' 学习科目为必填项！ ')
4 return
5 }
6 nextId.value = Math.max(...list.value.map(item => item.id)) + 1
7 const obj = {
8 id: nextId.value,
9 subject: subject.value,
10 content: content.value,
11 place: selectedOption.value,
12 status: false,
13 }
14 list.value.push(obj)
15 subject.value = ''
16 content.value = ''
17 selectedOption.value = ' 自习室 '
18 }
上述代码中，第 2~5 行代码通过 if 进行判断，若学习科目字段 subject 为空，则弹出
提示，且不执行接下来的添加操作；第 6 行代码，通过调用 max() 方法，找到 list 数组中
id 中最大值，新添加数据的 id 为最大值加 1 ；第 7~13 行代码为需要新添加的数据，包括
id 、 subject 、 content 、 place 等，在默认情况下 status 为 false ，表示未完成该学习计划；第
14 行代码调用 push() 方法实现将 obj 对象添加到 list 数组的末尾；第 15~16 行代码将
subject 、 content 中的数据清空；第 17 行代码定义下拉列表的默认值。
保存上述代码后，在浏览器中打开 http://127.0.0.1:5173/ ，查看页面效果。
至此，学习计划表的添加功能已实现。
2.1.5 实现状态的切换功能
在实现学习计划的添加功能后，可以添加多条学习计划。在之前遗留如下问题：在表
格中更改添加后的几条学习计划的完成状态时，单击 <input> 标签生成的开关按钮可以实现 9
“未完成”与“已完成”状态之间的切换，但是单击 <label> 标签“未完成”与“已完成”
不能实现该表格行的完成状态的切换，只会切换表格第 1 行的完成状态。
若想实现单击文字也可实现某条学习计划完成状态的切换，则可以通过动态生成
<input> 标签的 id 属性，修改完成状态列的代码，具体如下。
1 <div class="form-check form-switch">
2 <input class="form-check-input" type="checkbox" role="switch" :id="'cb
' + item.id" v-model="item.status" />
3 <label class="form-check-label" :for="'cb' + item.id" v-if="item.statu
s"> 已完成 </label>
4 <label class="form-check-label" :for="'cb' + item.id" v-else> 未完成
</label>
5 </div>
上述代码中，黑体加粗部分代码为修改代码， <label> 标签中的 for 属性规定 <label> 标
签与哪个表单元素绑定，所以在第 3~3 行代码中通过 <label> 标签中 for 属性与 <input> 标签
绑定， for 属性的属性值为 <input> 标签的 id 属性值，实现单击 <label> 标签中的文本时，浏
览器自动将焦点转到和 <label> 标签的相关控件 <input> 控件中，实现单击文本完成某条学习
计划的完成状态的改变。
保存上述代码后，在浏览器中打开 http://127.0.0.1:5173/ 进行测试。
至此，“学习计划表”案例开发完成。

相关文章：

vue3第二阶段的开发文档

1 2.1 案例——学习计划表 2.1.1 准备工作 在开发“学习计划表”案例之前&#xff0c;需要先完成一些准备工作&#xff0c;具体步骤如下。 ① 打开命令提示符&#xff0c;切换到 D:\vue\chapter02 目录&#xff0c;在该目录下执行如下命令&#xff0c;创建 项目。 np…...

编程日记 2024/6/20 8:52:11

【网络安全学习】漏洞扫描：- 02- nmap漏洞扫描

1.nmap的介绍 Nmap是一款功能强大的网络探测和安全扫描工具&#xff0c;可以对目标进行端口扫描、服务探测、操作系统指纹识别等操作。 Nmap自带了许多内置的NSE脚本&#xff0c;它们可以根据不同的目标和场景来执行不同的功能。这些脚本存放在Nmap安装目录**/usr/share/nmap…...

编程日记 2024/6/20 8:51:09

Web开发技能树-HTML-class/id/name/tag

1 需求 需求1&#xff1a;CSS查找HTML元素 *tagclassid派生选择器 需求2&#xff1a;JavaScript查找HTML元素 通过id找到HTML元素&#xff1a;document.getElementById()通过标签名找到HTML元素&#xff1a;getElementsByTagName()通过类名找到HTML元素:document.getElemen…...

编程日记 2024/6/20 8:50:08

据APO Research（阿谱尔）统计，2023年全球乳酸企业产能约119.3万吨

乳酸又称 2-羟基丙酸&#xff0c;一种天然有机酸&#xff0c;分子式是 C3H6O3。是自然界中最为广泛存在的羟基酸&#xff0c;于 1780 年被瑞典科学家 Scheele 首次发现。乳酸是自然界最小的手性分子&#xff0c;以两种立体异构体的形式存在于自然界中&#xff0c;即左旋型 L-乳…...

编程日记 2024/6/20 8:49:06

百度文心智能体平台（想象即现实）：轻松上手，开启智能新时代！创建属于自己的智能体应用。

目录 1.1、文心智能体平台 1.2、创建智能体 1.3、智能体报名入口 1.4、古诗词小助手 1.5、访问我的智能体 在这个全新的时代里&#xff0c;人工智能技术正以前所未有的速度发展&#xff0c;渗透到我们生活的方方面面。无论是智能家居、自动驾驶&#xff0c;还是医疗诊断、…...

编程日记 2024/6/20 8:47:02

Linux中ls -lsa 和ls -lst区别

在Linux中&#xff0c;ls 命令用于列出目录内容。当与不同的选项组合时&#xff0c;它可以以不同的方式显示文件和目录的详细信息。 对于 ls -lsa 和 ls -lst&#xff0c;它们的主要区别在于显示的列和排序方式&#xff1a; ls -lsa: -l: 使用长格式显示文件和目录的详细信息。…...

编程日记 2024/6/20 8:44:59

TDengine 签约上海晶澳太阳能，助力储能业务平台搭建

在全球能源结构转型和碳中和目标的大背景下&#xff0c;太阳能作为清洁能源的重要组成部分&#xff0c;正逐渐成为新能源发展的关键。作为一个领先的数据处理平台&#xff0c;TDengine 最近与太阳能行业的领头羊晶澳太阳能科技股份有限公司开展了深度合作。这项合作旨在利用 TD…...

编程日记 2024/6/20 8:43:58

【数据结构】选择题

在数据结构中&#xff0c;从逻辑上可以把数据结构分为&#xff08;线性结构和非线性结构&#xff09; 当输入规模为n时&#xff0c;下列算法渐进复杂性中最低的是&#xff08;&#xff09; 时间复杂度 某线性表采用顺序存储结构&#xff0c;每个元素占4个存储单元&#xf…...

编程日记 2024/6/20 8:40:54

数据库 |试卷八试卷九试卷十

1.基数是指元组的个数 2.游标机制 3.触发器自动调用 4.count(*)统计所有行&#xff0c;不忽略空值null&#xff0c;但不但要全局扫描&#xff0c;也要对表的每个字段进行扫描&#xff1b; 5.eacherNO INT NOT NULL UNIQUE&#xff0c;为什么不能断定TeacherNO是主码&#xff…...

编程日记 2024/6/20 8:39:53

【华为HCIA数通网络工程师真题-构建互联互通的IP网络】

文章目录 一、选择题 一、选择题 1、缺省情况下&#xff0c;广播网络上OSPF协议RouterDeadInterval是&#xff1f; 40s &#xff08;ospf 的 RouterDeadInterval 为四倍 hello time 时间&#xff0c;hello time 周期默认为10s&#xff0c;所以 RouterDeadInterval 默认为 40s …...

编程日记 2024/6/20 8:38:51

Kafka 负载均衡挑战及解决思路

本文转载自 Agoda Engineering&#xff0c;介绍了在实际应用中&#xff0c;如何应对 Kafka 负载均衡所遇到的各种挑战&#xff0c;并提出相应的解决思路。本文简要阐述了 Kafka 的并行性机制、常用的分区策略以及在实际操作中遇到的异构硬件、不均匀工作负载等问题。通过深入分…...

编程日记 2024/6/20 8:37:50

【Java面试】二十一、JVM篇（中）：垃圾回收相关

文章目录 1、类加载器1.1 什么是类加载器1.2 什么是双亲委派机制 2、类装载的执行过程&#xff08;类的生命周期&#xff09;3、对象什么时候可以被垃圾回收器处理4、JVM垃圾回收算法4.1 标记清除算法4.2 标记整理算法4.3 复制算法 5、分代收集算法5.1 MinorGC、Mixed GC、Full…...

编程日记 2024/6/20 8:34:46

深入理解预处理

1.预定义符号 C语言设置了⼀些预定义符号&#xff0c;可以直接使用&#xff0c;预定义符号也是在预处理期间处理的。 __FILE__ //进⾏编译的源⽂件 __LINE__ //⽂件当前的⾏号 __DATE__ //⽂件被编译的⽇期 __TIME__ //⽂件被编译的时间 __STDC__ //如果编译器遵循ANSI C&…...

编程日记 2024/6/20 8:33:37

DSP28335:定时器

1.定时器介绍 1.1 定时器工作原理 TMS320F28335的CPU Time有三个&#xff0c;分别为Timer0&#xff0c;Timer1&#xff0c;Timer2&#xff0c;其中Timer2是为操作系统DSP/BIOS保留的&#xff0c;当未移植操作系统时&#xff0c;可用来做普通的定时器。这三个定时器的中断信号分…...

编程日记 2024/6/20 8:31:34

系统架构理解

一、统一提前查好所有数据后续逻辑用到啥取啥&#xff0c;还是等用到对应数据的时候再查 1、用到啥查啥&#xff1a; 优势&#xff1a;减少依赖调用次数&#xff0c;减轻服务器压力&#xff1b;代码逻辑清晰&#xff0c;没有太多分支判断 劣势&#xff1a;无法避免串行调用&am…...

编程日记 2024/6/20 8:30:32

uni-app页面的跳转三种方式，功能作用有什么区别？

一、三种方式的作用 1、uni.reLaunch 作用是关闭所有页面&#xff0c;然后打开新的页面 类似于重新启动应用&#xff0c;打开的页面栈会被清空&#xff0c;只显示新打开的页面。使用uni.reLaunch方法可以实现整个应用的重定向 uni.reLaunch({url: /pages/login/login }) 2、…...

编程日记 2024/6/20 8:28:30

React 通信：深层传递（Props、Context、Children Jsx）

在之前的文章 探讨&#xff1a;围绕 props 阐述 React 通信 中总结了关于“父子”组件传值&#xff0c;但是当需要在组件树中深层传递参数以及需要在组件间复用相同的参数时&#xff0c;传递 props 就会变得很麻烦。 实际案例&#xff1a; 下述展示有两种状态&#xff1a;① 详…...

编程日记 2024/6/20 8:27:28

《Windows API每日一练》5.1 键盘基础

本节我们讲述关于键盘的一些基础知识。当我们按下一个键盘按键时&#xff0c;会产生一个键盘按键消息。这一点你能确定吗&#xff1f;假如是一个菜单快捷键消息&#xff0c;或者是一个子窗口控件消息呢&#xff1f;这就超出了本节讨论的范围&#xff0c;我们将在菜单和子窗口控…...

编程日记 2024/6/20 8:24:25

Class.forName()方法总结

Class.forName()方法总结 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;Class.forName()方法是Java反射机制中的一个重要方法&#xff0c;它用于动态加载类并返…...

编程日记 2024/6/20 8:23:24

Python | Leetcode Python题解之第168题Excel表列名称

题目&#xff1a; 题解&#xff1a; class Solution:def convertToTitle(self, columnNumber: int) -> str:ans list()while columnNumber > 0:columnNumber - 1ans.append(chr(columnNumber % 26 ord("A")))columnNumber // 26return "".join(an…...

编程日记 2024/6/20 8:21:21

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/6/17 12:57:30

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2025/7/5 12:37:11

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/6/27 7:21:20

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2025/7/1 5:03:52

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/6/25 2:48:04

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/6/25 1:12:20

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/6/24 2:55:32

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2025/6/16 21:06:50

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2025/7/6 10:05:21

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

编程新知 2025/7/6 9:39:35