黑马程序员技术交流社区

标题: 【郑州校区】学成在线 第2天 讲义-CMS前端开发 二 [打印本页]
作者: 我是楠楠    时间: 2019-12-5 13:46
标题: 【郑州校区】学成在线 第2天 讲义-CMS前端开发 二
【郑州校区】学成在线 第2天 讲义-CMS前端开发 二

3 CMS前端页面查询开发
3.1 页面原型
3.1.1 创建页面
3.1.1.1 页面结构
在model目录创建 cms模块的目录结构

在page目录新建page_list.vue，扩展名为.vue。
.vue文件的结构如下：

[AppleScript] 纯文本查看 复制代码
<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下配置路由

[AppleScript] 纯文本查看 复制代码
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模块的路由
[AppleScript] 纯文本查看 复制代码
 // // 导入路由规则

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

[AppleScript] 纯文本查看 复制代码
<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页面内容完善
根据需求完善页面内容，完善列表字段，添加分页组件。
[AppleScript] 纯文本查看 复制代码
 <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、测试







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2