黑马程序员技术交流社区
标题: 【郑州校区】Java的新项目学成在线笔记-day14（七） [打印本页]
作者: 谷粒姐姐 时间: 2019-6-3 10:02
标题: 【郑州校区】Java的新项目学成在线笔记-day14（七）
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">
[AppleScript] 纯文本查看 复制代码
</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" :pagesize="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
[AppleScript] 纯文本查看 复制代码
})
}
}
...
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |