学成在线 第3天 讲义-CMS页面管理开发五

3 修改页面 
修改页面用户操作流程： 
1、用户进入修改页面，在页面上显示了修改页面的信息 
2、用户修改页面的内容，点击“提交”，提示“修改成功”或“修改失败”
3.1 修改页面接口定义 
修改页面需要定义的API如下： 

@ApiOperation(
"
通过ID查询页面
"
)
public CmsPage findById(String id);
@ApiOperation(
"
修改页面
"
)
public CmsPageResult edit(String id,CmsPage cmsPage)

说明：提交数据使用post、put都可以，只是根据http方法的规范，put方法是对服务器指定资源进行修改，所以这里使用put方法对页面修改进行修改。
3.2 修改页面服务端开发 
3.2.1Dao 
使用 Spring Data提供的fifindById方法完成根据主键查询 。 
使用 Spring Data提供的save方法完成数据保存 。 
3.2.2Service 

//根据id查询页面
public CmsPage getById(String id){
Optional<CmsPage> optional =
cmsPageRepository
.findById(id);
if(optional.isPresent()){
return optional.
get();
}
//返回空
return null;
}
//更新页面信息
public CmsPageResult update(String id,CmsPage cmsPage) {
//根据id查询页面信息
CmsPage one
=
this.
getById(id);
if (one !
= null) {
//更新模板id
one.setTemplateId(cmsPage.
getTemplateId());
//更新所属站点
one.setSiteId(cmsPage.
getSiteId());
//更新页面别名
one.setPageAliase(cmsPage.
getPageAliase());
//更新页面名称
one.setPageName(cmsPage.
getPageName());
//更新访问路径
one.setPageWebPath(cmsPage.
getPageWebPath());
//更新物理路径
one.setPagePhysicalPath(cmsPage.
getPagePhysicalPath());
//执行更新
CmsPage save
=
cmsPageRepository
.save(one);
if (save !
= null) {
//返回成功
CmsPageResult cmsPageResult
= new CmsPageResult(CommonCode.SUCCESS, save);
return cmsPageResult;
}
}
//返回失败
return new CmsPageResult(CommonCode.FAIL,null);
}

3.2.3Controller 
1、根据id查询页面

@Override
@GetMapping(
"
/get/{id}
"
)
public CmsPage findById(@PathVariable(
"
id
"
) String id) {
return pageService.
getById(id);
}

2、保存页面信息
 

@Override
@PutMapping(
"
/edit/{id}
"
)//这里使用put方法，http 方法中put表示更新
public CmsPageResult edit(@PathVariable(
"
id
"
) String id, @RequestBody CmsPage cmsPage) {
return pageService.update(id,cmsPage);
}

3.3 修改页面前端开发 
3.3.1 页面处理流程 
页面的处理流程如下：
1、进入页面，通过钩子方法请求服务端获取页面信息，并赋值给数据模型对象
2、页面信息通过数据绑定在表单显示 
3、用户修改信息点击“提交”请求服务端修改页面信息接口
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 () {[/size][/font]
[font=微软雅黑][size=3]//页面参数通过路由传入，这里通过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、测试 
修改页面信息，点击提交。