Java's new project learning online notes - day2(3)

3.1.3 page content improvement
According to the needs of the page content, improve the list field, add paging components.

<template> 
 <div>  
  <el‐button type="primary" v‐on:click="query"  size="small">query</el‐button>  
<el‐table    
 :data="list"  
  stripe   
  style="width: 100%">   
 <el‐table‐column type="index" width="60">  
  </el‐table‐column> 
   <el‐table‐column prop="pageName" label="page name" width="120"> 
   </el‐table‐column>   
 <el‐table‐column prop="pageAliase" label="alias" width="120"> 
   </el‐table‐column>  
  <el‐table‐column prop="pageType" label="Page type" width="150">  
  </el‐table‐column>   
 <el‐table‐column prop="pageWebPath" label="Access path" width="250"> 
   </el‐table‐column> 
   <el‐table‐column prop="pagePhysicalPath" label="Physical path" width="250"> 
   </el‐table‐column>  
  <el‐table‐column prop="pageCreateTime" label="Creation time" width="180" >
    </el‐table‐column> 
 </el‐table>   
 <el‐pagination  
     layout="prev, pager, next"  
    :page‐size="this.params.size"  
    v‐on:current‐change="changePage"  
    :total="total" :current‐page="this.params.page" style="float:right;">   
 </el‐pagination>  
</div> </template> 
 <script>
  export default { 
   data() {   
   return {  
      list:[],  
      total:50,  
     params:{   
       page:1,//Page number  
         size:2//Number of displays per page      
   }  
    } 
   }, 
   methods:{
      //Paging query

changePage:function () {   
    this.query()
      },  
   //query    
  query:function () {  
     alert("query")   
  } 
  }
  } </script>

2, test

3.2 Api call
3.2.1 Api method definition
Cms.js is defined in the api directory of CMS module, and the following JS method is defined in cms.js. This method implements the http request server page query interface.

//public is the tool class encapsulation of axios,
The HTTP request method import HTTP from '. /.. /.. / base / API / public' export const page ﹐ list = (page, size, params) = > {return http. Requestquickget (' http://localhost:31001/cms/page/list/'+page+'/'+size) }

axios implements the encapsulation of http methods. vue.js does not continue to maintain Vue resource officially. axios is recommended. 3.2.2 Api call
The front-end page imports cms.js and calls JS method to request the server page query interface. 1) import cms.js

import * as cmsApi from '../api/cms'

Calling the page_list method in the query method

//query 
query:function () {
  cmsApi.page_list(this.params.page,this.params.size,this.params).then((res)=>{ 
   console.log(res)    
this.total = res.queryResult.total  
   this.list = res.queryResult.list
  })
}

Tags: Java axios Vue

Posted on Sun, 01 Dec 2019 11:50:49 -0800 by pacome