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

vue day2

news 2025/11/20 1:18:31

1、指令修饰符：.指明一些指令后缀，不同后缀封装不同处理操作

按键修饰符：@keyup.enter
请添加图片描述

v-model修饰符：
v-model.trim：去首位空格
v-model.number：转数字

事件修饰符：
阻止事件冒泡：
（1）
在这里插入图片描述
在这里插入图片描述
（2）
@事件名.stop

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

2、v-bind控制样式属性

操作class：
（1）:class=“{类名1：布尔值，类名2：布尔值}” 对象（频繁切换）
（2）:class=“[类名1，类名2]” 数组（一次批量增加属性或删除）
在这里插入图片描述
改成id好像也可以，目前没看出问题，但是id可能比较乱七八糟，有长有短，随机的那种，可能会增加比较时间？
在这里插入图片描述
操作style：
适用于控制单个属性
:style:“{css属性名1:css属性值，。。。}”
属性值要加引号，若属性名中间有-，应改为小驼峰命名
请添加图片描述

3、v-model应用于表单元素
请添加图片描述
看右下角，选择哪个元素，select的value值和这个option的value值相同

请添加图片描述
通过改变select的value值，来改变选择的option
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>textarea {display: block;width: 240px;height: 100px;margin: 10px 0;}</style>
</head>
<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>
</html>

4、计算属性
请添加图片描述
请添加图片描述
5、计算属性完整写法
请添加图片描述

请添加图片描述
此时使用的是计算属性的简写，只能获取计算属性的结果值，不能修改计算属性值，看右边报错了。

点改名卡，触发changeName函数，因为修改了计算属性，故执行set函数
请添加图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input {width: 30px;}</style>
</head><body><div id="app">姓：<input type="text" v-model="firstName"> +名：<input type="text" v-model="lastName"> =<span>{{ fullName }}</span><br><br><button @click="changeName">改名卡</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {firstName: '刘',lastName: '备',},methods: {changeName() {this.fullName = '黄忠'}},computed: {// 简写 → 获取，没有配置设置的逻辑// fullName () {//   return this.firstName + this.lastName// }// 完整写法 → 获取 + 设置fullName: {// (1) 当fullName计算属性，被获取求值时，执行get（有缓存，优先读缓存）//     会将返回值作为，求值的结果get() {return this.firstName + this.lastName},// (2) 当fullName计算属性，被修改赋值时，执行set//     修改的值，传递给set方法的形参set(value) {// console.log(value.slice(0, 1))          // console.log(value.slice(1))         this.firstName = value.slice(0, 1)this.lastName = value.slice(1)}}}})</script>
</body></html>

7、案例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="./styles/index.css" /><title>Document</title>
</head><body><div id="app" class="score-case"><div class="table"><table><thead><tr><th>编号</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody v-if="list.length>0"><tr v-for="(item,index) in list" :key="item.id"><td>{{index+1}}</td><td>{{item.subject}}</td><td :class="{red:item.score<60}">{{item.score}}</td><td><a href="#" @click.prevent="del(item.id)">删除</a></td></tr></tbody><tbody v-else><tr><td colspan="5"><span class="none">暂无数据</span></td></tr></tbody><tfoot><tr><td colspan="5"><span>总分：{{totalScore}}</span><span style="margin-left: 50px">平均分：{{avr}}</span></td></tr></tfoot></table></div><div class="form"><div class="form-item"><div class="label">科目：</div><div class="input"><input v-model.trim="subject" type="text" placeholder="请输入科目" /></div></div><div class="form-item"><div class="label">分数：</div><div class="input"><input v-model.number="score" type="text" placeholder="请输入分数" /></div></div><div class="form-item"><div class="label"></div><div class="input"><button @click="add" class="submit">添加</button></div></div></div></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, subject: '语文', score: 20 },{ id: 7, subject: '数学', score: 99 },{ id: 12, subject: '英语', score: 70 },],subject: '',score: ''},methods: {del(id) {this.list = this.list.filter(item => item.id !== id)},add() {if (!this.subject) {alert('请输入科目')return}if (typeof this.score !== 'number') {alert('请输入正确的成绩')return}// 将数据增加到数组最前端this.list.unshift({id: +new Date(),subject: this.subject,score: this.score})this.subject = ''this.score = ''}},// 计算属性computed: {// 用数组累加方法 reducetotalScore() {const num = this.list.reduce((prev, cur) => prev + cur.score, 0)return num},avr() {// 全部删除后，会出现0/0，加个判断if (this.list.length === 0) {return 0}return (this.totalScore / this.list.length).toFixed(2)}}})</script>
</body></html>

8、watch侦听器

简单写法：请添加图片描述
数据一旦发生变化，就会触发watch中相应方法，数据可能和某个表单元素绑定，用户改变表单元素值，双向绑定使得数据值做相应变化。

    <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: ''},result: '', // 翻译结果// timer: null // 延时器id},// 具体讲解：(1) watch语法 (2) 具体业务实现watch: {// 该方法会在数据变化时调用执行// newValue新值, oldValue老值（一般不用）// words (newValue) {//   console.log('变化了', newValue)// }'obj.words' (newValue) {// console.log('变化了', newValue)// 防抖: 延迟执行 → 干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行clearTimeout(this.timer)this.timer = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: {words: newValue}})this.result = res.data.dataconsole.log(res.data.data)}, 300)}}})</script>

watch完整写法： 可添加配置项，可一次性监视复杂数据类型中所有属性，不用一个个监视复杂类型中所有属性
请添加图片描述

  <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)}}// 'obj.words' (newValue) {//   clearTimeout(this.timer)//   this.timer = setTimeout(async () => {//     const res = await axios({//       url: 'https://applet-base-api-t.itheima.net/api/translate',//       params: {//         words: newValue//       }//     })//     this.result = res.data.data//     console.log(res.data.data)//   }, 300)// }}})</script></body>

9、购物车案例（持久化到本地没写）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="./css/inputnumber.css" /><link rel="stylesheet" href="./css/index.css" /><title>购物车</title>
</head><body><div class="app-container" id="app"><!-- 顶部banner --><div class="banner-box"><img src="./img/fruit.jpg" alt="" /></div><!-- 面包屑 --><div class="breadcrumb"><span>🏠</span>/<span>购物车</span></div><!-- 购物车主体 --><div v-if="fruitList.length > 0" class="main"><div class="table"><!-- 头部 --><div class="thead"><div class="tr"><div class="th">选中</div><div class="th th-pic">图片</div><div class="th">单价</div><div class="th num-th">个数</div><div class="th">小计</div><div class="th">操作</div></div></div><!-- 身体 --><div class="tbody"><div v-for="(item,index) in fruitList" :key="item.id" class="tr" :class="{active:item.isChecked}"><div class="td"><input type="checkbox" v-model="item.isChecked" /></div><div class="td"><img :src="item.icon" alt="" /></div><div class="td">{{item.price}}</div><div class="td"><div class="my-input-number"><button class="decrease" @click="sub(item.id)" :disabled="item.num<=1"> - </button><span class="my-input__inner">{{item.num}}</span><button class="increase" @click="add(item.id)"> + </button></div></div><div class="td">{{ item.num * item.price }}</div><div @click="del(item.id)" class="td"><button>删除</button></div></div></div></div><!-- 底部 --><div class="bottom"><!-- 全选 --><label class="check-all"><input type="checkbox" v-model="total" />全选</label><div class="right-box"><!-- 所有商品总价 --><span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice }}</span></span><!-- 结算按钮 --><button class="pay">结算( {{ totalCount }} )</button></div></div></div><!-- 空车 --><div v-else class="empty">🛒空空如也</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {// 水果列表fruitList: [{id: 1,icon: './img/火龙果.png',isChecked: true,// v-model对于checkedbox，绑定的是它的checked属性num: 2,price: 6,},{id: 2,icon: './img/荔枝.png',isChecked: false,num: 7,price: 20,},{id: 3,icon: './img/榴莲.png',isChecked: false,num: 3,price: 40,},{id: 4,icon: './img/鸭梨.png',isChecked: true,num: 10,price: 3,},{id: 5,icon: './img/樱桃.png',isChecked: false,num: 20,price: 34,},],},methods: {del(id) {this.fruitList = this.fruitList.filter(item => item.id !== id)},sub(id) {this.fruitList.find(item => item.id === id).num--},add(id) {this.fruitList.find(item => item.id === id).num++}},computed: {total: {get() {return this.fruitList.every(item => item.isChecked)},set(value) {// value是全选框被勾选或取消勾选时（即数据变化），传过来的布尔值this.fruitList.forEach(item => item.isChecked = value)}},totalCount() {return this.fruitList.reduce((sum, item) => {if (item.isChecked) {// 选中 → 需要累加return sum + item.num} else {// 没选中 → 不需要累加return sum}}, 0)},// 总计选中的总价 num * pricetotalPrice() {return this.fruitList.reduce((sum, item) => {if (item.isChecked) {return sum + item.num * item.price} else {return sum}}, 0)}}})</script>
</body></html>

相关文章：

vue day2

1、指令修饰符&#xff1a;.指明一些指令后缀&#xff0c;不同后缀封装不同处理操作 按键修饰符&#xff1a;keyup.enter v-model修饰符&#xff1a; v-model.trim&#xff1a;去首位空格 v-model.number&#xff1a;转数字 事件修饰符&#xff1a; 阻止事件冒泡&#xff1…...

编程日记 2023/11/28 10:50:44

四川劳动保障杂志社四川劳动保障编辑部四川劳动保障杂志2023年第10期目录

主题报道 四川抢抓“金九银十”招聘季多措并举稳就业促就业 举措频“上新” 金秋送岗忙 张玉芳; 2-5 法眼《四川劳动保障》投稿&#xff1a;cnqikantg126.com 筑牢长期护理保险基金安全防线 李科仲;赖晓薇; 6-7 调研 提升职业技能培训工作的举措 寇爵; 8-9 城乡…...

编程日记 2023/11/28 10:49:43

python数据类型

int 整型 i 1str 字符串 name1Emliy name2"你好" content""" Emily&#xff1a;你好&#xff01; """ test你最"帅" test2"你最帅"float 浮点类型 height182.5 weight45.3bool 布尔类型 f1True f2Falselist …...

编程日记 2023/11/28 10:48:42

大数据-之LibrA数据库系统告警处理（ALM-37004 Datanode主备不同步或者断连）

告警解释 当DN主实例与DN备实例连接异常时&#xff0c;产生该告警。 告警属性 告警ID 告警级别 可自动清除 37004 严重 是 告警参数 参数名称 参数含义 ServiceName 产生告警的服务名称 RoleName 产生告警的角色名称 HostName 产生告警的主机名 Instance 产生…...

编程日记 2023/11/28 10:47:41

带你用uniapp从零开发一个仿小米商场_2.创建空白项目及公共样式引入

创建空白项目 打开uniapp 点击新建->项目 如下, 是编辑你项目的名字的地方是你项目存放地址,可以点击浏览器去文件管理里面选地址是模板选择,这里选择默认模板就好是一些其他选择比如uvue能让你项目在编译成软件时运行更快,unicloud能让你用js写后端,且直接就是云开发,g…...

编程日记 2023/11/28 10:46:40

1144. 连接格点，Kruskal算法，二维矩阵压缩为一维

有一个 m 行 n 列的点阵&#xff0c;相邻两点可以相连。 一条纵向的连线花费一个单位&#xff0c;一条横向的连线花费两个单位。 某些点之间已经有连线了&#xff0c;试问至少还需要花费多少个单位才能使所有的点全部连通。 输入格式 第一行输入两个正整数 m 和 n。 以下若…...

编程日记 2023/11/28 10:45:38

C++ ： 友元（未完结）

不能从外部访问类的私有数据成员和方法&#xff0c;但这条规则不适用于友元类和友元函数。要声明友元 类或友元函数&#xff0c;可使用关键字 friend&#xff0c;通过让函数成为类的友元&#xff0c;可以赋予该函数与类的成员函数 同的访问权限。 生活中你的家有客厅 (Public)…...

编程日记 2023/11/28 10:43:37

Nginx 服务器 SSL 证书安装部署

操作场景 本文档以证书名称 menglinfeng.top 为例。 Nginx 版本以 nginx/1.18.0 为例。 当前服务器的操作系统为 CentOS 7&#xff0c;由于操作系统的版本不同&#xff0c;详细操作步骤略有区别。 安装 SSL 证书前&#xff0c;请您在 Nginx 服务器上开启 “443” 端口&#xf…...

编程日记 2023/11/28 10:42:36

GC9118S低压 5V 全桥驱动芯片，内置过温保护，低电流睡眠模式，可替代TMI8118

GC9118S 是一款低压 5V 全桥驱动芯 片&#xff0c;为摄像机、消费类产品、玩具和其他低 压或者电池供电的运动控制类应用提供了集 成的电机驱动解决方案。 GC9118S 能提供高达 1.1A 的持续输出 电流。可以工作在 2~6V 的电源电压上。 GC9118S 具有 PWM &#xff08; IN/…...

编程日记 2023/11/28 10:40:34

windows dockerdesktop 安装sqlserver2022

1.下载windows dockertop软件 下载连接 2.安装完成配置&#xff0c;下载源地址 {"builder": {"gc": {"defaultKeepStorage": "20GB","enabled": true}},"experimental": false,"registry-mirrors": …...

编程日记 2023/11/28 10:39:32

在ubuntu系统安装SVN服务端,并通过客户端进行远程访问

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…...

编程日记 2023/11/28 10:38:32

STL函数对象-C++

1. 函数对象 1.1 函数对象概念 概念&#xff1a; 重载函数调用操作符的类&#xff0c;其对象常称为函数对象函数对象使用重载的 () 时&#xff0c;行为类似函数调用&#xff0c;也叫仿函数 本质&#xff1a; 函数对象&#xff08;仿函数&#xff09;是一个类&#xff0c;不…...

编程日记 2023/11/28 10:37:31

Ubuntu 设置Nginx开机自启

1.建立自启动服务文件 vim /usr/lib/systemd/system/nginx.service Descriptionnginx - high performance web server Afternetwork.target remote-fs.target nss-lookup.target [Service] Typeforking ExecStart/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx…...

编程日记 2023/11/28 10:36:30

npm中的npx命令

1.概念 npx是一个执行npm软件包的二进制文件&#xff0c;通俗的讲&#xff0c;他可以执行npm的一些指令。 2.示例 用babel将ES6语法转为ES5语法 npx babel src/js -d dist/js会执行babel的相关功能&#xff0c;如果没有安装&#xff0c;也会自动安装。 当在执行npx <co…...

编程日记 2023/11/28 10:35:28

python绘制Z形图 青少年电子学会等级考试 中小学生python编程等级考试一级真题答案解析2023年5月

目录 python绘制Z形图 一、题目要求 二、算法分析 三、程序代码...

编程日记 2023/11/28 10:34:27

conda环境下module ‘PIL.Image‘ has no attribute ‘ANTIALIAS‘

1 问题描述 在训练语音模型时&#xff0c;出现如下错误&#xff1a; Traceback (most recent call last):File "/opt/Bert-VITS2-2.0.2.1/train_ms.py", line 660, in <module>run()File "/opt/Bert-VITS2-2.0.2.1/train_ms.py", line 282, in run…...

编程日记 2023/11/28 10:33:26

蓝桥杯每日一题2023.11.26

题目描述 奖券数目 - 蓝桥云课 (lanqiao.cn) 将每一个数字进行一一枚举&#xff0c;如果检查时不带有数字4则答案可以加1 #include<bits/stdc.h> using namespace std; int ans; bool check(int n) {while(n){if(n % 10 4)return false;n / 10; }return true; } int m…...

编程日记 2023/11/28 10:31:23

Centos 7.9 Install Docker Insecure Registry

文章目录 1. 镜像存储规划2. 安装定制 docker3. 部署 registry4. 验证镜像仓库 1. 镜像存储规划 linux LVM /dev/sdb mount dir /data【linux LVM 磁盘挂载目录】 创建两个目录 一个 docker 数据存储目录 &#xff1a;/data/docker&#xff0c;默认一般为linux为 /var/lib/d…...

编程日记 2023/11/28 10:30:22

探秘网络通信：UDP与TCP/IP的奥秘

**> &#x1f38f;&#xff1a;你只管努力&#xff0c;剩下的交给时间 &#x1f3e0; &#xff1a;小破站 探秘网络通信&#xff1a;UDP与TCP/IP的奥秘 前言第一&#xff1a;UDP基础概念UDP的基础概念&#xff1a;UDP的特点和优势UDP与TCP/IP的关系 工作原理1. 无连接性和面…...

编程日记 2023/11/28 10:29:21

Docker的学习笔记

1.1 docker的介绍 1.2 docker的一次安装 //如果是root用户&#xff0c;不加sudo也行curl -fsSL https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian/gpg | sudo apt-key add -echo deb https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian/ buster stable…...

编程日记 2023/11/28 10:28:20

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/11/16 22:48:50

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/9/24 16:02:40

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/11/17 0:02:42

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/10/30 4:02:31

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2025/11/17 3:24:52

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

编程新知 2025/11/17 21:58:35

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

编程新知 2025/11/16 22:42:49

springboot 日志类切面，接口成功记录日志，失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

编程新知 2025/11/18 9:57:23

鸿蒙（HarmonyOS5）实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...

编程新知 2025/8/17 6:30:11