创建组件

页面效果

​

创建page_add.vue页面

配置路由

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

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

注意：由于“添加页面”不需要显示为一个菜单，这里hidden设置为true隐藏菜单。 测试，在浏览器地址栏输入http://localhost:11000/#/cms/page/add

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

实际情况是用户进入页面查询列表，点击“新增页面”按钮进入新增页面窗口。 在查询按钮的旁边添加：

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

:to为点击后跳转到相应路由

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

page_add页面

<!--    pageForm就是page绑定的数据对象的名称-->
    <el-form :model="pageForm"  label-width="80px" >
      <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>
<!--      作用是不想添加的话,返回到之间的列表页,而不是默认返回到page列表的第一页-->
<!--      总的说,就是返回之后列表页面的信息还在,选择过的东西,所处的页数等等-->
      <el-button type="primary" @click="go_back">返回</el-button>
    </div>

数据对象

data() {
      return {
        siteTotal: 0,
        templateTotal:0,
        pageForm: {
          siteId: '',
          templateId: '',
          pageName: '',
          pageAliase: '',
          pageWebPath: '',
          pageParameter: '',
          pagePhysicalPath: '',
          pageType: '',
          pageCreateTime: new Date()
        },
        siteList: [],
        templateList: {
          templateId: '',
          templateName: ''
        },
        params:{
          page: 1,
          size: 10
        }
        }
    },

methods方法

 methods:{
      addSubmit(){
        alert("提交")
      },
      //查询站点列表
      querySite:function () {
        //调用Api接口
        cmsApi.page_site(this.params.page, this.params.size).then((res)=>{
          //将结果数据给数据模型对象
          this.siteTotal=res.queryResult.total;
          this.siteList=res.queryResult.list;
        });
      },
      //查询模板列表
      queryTemplate:function () {
        //调用Api接口
        cmsApi.page_template(this.params.page, this.params.size).then((res)=>{
          //将结果数据给数据模型对象
          this.templateTotal=res.queryResult.total;
          this.templateList=res.queryResult.list;
        });
      },
      go_back:function () {
        this.$router.push({
          path:'/cms/page/list/',
          query:{
            page:this.$route.query.page,
            siteId:this.$route.query.siteId,
          }
        })
      }
    },

querySite:查询站点列表 queryTemplate:查询模板列表

go_back:返回page列表页面

钩子函数内容

  created() {
//站点列表
      this.querySite();
//模板列表
      this.queryTemplate();
    }

在未渲染时就调用上述方法.

完善页面

<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上带上参数

go_back:function () {
        this.$router.push({
          path:'/cms/page/list/',
          query:{
            page:this.$route.query.page,
            siteId:this.$route.query.siteId,
          }
        })
      }

返回之前路由

注意: 上述两个代码段,router-link在page_list页面,作用为跳转到相应路由界面,query表示在url上带上相应的参数,

page_add中的go_back方法中.也加入query属性,表示获取到路由上的参数并且再返回时赋值到page_list页面

说明：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是拿不到的。

查询列表支持回显

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

小技巧:

||表示取第一个为真的值,前面为真就赋值,否则,去后面的1

表单校验

1、配置校验规则：

Element-UI的Form组件提供表单校验的方法：

在form属性上配置rules（表单验证规则）

 <el-form :model="pageForm" :rules="pageFormRules" ref="pageForm" 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'}
]
}

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

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组件弹出确认提交窗口

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

2、使用 message组件提示操作结果

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

完整的代码如下：

addSubmit(formName){
        this.$refs['pageForm'].validate((valid) => {
          if (valid) {
            //加一个确认提示,参见element-ui
            this.$confirm('您确认提交吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              //调用服务端请求新增页面接口
              cmsApi.page_add(this.pageForm).then(res=>{
                //解析响应内容
                if (res.success){
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  })
                  //清空表单
                  this.$refs['pageForm'].resetFields();
                }else {
                  /*this.$message({
                    message: '提交失败',
                    type: 'error'
                  })*/
                  //等效下面
                  this.$message.error("提交失败");
                }
              })
            })
          } else {
            console.log('校验失败');
            return false;
          }
        });
      },