Java's new project learning online notes - day3(8)

3.3.3 modify page 3.3.3.1 write page [Edit]
The layout of the modified page is the same as that of the added page. You can copy the added page directly and modify it based on the added page.
Write page content below:
1. Write page_edit.vue
Page layout is the same as adding pages, omitted.
2. Configure the route to enter the modify page and enter the pageId

import page_edit from '@/module/cms/page/page_edit.vue'; 
{ path: '/cms/page/edit/:pageId', name:'Modify page',component: page_edit,hidden:true},

3. Add the "Edit" link to the page list to refer to the example of table component, and add the "operation" column to the page ﹣ list.vue

<el‐table‐column label="operation" width="80">
  <template slot‐scope="page">
    <el‐button     
 size="small"type="text" 
     @click="edit(page.row.pageId)">edit  
   </el‐button>
  </template> </el‐table‐column>

Write edit method

//modify 
edit:function (pageId) {
  this.$router.push({ path: '/cms/page/edit/'+pageId,query:{ 
   page: this.params.page, 
   siteId: this.params.siteId}})
 }

4. Test Preview

Click "Edit" to open the modify page window.
3.3.3.2 page content display
This function realizes: enter the modification page to display the page information to be modified immediately.
1. Define api methods

/*Page query*/ export const page_get = id => {  
return http.requestQuickGet(apiUrl+'/cms/page/get/'+id)
 }

2. Define the data object to enter the modify page and pass in the pageId parameter to add the pageId in the data model.

data(){  
    return {     
 ......        
 //Page id     
   pageId:'',   
     ......   
    }
    }

3. Query the page information in the created hook method

created: function () {
  //The page parameters are passed in through the route, which is obtained through this.$route.params 
  this.pageId=this.$route.params.pageId;
   //Query page information based on primary key  
 cmsApi.page_get(this.pageId).then((res) => { 
   console.log(res);   
  if(res.success){  
    this.pageForm = res.cmsPage;  
   }
  });
 }

7. Preview page echo effect


3.3.4 Api call
1. Define api methods

/*Page modification,
put method*/ export const page_edit = (id,params) => {
  return http.requestPut(apiUrl+'/cms/page/edit/'+id,params)
 }

2. Submit button method
Add submit button event:

<el‐button type="primary" @click="editSubmit" >Submission</el‐button>

3. Submit button event content:

editSubmit(){ 
 this.$refs.pageForm.validate((valid) => {
    if (valid) { 
     this.$confirm('Are you sure to submit?', 'Tips', {}).then(() => {
        cmsApi.page_edit(this.pageId,this.pageForm).then((res) => {  
          console.log(res);        
   if(res.success){     
       this.$message({   
           message: 'Modified success',    
          type: 'success'     
        });      
       //Automatic return    
         this.go_back();  
         }else{      
      this.$message.error('Modification failed');   
        }  
      });   
    });    
 } 
 }); 
}

4, test
Modify the page information and click Submit.

Tags: Java Vue

Posted on Sat, 30 Nov 2019 13:28:38 -0800 by daanoz