学成在线 第2天 讲义-CMS前端开发 二

3 CMS前端页面查询开发 
3.1 页面原型 
3.1.1 创建页面
3.1.1.1 页面结构 
在model目录创建 cms模块的目录结构 
 
在page目录新建page_list.vue，扩展名为.vue。
.vue文件的结构如下：

在页面的template中填写 
“
测试页面显示
...
”
。 
注意：template内容必须有
一
个根元素，否则vue会报错，这里我们在template标签内定义
一
个div。 
3.1.1.2 页面路由 
在cms目录下创建page_list.vue页面。 
现在先配置路由，实现url访问到页面再进行内容完善与调试。 
1、在cms的router下配置路由
 

import Home from
'
@/module/home/page/home.vue
'
;
import page_list from
'
@/module/cms/page/page_list.vue
'
;
export default [{
path:
'
/cms
'
,
component: Home,
name:
'
CMS内容管理
'
,
hidden: false,
children:[
{path:
'
/cms/page/list
'
,name:
'
页面列表
'
,component: page_list,hidden:false}
]
}
]

2、在base目录下的router导入cms模块的路由

// // 导入路由规则
import HomeRouter from
'
@/module/home/router
'
import CmsRouter from
'
@/module/cms/router
'
// 合并路由规则
concat(HomeRouter)
concat(CmsRouter)

3、测试 
启动工程，刷新页面，页面可以外正常浏览，并且看到
“
测试页面显示
...
”
字样 
3.1.2 Table组件测试 
3.1.2.1 Element-UI介绍
本项目使用Element-UI来构建界面，Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
Element-UI官方站点：http://element.eleme.io/#/zh-CN/component/installation
3.1.2.2 Table组件测试 
本功能实现的页面列表，用户可以进行分页查询、输入查询条件查询，通过查看Element-UI库，我们需要Table 表格、Form表单 及Pagination 分页组件。
进入Element-UI官方，找到Table组件，拷贝源代码到vue页面中，如下：

测试：
 

通过查看代码发现： 
el-table组件绑定了tableData模型数据。

tableData模型数据在script标签中定义。 
3.1.3页面内容完善 
根据需求完善页面内容，完善列表字段，添加分页组件。

2、测试