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

2023/8/17总结

news 2025/8/29 7:30:51

项目完善：

算法推荐

item-CF

算法推荐我主要写的是协同过滤算法，然后协同过滤算法分成俩种——

基于用户的 user-CF
基于物品的 item-CF

因为害怕用户冷启动，和数据量的原因我选择了 item-CF

主要思路是——根据用户的点赞列表，来找到点赞的相应的文章，通过这些文章去找到相似度高的物品，然后进行推荐，如果数据不够，我会把浏览量最多的数据给顶上去。

下面是一个demo

数据库对应的数据：（点赞列表的数据）

因此可以看到会推荐三条数据。

Vue

vue是是一个用于构建用户界面的渐进式框架

{{ }}是插值表达式
使用的数据必须要存在
支持的是表达式，不能写JavaScript的关键字如 if for
不能在标签的属性里面使用

Vue指令

vue会根据不同的指令针对标签实现不同的功能

都是带有v-前缀的特殊标签属性

v-html 相当一innerHTML

v-show 控制元素显示隐藏 v-show后接的是表达式，为true是显示，例如：v-show=“true” 代表显示，false代表隐藏本质上是通过css的dispaly来控制显示隐藏

v-if 控制元素显示隐藏（条件渲染） v-if也是接表达式，根据表达式的值来进行控制显示隐藏这个是通过创建和删除元素来控制元素

v-else 后面不接表达式

v-else if 接表达式

v-on 这个是处理监听事件

v-on:事件名:="内联语句"

v-on:事件名称=“methods中的函数名称”

也可以直接写@事件名称=“”

v-bind:动态的设置html的标签属性，比如说src ur title 语法：v-bind:属性名称=“表达式”

可以直接写成 :属性=“表达式”

v-for:基于数据循坏，多次渲染整个元素语法：v-for="{item,index} in 数组"

v-for里面的key的作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用（如果没有设置key，那么删除元素，是把最后一个删除，并且把数据往前面移动）

key的值只能是字符串或者数字类型

key的值必须是具有唯一性

v-model: 给表单元素使用双向数据绑定可以快速获取或者设置表单元素内容语法：v-model="变量"

案列：

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{background: #eee;}.box{margin:50px auto;background: #fff;width: 500px;}.header{display: flex;margin:0 auto;box-sizing: border-box;}.header .inputTask{width: 70%;padding-left: 20px;margin-top:10px;margin-bottom: 10px;margin-left: 50px;height: 40px;box-sizing: border-box;border-bottom-left-radius: 20px;border-top-left-radius: 20px;border: 2px solid #609dbf;font-size: 16px;outline: none;}.header .addTask{width: 30%;margin-right: 50px;margin-top:10px;height: 40px;box-sizing: border-box;border: none;outline: none;color:#fff;font-size: 16px;background: #609dbf;border-bottom-right-radius: 20px;border-top-right-radius: 20px;}li{list-style: none;}.taskLi{margin-left: 20px;padding-bottom: 10px;}.taskLi{margin-top:20px;display: flex;margin-right:50px;border-bottom:2px solid #eee;}.taskLi .numLi{}.taskContent{flex:1;margin-left: 20px;}.delTask{display: none;}.taskLi:hover .delTask{display: block;}.total{display: flex;height: 50px;line-height: 40px;font-size: 14px;color:#666;}.totalNum{flex:1;margin-left: 55px;}.delAllTask{margin-right:50px;}</style>
</head>
<body>
<div id="app"><div class="box"><div class="header"><input v-model="content" type="text" class="inputTask" placeholder="请输入任务"><button class="addTask" @click="addNewTask">添加任务</button></div><div class="footer"><ul><li class="taskLi" v-for="(item,index) in list" :key="item.id"><span class="numLi">{{ index + 1 }}</span><span class="taskContent">{{ item.name }}</span><button class="delTask" @click="delTask(item.id)">x</button></li></ul><div class="total" v-show="list.length!=0"><span class="totalNum">合计&nbsp;&nbsp;:&nbsp;&nbsp;{{ list.length }}</span><span class="delAllTask" @click="delAllTask">清空任务</span></div></div></div>
</div><script src="js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {content:"",list:[{ id:1,name:"开心" },{ id:2,name:"吃饭" },{ id:3,name:"看电影" },{ id:4,name:"睡觉" }]},methods:{addNewTask(){if(this.content.trim()===''){this.content='';return 0;}this.list.unshift({id:+new Date(),name:this.content})this.content=""},delTask(id){this.list=this.list.filter(item => item.id!==id)},delAllTask(){this.list=[]}}})
</script>
</body>
</html>

指令修饰符

通过 “ . ” 指明一些指令后缀，不同后缀封装了不同的处理操作

按键修饰符

@keyup.enter 就是键盘回车监听事件

v-model修饰符

@v-model.trim 去除首尾空格

事件修饰符号

@事件名.stop 阻止冒泡

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

v-bind 对于1样式控制的增强

操作class 语法 :class="对象/数组"

对象：键就是类名值是布尔值如果值为true 有这个类，否则没有

数组：数组中所有的类，都会添加到盒子上，本质是一个class列表

案列：

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.nav{margin:20px auto;width: 600px;background: #eee;}.nav ul{display: flex;padding:0px;}li{list-style: none;padding:20px 20px;font-weight: bold;}.active{background: #609dbf;color:#fff;}</style>
</head>
<body>
<div id="app"><div class="nav"><ul><li v-for="(item,index) in list" @click="activeIndex=index" :class="{active:activeIndex==index}">{{ item }}</li></ul></div>
</div><script src="js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {activeIndex:0,list:['lzy','helios','ares','king']},methods:{}})
</script>
</body>
</html>

操作style

语法 :style="样式对象"

案列：

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.bigBox{box-sizing: border-box;margin:40px auto;width: 400px;height: 40px;padding: 5px;background: black;border-radius: 20px;}.bigBox .smallBox{background: aqua;height: 30px;width: 390px;border-radius: 20px;transition: all 1s;}.percent{margin:0 auto;width: 60px;}.button{width: 250px;margin: 0 auto;}</style>
</head>
<body>
<div id="app"><div class="bigBox"><div class="smallBox" :style="{width:percent+'%'}"></div></div><div class="percent">{{percent}}%</div><div class="button"><button @click="changePercent(0)">0%</button><button @click="changePercent(25)">25%</button><button @click="changePercent(50)">50%</button><button @click="changePercent(75)">75%</button><button @click="changePercent(100)">100%</button></div></div><script src="js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {percent:0},methods:{changePercent(num){this.percent=num;}}})
</script>
</body>
</html>

计算属性

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

语法：声明在computed配置项中，一个计算属性对应一个函数使用起来和普通属性一样使用也是{{ }}

案列：

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>table,th,td{border:1px solid black;}table{margin:20px auto;}th,td{padding: 5px 20px;}h3{width: 180px;margin: 0 auto;}h3 span{position: absolute;transform: translateX(-30px);transform: translateY(-10px);background: red;border-radius: 50%;width: 20px;height: 20px;line-height: 20px;text-align: center;color: #fff;}</style>
</head>
<body>
<div id="app"><h3>lzy的购物清单 🛒<span>{{totalSize}}</span></h3><table><thead><th>名称</th><th>数量</th></thead><tbody><tr v-for="(item,index) in list" :key="index"><td>{{item.name}}</td><td>{{item.num}}</td></tr><tr><td>总计</td><td>{{totalSize}}</td></tr></tbody></table>
</div><script src="js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {percent:0,list:[{name:"太阳",num:1},{name:"月亮",num:1},{name:"星星",num:7}]},methods:{},computed:{totalSize(){return this.list.reduce((sum,item)=>sum+item.num,0);}}})
</script>
</body>
</html>

计算属性和method的区别是计算属性是由缓存的，method方法是会一直执行

计算属性默认的简写，是只能读取访问，不能修改的

如果需要修改，需要写计算属性的完整写法

computed:{计算属性名称:{get(){}set(修改的值){代码逻辑}}
}

案列

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#app{width: 300px;height: 300px;margin: 0 auto;}input{margin-left: 10px;width: 50px;margin-bottom: 20px;border-radius: 5px;}</style>
</head>
<body>
<div id="app">姓:<input type="text" v-model="firstName"> + 名:<input type="text" v-model="lastName"> = <span>{{name}}</span><br><button @click="changeName">改名卡</button>
</div><script src="js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {firstName:'',lastName:''},methods:{changeName(){this.name='lzy'}},computed:{name:{get(){return this.firstName+this.lastName;},set(value){this.firstName=value.slice(0,1);this.lastName=value.slice(1)}}}})
</script>
</body>
</html>

案列：

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>th{background: skyblue;height: 40px;}td{background: #eee;height: 40px;}th,td{padding: 0 20px;}table{margin: 0 auto;}.Fail{color:red;}.dealDel span{text-decoration-line: underline;font-style:italic;color:deepskyblue;}form{width: 300px;margin: 0 auto;}form input{margin-bottom: 10px;height: 30px;padding-left: 10px;}button{padding: 5px 20px;background: blue;outline: none;border: 0;color: #fff;}</style>
</head>
<body>
<div id="app"><table><thead><th>编号</th><th>科目</th><th>成绩</th><th>操作</th></thead><tbody v-if="list.length > 0"><tr v-for="(item,index) in list"><td>{{ index+1 }}</td><td>{{ item.subject }}</td><td :class="{Fail:item.score<60}">{{item.score}}</td><td class="dealDel"><span @click="delOne(index)">删除</span></td></tr></tbody><tbody v-else><tr><td colspan="4" style="text-align: center;">暂无数据</td></tr></tbody><tr><td colspan="4">总分：<span>{{ sum }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;平均分：<span>{{ average }}</span></td></tr></table><br><form action="">科目：<input type="text" v-model.trim="subject" placeholder="请输入科目"><br>成绩：<input type="text" v-model="score" placeholder="请输入成绩"><br><button type="button" class="ensure" @click="addNew">确认</button></form>
</div><script src="js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {list:[{subject:'语文',score:46},{subject:'数学',score:80},{subject:'英语',score:60}],subject:'',score:''},methods:{delOne(i){this.list=this.list.filter((item,index)=>index!=i);},addNew(){this.list.push({subject:this.subject,score:+this.score})this.score=''this.subject=''}},computed:{sum(){return this.list.reduce((sum,item)=>sum+=item.score,0);},average(){if(this.list.length>0)return this.sum/this.list.length*100/100;else return 0}}})
</script>
</body>
</html>

2023/8/17总结

项目完善： 算法推荐 item-CF 算法推荐我主要写的是协同过滤算法，然后协同过滤算法分成俩种—— 基于用户的 user-CF 基于物品的 item-CF 因为害怕用户冷启动，和数据量的原因我选择了 item-CF 主要思路是——根据用户的点赞列表&…...

编程日记 2023/8/27 16:31:59

REDIS 7 教程数据类型-进阶篇

⑥ *位图 bitmap 1. 理论由0和1 状态表现的二进制位的bit 数组。说明：用String 类型作为底层数据结构实现的一种统计二值状态的数据类型位图本质是数组，它是基于String 数据类型的按位操作。该数组由多个二进制位组成，每个二进制位都对应一个偏…...

编程日记 2023/8/27 16:30:58

图文并茂：Python Tkinter从入门到高级实战全解析

目录介绍什么是Tkinter？准备工作第一个Tkinter程序界面布局事件处理补充知识点文本输入框复选框和单选框列表框弹出对话框综合案例：待办事项列表总结介绍欢迎来到本篇文章，我们将带您深入了解如何在Python中使用Tkinter库来创建图形用…...

编程日记 2023/8/27 16:29:57

npm和yarn的区别？

文章目录前言npm和yarn的作用和特点npm和yarn的安装的机制npm安装机制yarn安装机制检测包解析包获取包链接包构建包总结后言前言这一期给大家讲解npm和yarn的一些区别 npm和yarn的作用和特点包管理：npm 和 yarn 可以用于安装、更新和删除 JavaScript 包。它们提…...

编程日记 2023/8/27 16:28:56

微服务项目容器编排docker-compose.yml、Dockerfile文件模板、相关配置文件、shell脚本

nacos Dockerfile（不需要特殊处理，使用docker conpose可以不写） # 基础镜像 FROM nacos/nacos-server # author MAINTAINER jianglifeng<jlifengfoxmail.com> RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \ &&a…...

编程日记 2023/8/27 16:27:55

算法通过村第三关-数组黄金笔记|数组难解

文章目录前言数组中出现超过一半的数字数组中只出现一次的数字颜色的分类问题(荷兰国旗问题)基于冒泡排序的双指针（快慢指针）基于快排的双指针（对撞指针） 总结前言提示：苦不来自外在环境中的人、事、物，…...

编程日记 2023/8/27 16:26:54

【2023】LeetCode HOT 100——矩阵

目录 1. 矩阵置零1.1 C++实现1.2 Python实现1.3 时空分析2. 螺旋矩阵2.1 C++实现2.2 Python实现2.3 时空分析3. 旋转图像3.1 C++实现3.2 Python实现3.3 时空分析4. 搜索二维矩阵 II4.1 C++实现4.2 Python实现4.3 时空分析1. 矩阵置零 🔗 原题链接：...

编程日记 2023/8/27 16:25:52

springboot源码方法

利用LinkedHashSet移除List重复的数据protected final <T> List<T> removeDuplicates(List<T> list) {return new ArrayList<>(new LinkedHashSet<>(list));} SpringFactoriesLoader#loadFactoryNames 加载配置文件...

编程日记 2023/8/27 16:24:51

基于java街球社区网站设计与实现

摘　　要本文主要讲述了基于SpringBootVue模式的街球社区网站的设计与实现。这里所谓的街球社区网站是通过类似于百度贴吧之类的网上论坛使得所有的街球爱好者有一个可以互相交流的平台,并使所有用户可以在社区进行教学视频的观看以及相关体育运动产品的选购,平台的盈利主要靠…...

编程日记 2023/8/27 16:23:49

定时产生不同频率方波

/*----------------------------------------------- 内容：通过定时产生不同频率方波 ------------------------------------------------*/ #include<reg52.h> //包含头文件，一般情况不需要改动，头文件包含特殊功能寄存器的定义 /*-…...

编程日记 2023/8/27 16:22:47

Java“牵手”天猫商品sku信息API接口数据，天猫API接口申请指南

天猫平台商品sku属性信息接口是开放平台提供的一种API接口，通过调用API接口，开发者可以获取天猫商品的标题、价格、库存、月销量、总销量、库存、详情描述、图片等详细信息。获取商品销量接口API是一种用于获取电商平台上商品sku属性数据的接口&#…...

编程日记 2023/8/27 16:21:45

【⑮MySQL | 视图】概述 | 创建 | 查看 | 更新 | 修改 | 删除

前言 ✨欢迎来到小K的MySQL专栏，本节将为大家带来MySQL视图概述 | 创建 | 查看 | 更新 | 修改 | 删除的分享✨ 目录前言1.视图概述2.创建视图3.查看视图4.更新视图数据5.修改视图6.删除视图总结 1.视图概述 1.1 为什么使用视图？ 视图一方面可以帮我们使…...

编程日记 2023/8/27 16:20:44

Linux驱动开发一、RK3568把hello编译到Linux内核中运行。‘rk_vendor_read’未定义的引用

1、在字符设备目录下建立hello目录 ~/Linux/rk356x_linux/kernel/drivers/char/hello 2、进入hello目录，新建hello.c、Makefile、Kconfig三个文件 3、Kconfig是打开make menuconfig配置界面是后的选项，这Kconfig是在字符设备下的。 config HELLOtrist…...

编程日记 2023/8/27 16:19:42

enable_shared_from_this

用途： enable_shared_from_this 是一个基类模板，用于解决在类成员函数中获取类对象的 shared_ptr 的需求。它提供了一种机制，使类能够安全地从成员函数内部获得指向自身的 shared_ptr。解决对象生命周期管理问题：在某些情况下&…...

编程日记 2023/8/27 16:18:42

weak_ptr是怎么探知对象生死的

weak_ptr是C智能指针中的一种。它用于解决共享所有权的问题，并且可以避免因循环引用而导致的内存泄漏。 weak_ptr本身并不承担对象的所有权，它指向由shared_ptr管理的对象。与shared_ptr不同，weak_ptr并不会增加计数器来计算对象的引用次数。…...

编程日记 2023/8/27 16:17:41

⌈算法进阶⌋图论::拓扑排序(Topological Sorting)——快速理解到熟练运用

目录一、原理 1. 引例：207.课程表 2. 应用场景 3. 代码思路二、代码模板三、练习 1、210.课程表Ⅱ🟢 2、2392.给定条件下构造举证🟡 3、310.最小高度树 🟡 一、原理 1. 引例：207.课程表就如大学课程安排一样&…...

编程日记 2023/8/27 16:16:39

【Python】【数据结构和算法】保留最后N个元素

使用deque，指定maxlen参数的值为N，例如： >>> from collections import deque >>> dq deque(maxlen3) >>> dq.append(1) >>> dq.append(2) >>> dq.append(3) >>> dq.append(4) >&…...

编程日记 2023/8/27 16:15:37

wireshark 基本使用

在Wireshark中，你可以使用过滤器来根据接口名称定位到特定的包。下面是一些常见的过滤器示例： 根据源或目的IP地址过滤： ip.src 192.168.0.1：过滤源IP地址为192.168.0.1的包。ip.dst 192.168.0.1：过滤目的IP地址为…...

编程日记 2023/8/27 16:14:36

2、结构型设计模式

结构型设计模式目录结构型设计模式1. 代理模式1.1 概述1.2 结构1.3 静态代理1）抽象主题类 SellTickets2）真实主题类 TrainStation3）代理类 ProxyPoint4）客户端类1.4 JDK 动态代理1）代理工厂类：ProxyFactory2）客户端类3）JDK 动态代理原理4）动态代理的执行流程是什么样…...

编程日记 2023/8/27 16:13:34

JavaScript下载excel文件

文章目录通过链接下载a标签下载方法注意获取文件流请求体配置下载文件流总结通过链接下载 a标签对于已知地址的目标文件，前端可以使用 a标签来直接下载，使用a标签下载使用到两个属性 download：下载文件名href：目标文件下…...

编程日记 2023/8/27 16:12:32

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎跨模态语义对齐通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...

编程新知 2025/7/23 3:55:49

GitHub 趋势日报 (2025年06月08日)

📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/7/29 21:54:16

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2025/8/25 20:08:49

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2025/8/8 5:45:10

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/8/24 6:42:24

蓝桥杯3498 01串的熵

问题描述对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798， 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2025/8/22 3:24:23

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式：dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一，腐蚀跟膨胀属于反向操作，膨胀是把图像图像变大，而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。腐蚀…...

编程新知 2025/8/29 0:35:39

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库，专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性，并提供了一个通用的框架&…...

编程新知 2025/8/27 0:04:53

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/7/8 4:24:01

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端（即页面 JS / Web UI）与客户端（C 后端）的交互机制，是 Chromium 架构中非常核心的一环。下面我将按常见场景，从通道、流程、技术栈几个角度做一套完整的分析，特别适合你这种在分析和改…...

编程新知 2025/8/25 4:37:48