VUE+SPRINGBOOT+语音技术实现智能语音歌曲管理系统

语音控制歌曲的播放、暂停、增删改查

<template><div class="Music-container"><div style="margin: 10px 0"><!--检索部分--><el-input style="width: 200px;" placeholder="请输入歌曲名称"v-model="send.name"></el-input><el-input style="width: 200px;" placeholder="请输入歌曲拥有者"v-model="send.user" class="ml-10"></el-input><el-input style="width: 200px;" placeholder="请输入歌曲分类"v-model="send.category"class="ml-10"></el-input><el-button class="ml-10" type="primary" @click="selectListPage">搜索<i class="el-icon-search"></i></el-button><el-button type="warning" @click="reset">重置<i class="el-icon-refresh"></i></el-button><!--检索部分结束--><!--新增与删除--><!--      <el-button type="primary" @click="insertWindow">新增<i class="el-icon-circle-plus-outline"></i></el-button>--><el-popconfirmclass="ml-10"confirm-button-text="确定"cancel-button-text="取消"icon="el-icon-info"icon-color="red"title="确认要批量删除吗？"@confirm="confirmRemoveIdList"><el-button type="danger" slot="reference">批量删除<iclass="el-icon-remove-outline"></i></el-button></el-popconfirm><el-upload style="display: inline-block":action="'http://'+WHITE_IP+'/music/list_import'"name="multipartFile":show-file-list="false"accept="xlsx":on-success="onImportSuccess"><!-- <el-button type="primary" class="ml-10">导入<i class="el-icon-upload2"></i></el-button>--></el-upload><!--      <el-button type="primary" class="ml-10" @click="list_export">导出<i class="el-icon-download"></i></el-button>--></div><!--表格部分--><el-table :data="list" boder stripe:header-cell-style="{'text-align':'center'}":cell-style="{'text-align':'center'}"borderwidth="220"@selection-change="onSelectChange":header-cell-class-name="headerBg"><el-table-column type="selection" width="60"></el-table-column><!--选择框--><el-table-column type="index" :index="hIndex" label="序号" width="80"/><el-table-column prop="name" label="歌曲名称"></el-table-column><el-table-column prop="title" label="歌曲标题"></el-table-column><el-table-column prop="url" label="歌曲地址"></el-table-column><el-table-column prop="image" label="歌曲背景"></el-table-column><el-table-column prop="user" label="所属用户"></el-table-column><el-table-column prop="category" label="所属分类"></el-table-column><!--      <el-table-column prop="mark" label="可以使用"></el-table-column>--><el-table-column label="歌曲正常使用" width="160"><template slot-scope="scope"><el-switch v-model="scope.row.mark" active-color="#13ce66" inactive-color="#cccccc"@change="changeEnable(scope.row)"></el-switch></template></el-table-column><el-table-column label="操作" width="300"><template #default="scope"><el-button type="success" @click="updateWindow(scope.row)">编辑<iclass="el-icon-edit"></i></el-button><el-popconfirmclass="ml-10"confirm-button-text="确定"cancel-button-text="取消"icon="el-icon-info"icon-color="red"title="确认要删除吗？"@confirm="confirmDelete(scope.row.id)"><el-button type="danger" slot="reference">删除<iclass="el-icon-remove-outline"></i></el-button></el-popconfirm></template></el-table-column></el-table><!--分页部分--><div class="pd-10"><el-pagination@size-change="onSizeChange"@current-change="onCurrentChange":page-sizes="[10, 15, 20, 50]":current-page="send.currentPage":page-size="send.pageSize"layout="total, sizes, prev, pager, next, jumper":total="send.total"></el-pagination></div><!--新增或修改弹窗--><el-dialog title="歌曲详情" :visible.sync="sendFormFlag" :close-on-click-modal="false"><el-form label-width="120px" size="small"><el-form-item label="歌曲名称"><el-input v-model="sendForm.name" autocomplete="off"></el-input></el-form-item><el-form-item label="歌曲标题"><el-input v-model="sendForm.title" autocomplete="off"></el-input></el-form-item><!--角色的选择--><el-form-item label="歌曲地址"><el-input v-model="sendForm.url" autocomplete="off"></el-input></el-form-item><!----><el-form-item label="歌曲背景"><el-input v-model="sendForm.image" autocomplete="off"></el-input></el-form-item><el-form-item label="所属用户"><el-input v-model="sendForm.user" autocomplete="off"></el-input></el-form-item><el-form-item label="所属分类"><el-input v-model="sendForm.category" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="confirmInsertOrUpdate">确 定</el-button><el-button @click="sendFormFlag = false">取 消</el-button></div></el-dialog></div>
</template><script>
import {WHITE_IP} from "../../public/config";
import router from "@/js_router/router";export default {name: "Music",data() {return {WHITE_IP: WHITE_IP, // ip地址list: [], // 该页面主列表roleList: [], // 角色列表headerBg: 'headerBg',send: {  // 发送数据currentPage: 1,pageSize: 10,total: 0,user: '',category: ''},sendForm: {removeIdList: []}, // 新增发送数据sendFormFlag: false, // 是否展示新增发送数据}},//------------------------created() {// 请求分页数据this.selectListPage()},methods: {changeEnable(row) {// @change自动改变了布尔值// console.log(row.enable)this.$http.post("music/music_enable", {id: row.id, mark: row.mark}).then(res => {if (res.data.code === "200") {if (row.mark) {this.$message.success('歌曲正常使用')} else {this.$message.info('歌曲无法使用')}} else {this.$message.error('操作失败，' + res.data.message)}})},hIndex(index) {// 当前页数 - 1 * 每页数据条数 + index + 1 （ index 是索引值，从0开始）return (this.send.currentPage - 1) * this.send.pageSize + index + 1},/*导入成功*/onImportSuccess() {this.$message.success("文件导入成功")this.selectListPage()},/*导出*/list_export() {window.open(`http://${WHITE_IP}/music/list_export`)},/*重置函数*/reset() {this.send.name = ''this.send.user = ''this.send.category = ''this.selectListPage()},/*当前页变化时*/onCurrentChange(currentPage) {this.send.currentPage = currentPagethis.selectListPage()},/*每页条数变化时*/onSizeChange(pageSize) {this.send.pageSize = pageSizethis.selectListPage()},/*分页查询*/selectListPage() {this.$http.post("/music/list_page", this.send).then(res => {console.log(res)if (res.data.code === "200") {this.send.total = res.data.object.totalthis.list = res.data.object.data} else {this.$message.error('查询失败，' + res.data.code)router.push("/login")}})},/*复选框变化时*/onSelectChange(val) {this.sendForm.removeIdList = val},/*确认批量删除*/confirmRemoveIdList() {if (this.sendForm.removeIdList === undefined) {return}this.sendForm.removeIdList = this.sendForm.removeIdList.map(v => v.id)  // [{},{},{}] =>[1,2,3]this.$http.post("music/list_delete", this.sendForm).then(res => {if (res.data.code === "200") {this.$message.success('批量删除成功')} else {this.$message.error('批量删除失败，' + res.data.message)}this.selectListPage()})this.selectListPage()},/*确认删除*/confirmDelete(id) {this.sendForm.id = idthis.$http.post("/music/delete_admin", this.sendForm).then(res => {if (res.data.code === "200") {this.$message.success('删除成功')} else {this.$message.error('删除失败，' + res.data.message)}this.selectListPage()})},/*修改窗口*/updateWindow(row) {this.sendFormFlag = truethis.sendForm = JSON.parse(JSON.stringify(row))},/*确认新增或修改*/confirmInsertOrUpdate() {this.sendFormFlag = falsethis.$http.post("/music/insertOrUpdate", this.sendForm).then(res => {console.log(res.data)if (res.data.code === "200") {this.$message.success('保存成功')} else {this.$message.error('保存失败，' + res.data.message)}this.selectListPage()})},/*新增窗口*/insertWindow() {this.sendFormFlag = truethis.sendForm = {} // 初始化新增空白表单},}
}
</script><style scoped>
</style>