SpringBoot+Vue实现视频播放网站

2022-06-25 01:03:25 阅读：237 来源： 互联网

标签：Vue SpringBoot resp vm total scope message 播放 row

1.技术介绍
java+springBoot+mysql+mybatis+Vue+html
开发工具：eclipse或IDEA
2.主要功能说明：
网站前台：
用户注册、登录、首页视频展示、搜索、播放、点赞、收藏、发布弹幕、点评、评论、个人信息修改、消息中心、视频中心、发布作品、查看投票、退出
网站后台管理：
用户管理、视频管理、视频分类管理、投票管理
3.部分代码展示

```java
<template>
<div class="app-container">
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="视频名称">
<el-input v-model="videoName"></el-input>
</el-form-item>
<el-form-item>
<el-button type="warning" @click="onSubmit">查询</el-button>
</el-form-item>

</el-form>
<el-table
:data="list"
border
fit
highlight-current-row
>
<el-table-column align="center" label="序号" width="95">
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column align="center" label="视频名称">
<template slot-scope="scope">
{{ scope.row.videoTitle }}
</template>
</el-table-column>
<el-table-column align="center" label="播放量" width="95">
<template slot-scope="scope">
{{ scope.row.viewNum }}
</template>
</el-table-column>
<el-table-column align="center" label="视频类型" width="95">
<template slot-scope="scope">
{{ scope.row.videoType.typeName }}
</template>
</el-table-column>
<el-table-column align="center" label="上传日期">
<template slot-scope="scope">
{{ scope.row.editDate }}
</template>
</el-table-column>
<el-table-column align="center" label="用户">
<template slot-scope="scope">
{{ scope.row.userName }}
</template>
</el-table-column>
<el-table-column align="center" label="状态" width="95">
<template slot-scope="scope">
{{ scope.row.videoState.stateName }}
</template>
</el-table-column>
<el-table-column align="center" label="会员观看等级限制" width="130">
<template slot-scope="scope">
{{ scope.row.level ==0?"所有用户":"会员"+scope.row.level }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="330" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="editvideo(scope.row.videoId)">
编辑
</el-button>
<el-button type="danger" size="mini" @click="delvideo(scope.row.videoId)"
v-show="scope.row.videoState.stateName == '已上架'">
下架
</el-button>
<el-button type="primary" size="mini" @click="upvideo(scope.row.videoId)"
v-show="scope.row.videoState.stateName == '已下架'">
上架
</el-button>
<el-button slot="reference" type="primary" size="mini" @click="openLevel(scope.row.videoId)">设置等级</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
@pagination="getList"/>

<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="20%">
<el-select v-model="option" placeholder="请选择会员限制">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="setLevel()">确定</el-button>
</span>
</el-dialog>

</div>
</template>
<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
components: {Pagination},
data() {
return {
video: {
'videoId': null,
'level':null
},
dialogVisible: false,
videoName: '',
total: 0,
listQuery: {
page: 1,
limit: 5
},
list: [],
option: -1,
options: [
{
value: -1,
label: '请选择'
},
{
value: 0,
label: '普通用户'
}, {
value: 1,
label: '会员1'
}, {
value: 2,
label: '会员2'
}, {
value: 3,
label: '会员3'
}, {
value: 4,
label: '会员4'
}]
}
},
created() {
// this.fetchData()
this.getList()
},

methods: {
onSubmit() {
var vm = this
this.axios({
method: 'GET',
url: 'http://localhost:8081/admin/searchVideo?pageNum=' + vm.listQuery.page + '&pageSize=' + vm.listQuery.limit + '&videoName=' + vm.videoName
}).then(function (resp) {
vm.total = resp.data.total // 讲pageInfo中的total放到vm的total
vm.list = resp.data.list
})
},
getList() {
var vm = this
this.axios({
method: 'GET',
url: 'http://localhost:8081/admin/videoPageInfo?pageNum=' + vm.listQuery.page + '&pageSize=' + vm.listQuery.limit
}).then(function (resp) {
vm.total = resp.data.total // 讲pageInfo中的total放到vm的total
vm.list = resp.data.list
})
},
addvideo() {
this.$router.push('/addvideo/index')
},
editvideo(id) {
this.$router.push('/editvideo/index/' + id)
},
delvideo(id) {
var vm = this
this.$confirm('此操作将下架该视频, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
vm.axios({
method: 'GET',
url: 'http://localhost:8081/admin/rdeleteVideo/' + id
}).then(function (resp) {
if (resp.data === 'success') {
vm.$message({
message: '下架成功',
type: 'success'
})
vm.getList()
}
// eslint-disable-next-line handle-callback-err
}).catch(function (error) {
vm.$message.error('下架失败')
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消下架'
})
})
},
upvideo(id) {
var vm = this
vm.axios({
method: 'GET',
url: 'http://localhost:8081/admin/upVideo/' + id
}).then(function (resp) {
if (resp.data === 'success') {
vm.$message({
message: '上架成功',
type: 'success'
})
vm.getList()
}
// eslint-disable-next-line handle-callback-err
}).catch(function (error) {
vm.$message.error('上架失败')
})
},
// 获取用户列表
fetchData() {
var vm = this
this.axios({
method: 'GET',
url: 'http://localhost:8081/admin/list'
}).then(function (resp) {
vm.list = resp.data
console.log(resp.data)
})
},
setLevel() {
var vm = this
if (vm.option < 0) {
vm.$message({
message: '请选择会员限制',
type: 'info'
})
return
}
vm.video.level=vm.option,
this.axios({
method: 'POST',
data: vm.video,
url: 'http://localhost:8081/video/updateLevel'
}).then(function(resp) {
vm.$message({
message: '设置成功',
type: 'success'
})
vm.dialogVisible = false
vm.getList()
})
},
openLevel(vid) {
this.dialogVisible = true
this.video.videoId = vid
}
}
}
</script>

```
4.系统演示地址：
链接：https://pan.baidu.com/s/1up72C1YYqMKwOTIzMm_7mQ
提取码：v5c2

标签：Vue,SpringBoot,resp,vm,total,scope,message,播放,row
来源： https://www.cnblogs.com/xiao123456789/p/16410598.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

SpringBoot+Vue实现视频播放网站