全国咨询热线:400-618-9090

首页技术文章正文

编写page_edit页面

创建时间:2019-01-10 16:51:11.0 来源:黑马程序员

编写page_edit页面 
修改页面的布局同添加页面,可以直接复制添加页面,在添加页面基础上修改。
下边编写页面内容:
1、编写page_edit.vue
页面布局同添加页面,略。
2、配置路由 进入修改页面传入pageId

[AppleScript] 纯文本查看 复制代码
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] 纯文本查看 复制代码
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] 纯文本查看 复制代码
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、测试预览

 
点击“编辑”打开修改页面窗口。  
  3.3.3.2 页面内容显示 
本功能实现:进入修改页面立即显示要修改的页面信息。
1、定义api方法

[AppleScript] 纯文本查看 复制代码
1
2
3
/*页面查询*/ export const page_get = id => {  
return http.requestQuickGet(apiUrl+'/cms/page/get/'+id)
 }

2、定义数据对象 进入修改页面传入pageId参数,在数据模型中添加pageId。

[AppleScript] 纯文本查看 复制代码
1
2
3
4
5
6
7
8
data(){  
    return {     
 ......       
 //页面id     
   pageId:'',   
     ......  
    }
    }

3、在created钩子方法 中查询页面信息

[AppleScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
created: function () {
  //页面参数通过路由传入,这里通过this.$route.params来获取
  this.pageId=this.$route.params.pageId;
   //根据主键查询页面信息 
 cmsApi.page_get(this.pageId).then((res) => {
   console.log(res);  
  if(res.success){  
    this.pageForm = res.cmsPage; 
   }
  });
 }

7、预览页面回显效果

 
3.3.4 Api调用 
1、定义api方法

[AppleScript] 纯文本查看 复制代码
1
2
3
4
/*页面修改,
采用put方法*/ export const page_edit = (id,params) => {
  return http.requestPut(apiUrl+'/cms/page/edit/'+id,params)
 }

2、提交按钮方法
添加提交按钮事件:

[AppleScript] 纯文本查看 复制代码
1
<el‐button type="primary" @click="editSubmit" >提交</el‐button>

3、提交按钮事件内容:

[AppleScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
editSubmit(){
 this.$refs.pageForm.validate((valid) => {
    if (valid) {
     this.$confirm('确认提交吗?', '提示', {}).then(() => {
        cmsApi.page_edit(this.pageId,this.pageForm).then((res) => {  
          console.log(res);       
   if(res.success){     
       this.$message({   
           message: '修改成功',    
          type: 'success'    
        });     
       //自动返回   
         this.go_back()
         }else{      
      this.$message.error('修改失败');  
        }  
      });  
    });   
 }
 });
}

4、测试
修改页面信息,点击提交。                                                                    

作者:黑马程序员JavaEE培训学院
首发:http://java.itheima.com/

在线咨询 我要报名