黑马程序员技术交流社区

标题: 【郑州校区】学成在线 第3天 讲义-CMS页面管理开发三 [打印本页]
作者: 我是楠楠    时间: 2019-12-5 14:43
标题: 【郑州校区】学成在线 第3天 讲义-CMS页面管理开发三
【郑州校区】学成在线 第3天 讲义-CMS页面管理开发三

2.3 新增页面前端开发
2.3.1 新增页面
2.3.1.1 编写page_add.vue页面
使用Element-UI的form组件编写添加表单内容，页面效果如下：

1、创建page_add.vue页面
2、配置路由
在cms模块的路由文件中配置“添加页面”的路由：

[AppleScript] 纯文本查看 复制代码
{path:'/cms/page/add',name:'新增页面',component: page_add,hidden:true}

注意：由于“添加页面”不需要显示为一个菜单，这里hidden设置为true隐藏菜单。
测试，在浏览器地址栏输入http://localhost:11000/#/cms/page/add
3、在页面列表添加“添加页面”的按钮实际情况是用户进入页面查询列表，点击“新增页面”按钮进入新增页面窗口。
在查询按钮的旁边添加：

[AppleScript] 纯文本查看 复制代码
<router

‐

link class

=

"

mui

‐

tab

‐

item

"

:to

=

"

{path:

'

/cms/page/add/

'

}

"

>

<el

‐

button type

=

"

primary

"

size

=

"

small

"

>新增页面</el

‐

button>

</router

‐

link>

说明：router-link是vue提供的路由功能，用于在页面生成路由链接，最终在html渲染后就是<a标签。
to：目标路由地址
4、完善页面内容：
代码如下：

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

</div>

Form Attributes说明：
model 表单数据对象
rules 表单验证规则
Form-Item Attributes说明：
prop 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
label 标签文本
详情属性及事件参考http://element.eleme.io/#/zh
-
CN/component/form
5、数据对象

[AppleScript] 纯文本查看 复制代码
data(){

return {

//站点列表

siteList:[],

//模版列表

templateList:[],

//新增界面数据

pageForm: {

siteId:

''

,

templateId:

''

,

pageName:

''

,

pageAliase:

''

,

pageWebPath:

''

,

pageParameter:

''

,

pagePhysicalPath:

''

,

pageType:

''

,

pageCreateTime: new Date()

}

}

},

methods:{

addSubmit(){

alert(

"

提交

"

)

}

}

6、站点及模板数据（先使用静态数据）
在created钩子方法中定义，created是在html渲染之前执行，这里推荐使用created。
[AppleScript] 纯文本查看 复制代码
 created:function(){

[mw_shl_code=applescript,true]//初始化站点列表

this.siteList

=

[

{

siteId:

'

5a751fab6abb5044e0d19ea1

'

,

siteName:

'

门户主站

'

},

{

siteId:

'

102

'

,

siteName:
'
测试站
'
}
]
//模板列表
this.templateList
=
[
{
templateId:
'
5a962b52b00ffc514038faf7
'
,
templateName:
'
首页
'
},
{
templateId:
'
5a962bf8b00ffc514038fafa
'
,
templateName:
'
轮播图
'
}
]
}[/mw_shl_code]

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







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