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

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

<template>
<!
‐‐
编写页面静态部分，即view部分
‐‐
>
测试页面显示
...
</template>
<script>
/
*
编写页面静态部分，即model及vm部分。
*
/
</script>
<style>
/
*
编写页面样式，不是必须
*
/
</style>

在页面的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页面中，如下：

<template>
<div>
<!
‐‐
相当于编写html的内容
‐‐
>
<el
‐
table
:data
=
"
tableData
"
stripe
style
=
"
width: 100%
"
>
<el
‐
table
‐
column
prop
=
"
date
"
label=
"
日期
"
width=
"
180
"
>
</el
‐
table
‐
column>
<el
‐
table
‐
column
prop
=
"
name
"
label=
"
姓名
"
width=
"
180
"
>
</el
‐
table
‐
column>
<el
‐
table
‐
column
prop
=
"
address
"
label=
"
地址
"
>
</el
‐
table
‐
column>
</el
‐
table>
</div>
</template>
<script>
//填写js代码，实现VM的功能，创建vue实例
export default {
data() {
return {
tableData: [{
date:
'
2016
‐
05
‐
02
'
,
name:
'
王小虎
'
,
address:
'
上海市普陀区金沙江路 1518 弄
'
}, {
date:
'
2016
‐
05
‐
04
'
,
name:
'
王小虎
'
,
address:
'
上海市普陀区金沙江路 1517 弄
'
}, {
date:
'
2016
‐
05
‐
01
'
,
name:
'
王小虎
'
,
address:
'
上海市普陀区金沙江路 1519 弄
'
}, {
date:
'
2016
‐
05
‐
03
'
,
name:
'
王小虎
'
,
address:
'
上海市普陀区金沙江路 1516 弄
'
}]
}
}
}
</script>
<style>
/
*
css样式
*
/
</style>

测试：
 

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

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

<template>
<div>
<el
‐
button type
=
"
primary
"
v
‐
on:click=
"
query
"
size
=
"
small
"
>查询</el
‐
button>
<el
‐
table
:data
=
"
list
"
stripe
style
=
"
width: 100%
"
>
<el
‐
table
‐
column type
=
"
index
"
width=
"
60
"
>
</el
‐
table
‐
column>
<el
‐
table
‐
column prop
=
"
pageName
"
label=
"
页面名称
"
width=
"
120
"
>
</el
‐
table
‐
column>
<el
‐
table
‐
column prop
=
"
pageAliase
"
label=
"
别名
"
width=
"
120
"
>
</el
‐
table
‐
column>
<el
‐
table
‐
column prop
=
"
pageType
"
label=
"
页面类型
"
width=
"
150
"
>
</el
‐
table
‐
column>
<el
‐
table
‐
column prop
=
"
pageWebPath
"
label=
"
访问路径
"
width=
"
250
"
>
</el
‐
table
‐
column>
<el
‐
table
‐
column prop
=
"
pagePhysicalPath
"
label=
"
物理路径
"
width=
"
250
"
>
</el
‐
table
‐
column>
<el
‐
table
‐
column prop
=
"
pageCreateTime
"
label=
"
创建时间
"
width=
"
180
"
>
</el
‐
table
‐
column>
</el
‐
table>
<el
‐
pagination
layout
=
"
prev, pager, next
"
:page
‐
size
=
"
this.
params.size
"
v
‐
on:current
‐
change
=
"
changePage
"
:total=
"
total
"
:current
‐
page
=
"
this.
params.
page
"
style
=
"
float:right;
"
>
</el
‐
pagination>
</div>
</template>
<script>
export default {
data() {
return {
list:[],
total:50,
params:{
page:1,//页码
size:2//每页显示个数
}
}
},
methods:{
//分页查询
changePage:function () {
this.
query()
},
//查询
query:function () {
alert(
"
查询
"
)
}
}
}
</script>

2、测试