阳光沙滩-让学习编程变得更加简单

ffmpeg-iinput.mp4output.flv提取音频：从视频中提取出音频并保存为MP3文件。

2024-03-21 10:21 · ffmpeg / 音频处理 / 视频处理 / 编码 / 解码

Vue增删查改模板(表格,无分页)<template><divclass="loop-box"><divclass="loop-action-bar"><el-buttontype="primary"plain@click="showAdd()">添加轮播图</el-button></div><divclass="loop-list-box"><el-table:data="bodyData"style="width:100%"v-loading="loading"><el-table-columnprop="title"label="标题"width="120"></el-table-column><el-table-columnprop="imageUrl"label="图片路径"width="120"></el-table-column><el-table-columnlabel="state"width="120"><templateslot-scope="scope"><divv-if="scope.row.state==='1'"><el-tagtype="success">正常</el-tag></div></template></el-table-column><el-table-columnprop="targetUrl"label="定向路径"></el-table-column><el-table-columnlabel="创建时间"><templateslot-scope="scope"><spanv-text="formatDate(scope.row.createTime)"></span></template></el-table-column><el-table-columnlabel="更新时间"><templateslot-scope="scope"><spanv-text="formatDate(scope.row.updateTime)"></span></template></el-table-column><el-table-columnfixed="right"label="操作"width="200"><templateslot-scope="scope"><el-buttontype="primary"size="mini"@click="showEdit(scope.row)">编辑</el-button><el-buttontype="danger"size="mini"@click="deleteById(scope.row)">删除</el-button></template></el-table-column></el-table></div><divclass="navigation-bar"></div><divclass="loop-dialog-box"><el-dialogtitle="删除提示":visible.sync="dialogVisible_delete"width="30%":before-close="handleClose"><span>你确定要删除：{{deleteMessage}}这个分类吗？</span><spanslot="footer"class="dialog-footer"><el-button@click="dialogVisible_delete=false"type="danger"size="mini">取消</el-button><el-buttontype="primary"@click="doDeleteItem()"size="mini">确定</el-button></span></el-dialog></div><divclass="loop-dialog-addOrUpdate-box"><el-dialog:title="editTitle":visible.sync="dialogVisible_addOrUpdate"width="30%":before-close="handleClose"><el-form:label-position="labelPosition"label-width="80px":model="dataForm"><el-form-itemlabel="名称"><el-inputv-model="dataForm.name"></el-input></el-form-item><el-form-itemlabel="分类拼音"><el-inputv-model="dataForm.pinyin"></el-input></el-form-item><el-form-itemlabel="分类描述"><el-inputtype="textarea"resize="none":rows="2"v-model="dataForm.description"></el-input></el-form-item></el-form><divslot="footer"class="dialog-footer"><el-button@click="initForm()"type="danger">取消</el-button><el-buttontype="primary"@click="doEdit()">{{editorCommitText}}</el-button></div></el-dialog></div></div></template><script>import*asapifrom"@/api/axios";import*asdateUtilsfrom"@/utils/date";exportdefault{//import引入的组件需要注入到对象中才能使用components:{},props:{},data(){//这里存数据return{bodyData:[//{//id:"1",//imageUrl:"1",//state:"1",//targetUrl:"1",//title:"1",//state:"1",//createTime:"2020",//updateTime:"2020",//},],dialogVisible_delete:false,dialogVisible_addOrUpdate:false,deleteMessage:"",deleteTarget:"",labelPosition:"right",addOrEdit:"edit",loading:true,dataForm:{id:"",name:"",pinyin:"",description:"",},editorCommitText:"修改分类",editTitle:"编辑分类",};},//计算属性computed:{},//监控data中数据变化watch:{},//方法methods:{//日期转换formatDate(dateStr){vardate=newDate(dateStr);returndateUtils.formatDate(date,"yyyy-MM-ddhh:mm:ss");},//确认关闭对话框handleClose(done){this.$confirm("确认关闭？").then((_)=>{this.initForm();done();}).catch((_)=>{});},//初始化表单对象initForm(){//给表单对象this.dataForm初始化this.dialogVisible_addOrUpdate=false;},//获取分类列表getList(){//去获取分类列表//给this.bodyData赋值对象数据this.loading=false;},//获取当前对象getBodyData(categoryId){//防止多人同时修改，可以用mybatis-plus的version乐观锁//也就是获取当前对象发送axios请求吧this.dialogVisible_addOrUpdate=false;},//删除,打开删除窗口deleteById(item){//打开删除窗口，//进行数据的获取，获取当前对象和删除的对象的名称//为了执行删除操作可以获取到idthis.dialogVisible_delete=true;console.log(item);},//执行删除操作doDeleteItem(){//执行删除请求//完了记得获取最新数据列表this.getList();this.dialogVisible_delete=false;},//打开编辑分类的对话框showEdit(item){(this.editorCommitText="修改分类"),(this.editTitle="编辑分类"),(this.addOrEdit="edit");//调用方法获取最新的数据this.getBodyData(item.id);this.dialogVisible_addOrUpdate=true;//console.log(item);},//打开添加对话框showAdd(){(this.editorCommitText="添加分类"),(this.editTitle="添加分类"),(this.addOrEdit="add");//初始化表单对象this.initForm();this.dialogVisible_addOrUpdate=true;},//执行编辑或执行添加操作doEdit(){console.log("修改或添加分类");if(this.addOrEdit==="edit"){//执行修改//完了记得获取最新数据列表}else{//先判断数据是否为空//然后进行添加//完了记得获取最新数据列表}this.dialogVisible_addOrUpdate=false;},},//声明周期-创建完成（可以访问当前this实例）created(){},//生命周期-挂载完成（可以访问DOM元素）mounted(){this.getList();},beforeCreate(){},//生命周期-创建之前beforeMount(){},//生命周期-挂载之前beforeUpdate(){},//声明周期-更新之前updated(){},//生命周期-更新之后beforeDestroy(){},//生命周期-销毁之前destroyed(){},//生命周期-销毁之后activated(){},//缓存keep-alive};</script><stylescoped></style>有分页(只有删除和搜索)//用户列表<template><divclass="loop-box"><divclass="loop-action-bar"><el-buttontype="warning"plaindisabled>搜索用户</el-button><el-form:inline="true":model="formInline"class="demo-form-inline"><el-form-itemlabel="用户名"><el-inputv-model="formInline.userName"placeholder="请输入用户名"></el-input></el-form-item><el-form-itemlabel="邮箱"><el-inputv-model="formInline.email"placeholder="请输入邮箱"></el-input></el-form-item><el-form-item><el-buttontype="primary"@click="onSubmit">查询</el-button><el-button@click="resetForm()">重置</el-button></el-form-item></el-form></div><divclass="loop-list-box"><el-table:data="bodyData"style="width:100%"v-loading="loading"><el-table-columnprop="userName"label="用户名"width="120"></el-table-column><el-table-columnprop="roles"label="角色"width="120"><templateslot-scope="scope"><divv-if="scope.row.roles==='role_normal'"><el-tag>普通用户</el-tag></div><divv-if="scope.row.roles==='role_admin'"><el-tagtype="success">管理员</el-tag></div></template></el-table-column><el-table-columnlabel="state"width="120"><templateslot-scope="scope"><divv-if="scope.row.state==='1'"><el-tagtype="success">正常</el-tag></div></template></el-table-column><el-table-columnlabel="头像"><templateslot-scope="scope"><divclass="block"><el-avatar:size="50":src="scope.row.avatar"></el-avatar></div></template></el-table-column><el-table-columnprop="email"label="邮箱地址"></el-table-column><el-table-columnprop="sign"label="签名"></el-table-column><el-table-columnlabel="创建时间"><templateslot-scope="scope"><spanv-text="formatDate(scope.row.createTime)"></span></template></el-table-column><el-table-columnlabel="更新时间"><templateslot-scope="scope"><spanv-text="formatDate(scope.row.updateTime)"></span></template></el-table-column><el-table-columnfixed="right"label="操作"width="200"><templateslot-scope="scope"><el-buttontype="danger"size="mini"@click="deleteById(scope.row)">删除</el-button></template></el-table-column></el-table></div><el-row:gutter="20"><el-col:span="8":offset="8"><divclass="navigation-bar"style="padding-top:40px"><el-paginationbackgroundlayout="total,prev,pager,next,jumper":hide-on-single-page="true":page-size="PageformData.size":current-page="PageformData.current":total="PageformData.total"@prev-click="prevPage"@next-click="nextPage"@current-change="currentPageChange"></el-pagination></div></el-col></el-row><divclass="loop-dialog-box"><el-dialogtitle="删除提示":visible.sync="dialogVisible_delete"width="30%":before-close="handleClose"><span>你确定要删除：{{deleteMessage}}这个用户吗？</span><spanslot="footer"class="dialog-footer"><el-button@click="dialogVisible_delete=false"type="danger"size="mini">取消</el-button><el-buttontype="primary"@click="doDeleteItem()"size="mini">确定</el-button></span></el-dialog></div></div></template><script>import*asapifrom"@/api/axios";import*asdateUtilsfrom"@/utils/date";exportdefault{//import引入的组件需要注入到对象中才能使用components:{},props:{},data(){//这里存数据return{formInline:{userName:"",email:"",},bodyData:[],dialogVisible_delete:false,dialogVisible_addOrUpdate:false,deleteMessage:"",deleteTarget:"",labelPosition:"right",addOrEdit:"edit",loading:true,dataForm:{id:"",userName:"",roles:"",avatar:"",email:"",sign:"",state:"",},PageformData:{size:5,currentPage:1,total:5,},editorCommitText:"修改对象",editTitle:"编辑对象",};},//计算属性computed:{},//监控data中数据变化watch:{},//方法methods:{//获取对象列表getList(currentPage){//去获取对象列表this.PageformData.currentPage=currentPage===undefined?this.PageformData.currentPage:currentPage;//给this.bodyData赋值对象数据api.getUserList(this.PageformData).then((resp)=>{//console.log(resp);if(resp.code===api.success_code){this.bodyData=resp.data.records;this.PageformData.size=resp.data.size;this.PageformData.total=resp.data.total;this.PageformData.currentPage=resp.data.current;api.toast_succ(resp.message);}else{api.toast_err(resp.message);}});this.loading=false;},//日期转换formatDate(dateStr){vardate=newDate(dateStr);returndateUtils.formatDate(date,"yyyy-MM-ddhh:mm:ss");},//确认关闭对话框handleClose(done){this.$confirm("确认关闭？").then((_)=>{done();}).catch((_)=>{});},//删除,打开删除窗口deleteById(item){//打开删除窗口，//进行数据的获取，获取当前对象和删除的对象的名称this.deleteMessage=item.userName;this.deleteTarget=item;//为了执行删除操作可以获取到idthis.dialogVisible_delete=true;console.log(item);},//执行删除操作doDeleteItem(){//执行删除请求api.deleteUser(this.deleteTarget.id).then((resp)=>{if(resp.code===api.success_code){api.toast_succ(resp.message);//完了记得获取最新数据列表this.getList();}else{api.toast_err(resp.message);}});this.dialogVisible_delete=false;},//搜索onSubmit(){console.log("submit!");api.doUserSearch(this.formInline.userName,this.formInline.email).then((resp)=>{//console.log(resp);if(resp.code===api.success_code){this.bodyData=resp.data.records;this.PageformData.size=resp.data.size;this.PageformData.total=resp.data.total;this.PageformData.currentPage=resp.data.current;api.toast_succ(resp.message);}else{api.toast_err(resp.message);}});},//上一页prevPage(){this.getList(this.PageformData.currentPage-1);},//下一页nextPage(){this.getList(this.PageformData.currentPage+1);},//重置搜索resetForm(formName){console.log("重置");this.formInline.userName="";this.formInline.email="";this.PageformData.size=5;this.getList(1);},//currentPage改变时会触发currentPageChange(page){this.getList(page);},},//声明周期-创建完成（可以访问当前this实例）created(){},//生命周期-挂载完成（可以访问DOM元素）mounted(){this.getList(1);},beforeCreate(){},//生命周期-创建之前beforeMount(){},//生命周期-挂载之前beforeUpdate(){},//声明周期-更新之前updated(){},//生命周期-更新之后beforeDestroy(){},//生命周期-销毁之前destroyed(){},//生命周期-销毁之后activated(){},//缓存keep-alive};</script><stylescoped></style>未填充内容的空模板<template><div></div></template><script>exportdefault{//import引入的组件需要注入到对象中才能使用components:{},props:{},data(){//这里存数据return{};},//计算属性computed:{},//监控data中数据变化watch:{},//方法methods:{},//声明周期-创建完成（可以访问当前this实例）created(){},//生命周期-挂载完成（可以访问DOM元素）mounted(){},beforeCreate(){},//生命周期-创建之前beforeMount(){},//生命周期-挂载之前beforeUpdate(){},//声明周期-更新之前updated(){},//生命周期-更新之后beforeDestroy(){},//生命周期-销毁之前destroyed(){},//生命周期-销毁之后activated(){},//缓存keep-alive}</script><stylescoped></style>（后期会分享整个增删改查+搜索+分页模板）

2021-03-09 10:40 · vue