Java的新專案學成線上筆記-day3(八)
阿新 • • 發佈:2019-01-03
3.3.3 修改頁面 3.3.3.1 編寫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">
<template slot‐scope="page">
<el‐button
size="small"type="text"
@click="edit(page.row.pageId)">編輯
</el‐button>
</template> </el‐table‐column>
編寫edit方法
//修改 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方法
/*頁面查詢*/ export const page_get = id => {
return http.requestQuickGet(apiUrl+'/cms/page/get/'+id)
}
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;
}
});
}
7、預覽頁面回顯效果
3.3.4 Api呼叫
1、定義api方法
/*頁面修改,
採用put方法*/ export const page_edit = (id,params) => {
return http.requestPut(apiUrl+'/cms/page/edit/'+id,params)
}
2、提交按鈕方法
新增提交按鈕事件:
<el‐button type="primary" @click="editSubmit" >提交</el‐button>
3、提交按鈕事件內容:
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、測試
修改頁面資訊,點選提交。