修改页面前端开发

修改页面用户操作流程：

1、用户进入修改页面，在页面上显示了修改页面的信息

2、用户修改页面的内容，点击“提交”，提示“修改成功”或“修改失败”

页面处理流程

页面的处理流程如下：

1、进入页面，通过钩子方法请求服务端获取页面信息，并赋值给数据模型对象

2、页面信息通过数据绑定在表单显示

3、用户修改信息点击“提交”请求服务端修改页面信息接口

编写page_edit页面

修改页面的布局同添加页面，可以直接复制添加页面，在添加页面基础上修改。

下边编写页面内容：

1、编写page_edit.vue

页面布局同添加页面，略。

2、配置路由

进入修改页面传入pageId

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上添加“操作”列

<!--      操作列,跳转到修改界面-->
      <el-table-column label="操作" width="80">
<!--slot-scope:插槽,取得当前行数据,命名为page
    拿到行数据,从行中取出pageid-->
      <template slot-scope="page">
        <el-button
        size="small"type="text"
        @click="edit(page.row.pageId)">编辑
      </template>
      </el-table-column>

编写edit方法

//路由跳转
      edit:function (pageId) {
        //打开修改页面
        this.$router.push({
          path:'/cms/page/edit/'+pageId,
        })
      },

页面内容显示

本功能实现：进入修改页面立即显示要修改的页面信息。

1、定义api方法

export const page_get=(id) => {
  //定义方法,请求服务端站点根据id查询接口,返回结果
  return http.requestQuickGet(apiUrl + '/cms/page/get/' +id);
}

export const page_edit=(id,params) => {
  //定义方法,请求服务端站点修改页面接口,返回结果
  return http.requestPut(apiUrl + '/cms/page/edit/'+id ,params);
}

2、定义数据对象

进入修改页面传入pageId参数，在数据模型中添加pageId。

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

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

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;
}
});
}

4、提交按钮方法

添加提交按钮事件：

<el-button type="primary" @click="editSubmit" >提交</el-button>

3、提交按钮事件内容：

 editSubmit(){
        this.$refs.pageForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.addLoading = true;
              cmsApi.page_edit(this.pageId,this.pageForm).then((res) => {
                console.log(res);
                if(res.success){
                  this.addLoading = false;
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  });
                  //返回
                  this.go_back();
                }else{
                  this.addLoading = false;
                  this.$message.error('提交失败');
                }
              });
            });
          }
        });
      },