网站建设自己,浙江金圣建设有限公司网站,东营破产信息网官网,宁波网站优化方法项目完善#xff1a;
算法推荐
item-CF
算法推荐我主要写的是协同过滤算法#xff0c;然后协同过滤算法分成俩种—— 基于用户的 user-CF 基于物品的 item-CF 因为害怕用户冷启动#xff0c;和数据量的原因 我选择了 item-CF
主要思路是——根据用户的点赞列表…项目完善
算法推荐
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 langen
headmeta charsetUTF-8titleTitle/titlestylebody{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 idappdiv classboxdiv classheaderinput v-modelcontent typetext classinputTask placeholder请输入任务button classaddTask clickaddNewTask添加任务/button/divdiv classfooterulli classtaskLi v-for(item,index) in list :keyitem.idspan classnumLi{{ index 1 }}/spanspan classtaskContent{{ item.name }}/spanbutton classdelTask clickdelTask(item.id)x/button/li/uldiv classtotal v-showlist.length!0span classtotalNum合计nbsp;nbsp;:nbsp;nbsp;{{ list.length }}/spanspan classdelAllTask clickdelAllTask清空任务/span/div/div/div
/divscript srcjs/vue.js/script
scriptconst 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.listthis.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 langen
headmeta charsetUTF-8titleTitle/titlestyle.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 idappdiv classnavulli v-for(item,index) in list clickactiveIndexindex :class{active:activeIndexindex}{{ item }}/li/ul/div
/divscript srcjs/vue.js/script
scriptconst app new Vue({el: #app,data: {activeIndex:0,list:[lzy,helios,ares,king]},methods:{}})
/script
/body
/html
操作style
语法 :style样式对象 案列 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.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 idappdiv classbigBoxdiv classsmallBox :style{width:percent%}/div/divdiv classpercent{{percent}}%/divdiv classbuttonbutton clickchangePercent(0)0%/buttonbutton clickchangePercent(25)25%/buttonbutton clickchangePercent(50)50%/buttonbutton clickchangePercent(75)75%/buttonbutton clickchangePercent(100)100%/button/div/divscript srcjs/vue.js/script
scriptconst app new Vue({el: #app,data: {percent:0},methods:{changePercent(num){this.percentnum;}}})
/script
/body
/html 计算属性 基于现有的数据计算出来的新属性依赖的数据变化自动重新计算 语法声明在computed配置项中一个计算属性对应一个函数 使用起来和普通属性一样使用 也是{{ }} 案列 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyletable,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 idapph3lzy的购物清单 span{{totalSize}}/span/h3tabletheadth名称/thth数量/th/theadtbodytr v-for(item,index) in list :keyindextd{{item.name}}/tdtd{{item.num}}/td/trtrtd总计/tdtd{{totalSize}}/td/tr/tbody/table
/divscript srcjs/vue.js/script
scriptconst 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)sumitem.num,0);}}})
/script
/body
/html 计算属性和method的区别是 计算属性是由缓存的method方法是会一直执行
计算属性默认的简写是只能读取访问不能修改的
如果需要修改需要写计算属性的完整写法
computed:{计算属性名称:{get(){}set(修改的值){代码逻辑}}
}
案列 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle#app{width: 300px;height: 300px;margin: 0 auto;}input{margin-left: 10px;width: 50px;margin-bottom: 20px;border-radius: 5px;}/style
/head
body
div idapp姓:input typetext v-modelfirstName 名:input typetext v-modellastName span{{name}}/spanbrbutton clickchangeName改名卡/button
/divscript srcjs/vue.js/script
scriptconst app new Vue({el: #app,data: {firstName:,lastName:},methods:{changeName(){this.namelzy}},computed:{name:{get(){return this.firstNamethis.lastName;},set(value){this.firstNamevalue.slice(0,1);this.lastNamevalue.slice(1)}}}})
/script
/body
/html 案列 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyleth{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 idapptabletheadth编号/thth科目/thth成绩/thth操作/th/theadtbody v-iflist.length 0tr v-for(item,index) in listtd{{ index1 }}/tdtd{{ item.subject }}/tdtd :class{Fail:item.score60}{{item.score}}/tdtd classdealDelspan clickdelOne(index)删除/span/td/tr/tbodytbody v-elsetrtd colspan4 styletext-align: center;暂无数据/td/tr/tbodytrtd colspan4总分span{{ sum }}/spannbsp;nbsp;nbsp;nbsp;nbsp;平均分span{{ average }}/span/td/tr/tablebrform action科目input typetext v-model.trimsubject placeholder请输入科目br成绩input typetext v-modelscore placeholder请输入成绩brbutton typebutton classensure clickaddNew确认/button/form
/divscript srcjs/vue.js/script
scriptconst app new Vue({el: #app,data: {list:[{subject:语文,score:46},{subject:数学,score:80},{subject:英语,score:60}],subject:,score:},methods:{delOne(i){this.listthis.list.filter((item,index)index!i);},addNew(){this.list.push({subject:this.subject,score:this.score})this.scorethis.subject}},computed:{sum(){return this.list.reduce((sum,item)sumitem.score,0);},average(){if(this.list.length0)return this.sum/this.list.length*100/100;else return 0}}})
/script
/body
/html
