【 CMS页面管理开发 】

1 MognoDB 自定义条件查询

1.1 需求分析

在页面输入查询条件，查询符合条件的页面信息。

查询条件如下：
站点Id：精确匹配
模板Id：精确匹配
页面别名：模糊匹配
…

1.2 服务端

1.2.1 Dao

使用 findAll(Example var1, Pageable var2)方法实现，无需定义。

下边测试 findAll 方法实现自定义条件查询：

    //自定义条件查询测试
    @Test
    public void testFindAll() {
        //条件匹配器
        ExampleMatcher exampleMatcher = ExampleMatcher.matching();
        exampleMatcher = exampleMatcher.withMatcher("pageAliase",
                ExampleMatcher.GenericPropertyMatchers.contains());
        //页面别名模糊查询，需要自定义字符串的匹配器实现模糊查询
        //ExampleMatcher.GenericPropertyMatchers.contains() 包含
        //ExampleMatcher.GenericPropertyMatchers.startsWith()//开头匹配
        
        //条件值
        CmsPage cmsPage = new CmsPage();
        //站点ID
        cmsPage.setSiteId("5a751fab6abb5044e0d19ea1");
        //模板ID
        cmsPage.setTemplateId("5a962c16b00ffc514038fafd");
        // cmsPage.setPageAliase("分类导航");
        //创建条件实例
        Example<CmsPage> example = Example.of(cmsPage, exampleMatcher);
        Pageable pageable = new PageRequest(0, 10);
        Page<CmsPage> all = cmsPageRepository.findAll(example, pageable);
        System.out.println(all);
    }

1.2.2 Service

在 PageService 的 findlist 方法中增加自定义条件查询代码

    /**
     * 页面查询方法
     * @param page 页码，从1开始记数;但是调用dao时是从0开始
     * @param size 每页记录数
     * @param queryPageRequest 查询条件
     * @return
     */
    public QueryResponseResult findList(int page, int size, QueryPageRequest queryPageRequest){
        if(queryPageRequest == null){
            queryPageRequest = new QueryPageRequest();
        }
        //自定义条件查询
        //定义条件匹配器
        ExampleMatcher exampleMatcher = ExampleMatcher.matching()
                .withMatcher("pageAliase", ExampleMatcher.GenericPropertyMatchers.contains());
        //条件值对象
        CmsPage cmsPage = new CmsPage();
        //设置条件值（站点id）
        if(StringUtils.isNotEmpty(queryPageRequest.getSiteId())){
            cmsPage.setSiteId(queryPageRequest.getSiteId());
        }
        //设置模板id作为查询条件
        if(StringUtils.isNotEmpty(queryPageRequest.getTemplateId())){
            cmsPage.setTemplateId(queryPageRequest.getTemplateId());
        }
        //设置页面别名作为查询条件
        if(StringUtils.isNotEmpty(queryPageRequest.getPageAliase())){
            cmsPage.setPageAliase(queryPageRequest.getPageAliase());
        }
        //定义条件对象Example
        Example<CmsPage> example = Example.of(cmsPage,exampleMatcher);
        //分页参数
        if(page <=0){
            page = 1;
        }
        page = page -1;
        if(size<=0){
            size = 10;
        }
        Pageable pageable = PageRequest.of(page,size);
        Page<CmsPage> all = cmsPageRepository.findAll(example, pageable); // 实现自定义条件查询并且分页查询
        QueryResult queryResult = new QueryResult();
        queryResult.setList(all.getContent()); // 数据列表
        queryResult.setTotal(all.getTotalElements()); // 数据总记录数
        QueryResponseResult queryResponseResult = new QueryResponseResult(CommonCode.SUCCESS,queryResult);
        return queryResponseResult;
    }

1.2.3 Controller

无需修改

1.2.4 测试

使用SwaggerUI测试

1.3 前端

直接打开资料中的即可

1.3.1 页面

1、增加查询表单

    
    <el-form :model="params">
      <el-select v-model="params.siteId" placeholder="请选择站点">
        <el-option
          v-for="item in siteList"
          :key="item.siteId"
          :label="item.siteName"
          :value="item.siteId">
        el-option>
      el-select>
      页面别名：<el-input v-model="params.pageAliase"  style="width: 100px">el-input>
      <el-button type="primary" size="small" v-on:click="query">查询el-button>
    el-form>

2、数据模型对象
增加siteList、pageAliase、siteId，如下：

    data() {
      return {
        siteList:[],//站点列表
        list: [],
        total:0,
        params:{

          siteId:'',
          pageAliase:'',
          page:1,
          size:10
        }
      }
    }

3、在钩子方法中 构建siteList站点列表

    mounted(){
      //当DOM元素渲染完成后调用query
      this.query()
      //初始化站点列表
      this.siteList = [
        {
          siteId:'5a751fab6abb5044e0d19ea1',
          siteName:'门户主站'
        },
        {
          siteId:'102',
          siteName:'测试站'
        }
      ]
    }

1.3.2 Api调用

1、向服务端传递查询条件，修改 cms.js，如下：

import http from './../../../base/api/public'
import querystring from 'querystring'
let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre;

//页面查询
export const page_list = (page,size,params) =>{
  //将params对象数据拼装成key/value串
  let queryString =  querystring.stringify(params);
  //请求服务端的页面查询接口
  return http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'/'+size+"?"+queryString);
}

2、页面调用api方法

      //页面查询
      query:function(){
        // alert('查询')
        //调用服务端的接口
        cmsApi.page_list(this.params.page,this.params.size,this.params).then((res)=>{
          //将res结果数据赋值给数据模型对象
          this.list = res.queryResult.list;
          this.total = res.queryResult.total;
        })

      }

测试如下：

2 新增页面

2.1 新增页面接口定义

1、定义响应模型

/**
 * Created by mrt on 2018/3/31.
 */
@Data
public class CmsPageResult extends ResponseResult {
    CmsPage cmsPage;
    public CmsPageResult(ResultCode resultCode,CmsPage cmsPage) {
        super(resultCode);
        this.cmsPage = cmsPage;
    }
}

2、定义添加Api
在api工程中添加接口：

    //新增页面
    @ApiOperation("新增页面")
    public CmsPageResult add(CmsPage cmsPage);

2.2 新增页面服务端开发

2.2.1 页面唯一索引

在 cms_page集合 上创建页面名称、站点Id、页面webpath为唯一索引

2.2.2 Dao

1、添加根据页面名称、站点Id、页面webpath查询页面方法，此方法用于校验页面是否存在

public interface CmsPageRepository extends MongoRepository<CmsPage, String> {

    //根据页面名称、站点Id、页面webpath查询
    CmsPage findByPageNameAndSiteIdAndPageWebPath(String pageName, String siteId, String pageWebPath);
}

2、使用 CmsPageRepository 提供的 save 方法 。

2.2.3 Service

    // 新增页面
    public CmsPageResult add(CmsPage cmsPage){
        //校验页面名称、站点Id、页面webpath的唯一性
        //根据页面名称、站点Id、页面webpath去cms_page集合，如果查到说明此页面已经存在，如果查询不到再继续添加
        CmsPage cmsPage1 = cmsPageRepository.findByPageNameAndSiteIdAndPageWebPath(cmsPage.getPageName(), cmsPage.getSiteId(), cmsPage.getPageWebPath());
        if(cmsPage1==null){
            //调用dao新增页面
            cmsPage.setPageId(null);
            cmsPageRepository.save(cmsPage);
            return new CmsPageResult(CommonCode.SUCCESS,cmsPage);
        }
        //添加失败
        return new CmsPageResult(CommonCode.FAIL,null);
    }

2.2.4 Controller

    // 添加页面
    @Override
    @PostMapping("/add")
    public CmsPageResult add(@RequestBody CmsPage cmsPage) {
        return pageService.add(cmsPage);
    }

2.2.5 接口测试

成功响应结果：

失败响应结果：

2.3 新增页面前端开发

2.3.1 新增页面

2.3.1.1 编写page_add.vue页面

使用Element-UI的form组件编写添加表单内容，页面效果如下：

1、创建page_add.vue页面

2、配置路由
在cms模块的路由文件中配置“添加页面”的路由：

{path:'/cms/page/add',name:'新增页面',component: page_add,hidden:true}

注意：由于“添加页面”不需要显示为一个菜单，这里hidden设置为true隐藏菜单。

测试，在浏览器地址栏输入http://localhost:11000/#/cms/page/add

3、在页面列表添加“添加页面”的按钮

实际情况是用户进入页面查询列表，点击“新增页面”按钮进入新增页面窗口。

在查询按钮的旁边添加：

      <router-link :to="{path:'/cms/page/add',query:{
        page:this.params.page,
        siteId:this.params.siteId
      }}">
         <el-button  type="primary" size="small">新增页面</el-button>
      </router-link>

说明：router-link是vue提供的路由功能，用于在页面生成路由链接，最终在html渲染后就是 to：目标路由地址

4、完善页面内容
代码如下：

<template>
<div>
  <el-form   :model="pageForm" label-width="80px" :rules="pageFormRules" ref="pageForm">
    <el-form-item label="所属站点" prop="siteId">
      <el-select v-model="pageForm.siteId" placeholder="请选择站点">
        <el-option
          v-for="item in siteList"
          :key="item.siteId"
          :label="item.siteName"
          :value="item.siteId">
        el-option>
      el-select>
    el-form-item>
    <el-form-item label="选择模版" prop="templateId">
      <el-select v-model="pageForm.templateId" placeholder="请选择">
        <el-option
          v-for="item in templateList"
          :key="item.templateId"
          :label="item.templateName"
          :value="item.templateId">
        el-option>
      el-select>
    el-form-item>
    <el-form-item label="页面名称" prop="pageName">
      <el-input v-model="pageForm.pageName" auto-complete="off" >el-input>
    el-form-item>

    <el-form-item label="别名" prop="pageAliase">
      <el-input v-model="pageForm.pageAliase" auto-complete="off" >el-input>
    el-form-item>
    <el-form-item label="访问路径" prop="pageWebPath">
      <el-input v-model="pageForm.pageWebPath" auto-complete="off" >el-input>
    el-form-item>

    <el-form-item label="物理路径" prop="pagePhysicalPath">
      <el-input v-model="pageForm.pagePhysicalPath" auto-complete="off" >el-input>
    el-form-item>

    <el-form-item label="类型">
      <el-radio-group v-model="pageForm.pageType">
        <el-radio class="radio" label="0">静态el-radio>
        <el-radio class="radio" label="1">动态el-radio>
      el-radio-group>
    el-form-item>
    <el-form-item label="创建时间">
      <el-date-picker type="datetime" placeholder="创建时间" v-model="pageForm.pageCreateTime">el-date-picker>
    el-form-item>

  el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="addSubmit" >提交el-button>
    <el-button type="primary" @click="go_back" >返回el-button>
  div>
div>
template>

Form Attributes说明：

• model 表单数据对象
• rules 表单验证规则

Form-Item Attributes说明：

• prop 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
• label 标签文本

详情属性及事件参考http://element.eleme.io/#/zh-CN/component/form

5、数据对象

    data() {
      return {
        siteList:[],
        templateList:[],
        pageForm:{
          siteId:'',
          templateId:'',
          pageName: '',
          pageAliase: '',
          pageWebPath: '',
          pageParameter:'',
          pagePhysicalPath:'',
          pageType:'',
          pageCreateTime: new Date()
        }
      }
    },
    methods:{
      addSubmit:function(){
        alert("提交")
      }
  }

6、站点及模板数据（先使用静态数据）
在created钩子方法中定义，created是在html渲染之前执行，这里推荐使用created。

created:function(){
  //初始化站点列表
  this.siteList = [
    {
      siteId:'5a751fab6abb5044e0d19ea1',
      siteName:'门户主站'
    },
    {
      siteId:'102',
      siteName:'测试站'
    }
  ]
  //模板列表
  this.templateList = [
    {
      templateId:'5a962b52b00ffc514038faf7',
      templateName:'首页'
    },
    {
      templateId:'5a962bf8b00ffc514038fafa',
      templateName:'轮播图'
    }
  ]
}

7、测试预览
新增页面按钮：

2.3.1.2 添加返回

进入新增页面后只能通过菜单再次进入页面列表，可以在新增页面添加“返回”按钮，点击返回按钮返回到页面列表。

1. 新增页面按钮带上参数

      <router-link :to="{path:'/cms/page/add',query:{
        page:this.params.page,
        siteId:this.params.siteId
      }}">
         <el-button  type="primary" size="small">新增页面</el-button>
      </router-link>

说明：query表示在路由url上带上参数

2）定义返回方法
在page_add.vue上定义返回按钮

<el-button type="primary" @click="go_back" >返回</el-button>

在page_add.vue上定义返回方法

      //返回
      go_back:function () {
        this.$router.push({
          path:'/cms/page/list',
          query:{
            page:this.$route.query.page,//取出路由中的参数
            siteId:this.$route.query.siteId
          }
        })
      }

说明：this.$route.query 表示取出路由上的参数列表，有两个取路由参数的方法：

a、通过在路由上添加key/value串使用this.$route.query来取参数，例如：/router1?id=123 ,/router1?id=456 可以通过this.$route.query.id获取参数id的值。
b、通过将参数作为路由一部分进行传参数使用this.$route.params来获取，例如：定义的路由为/router1/:id ，请求/router1/123时可以通过this.$route.params.id来获取，此种情况用this.$route.query.id是拿不到的。

3）查询列表支持回显
进入查询列表，从url中获取页码和站点id并赋值给数据模型对象，从而实现页面回显。

url例子：http://localhost:12000/#/cms/page/list?page=2&siteId=5a751fab6abb5044e0d19ea1

created() {
  //从路由上获取参数
  this.params.page = Number.parseInt(this.$route.query.page||1);
  this.params.siteId = this.$route.query.siteId||'';
  .....

小技巧：使用 ||返回第一个有效值

2.3.1.3 表单校验

1、配置校验规则：
Element-UI 的 Form 组件提供表单校验的方法：
在 form 属性上配置 rules（表单验证规则）

<el‐form :model="pageForm" :rules="pageFormRules" label‐width="80px" >

在数据模型中配置校验规则：

        pageFormRules: {
          siteId:[
            {required: true, message: '请选择站点', trigger: 'blur'}
          ],
          templateId:[
            {required: true, message: '请选择模版', trigger: 'blur'}
          ],
          pageName: [
            {required: true, message: '请输入页面名称', trigger: 'blur'}
          ],
          pageWebPath: [
            {required: true, message: '请输入访问路径', trigger: 'blur'}
          ],
          pagePhysicalPath: [
            {required: true, message: '请输入物理路径', trigger: 'blur'}
          ]
        }

更多的校验规则参考 http://element.eleme.io/#/zh-CN/component/form 中“表单验证”的例子。

2、点击提交按钮触发校验
1)在form表单上添加 ref属性（ref=“pageForm”）在校验时引用此表单对象

<el‐form :model="pageForm" :rules="pageFormRules" label‐width="80px" ref="pageForm">

2）执行校验

this.$refs.pageForm.validate((valid) => {
  if (valid) {
    alert('提交');
  } else {
    alert('校验失败');
  return false;
  }
})

2.3.2 Api调用

1、在cms.js中定义page_add方法。

//新增页面
export const page_add = params =>{
  return http.requestPost(apiUrl+'/cms/page/add',params)
}

2、添加事件
本功能使用到两个UI组件：
1、使用element-ui的message-box组件弹出确认提交窗口（http://element.eleme.io/#/zhCN/component/message-box）。

this.$confirm('确认提交吗？', '提示', {}).then(() => {｝）

2、使用 message组件提示操作结果 （http://element.eleme.io/#/zh-CN/component/message）

this.$message({
  message: '提交成功',
  type: 'success'
})

完整的代码如下：

      addSubmit:function(){
        this.$refs['pageForm'].validate((valid) => {
          if (valid) {//表单校验成功
            //确认提示
            this.$confirm('您确认提交吗?', '提示', { }).then(() => {
              //调用page_add方法请求服务端的新增页面接口
              cmsApi.page_add(this.pageForm).then(res=>{
                //解析服务端响应内容
                if(res.success){
                  /*this.$message({
                    message: '提交成功',
                    type: 'success'
                  })*/
                  this.$message.success("提交成功")
                  //将表单清空
                  this.$refs['pageForm'].resetFields();
                }else if(res.message){
                  this.$message.error(res.message)
                }else{
                  this.$message.error("提交失败")
                }
              });
            })

          }
        });
      }

下边是测试：
1、进入页面列表页面

2、点击“增加页面”按钮

3、输入页面信息点击“提交”

测试：

再次提交：

3 修改页面

修改页面用户操作流程：
1、用户进入修改页面，在页面上显示了修改页面的信息
2、用户修改页面的内容，点击“提交”，提示“修改成功”或“修改失败”

3.1 修改页面接口定义

修改页面需要定义的API如下：

    //根据页面id查询页面信息
    @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提供的findById方法完成根据主键查询 。
使用 Spring Data提供的save方法完成数据保存 。

3.2.2Service

    //根据页面id查询页面
    public CmsPage getById(String id){
        Optional<CmsPage> optional = cmsPageRepository.findById(id);
        if(optional.isPresent()){
            CmsPage cmsPage = optional.get();
            return cmsPage;
        }
        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());
            //提交修改
            cmsPageRepository.save(one);
            return new CmsPageResult(CommonCode.SUCCESS,one);
        }
        //修改失败
        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);
    }

测试：使用 Swagger UI 测试

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

4、测试预览

点击“编辑”打开修改页面窗口。

3.3.3.2 页面内容显示

本功能实现：进入修改页面立即显示要修改的页面信息。
1、定义api方法

//根据id查询页面
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.pageId=this.$route.params.pageId;
      //根据主键查询页面信息
      cmsApi.page_get(this.pageId).then((res) => {
        console.log(res);
        if(res){
          this.pageForm = res;
        }
      });
    }

7、预览页面回显效果

3.3.4 Api调用

1、定义api方法

//修改页面提交
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(() => {
              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('提交失败');
                }
              });
            });
          }
        });
      }

    }

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

4 删除页面

用户操作流程：
1、用户进入用户列表，点击“删除”
2、执行删除操作，提示“删除成功”或“删除失败”

4.1 删除页面接口定义

    //删除页面
    @ApiOperation("删除页面")
    public ResponseResult delete(String id);

4.2 删除页面服务端开发

4.2.1Dao

使用 Spring Data提供的deleteById方法完成删除操作 。

4.2.2 Service

    //根据id删除页面
    public ResponseResult delete(String id){
        //先查询一下
        Optional<CmsPage> optional = cmsPageRepository.findById(id);
        if(optional.isPresent()){
            cmsPageRepository.deleteById(id);
            return new ResponseResult(CommonCode.SUCCESS);
        }
        return new ResponseResult(CommonCode.FAIL);
    }

4.2.3 Controller

    @Override
    @DeleteMapping("/del/{id}")
    public ResponseResult delete(@PathVariable("id") String id) {
        return pageService.delete(id);
    }

4.3 删除页面前端开发

4.3.1 Api方法

/*页面删除*/
export const page_del = id => {
  return http.requestDelete(apiUrl+'/cms/page/del/'+id)
}

4.3.2编写页面

1、在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>
          <el-button
            size="small"type="text"
            @click="del(page.row.pageId)">删除
          </el-button>
        </template>

      </el-table-column>

2、删除事件

      //删除
      del:function (pageId) {
        this.$confirm('您确认删除吗?', '提示', { }).then(() => {

          //调用服务端接口
          cmsApi.page_del(pageId).then(res=>{

            if(res.success){
              this.$message.success("删除成功")
              //刷新页面
              this.query()
            }else{
              this.$message.error("删除失败")
            }
          })
        })

      }
    },

5 实战

此部分为自学内容，根据今天所学知识完成下边的任务。

5.1 查询条件完善

页面查询条件增加：页面名称、页面类型。
页面名称对应CmsPage模型类中的pageName属性。
页面类型对应CmsPage模型类中的pageType属性。
查询要求：
页面名称：模糊查询
页面类型：精确匹配，页面类型包括：静态和动态，在数据库中静态用“0”表示，动态用“1”表示。

5.2 页面属性增加DataUrl

在CmsPage.java模型类型中有一个dataUrl属性，此属性在页面静态化时需要填写。
本需求要求：
1、在新增页面增加dataUrl输入框，并支持添加。
2、在修改页面增加dataUrl输入框，并支持修改