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
<template>
? <div>
? ? ? ? <div class="container">
? ? ? <div class="login-form">
? ? ? ? <h1 class="h1">基于協同過濾算法的短視頻推薦系統注冊</h1>
<el-form ref="rgsForm" class="rgs-form" :model="rgsForm">
<!-- <div v-if="tableName=='yonghu'" class="input-group">
? <div class="label">賬號</div>
? <div class="input-container">
? ? <input v-model="ruleForm.zhanghao" class="input" type="text" placeholder="賬號">
? </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 class="label">密碼</div>
? <div class="input-container">
? ? <input v-model="ruleForm.mima" class="input" type="text" placeholder="密碼">
? </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 class="label">姓名</div>
? <div class="input-container">
? ? <input v-model="ruleForm.xingming" class="input" type="text" placeholder="姓名">
? </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 class="label">年齡</div>
? <div class="input-container">
? ? <input v-model="ruleForm.nianling" class="input" type="text" placeholder="年齡">
? </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 class="label">手機</div>
? <div class="input-container">
? ? <input v-model="ruleForm.shouji" class="input" type="text" placeholder="手機">
? </div>
</div> -->
<el-form-item label="手機" class="input" v-if="tableName=='yonghu'">
? <el-input v-model="ruleForm.shouji" autocomplete="off" placeholder="手機"? />
</el-form-item>
<div style="display: flex;flex-wrap: wrap;width: 100%;justify-content: center;">
<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 href="#">
? ? ? ? ? <div @click="login()">注冊</div>
? ? ? ? </a>
? ? ? </div> -->
? ? </div>
? </div>
</template>
<script>
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" });
? ? },
? ? // 注冊
? ? 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>
<style lang="scss" scoped>
.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
