Java的新项目学成在线笔记-day14（七）

2.4 前端开发  2.4.1 API方法  在media模块定义api方法如下：   [AppleScript] 纯文本查看 复制代码 ? 1 2 3 4 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] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <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] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 </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] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 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] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 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] 纯文本查看 复制代码 ? 1 2 3 4 })      }    }    ...