|
【郑州校区】学成在线-第14天-讲义-媒资管理 三
2 我的媒资
2.1 需求分析
通过我的媒资可以查询本教育机构拥有的媒资文件，进行文件处理、删除文件、修改文件信息等操作，具体需求如下：
1、分页查询我的媒资文件
2、删除媒资文件
3、处理媒资文件
4、修改媒资文件信息
2.2 API
本节讲解我的媒资文件分页查询、处理媒资文件，其它功能请学员自行实现。
[AppleScript] 纯文本查看 复制代码 @Api(value = "媒体文件管理",description = "媒体文件管理接口",tags = {"媒体文件管理接口"})
public interface MediaFileControllerApi {
@ApiOperation("查询文件列表")
public QueryResponseResult findList(int page, int size, QueryMediaFileRequest
queryMediaFileRequest) ;
}
2.3 服务端开发
2.3.1 Dao
[AppleScript] 纯文本查看 复制代码 @Repository
public interface MediaFileDao extends MongoRepository<MediaFile,String> {
}
2.3.2 Service
定义fifindList方法实现媒资文件查询列表。
[AppleScript] 纯文本查看 复制代码 @Service
public class MediaFileService {
private static Logger logger = LoggerFactory.getLogger(MediaFileService.class);
@Autowired
MediaFileRepository mediaFileRepository;
//文件列表分页查询
public QueryResponseResult findList(int page,int size,QueryMediaFileRequest
queryMediaFileRequest){
//查询条件
MediaFile mediaFile = new MediaFile();
if(queryMediaFileRequest == null){
queryMediaFileRequest = new QueryMediaFileRequest();
}
//查询条件匹配器
ExampleMatcher matcher = ExampleMatcher.matching()
.withMatcher("tag", ExampleMatcher.GenericPropertyMatchers.contains())//tag字段
模糊匹配
.withMatcher("fileOriginalName",
ExampleMatcher.GenericPropertyMatchers.contains())//文件原始名称模糊匹配
.withMatcher("processStatus", ExampleMatcher.GenericPropertyMatchers.exact());//
处理状态精确匹配（默认）
//查询条件对象
if(StringUtils.isNotEmpty(queryMediaFileRequest.getTag())){
mediaFile.setTag(queryMediaFileRequest.getTag());
}
if(StringUtils.isNotEmpty(queryMediaFileRequest.getFileOriginalName())){
mediaFile.setFileOriginalName(queryMediaFileRequest.getFileOriginalName());
}
if(StringUtils.isNotEmpty(queryMediaFileRequest.getProcessStatus())){
mediaFile.setProcessStatus(queryMediaFileRequest.getProcessStatus());
}
//定义example实例
Example<MediaFile> ex = Example.of(mediaFile, matcher);
page = page‐1;
//分页参数
Pageable pageable = new PageRequest(page, size);
//分页查询
Page<MediaFile> all = mediaFileRepository.findAll(ex,pageable);
QueryResult<MediaFile> mediaFileQueryResult = new QueryResult<MediaFile>();
mediaFileQueryResult.setList(all.getContent());
mediaFileQueryResult.setTotal(all.getTotalElements());
return new QueryResponseResult(CommonCode.SUCCESS,mediaFileQueryResult);
}
}
2.3.3 Controller
[AppleScript] 纯文本查看 复制代码 @RestController
@RequestMapping("/media/file")
public class MediaFileController implements MediaFileControllerApi {
@Autowired
MediaFileService mediaFileService;
@Autowired
MediaUploadService mediaUploadService;
@Override
@GetMapping("/list/{page}/{size}")
public QueryResponseResult findList(@PathVariable("page") int page, @PathVariable("size")
int size, QueryMediaFileRequest queryMediaFileRequest) {
//媒资文件查询
return mediaFileService.findList(page,size,queryMediaFileRequest);
}
}
2.4 前端开发
2.4.1 API方法
在media模块定义api方法如下：
[AppleScript] 纯文本查看 复制代码 import http from './../../../base/api/public'
import querystring from 'querystring'
let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre;
/*页面列表*/
export const media_list = (page,size,params) => {
//params为json格式
//使用querystring将json对象转成key/value串
let querys = querystring.stringify(params)
return http.requestQuickGet(apiUrl+'/media/file/list/'+page+'/'+size+'/?'+querys)
}
/*发送处理消息*/
export const media_process = (id) => {
return http.requestPost(apiUrl+'/media/file/process/'+id)
}
2.4.2 页面
在media模块创建media_list.vue，可参考cms系统的page_list.vue来编写此页面。
1、视图
[AppleScript] 纯文本查看 复制代码 <template>
<div>
<!‐‐查询表单‐‐>
<el‐form :model="params">
标签：
<el‐input v‐model="params.tag" style="width:160px"></el‐input>
原始名称：
<el‐input v‐model="params.fileOriginalName" style="width:160px"></el‐input>
处理状态：
<el‐select v‐model="params.processStatus" placeholder="请选择处理状态">
<el‐option
v‐for="item in processStatusList"
:key="item.id"
:label="item.name"
:value="item.id">
</el‐option>
</el‐select>
<br/>
<el‐button type="primary" v‐on:click="query" size="small">查询</el‐button>
<router‐link class="mui‐tab‐item" :to="{path:'/media/upload'}">
<el‐button type="primary" size="small" >上传文件</el‐button>
</router‐link>
</el‐form>
<!‐‐列表‐‐>
<el‐table :data="list" highlight‐current‐row v‐loading="listLoading" style="width: 100%;">
<el‐table‐column type="index" width="30">
</el‐table‐column>
<el‐table‐column prop="fileOriginalName" label="原始文件名称" width="220">
</el‐table‐column>
<el‐table‐column prop="fileName" label="文件名称" width="220">
</el‐table‐column>
<el‐table‐column prop="fileUrl" label="访问url" width="260">
</el‐table‐column>
<el‐table‐column prop="tag" label="标签" width="100">
</el‐table‐column>
<el‐table‐column prop="fileSize" label="文件大小" width="120">
</el‐table‐column>
<el‐table‐column prop="processStatus" label="处理状态" width="100"
:formatter="formatProcessStatus">
</el‐table‐column>
<el‐table‐column prop="uploadTime" label="创建时间" width="110"
:formatter="formatCreatetime">
</el‐table‐column>
<el‐table‐column label="开始处理" width="100" >
<template slot‐scope="scope">
<el‐button
size="small" type="primary" plain @click="process(scope.row.fileId)">开始处理
</el‐button>
</template>
</el‐table‐column>
</el‐table>
<!‐‐分页‐‐>
<el‐col :span="24" class="toolbar">
<el‐pagination background layout="prev, pager, next" @current‐change="changePage" :page‐
size="this.params.size"
:total="total" :current‐page="this.params.page"
style="float:right;">
</el‐pagination>
</el‐col>
</div>
</template>
2、数据对象
[AppleScript] 纯文本查看 复制代码 import * as mediaApi from '../api/media'
import utilApi from '@/common/utils';
export default{
data(){
return {
params:{
page:1,//页码
size:2,//每页显示个数
tag:'',//标签
fileName:'',//文件名称
processStatus:''//处理状态
},
listLoading:false,
list:[],
total:0,
processStatusList:[]
}
}
。。。
3、方法
[AppleScript] 纯文本查看 复制代码 methods:{
formatCreatetime(row, column){
var createTime = new Date(row.uploadTime);
if (createTime) {
return utilApi.formatDate(createTime, 'yyyy‐MM‐dd hh:mm:ss');
}
},
formatProcessStatus(row,column){
var processStatus = row.processStatus;
if (processStatus) {
if(processStatus == '303001'){
return "处理中";
}else if(processStatus == '303002'){
return "处理成功";
}else if(processStatus == '303003'){
return "处理失败";
}else if(processStatus == '303004'){
return "无需处理";
}
}
},
changePage(page){
this.params.page = page;
this.query()
},
process (id) {
// console.log(id)
mediaApi.media_process(id).then((res)=>{
console.log(res)
if(res.success){
this.$message.success('开始处理，请稍后查看处理结果');
}else{
this.$message.error('操作失败，请刷新页面重试');
}
})
},
query(){
mediaApi.media_list(this.params.page,this.params.size,this.params).then((res)=>{
console.log(res)
this.total = res.queryResult.total
this.list = res.queryResult.list
})
}
}
...
4、钩子方法
[AppleScript] 纯文本查看 复制代码 created(){
//默认第一页
this.params.page = Number.parseInt(this.$route.query.page||1);
},
mounted() {
//默认查询页面
this.query()
//初始化处理状态
this.processStatusList = [
{
id:'',
name:'全部'
},
{
id:'303001',
name:'处理中'
},
{
id:'303002',
name:'处理成功'
},
{
id:'303003',
name:'处理失败'
},
{
id:'303004',
name:'无需处理'
}
]
}
}
|
收藏
淘帖
踩
