基于SpringBoot+Vue协同过滤视频推荐系统

1.技术介绍

java+springboot+mysql+mybatis+Vue

开发工具：eclipse或idea

2.主要功能说明：

1）用户

2）管理员

个人中心、用户管理、视频标签管理、视频信息管理、轮播图管理

3）协同过滤算法

根据用户的收藏喜好行为计算相似度，给有相近的用户行为推荐视频

比如：

用户1收藏了视频1、2、3

用户2收藏了视频1、3、6

用户3 收藏了视频1

那个根据协同过滤算法推荐，用户3可能也喜欢视频3

3.部分代码展示

```java

<div>

<h1 class="h1">基于协同过滤算法的短视频推荐系统注册</h1>

<el-form ref="rgsForm" class="rgs-form" :model="rgsForm">

<!-- <div v-if="tableName=='yonghu'" class="input-group">

</div>

</div> -->

<el-form-item label="账号" class="input" v-if="tableName=='yonghu'">

<el-input v-model="ruleForm.zhanghao" autocomplete="off" placeholder="账号" />

</el-form-item>

<!-- <div v-if="tableName=='yonghu'" class="input-group">

</div>

</div> -->

<el-form-item label="密码" class="input" v-if="tableName=='yonghu'">

<el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="password"#elsetype="text" />

</el-form-item>

<el-form-item label="确认密码" class="input" v-if="tableName=='yonghu'">

<el-input v-model="ruleForm.mima2" autocomplete="off" placeholder="确认密码" type="password"/>

</el-form-item>

<!-- <div v-if="tableName=='yonghu'" class="input-group">

</div>

</div> -->

<el-form-item label="姓名" class="input" v-if="tableName=='yonghu'">

<el-input v-model="ruleForm.xingming" autocomplete="off" placeholder="姓名" />

</el-form-item>

<!-- <div v-if="tableName=='yonghu'" class="input-group">

</div>

</div> -->

<el-form-item label="年龄" class="input" v-if="tableName=='yonghu'">

<el-input v-model="ruleForm.nianling" autocomplete="off" placeholder="年龄" />

</el-form-item>

<!-- <div v-if="tableName=='yonghu'" class="input-group">

</div>

</div> -->

<el-form-item label="手机" class="input" v-if="tableName=='yonghu'">

<el-input v-model="ruleForm.shouji" autocomplete="off" placeholder="手机" />

</el-form-item>

<el-button class="btn" type="primary" @click="login()">注册</el-button>

<el-button class="btn close" type="primary" @click="close()">取消</el-button>

</div>

</el-form>

</div>

<!-- <div class="nk-navigation">

</a>

</div> -->

</div>

</template>

export default {

data() {

return {

ruleForm: {

tableName:"",

rules: {},

};

mounted(){

let table = this.$storage.get("loginTable");

this.tableName = table;

created() {

methods: {

// 获取uuid

getUUID () {

return new Date().getTime();

close(){

this.$router.push({ path: "/login" });

// 注册

var url=this.tableName+"/register";

if((!this.ruleForm.zhanghao) && `yonghu` == this.tableName){

this.$message.error(`账号不能为空`);

return

}

if((!this.ruleForm.mima) && `yonghu` == this.tableName){

this.$message.error(`密码不能为空`);

return

}

if((this.ruleForm.mima!=this.ruleForm.mima2) && `yonghu` == this.tableName){

this.$message.error(`两次密码输入不一致`);

return

}

if((!this.ruleForm.xingming) && `yonghu` == this.tableName){

this.$message.error(`姓名不能为空`);

return

}

if(`yonghu` == this.tableName && this.ruleForm.nianling&&(!this.$validate.isIntNumer(this.ruleForm.nianling))){

this.$message.error(`年龄应输入整数`);

return

}

if(`yonghu` == this.tableName && this.ruleForm.shouji&&(!this.$validate.isMobile(this.ruleForm.shouji))){

this.$message.error(`手机应输入手机格式`);

return

}

this.$http({

url: url,

method: "post",

data:this.ruleForm

}).then(({ data }) => {

if (data && data.code === 0) {

this.$message({

message: "注册成功",

type: "success",

duration: 1500,

onClose: () => {

this.$router.replace({ path: "/login" });

}

});

} else {

this.$message.error(data.msg);

}

});

}

};

</script>

.el-radio__input.is-checked .el-radio__inner {

border-color: #00c292;

background: #00c292;

}

.el-radio__input.is-checked .el-radio__inner {

border-color: #00c292;

background: #00c292;

}

.el-radio__input.is-checked .el-radio__inner {

border-color: #00c292;

background: #00c292;

}

.el-radio__input.is-checked+.el-radio__label {

color: #00c292;

}

.el-radio__input.is-checked+.el-radio__label {

color: #00c292;

}

.el-radio__input.is-checked+.el-radio__label {

color: #00c292;

}

.h1 {

margin-top: 10px;

}

body {

padding: 0;

margin: 0;

}

// .container {

// min-height: 100vh;

// text-align: center;

// // background-color: #00c292;

// padding-top: 20vh;

// background-image: url(../assets/img/bg.jpg);

// background-size: 100% 100%;

// opacity: 0.9;

// }

// .login-form:before {

// vertical-align: middle;

// display: inline-block;

// }

// .login-form {

// max-width: 500px;

// padding: 20px 0;

// width: 80%;

// position: relative;

// margin: 0 auto;

// .label {

// min-width: 60px;

// }

// .input-group {

// max-width: 500px;

// padding: 20px 0;

// width: 80%;

// position: relative;

// margin: 0 auto;

// display: flex;

// align-items: center;

// .input-container {

// display: inline-block;

// width: 100%;

// text-align: left;

// margin-left: 10px;

// }

// .icon {

// width: 30px;

// height: 30px;

// }

// .input {

// position: relative;

// z-index: 2;

// float: left;

// width: 100%;

// margin-bottom: 0;

// box-shadow: none;

// border-top: 0px solid #ccc;

// border-left: 0px solid #ccc;

// border-right: 0px solid #ccc;

// border-bottom: 1px solid #ccc;

// padding: 0px;

// resize: none;

// border-radius: 0px;

// display: block;

// width: 100%;

// height: 34px;

// padding: 6px 12px;

// font-size: 14px;

// line-height: 1.42857143;

// color: #555;

// background-color: #fff;

// }

.nk-navigation {

margin-top: 15px;

a {

display: inline-block;

color: #fff;

background: rgba(255, 255, 255, .2);

width: 100px;

height: 50px;

border-radius: 30px;

text-align: center;

display: flex;

align-items: center;

margin: 0 auto;

justify-content: center;

padding: 0 20px;

}

.icon {

margin-left: 10px;

width: 30px;

height: 30px;

}

.register-container {

margin-top: 10px;

a {

display: inline-block;

color: #fff;

max-width: 500px;

height: 50px;

border-radius: 30px;

text-align: center;

display: flex;

align-items: center;

margin: 0 auto;

justify-content: center;

padding: 0 20px;

div {

margin-left: 10px;

}

.container {

height: 100vh;

background-position: center center;

background-size: cover;

background-repeat: no-repeat;

background-image: url(http://codegen.caihongy.cn/20211108/7646593eea654d5da677d9a78f0a9254.jpg);

.login-form {

right: 50%;

top: 50%;

transform: translate3d(50%, -50%, 0);

border-radius: 10px;

background-color: rgba(255,255,255,.5);

font-size: 14px;

font-weight: 500;

box-sizing: border-box;

width: 480px;

height: auto;

padding: 10px;

margin: 0px 0px 0px -10px;

border-radius: 30px;

border-width: 0;

border-style: solid;

border-color: rgba(255,0,0,0);

background-color: rgba(255, 255, 255, 1);

box-shadow: 0 0 8px rgba(248,214,117,1);

.h1 {

width: 450px;

height: 35px;

line-height:35px;

color: #000;

font-size: 20px;

padding: 0;

margin: 0px 0px 10px 0px;

border-radius: 0;

border-width: 0;

border-style: solid;

border-color: rgba(255,0,0,0);

background-color: rgba(0, 206, 209, 0);

box-shadow: 0 0 6px rgba(255,0,0,0);

text-align: center;

}

.rgs-form {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

.el-form-item {

width: 100%;

display: flex;

& /deep/ .el-form-item__content {

flex: 1;

display: flex;

}

.input {

width: 100%;

height:auto;

padding: 0;

margin: 0px 0px 12px 30px;

border-radius: 0;

border-width: 0;

border-style: solid;

border-color: rgba(255,0,0,0);

background-color: rgba(255,0,0,0);

box-shadow: 0 0 6px rgba(255,0,0,0);

& /deep/ .el-form-item__label {

width: 100px;

line-height:44px;

color: rgba(0, 0, 0, 1);

font-size: 16px;

padding: 0px 10px 0px 0px;

margin: 0px 0px 0px 0px;

border-radius: 0;

border-width: 0;

border-style: solid;

border-color: rgba(255,0,0,0);

background-color: rgba(144, 238, 144, 0);

box-shadow: 0 0 6px rgba(255,0,0,0);

}

& /deep/ .el-input__inner {

width: 300px;

height: 44px;

line-height:44px;

color: rgba(0, 0, 0, 1);

font-size: 14px;

padding: 0 12px;

margin: 0;

border-radius: 5px;

border-width: 0;

border-style: solid;

border-color: #606266;

background-color: #fff;

box-shadow: 0 0 8px 1px rgba(248,213,117,1);

text-align: left;

}

.send-code {

& /deep/ .el-input__inner {

width: 220px;

height: 44px;

line-height:44px;

color: #606266;

font-size: 14px;

padding: 0 12px;

margin: 0;

border-radius: 5px 0 0 5px;

border-width: 0;

border-style: solid;

border-color: #606266;

background-color: #fff;

box-shadow: 0 0 8px 1px rgba(248,213,117,1);

text-align: left;

}

.register-code {

margin: 0;

padding: 0;

width: 80px;

height: 44px;

line-height:44px;

color: #fff;

font-size: 14px;

border-width: 0;

border-style: solid;

border-color: rgba(255,0,0,0);

border-radius: 0 5px 5px 0;

background-color: rgba(64, 158, 255, 1);

box-shadow: 0 0 6px rgba(255,0,0,0);

}

.btn {

margin: 0px 10px 0px 30px;

padding: 0;

width: 88px;

height: 40px;

line-height:40px;

color: #fff;

font-size: 14px;

border-width: 0;

border-style: solid;

border-color: #409EFF;

border-radius: 4px;

background-color: rgba(64, 158, 255, 1);

box-shadow: 0 0 6px rgba(255,0,0,0);

}

.close {

margin: 0 10px;

padding: 0;

width: 88px;

height: 40px;

line-height:40px;

color: rgba(255, 255, 255, 1);

font-size: 14px;

border-width: 0;

border-style: solid;

border-color: #409EFF;

border-radius: 4px;

background-color: rgba(64, 158, 255, 1);

box-shadow: 0 0 6px rgba(255,0,0,0);

}

</style>

```

4.系统演示地址：

链接：https://pan.baidu.com/s/1CFA2062rrN1CeFlX2DWtbA

提取码：m09z

基于SpringBoot+Vue协同过滤视频推荐系统

推荐阅读更多精彩内容