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

【VUE】第一期——初使用、基本语法

news 2026/2/9 0:51:13

0 前言

黑马程序员视频地址：前端最新Vue2+Vue3基础入门到实战项目全套教程

本章从vue2学起，vue3内容将在后期专门用一章来讲述

本篇只记录大纲及要点，具体请看黑马程序员视频及其提供的md笔记

vue2官网：Vue.js

vue3官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

1 准备工作

1.1 创建vue实例

1. 准备容器 (Vue所管理的范围)
2. 引包 (开发版本包 / 生产版本包) 官网
3. 创建实例
4. 添加配置项 => 完成渲染

<body><div id="app"><!-- 这里将来会编写一些用于渲染的代码逻辑 --><h1>{{ msg }}</h1><a href="#">{{ count }}</a>
</div><!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>// 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数const app = new Vue({// 通过 el 配置选择器，指定 Vue 管理的是哪个盒子el: '#app',// 通过 data 提供数据data: {msg: 'Hello World！',count: 666}})</script></body>

1.2 vue开发者工具

安装网站：极简插件官网_Chrome插件下载_Chrome浏览器应用商店

注意查看插件是否支持vue2

安装之后可以F12后看到多一个Vue的调试面板

2 插值表达式

2.1 基本用法

{{表达式}}

表达式：

money + 100
money - 100
money * 10
money / 10
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

示例：

<h3>{{title}}<h3><p>{{nickName.toUpperCase()}}</p><p>{{age >= 18 ? '成年':'未成年'}}</p><p>{{obj.name}}</p><p>{{fn()}}</p>

2.2 注意事项

1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错2.支持的是表达式，而非语句，比如：if   for ...
<p>{{if}}</p>3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

3 常用指令

vue 中的指令按照不同的用途可以分为如下 6 大类：

内容渲染指令（v-html、v-text）

条件渲染指令（v-show、v-if、v-else、v-else-if）

事件绑定指令（v-on）

属性绑定指令（v-bind）

列表渲染指令（v-for）

双向绑定指令（v-model）

3.1 内容渲染指令

3.1.1 v-text

使用语法：<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中

类似 innerText，使用该语法，会覆盖 p 标签原有内容

3.1.2 v-html

使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中

类似 innerHTML，使用该语法，会覆盖 p 标签原有内容

类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

3.2 条件渲染指令

3.2.1 v-show

作用：控制元素显示隐藏

语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏

原理：切换 display:none 控制显示隐藏

场景：频繁切换显示隐藏的场景

3.2.2 v-if

作用：控制元素显示隐藏（条件渲染）

语法： v-if= "表达式" 表达式值 true显示， false 隐藏

原理：基于条件判断，是否创建或移除元素节点

场景：要么显示，要么隐藏，不频繁切换的场景

3.2.3 v-else 和 v-else-if

作用：辅助v-if进行判断渲染

语法：v-else v-else-if="表达式"

需要紧接着v-if使用

3.3 事件绑定指令

<button v-on:事件名="内联语句">按钮</button>

<button v-on:事件名="处理函数">按钮</button>

<button v-on:事件名="处理函数(实参)">按钮</button>

v-on: 简写为 @

3.3.1 内联语句

<div id="app"><button @click="count--">-</button><span>{{ count }}</span><button v-on:click="count++">+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100}})</script>

3.3.2 事件处理函数

注意：

事件处理函数应该写到一个跟data同级的配置项（methods）中

methods中的函数内部的this都指向Vue实例

3.3.3 给事件处理函数传参

如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象

<body><div id="app"><!-- 绑定事件处理函数，不加小括号 --><button @click="handleClick">点击我</button></div><script>new Vue({el: '#app',methods: {handleClick(e) {// e 就是事件对象console.log('事件对象:', e);console.log('点击的元素:', e.target);}}});</script>
</body>

如果传递了参数，则需额外传一个实参 $event 表示事件对象

<body><div id="app"><!-- 传递额外参数，同时使用 $event 表示事件对象 --><button @click="handleClickWithParams('额外参数', $event)">点击我</button></div><script>new Vue({el: '#app',methods: {handleClickWithParams(param, e) {// param 是传递的额外参数console.log('传递的额外参数:', param);// e 是事件对象console.log('事件对象:', e);console.log('点击的元素:', e.target);}}});</script>
</body>

注意：如果在内联事件处理中只传递一个参数而不使用 $event 来显式传递事件对象，那么在 methods 中定义的方法里第二个形参将无法接收到事件对象

3.4 属性绑定指令

作用：动态设置html的标签属性比如：src、url、title

语法：v-bind:属性名=“表达式”

v-bind:可以简写成 => :

比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。则可以这样设置属性值：- <img v-bind:src="url" />
- <img :src="url" />   （v-bind可以省略）

3.5 列表渲染指令

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

item 是数组中的每一项

index 是每一项的索引，不需要可以省略

arr 是被遍历的数组

此语法也可以遍历对象和数字

//遍历对象
<div v-for="(value, key, index) in object">{{value}}</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始//遍历数字
<p v-for="item in 10">{{item}}</p>
item从1 开始

3.5.1 key

语法： key="唯一值"

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）

<ul><li v-for="(item, index) in booksList" :key="item.id"><span>{{ item.name }}</span><span>{{ item.author }}</span><button @click="del(item.id)">删除</button></li>
</ul>

注意：

key 的值只能是字符串或数字类型
key 的值必须具有唯一性
推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

3.6 双向绑定指令（v-model）

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速获取或设置表单元素内容

语法：v-model="变量

如：

输入框 input:text ——> value
文本域 textarea ——> value
复选框 input:checkbox ——> checked
单选框 input:radio ——> checked
下拉菜单 select ——> value
...

<body><div id="app"><h3>小黑学习网</h3>姓名：<input type="text" v-model="username"> <br><br>是否单身：<input type="checkbox" v-model="isSingle"> <br><br><!-- 前置理解：1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥2. value: 给单选框加上 value 属性，用于提交给后台的数据结合 Vue 使用 → v-model-->性别: <input v-model="gender" type="radio" name="gender" value="1">男<input v-model="gender" type="radio" name="gender" value="2">女<br><br><!-- 前置理解：1. option 需要设置 value 值，提交给后台2. select 的 value 值，关联了选中的 option 的 value 值结合 Vue 使用 → v-model-->所在城市:<select v-model="cityId"><option value="101">北京</option><option value="102">上海</option><option value="103">成都</option><option value="104">南京</option></select><br><br>自我描述：<textarea v-model="desc"></textarea> <button>立即注册</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',isSingle: false,gender: "2",cityId: '102',desc: ""}})</script>
</body>

4 指令修饰符

指令修饰符就是通过“.”指明一些指令后缀不同的后缀封装了不同的处理操作 —> 简化代码

4.1 按键修饰符

类似：@keyup.enter —>当点击enter键的时候才触发

除了enter，其他的也可以

4.2 v-model修饰符

v-model.trim —>去除首位空格

v-model.number —>转数字

4.3 事件修饰符

@事件名.stop —> 阻止冒泡

@事件名.prevent —>阻止默认行为

@事件名.stop.prevent —>可以连用即阻止事件冒泡也阻止默认行为

注意：不一定严格按照上述分类使用，如果能有相应效果，也可以自由搭配使用

5 属性绑定指令操控样式

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制

5.1 :class

语法：

<div> :class = "对象/数组">这是一个div</div>

5.1.1 对象

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

适用场景：一个类名，来回切换

示例：

<div id="app"><ul><li v-for="(item, index) in list" :key="item.id" @click="activeIndex = index"><a :class="{ active: index === activeIndex }" href="#">{{ item.name }}</a></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {activeIndex: 2, // 记录高亮list: [{ id: 1, name: '京东秒杀' },{ id: 2, name: '每日特价' },{ id: 3, name: '品类秒杀' }]}})</script>
</body>

5.1.2 数组

当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

使用场景:批量添加或删除类

5.2 :style

语法：

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

示例：操作进度条

<body><div id="app"><!-- 外层盒子底色 （黑色） --><div class="progress"><!-- 内层盒子 - 进度（蓝色） --><div class="inner" :style="{ width: percent + '%' }"><span>{{ percent }}%</span></div></div><button @click="percent = 25">设置25%</button><button @click="percent = 50">设置50%</button><button @click="percent = 75">设置75%</button><button @click="percent = 100">设置100%</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {percent: 30}})</script>
</body>

6 computed 计算属性

基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算

语法：

声明在 computed 配置项中，一个计算属性对应一个函数

使用起来和普通属性一样使用 {{ 计算属性名}}

注意：

computed配置项和data配置项是同级的

computed中的计算属性虽然是函数的写法，但他依然是个属性

computed中的计算属性不能和data中的属性同名

使用computed中的计算属性和使用data中的属性是一样的用法

computed中计算属性内部的this依然指向的是Vue实例

示例：

<body><div id="app"><h3>小黑的礼物清单</h3><table><tr><th>名字</th><th>数量</th></tr><tr v-for="(item, index) in list" :key="item.id"><td>{{ item.name }}</td><td>{{ item.num }}个</td></tr></table><!-- 目标：统计求和，求得礼物总数 --><p>礼物总数：{{ totalCount }} 个</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {// 现有的数据list: [{ id: 1, name: '篮球', num: 1 },{ id: 2, name: '玩具', num: 2 },{ id: 3, name: '铅笔', num: 5 },]},computed: {totalCount () {// 基于现有的数据，编写求值逻辑// 计算属性函数内部，可以直接通过 this 访问到 app 实例// console.log(this.list)// 需求：对 this.list 数组里面的 num 进行求和 → reducelet total = this.list.reduce((sum, item) => sum + item.num, 0)return total}}})</script>
</body>

6.1 完整写法

6.2 computed计算属性 VS methods方法

6.2.1 computed计算属性

作用：封装了一段对于数据的处理，求得一个结果

语法：

1.写在computed配置项中

2.作为属性，直接使用

js中使用计算属性： this.计算属性

模板中使用计算属性：{{计算属性}}

6.2.2 methonds方法

作用：给Vue实例提供一个方法，调用以处理业务逻辑

语法：

1.写在methods配置项中

2.作为方法调用

js中调用：this.方法名()

模板中调用 {{方法名()}} 或者 @事件名=“方法名”

6.2.3 计算属性的优势

缓存特性（提升性能）

计算属性会对计算出来的结果缓存，再次使用直接读取缓存，

依赖项变化了，会自动重新计算 → 并再次缓存

methods没有缓存特性

6.2.4 总结

1.computed有缓存特性，methods没有缓存

2.当一个结果依赖其他多个值时，推荐使用计算属性

3.当处理业务逻辑时，推荐使用methods方法，比如事件的处理函

7 watch监视器

监视数据变化，执行一些业务逻辑或异步操作

watch同样声明在跟data同级的配置项中

7.1 简单写法

data: { words: '苹果',obj: {words: '苹果'}
},watch: {// 该方法会在数据变化时，触发执行数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 },'对象.属性名' (newValue, oldValue) {一些业务逻辑 或 异步操作。 }
}

示例：

  <body><div id="app"><!-- 条件选择框 --><div class="query"><span>翻译成的语言：</span><select><option value="italy">意大利</option><option value="english">英语</option><option value="german">德语</option></select></div><!-- 翻译框 --><div class="box"><div class="input-wrap"><textarea v-model="obj.words"></textarea><span><i>⌨️</i>文档翻译</span></div><div class="output-wrap"><div class="transbox">mela</div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 接口地址：https://applet-base-api-t.itheima.net/api/translate// 请求方式：get// 请求参数：// （1）words：需要被翻译的文本（必传）// （2）lang： 需要被翻译成的语言（可选）默认值-意大利// -----------------------------------------------const app = new Vue({el: '#app',data: {// words: ''obj: {words: ''}},// 具体讲解：(1) watch语法 (2) 具体业务实现watch: {// 该方法会在数据变化时调用执行// newValue新值, oldValue老值（一般不用）// words (newValue) {//   console.log('变化了', newValue)// }'obj.words' (newValue) {console.log('变化了', newValue)}}})</script></body>

7.2 完整写法

添加额外配置：

deep:true 对复杂类型进行深度监听

immdiate:true 初始化，立刻执行一次

data: {obj: {words: '苹果',lang: 'italy'},
},watch: {// watch 完整写法对象: {deep: true, // 深度监视immdiate:true,//立即执行handler函数handler (newValue) {console.log(newValue)}}
}

示例：

  <body><div id="app"><!-- 条件选择框 --><div class="query"><span>翻译成的语言：</span><select v-model="obj.lang"><option value="italy">意大利</option><option value="english">英语</option><option value="german">德语</option></select></div><!-- 翻译框 --><div class="box"><div class="input-wrap"><textarea v-model="obj.words"></textarea><span><i>⌨️</i>文档翻译</span></div><div class="output-wrap"><div class="transbox">{{ result }}</div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 需求：输入内容，修改语言，都实时翻译// 接口地址：https://applet-base-api-t.itheima.net/api/translate// 请求方式：get// 请求参数：// （1）words：需要被翻译的文本（必传）// （2）lang： 需要被翻译成的语言（可选）默认值-意大利// -----------------------------------------------const app = new Vue({el: '#app',data: {obj: {words: '小黑',lang: 'italy'},result: '', // 翻译结果},watch: {obj: {deep: true, // 深度监视immediate: true, // 立刻执行，一进入页面handler就立刻执行一次handler (newValue) {clearTimeout(this.timer)this.timer = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: newValue})this.result = res.data.dataconsole.log(res.data.data)}, 300)}}}})</script></body>

【VUE】第一期——初使用、基本语法

目录 0 前言 1 准备工作 1.1 创建vue实例 1.2 vue开发者工具 2 插值表达式 2.1 基本用法 3 常用指令 3.1 内容渲染指令 3.1.1 v-text 3.1.2 v-html 3.2 条件渲染指令 3.2.1 v-show 3.2.2 v-if 3.2.3 v-else 和 v-else-if 3.3 事件绑定指令 3.3.1 内联语句 3.3…...

编程日记 2025/3/7 6:29:54

计算光学成像与光学计算概论

计算光学成像所涉及研究的内容非常广泛，虽然计算光学成像的研究内容是发散的，但目的都是一致的：如何让相机记录到客观实物更丰富的信息，延伸并扩展人眼的视觉感知。总的来说，计算光学成像现阶段已经取得了很多令人振奋…...

编程日记 2025/3/7 6:28:53

开启科创服务新篇章：八月瓜科技CRM数字化管理系统成功上线

近日，北京八月瓜科技有限公司（以下简称 “八月瓜科技”）与纷享销客达成深度战略合作，成功部署并上线CRM数字化管理系统。此次合作是八月瓜科技在数字化转型进程中的重要里程碑，标志着其在科技创新服务领域的数字化变革…...

编程日记 2025/3/7 6:26:50

AI提示词（Prompt）的理解和学习指南

AI提示词（Prompt）的理解和学习指南一、什么是AI提示词？ AI提示词（Prompt）是用户输入给人工智能模型的指令或问题，用于引导模型生成特定类型的回答或内容。它如同与AI沟通的“钥匙”，设计得当…...

编程日记 2025/3/7 6:25:48

记录一些面试遇到的问题

重载和重写的区别重载是overload，覆盖是override 重载属于编译时多态，覆盖属于运行时多态运行时多态和编译时多态运行时多态指的是在运行的时候才知道要调用哪一个函数，编译时多态是指在编译的时候就知道调用哪一个函数。运行时多态…...

编程日记 2025/3/7 6:24:47

OpenHarmony4.0_Linux环境搭建

查看链接：OpenHarmony4.0_Linux环境搭建https://www.yuque.com/xinzaigeek/jishu/fs9msruqhd5nhw4i...

编程日记 2025/3/7 6:23:46

DeepSeek开源Day5：3FSsmallpond技术详解

2 月 24 日，DeepSeek 启动 “开源周”，第四个开源的代码库为 3FS&smallpond（又是一下发布了两个）。 3FS（Fire-Flyer File System）是 DeepSeek 内部开发的一款高性能分布式文件系统，旨在为 A…...

编程日记 2025/3/7 6:22:44

Java集合面试篇

目录 1.概念 1.1.数组与集合的区别，用过哪些？ 1.2.说说Java中的集合？ 1.3.Java中的线程安全的集合是什么？ 1.4.集合遍历的方法有哪些？ 2.List 2.1.list可以一边遍历一边修改元素吗？ 2.2.Arraylist和…...

编程日记 2025/3/7 6:20:43

plt和cv2有不同的图像表示方式和颜色通道顺序

在处理图像时，matplotlib.pyplot (简称 plt) 和 OpenCV (简称 cv2) 有不同的图像表示方式和颜色通道顺序。了解这些区别对于正确处理和显示图像非常重要。 1. 图像形状和颜色通道顺序 matplotlib.pyplot (plt) 形状：plt 通常使用 (height, width, cha…...

编程日记 2025/3/7 6:19:41

Sqlserver安全篇之_手工创建TLS用到的pfx证书文件

Sqlserver官方提供的Windows Powershell脚本 https://learn.microsoft.com/zh-cn/sql/database-engine/configure-windows/configure-sql-server-encryption?viewsql-server-ver16 # Define parameters $certificateParams {Type "SSLServerAuthentication"Subje…...

编程日记 2025/3/7 6:18:38

基于RapidOCR与DeepSeek的智能表格转换技术实践

基于RapidOCR与DeepSeek的智能表格转换技术实践一、技术背景与需求场景在金融分析、数据报表处理等领域，存在大量图片格式的表格数据需要结构化处理。本文介绍基于开源RapidOCR表格识别与DeepSeek大模型的智能转换方案，实现以下典型场景： …...

编程日记 2025/3/7 6:16:36

创建阿里云CDN

创建阿里云CDN CDN域名管理 SSL证书上传...

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

tomcat的web管理

进入到conf cd /usr/local/tomcat/conf/备份tomcat-users.xml cp tomcat-users.xml{.,bak}编辑tomcat-users.xml vim tomcat-users.xml增加以下内容配置tomcat-users.xml <role rolename"manager-gui"/><role rolename"admin-gui"/><use…...

编程日记 2025/3/7 6:14:34

【Linux系统】-----进程初相识：原理与概念全解析

Linux系列文章目录 Linux系列前言一、进程的概念二、进程的管理三、Linux操作系统的进程管理3.1、进程标识符3.2、查看进程3.3、查看进程的PID和PPID 前言经过前两篇文章的铺垫，我们对操作系统的管理方式已经有了比较完整的认识，今天我们将学习Linux比…...

编程日记 2025/3/7 6:13:33

分布式系统设计（架构能力）

一、微服务架构服务治理 Nacos 注册中心（AP模式） CAP选择：Nacos 默认采用 AP 模式（可用性分区容忍性），通过心跳检测实现服务健康管理。服务发现：客户端定时拉取服务列表，支持权重…...

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

171. Excel 表列序号

Excel 表列序号题目描述尝试做法推荐做法题目描述给你一个字符串 columnTitle ，表示 Excel 表格中的列名称。返回该列名称对应的列序号。例如： A -> 1 B -> 2 C -> 3 … Z -> 26 AA -> 27 AB -> 28 … 示例 1: 输入: colum…...

编程日记 2025/3/7 6:11:30

在 Java 中使用 Apache POI 为 Word 文档添加水印

在 Java 中使用 Apache POI 为 Word 文档添加水印在日常办公中，我们经常需要给 Word 文档添加水印，以标明文件的机密性或归属权。本文将介绍如何使用 Apache POI 库在 Java 中给 Word 文档添加水印。技术栈 Apache POI：用于操作 Word 文…...

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

贪心算法二

> 作者：დ旧言~ > 座右铭：松树千年终是朽，槿花一日自为荣。 > 目标：了解什么是贪心算法，并且掌握贪心算法。 > 毒鸡汤：有些事情，总是不明白，所以我不会坚持。早安! >…...

编程日记 2025/3/7 6:08:26

【大模型安全】大模型的技术风险

【大模型安全】大模型的技术风险 1.DDoS攻击2.常见的传统网络攻击方式3.恶意意图的识别4.AI生成虚假信息传播5.利用AI进行黑客攻击6.模型对抗攻击7.后门攻击8.Prompt攻击9.数据投毒攻击10.模型窃取攻击11.数据窃取攻击 1.DDoS攻击 2023年11月9日凌晨，OpenAI在官网公…...

编程日记 2025/3/7 6:07:25

Java 线程池中 shutdown 与 shutdownNow 的区别是什么？

Java 线程池中 shutdown 与 shutdownNow 的区别核心行为差异 | 方法 | 行为描述 | |----------------|----------------------------------------------------------------------------| | shutdown | 平缓关闭线程池：1. 停止接受新任务。2. 已提交的任务&#xff…...

编程日记 2025/3/7 6:04:22

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...

编程新知 2026/2/8 20:42:43

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

黑马Mybatis

Mybatis 表现层：页面展示业务层：逻辑处理持久层：持久数据化保存在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2026/1/22 14:22:27

QMC5883L的驱动

简介本篇文章的代码已经上传到了github上面，开源代码作为一个电子罗盘模块，我们可以通过I2C从中获取偏航角yaw，相对于六轴陀螺仪的yaw，qmc5883l几乎不会零飘并且成本较低。参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2026/1/2 4:05:05

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解（7大核心步骤实战技巧） 一、爬虫完整工作流程以下是爬虫开发的完整流程，我将结合具体技术点和实战经验展开说明： 1. 目标分析与前期准备网站技术分析： 使用浏览器开发者工具（F12&…...

编程新知 2025/10/19 5:48:51

数据链路层的主要功能是什么

数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装封装： 将网络层下发…...

编程新知 2026/2/1 7:31:51

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...

编程新知 2025/11/3 0:44:41

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接在运行jar包时出现了这样的错误查询得知问题核心在于Redis连接失败，具体原因是客户端发送了密码认证请求，但Redis服务器未设置密码 1.为Redis设置密码（匹配客户端配置） 步骤： 1）.修…...

编程新知 2026/2/8 14:19:47

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2026/2/8 21:57:26

Android第十三次面试总结（四大组件基础）

Activity生命周期和四大启动模式详解一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成，用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机： onCreate() 调用时机：Activity 首次创建时调用。…...

编程新知 2025/10/15 15:07:34

目录