編寫page_edit頁面

更新時(shí)間:2019-01-10 來源:黑馬程序員瀏覽量:

編寫page_edit頁面
修改頁面的布局同添加頁面，可以直接復(fù)制添加頁面，在添加頁面基礎(chǔ)上修改。
下邊編寫頁面內(nèi)容：
1、編寫page_edit.vue
頁面布局同添加頁面，略。
2、配置路由進(jìn)入修改頁面?zhèn)魅雙ageId

[AppleScript] 純文本查看復(fù)制代碼

1 2	`import page_edit` `from` `'@/module/cms/page/page_edit.vue';` `{` `path:` `'/cms/page/edit/:pageId',` `name:'修改頁面',component:` `page_edit,hidden:true},`

3、在頁面列表添加“編輯”鏈接參考table組件的例子，在page_list.vue上添加“操作”列

[AppleScript] 純文本查看復(fù)制代碼

1

2

3

4

5

6

7

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

編寫edit方法

[AppleScript] 純文本查看復(fù)制代碼

1

2

3

4

5

6

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

4、測試預(yù)覽

點(diǎn)擊“編輯”打開修改頁面窗口。
3.3.3.2 頁面內(nèi)容顯示
本功能實(shí)現(xiàn)：進(jìn)入修改頁面立即顯示要修改的頁面信息。
1、定義api方法

[AppleScript] 純文本查看復(fù)制代碼

1

2

3

/*頁面查詢*/ export const page_get = id => {  
return http.requestQuickGet(apiUrl+'/cms/page/get/'+id)
 }

2、定義數(shù)據(jù)對象進(jìn)入修改頁面?zhèn)魅雙ageId參數(shù)，在數(shù)據(jù)模型中添加pageId。

[AppleScript] 純文本查看復(fù)制代碼

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

3、在created鉤子方法中查詢頁面信息

[AppleScript] 純文本查看復(fù)制代碼

created: function () {
  //頁面參數(shù)通過路由傳入，這里通過this.$route.params來獲取 
  this.pageId=this.$route.params.pageId;
   //根據(jù)主鍵查詢頁面信息  
 cmsApi.page_get(this.pageId).then((res) => {
   console.log(res);   
  if(res.success){  
    this.pageForm = res.cmsPage;  
   }
  });
 }

7、預(yù)覽頁面回顯效果

3.3.4 Api調(diào)用
1、定義api方法

[AppleScript] 純文本查看復(fù)制代碼

1

2

3

4

/*頁面修改，
采用put方法*/ export const page_edit = (id,params) => {
  return http.requestPut(apiUrl+'/cms/page/edit/'+id,params)
 }

2、提交按鈕方法
添加提交按鈕事件：

[AppleScript] 純文本查看復(fù)制代碼

1	`<el‐button` `type="primary"` `@click="editSubmit"` `>提交</el‐button>`

3、提交按鈕事件內(nèi)容：

[AppleScript] 純文本查看復(fù)制代碼

editSubmit(){
 this.$refs.pageForm.validate((valid) => {
    if (valid) {
     this.$confirm('確認(rèn)提交嗎？', '提示', {}).then(() => {
        cmsApi.page_edit(this.pageId,this.pageForm).then((res) => {  
          console.log(res);        
   if(res.success){     
       this.$message({   
           message: '修改成功',    
          type: 'success'     
        });      
       //自動(dòng)返回    
         this.go_back();  
         }else{      
      this.$message.error('修改失敗');   
        }  
      });   
    });    
 }
 }); 
}