day03_Vue_Element
1 Ajax
1 . 1 Ajax介绍
1 1 . 1 . 1 Ajax概 述
我们前端页面中的数据 ， 如下图所示的表格中的学生信息 ， 应该来自于后台 ， 那么我们的 后台和前端是互不影响的2个程序 ， 那么我们前端应该如何从后台获取数据呢 ？ 因为是2个 程 序 ， 所 以 必 须 涉 及 到 2 个 程 序 的 交 互 ， 所 以 这 就 需 要 用 到 我 们 接 下 来 学 习 的 Ajax技 术 。
Ajax : 全 称 A sy n c h ro n o u s Java S c r ipt A nd XML ， 异 步 的 Java S c r ipt 和 XML 。 其 作 用有如下2点 ：
· 与 服 务 器 进 行 数 据 交 换 ： 通 过 Ajax 可 以 给 服 务 器 发 送 请 求 ， 并 获 取 服 务 器 响 应 的 数 据 。
· 异 步 交 互 ： 可 以 在 不 重 新 加 载 整 个 页 面 的 情 况 下 ， 与 服 务 器 交 换 数 据 并 更 新 部 分 网 页 的技术 ， 如 ： 搜索联想 、 用户名是否可用的校验等等 。
1 1 . 1 . 2 Ajax作 用
我 们 详 细 的 解 释 一 下 Ajax技 术 的 2 个 作 用
与 服 务 器 进 行 数 据 交 互
如 下 图 所 示 前 端 资 源 被 浏 览 器 解 析 ， 但 是 前 端 页 面 上 缺 少 数 据 ， 前 端 可 以 通 过 Ajax技 术 ， 向后台服务器发起请求 ， 后台服务器接受到前端的请求 ， 从数据库中获取前端需 要 的 资 源 ， 然 后 响 应 给 前 端 ， 前 端 在 通 过 我 们 学 习 的v u e技 术 ， 可 以 将 数 据 展 示 到 页 面 上 ， 这 样 用 户 就 能 看 到 完 整 的 页 面 了 。 此 处 可 以 对 比 Java SE 中 的 网 络 编 程 技 术 来 理 解 。
· 异 步 交 互 ： 可 以 在 不 重 新 加 载 整 个 页 面 的 情 况 下 ， 与 服 务 器 交 换 数 据 并 更 新 部 分 网 页 的技术 。
如 下 图 所 示 ， 当 我 们 再 百 度 搜 索java 时 ， 下 面 的 联 想 数 据 是 通 过 Ajax 请 求 从 后 台 服 务 器 得 到 的 ， 在 整 个 过 程 中 ， 我 们 的 Ajax 请 求 不 会 导 致 整 个 百 度 页 面 的 重 新 加 载 ， 并 且 只针对搜索栏这局部模块的数据进行了数据的更新 ， 不会对整个页面的其他地方进行 数据的更新 ， 这样就大大提升了页面的加载速度 ， 用户体验高 。
1 . 1 . 3 同 步 异 步
针 对 于 上 述 Ajax 的 局 部 刷 新 功 能 是 因 为 Ajax 请 求 是 异 步 的 ， 与 之 对 应 的 有 同 步 请 求 。 接 下 来我们介绍一下异步请求和同步请求的区别 。
· 同 步 请 求 发 送 过 程 如 下 图 所 示 ：
浏览器页面在发送请求给服务器 ， 在服务器处理请求的过程中 ， 浏览器页面不能做其 他的操作 。 只能等到服务器响应结束后才能 ， 浏览器页面才能继续做其他的操作 。
· 异 步 请 求 发 送 过 程 如 下 图 所 示 ：
浏览器页面发送请求给服务器 ， 在服务器处理请求的过程中 ， 浏览器页面还可以做其 他的操作 。
1 . 2 原生Ajax
对 于 Ajax技 术 有 了 充 分 的 认 知 了 ， 我 们 接 下 来 通 过 代 码 来 演 示 Ajax 的 效 果 。 此 处 我 们 先 采 用 原 生 的 Ajax代 码 来 演 示 。 因 为 Ajax 请 求 是 基 于 客 户 端 发 送 请 求 ， 服 务 器 响 应 数 据 的 技 术 。 所以为了完成快速入门案例 ， 我们需要提供服服务器端和编写客户端 。
服 务 器 端
因为我们暂时还没学过服务器端的代码 ， 所以此处已经直接提供好了服务器端的请求
上述地址我们也可以直接通过浏览器来访问 ， 访问结果如图所示 ： 只截取部分数据
· 客 户 端
客 户 端 的 Ajax 请 求 代 码 如 下 有 如 下 4 步 ， 接 下 来 我 们 跟 着 步 骤 一 起 操 作 一 下 。
第 一 步 ： 首 先 我 们 再 VS C od e 中 创 建 AJAX 的 文 件 夹 ， 并 且 创 建 名 为 0 1 . Ajax - 原 生 方 式 . ht m l 的 文 件 ， 提 供 如 下 代 码 ， 主 要 是 按 钮 绑 定 单 击 事 件 ， 我 们 希 望 点 击 按 钮 ， 来 发 送 ajax 请 求
< ! DO CTYPE ht m l >
< ht m l l a n g = "en " >
< h e a d >
< m et a c h a r s et = "UTF- 8 " >
< m et a htt p - e q u i v = "X- UA-Compatible " c o nt e nt = "IE =edge " >
< m et a n a m e = "view port " c o nt e nt = "width=device -width, initial- scale = 1. 0 " >
< titl e >原 生 Aj ax </ titl e >
< / h e a d >
< b o dy >
< i n p ut typ e = "button " v a l u e = "获取数据 " o n c li c k = "get Data() " >
< div i d = "div 1 " > </ div >
< / b o dy >
< s c r ipt >
f u n cti o n g et D at a ( ) {
}
< / s c r ipt >
< / ht m l >
第 二 步 ： 创 建 XMLHttpRe q u e st 对 象 ， 用 于 和 服 务 器 交 换 数 据 ， 也 是 原 生 Ajax 请 求 的核心对象 ， 提供了各种方法 。 代码如下 ：
//1. 创建XMLHttpRequest
v a r x m l Htt p Re q u e st = n ew X M L Htt p Re q u e st ( );
第 三 步 ： 调 用 对 象 的o p e n( ) 方 法 设 置 请 求 的 参 数 信 息 ， 例 如 请 求 地 址 ， 请 求 方 式 。 然 后 调 用 s e n d ( ) 方 法 向 服 务 器 发 送 请 求 ， 代 码 如 下 ：
//2. 发送异步请求
x m l Htt p Re q u e st . o p e n ( 'GET ', 'http://yap i. smart-
x work. cn/mock/169327/emp/list ') ;
x m l Htt p Re q u e st . s e n d ( );//发送请求
第四步 ： 我们通过绑定事件的方式 ， 来获取服务器响应的数据 。
//3. 获取服务响应数据
x m l Htt p Re q u e st . o n r e a dy st at e c h a n g e = f u n cti o n ( ) {
//此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应， 200表示这是一个
正确的Http请求，没有错误
if ( x m l Htt p Re q u e st . r e a dy St at e = = 4 & & x m l Htt p Re q u e st . st at u s = = 2 0 0 ) {
d o c u m e nt . g et El e m e nt By Id ( 'div 1 ') .i n n e r HT M L =
x m l Htt p Re q u e st . r e s p o n s e Tex t ;
}
}
最 后 我 们 通 过 浏 览 器 打 开 页 面 ， 请 求 点 击 按 钮 ， 发 送 Ajax 请 求 ， 最 终 显 示 结 果 如 下 图 所 示 ：
并 且 通 过 浏 览 器 的 f1 2 抓 包 ， 我 们 点 击 网 络 中 的 X HR 请 求 ， 发 现 可 以 抓 包 到 我 们 发 送 的 Ajax 请 求 。 X HR 代 表 的 就 是 异 步 请 求
1 . 3 Axi os
上 述 原 生 的 Ajax 请 求 的 代 码 编 写 起 来 还 是 比 较 繁 琐 的 ， 所 以 接 下 来 我 们 学 习 一 门 更 加 简 单 的 发 送 Ajax 请 求 的 技 术 Axi o s 。 Axi o s是 对 原 生 的 AJAX 进 行 封 装 ， 简 化 书 写 。 Axi o s 官 网 是 ： http s :/ / www . a x i o s -http . c n
1 . 3 . 1 Axi os的 基 本 使 用
Axi o s 的 使 用 比 较 简 单 ， 主 要 分 为 2 步 ：
引 入 Axi o s 文 件
< s c r ipt s r c = "js/a xios - 0. 18. 0.js " > </ s c r ipt >
· 使 用 Axi o s发 送 请 求 ， 并 获 取 响 应 结 果 ， 官 方 提 供 的a pi 很 多 ， 此 处 给 出 2 种 ， 如 下
○ 发 送 g et 请 求
ax i o s ( {
m et h o d : "get ",
u r l : "http://localhost:8080/ajax -demo 1/aJAX Demo 1? username =zhang san "
} ) . t h e n ( f u n cti o n ( r e s p ) {
a l e r t ( r e s p . d at a ) ;
} )
○ 发 送 p o st 请 求
ax i o s ( {
m et h o d : "post ",
u r l : "http://localhost:8080/ajax -demo 1/aJAX Demo 1 ", d at a : "username =zhang san "
} ) . t h e n ( f u n cti o n ( r e s p ) {
a l e r t ( r e s p . d at a ) ;
} ) ;
ax i o s ( ) 是 用 来 发 送 异 步 请 求 的 ， 小 括 号 中 使 用 j s 的 JSON 对 象 传 递 请 求 相 关 的 参 数 ：
m eth o d 属 性 ： 用 来 设 置 请 求 方 式 的 。 取 值 为 g et 或 者 p o st 。
u r l 属 性 ： 用 来 书 写 请 求 的 资 源 路 径 。 如 果 是 g et 请 求 ， 需 要 将 请 求 参 数 拼 接 到 路 径 的 后 面 ， 格 式 为 ： u r l? 参 数 名 = 参 数 值 & 参 数 名 2 = 参 数 值 2 。
。 data属 性 ： 作 为 请 求 体 被 发 送 的 数 据 。 也 就 是 说 如 果 是 p o st 请 求 的 话 ， 数 据 需 要 作 为 data 属 性 的 值 。
th e n ( ) 需 要 传 递 一 个 匿 名 函 数 。 我 们 将 th e n ( ) 中 传 递 的 匿 名 函 数 称 为 回 调 函 数 ， 意 思是该匿名函数在发送请求时不会被调用 ， 而是在成功响应后调用的函数 。 而该回调 函 数 中 的 re s p 参 数 是 对 响 应 的 数 据 进 行 封 装 的 对 象 ， 通 过 re s p . data 可 以 获 取 到 响应的数据 。
1 1 . 3 . 2 Axi os快 速 入 门
· 后 端 实 现
· 前 端 实 现
首 先 在 VS C od e 中 创 建j s 文 件 夹 ， 与 ht m l 同 级 ， 然 后 将 资 料 / a x i o s - 0 . 1 8 . 0 .j s 文 件 拷 贝 到js 目 录 下 ， 然 后 创 建 名 为 0 2 . Ajax - A xi o s . ht m l 的 文 件 ， 工 程 结 果 如 图 所 示 ：
然 后 在 ht m l 中 引 入 ax i o s所 依 赖 的j s 文 件 ， 并 且 提 供 2 个 按 钮 ， 绑 定 单 击 事 件 ， 分 别 用 于 点 击 时 发 送 ajax 请 求 ， 完 整 代 码 如 下 ：
< ! DO CTYPE ht m l >
< ht m l l a n g = "en " >
< h e a d >
< m et a c h a r s et = "UTF- 8 " >
< m et a htt p - e q u i v = "X- UA-Compatible " c o nt e nt = "IE =edge " >
< m et a n a m e = "view port " c o nt e nt = "width=device -width, initial- scale = 1. 0 " >
< titl e > Aj ax - A x i o s </ titl e >
< s c r ipt s r c = "js/a xios - 0. 18. 0.js " > </ s c r ipt >
< / h e a d >
< b o dy >
< i n p ut typ e = "button " v a l u e = "获取数据GET " o n c li c k = "get() " >
< i n p ut typ e = "button " v a l u e = "删除数据POST " o n c li c k = "post() " >
< / b o dy >
< s c r ipt >
f u n cti o n g et ( ) {
//通过axios发送异步请求-get
}
f u n cti o n p o st ( ) {
//通过axios发送异步请求-post
}
< / s c r ipt >
< / ht m l >
然 后 分 别 使 用 Axi o s 的 方 法 ， 完 整 g et 请 求 和 p o st 请 求 的 发 送
g et 请 求 代 码 如 下 ：
//通过axios发送异步请求-get
ax i o s ( {
m et h o d : "get ",
u r l : "http://yap i. smart-x work. cn/mock/169327/emp/list " } ) . t h e n ( r e s u lt = > {
c o n s o l e . l o g ( r e s u lt . d at a ) ;
} )
p o st 请 求 代 码 如 下 ：
//通过axios发送异步请求-post
ax i o s ( {
m et h o d : "post ",
u r l : "http://yap i. smart-x work. cn/mock/169327/emp/delete By Id ", d at a : "id= 1 "
} ) . t h e n ( r e s u lt = > {
c o n s o l e . l o g ( r e s u lt . d at a ) ;
} )
浏览器打开 ， f12抓包 ， 然后分别点击2个按钮 ， 查看控制台效果如下 ：
完整代码如下 ：
< ! DO CTYPE ht m l >
< ht m l l a n g = "en " >
< h e a d >
< m et a c h a r s et = "UTF- 8 " >
< m et a htt p - e q u i v = "X- UA-Compatible " c o nt e nt = "IE =edge " >
< m et a n a m e = "view port " c o nt e nt = "width=device -width, initial- scale = 1. 0 " >
< titl e > Aj ax - A x i o s </ titl e >
< s c r ipt s r c = "js/a xios - 0. 18. 0.js " > </ s c r ipt >
< / h e a d >
< b o dy >
< i n p ut typ e = "button " v a l u e = "获取数据GET " o n c li c k = "get() " >
< i n p ut typ e = "button " v a l u e = "删除数据POST " o n c li c k = "post() " >
< / b o dy >
< s c r ipt >
f u n cti o n g et ( ) {
//通过axios发送异步请求-get
ax i o s ( {
m et h o d : "get ",
u r l : "http://yap i. smart-x work. cn/mock/169327/emp/list " } ) . t h e n ( r e s u lt = > {
c o n s o l e . l o g ( r e s u lt . d at a ) ;
} )
}
f u n cti o n p o st ( ) {
// 通过axios发送异步请求-post
ax i o s ( {
m et h o d : "post ",
u r l : "http://yap i. smart-
x work. cn/mock/169327/emp/delete By Id ",
d at a : "id= 1 "
} ) . t h e n ( r e s u lt = > {
c o n s o l e . l o g ( r e s u lt . d at a ) ;
} )
}
< / s c r ipt >
< / ht m l >
1 . 3 . 3 请 求 方 法 的 别 名
Axi o s还 针 对 不 同 的 请 求 ， 提 供 了 别 名 方 式 的a pi , 具 体 如 下 ：
方法 | 描述 |
a x i o s . g et ( u r l [ , c o nfig ] ) | 发 送 g et 请 求 |
a x i o s . d e l ete ( u r l [ , c o nfig ] ) | 发 送 d e l ete请 求 |
a x i o s . p o st ( u r l [ , data [ , c o nfig ] ] ) | 发 送 p o st 请 求 |
a x i o s . p ut ( u r l [ , data [ , c o nfig ] ] ) | 发 送 p ut 请 求 |
我 们 目 前 只 关 注 g et 和 p o st 请 求 ， 所 以 在 上 述 的 入 门 案 例 中 ， 我 们 可 以 将 g et 请 求 代 码 改 写成如下 ：
a x i o s . g et ( "http://yap i. smart-x work. cn/mock/169327/emp/list ") . t h e n ( r e s u lt = > {
c o n s o l e . l o g ( r e s u lt . d at a ) ;
} )
p o st 请 求 改 写 成 如 下 ：
a x i o s . p o st ( "http://yap i. smart-
x work. cn/mock/169327/emp/delete By Id ", "id= 1 ") . t h e n ( r e s u lt = > { c o n s o l e . l o g ( r e s u lt . d at a ) ;
} )
1 . 3 . 4 案 例
需 求 ： 基 于 Vu e 及 Axi o s 完 成 数 据 的 动 态 加 载 展 示 ， 如 下 图 所 示
分 析 ：
前端首先是一张表格 ， 我们缺少数据 ， 而提供数据的地址已经有了 ， 所以意味这我们 需 要 使 用 Ajax 请 求 获 取 后 台 的 数 据 。 但 是 Ajax 请 求 什 么 时 候 发 送 呢 ？ 页 面 的 数 据 应 该 是 页 面 加 载 完 成 ， 自 动 发 送 请 求 ， 展 示 数 据 ， 所 以 我 们 需 要 借 助v u e 的 m o u nted 钩 子 函 数 。 那 么 拿 到 数 据 了 ， 我 们 该 怎 么 将 数 据 显 示 表 格 中 呢 ？ 这 里 就 得 借 助v -fo r指 令 来 遍历数据 ， 展示数据 。
步 骤 ：
1 . 首 先 创 建 文 件 ， 提 前 准 备 基 础 代 码 ， 包 括 表 格 以 及v u e .j s 和 a x i o s .j s 文 件 的 引 入 2 . 我 们 需 要 在v u e 的 m o u nted 钩 子 函 数 中 发 送 ajax 请 求 ， 获 取 数 据 3 . 拿 到 数 据 ， 数 据 需 要 绑 定 给v u e 的 data属 性 4 . 在 < t r >标 签 上 通 过v -fo r指 令 遍 历 数 据 ， 展 示 数 据 |
代 码 实 现 ：
1 . 首 先 创 建 文 件 ， 提 前 准 备 基 础 代 码 ， 包 括 表 格 以 及v u e .j s 和 a x i o s .j s 文 件 的 引 入
提供初始代码如下 ： < ! DO CTYPE ht m l > < ht m l l a n g = "en " > < h e a d > < m et a c h a r s et = "UTF- 8 " > < m et a htt p - e q u i v = "X- UA-Compatible " c o nt e nt = "IE =edge " > < m et a n a m e = "view port " c o nt e nt = "width=device -width, initial- scale = 1. 0 " > < titl e > Aj ax - A x i o s - 案 例 < / titl e > < s c r ipt s r c = "js/a xios - 0. 18. 0.js " > </ s c r ipt > |
< s c r ipt s r c = "js/vue.js " > </ s c r ipt >
< / h e a d >
< b o dy >
< div i d = "app " >
< t a bl e b o r d e r = "1 " c e ll s p a c i n g = "0 " w idt h = "60% " > < t r >
< th > 编 号 < / th >
< th > 姓 名 < / th >
< th > 图 像 < / th >
< th > 性 别 < / th >
< th > 职 位 < / th >
< th > 入 职 日 期 < / th >
< th > 最 后 操 作 时 间 < / th >
< / t r >
< t r a lig n = "center " >
< td > 1 </ td >
< td > To m </ td >
< td >
< i m g s r c = " " w idt h = "70px " h e ight = "50px " > < / td >
< td >
< s pa n >男 < / s pa n >
<!- - <span >女</span > - - >
< / td >
< td > 班 主 任 < / td >
< td > 2 0 0 9 - 0 8 - 0 9 </ td >
< td > 2 0 0 9 - 0 8 - 0 9 1 2 : 0 0 : 0 0 </ td >
< / t r >
< / t a bl e >
< / div >
< / b o dy >
< s c r ipt >
n ew V u e ( {
e l : "#app ",
d at a : {
}
} ) ;
< / s c r ipt >
< / ht m l >
2 . 在 v u e 的 m o u nted 钩 子 函 数 ， 编 写 Ajax 请 求 ， 请 求 数 据 ， 代 码 如 下 ：
m o u nt e d ( ) {
//发送异步请求,加载数据
a x i o s . g et ( "http://yap i. smart-
x work. cn/mock/169327/emp/list ") . t h e n ( r e s u lt = > {
} )
}
3 . ajax 请 求 的 数 据 我 们 应 该 绑 定 给v u e 的 data属 性 ， 之 后 才 能 进 行 数 据 绑 定 到 视 图 ； 并且浏览器打开后台地址 ， 数据返回格式如下图所示 ：
因 为 服 务 器 响 应 的j s o n 中 的 data属 性 才 是 我 们 需 要 展 示 的 信 息 ， 所 以 我 们 应 该 将 员 工 列 表 信 息 赋 值 给v u e 的 data属 性 ， 代 码 如 下 ： //发送异步请求,加载数据 a x i o s . g et ( "http://yap i. smart- x work. cn/mock/169327/emp/list ") . t h e n ( r e s u lt = > { t hi s . e m p s = r e s u lt . d at a . d at a ; } ) 其 中 ， data 中 生 命e m p s变 量 ， 代 码 如 下 ： d at a : { e m p s : [ ] } , 4 . 在 < t r >标 签 上 通 过v -fo r指 令 遍 历 数 据 ， 展 示 数 据 ， 其 中 需 要 注 意 的 是 图 片 的 值 ， 需 要 使 用v u e 的 属 性 绑 定 ， 男 女 的 展 示 需 要 使 用 条 件 判 断 ， 其 代 码 如 下 ： < t r a lig n = "center " v -f o r = "(emp, index) in emp s " > < td > { { i n d ex + 1 } } < / td > < td > { { e m p . n a m e } } < / td > < td > < i m g : s r c = "emp. image " w idt h = "70px " h e ight = "50px " > < / td > < td > < s pa n v - if = "emp. gender = = 1 " > 男 < / s pa n > < s pa n v - if = "emp. gender = = 2 " > 女 < / s pa n > < / td > < td > { { e m p .j o b } } < / td > < td > { { e m p . e nt r y d at e } } < / td > < td > { { e m p . u pd at e ti m e } } < / td > < / t r > |
完整代码如下 ：
< ! DO CTYPE ht m l >
< ht m l l a n g = "en " >
< h e a d >
< m et a c h a r s et = "UTF- 8 " >
< m et a htt p - e q u i v = "X- UA-Compatible " c o nt e nt = "IE =edge " >
< m et a n a m e = "view port " c o nt e nt = "width=device -width, initial- scale = 1. 0 " >
< titl e > Aj ax - A x i o s - 案 例 < / titl e >
< s c r ipt s r c = "js/a xios - 0. 18. 0.js " > </ s c r ipt >
< s c r ipt s r c = "js/vue.js " > </ s c r ipt >
< / h e a d >
< b o dy >
< div i d = "app " >
< t a bl e b o r d e r = "1 " c e ll s p a c i n g = "0 " w idt h = "60% " >
< t r >
< th > 编 号 < / th >
< th > 姓 名 < / th >
< th > 图 像 < / th >
< th > 性 别 < / th >
< th > 职 位 < / th >
< th > 入 职 日 期 < / th >
< th > 最 后 操 作 时 间 < / th >
< / t r >
< t r a lig n = "center " v -f o r = "(emp, index) in emp s " >
< td > { { i n d ex + 1 } } < / td >
< td > { { e m p . n a m e } } < / td >
< td >
< i m g : s r c = "emp. image " w idt h = "70px " h e ight = "50px " >
< / td >
< td >
< s pa n v - if = "emp. gender = = 1 " > 男 < / s pa n >
< s pa n v - if = "emp. gender = = 2 " > 女 < / s pa n >
< / td >
< td > { { e m p .j o b } } < / td >
< td > { { e m p . e nt r y d at e } } < / td >
< td > { { e m p . u pd at e ti m e } } < / td >
< / t r >
< / t a bl e >
< / div >
< / b o dy >
< s c r ipt >
n ew V u e ( {
e l : "#app ",
d at a : {
e m p s : [ ]
} ,
m o u nt e d ( ) {
//发送异步请求,加载数据
a x i o s . g et ( "http://yap i. smart-
x work. cn/mock/169327/emp/list ") . t h e n ( r e s u lt = > {
c o n s o l e . l o g ( r e s u lt . d at a ) ;
t hi s . e m p s = r e s u lt . d at a . d at a ;
} )
}
} ) ;
< / s c r ipt >
< / ht m l >
2 前后台分离开发
2 . 1 前后台分离开发介绍
在之前的课程中 ， 我们介绍过 ， 前端开发有2种方式 ： 前后台混合开发和前后台分离开发 。
前后台混合开发 ， 顾名思义就是前台后台代码混在一起开发 ， 如下图所示 ：
这种开发模式有如下缺点 ：
沟 通 成 本 高 ： 后 台 人 员 发 现 前 端 有 问 题 ， 需 要 找 前 端 人 员 修 改 ， 前 端 修 改 成 功 ， 再 交 给后台人员使用
· 分 工 不 明 确 ： 后 台 开 发 人 员 需 要 开 发 后 台 代 码 ， 也 需 要 开 发 部 分 前 端 代 码 。 很 难 培 养 专业人才
· 不 便 管 理 ： 所 有 的 代 码 都 在 一 个 工 程 中
· 不 便 维 护 和 扩 展 ： 前 端 代 码 更 新 ， 和 后 台 无 关 ， 但 是 需 要 整 个 工 程 包 括 后 台 一 起 重 新 打包部署 。
所以我们目前基本都是采用的前后台分离开发方式 ， 如下图所示 ：
我们将原先的工程分为前端工程和后端工程这2个工程 ， 然后前端工程交给专业的前端人员 开发 ， 后端工程交给专业的后端人员开发 。 前端页面需要数据 ， 可以通过发送异步请求 ，
从后台工程获取 。 但是 ， 我们前后台是分开来开发的 ， 那么前端人员怎么知道后台返回数 据的格式呢 ？ 后端人员开发 ， 怎么知道前端人员需要的数据格式呢 ？ 所以针对这个问题 ，
我们前后台统一指定一套规范 ！ 我们前后台开发人员都需要遵循这套规范开发 ， 这就是我 们 的 接 口 文 档 。 接 口 文 档 有 离 线 版 和 在 线 版 本 ， 接 口 文 档 示 可 以 查 询 今 天 提 供 资 料 / 接 口 文 档示例里面的资料 。 那么接口文档的内容怎么来的呢 ？ 是我们后台开发者根据产品经理提 供 的 产 品 原 型 和 需 求 文 档 所 撰 写 出 来 的 ， 产 品 原 型 示 例 可 以 参 考 今 天 提 供 资 料 / 页 面 原 型 里 面的资料 。
那么基于前后台分离开发的模式下 ， 我们后台开发者开发一个功能的具体流程如何呢 ？ 如 下图所示 ：
1 . 需 求 分 析 ： 首 先 我 们 需 要 阅 读 需 求 文 档 ， 分 析 需 求 ， 理 解 需 求 。 2 . 接 口 定 义 ： 查 询 接 口 文 档 中 关 于 需 求 的 接 口 的 定 义 ， 包 括 地 址 ， 参 数 ， 响 应 数 据 类 型 等等 3 . 前 后 台 并 行 开 发 ： 各 自 按 照 接 口 文 档 进 行 开 发 ， 实 现 需 求 4 . 测 试 ： 前 后 台 开 发 完 了 ， 各 自 按 照 接 口 文 档 进 行 测 试 5 . 前 后 段 联 调 测 试 ： 前 段 工 程 请 求 后 端 工 程 ， 测 试 功 能 |
2 . 2 YAPI
2 . 2 . 1 YAP I 介 绍
前后台分离开发中 ， 我们前后台开发人员都需要遵循接口文档 ， 所以接下来我们介绍一款 撰写接口文档的平台 。
YAp i 是 高 效 、 易 用 、 功 能 强 大 的 a pi 管 理 平 台 ， 旨 在 为 开 发 、 产 品 、 测 试 人 员 提 供 更 优 雅的接口管理服务 。
其 官 网 地 址 ： h t t p : / / y a p i . s m a r t- x w o r k . c n /
YAp i 主 要 提 供 了 2 个 功 能 ：
· API 接 口 管 理 ： 根 据 需 求 撰 写 接 口 ， 包 括 接 口 的 地 址 ， 参 数 ， 响 应 等 等 信 息 。
· M o c k 服 务 ： 模 拟 真 实 接 口 ， 生 成 接 口 的 模 拟 测 试 数 据 ， 用 于 前 端 的 测 试 。
2 . 2 . 2 接 口 文 档 管 理
接 下 来 我 们 演 示 一 下 YAp i 是 如 何 管 理 接 口 文 档 的 。
首 先 我 们 登 录 YAP I 的 官 网 ， 然 后 使 用 git h u b 或 者 百 度 账 号 登 录 ， 没 有 的 话 去 注 册 一 个 ， 如下图所示 ：
登录进去后 ， 在个人空间中 ， 选择项目列表->添加测试项目 ， 效果如图所示 ：
然后点击创建的项目 ， 进入到项目中 ， 紧接着先添加接口的分类 ， 如下图所示
然后我们选择当前创建的分类 ， 创建接口信息 ， 如下图所示 ：
紧接着 ， 我们来到接口的编辑界面 ， 对接口做生层次的定制 ， 例如 ： 接口的参数 ， 接口的 返回值等等 ， 效果图下图所示 ：
添加接口的请求参数 ， 如下图所示 ：
添加接口的返回值 ， 如下图所示 ：
然后保存上述设置 ， 紧接着我们可以来到接口的预览界面 ， 查询接口的信息 ， 其效果如下 图所示 ： 篇幅有限 ， 只截取部分
最后 ， 我们还可以设置接口的mock信息 ，
来 到 接 口 的 M o ck 设 置 窗 口 ， 如 下 图 所 示 ：
紧 接 着 我 们 来 到 接 口 的 预 览 界 面 ， 直 接 点 击 M o ck 地 址 ， 如 下 图 所 示 ：
我们发现浏览器直接打开 ， 并返回如下数据 ：
如 上 步 骤 就 是 YAP I 接 口 平 台 中 对 于 接 口 的 配 置 步 骤 。
3 前端工程化
3 . 1 前端工程化介绍
我 们 目 前 的 前 端 开 发 中 ， 当 我 们 需 要 使 用 一 些 资 源 时 ， 例 如 ： v u e .j s ， 和 a x i o s .j s 文 件 ， 都是直接再工程中导入的 ， 如下图所示 ：
但是上述开发模式存在如下问题 ：
· 每 次 开 发 都 是 从 零 开 始 ， 比 较 麻 烦
· 多 个 页 面 中 的 组 件 共 用 性 不 好
· j s 、 图 片 等 资 源 没 有 规 范 化 的 存 储 目 录 ， 没 有 统 一 的 标 准 ， 不 方 便 维 护
所 以 现 在 企 业 开 发 中 更 加 讲 究 前 端 工 程 化 方 式 的 开 发 ， 主 要 包 括 如 下 4 个 特 点
· 模 块 化 ： 将j s 和 c s s等 ， 做 成 一 个 个 可 复 用 模 块
· 组 件 化 ： 我 们 将 UI 组 件 ， c s s样 式 ，j s 行 为 封 装 成 一 个 个 的 组 件 ， 便 于 管 理
· 规 范 化 ： 我 们 提 供 一 套 标 准 的 规 范 的 目 录 接 口 和 编 码 规 范 ， 所 有 开 发 人 员 遵 循 这 套 规 范
· 自 动 化 ： 项 目 的 构 建 ， 测 试 ， 部 署 全 部 都 是 自 动 完 成
所以对于前端工程化 ， 说白了 ， 就是在企业级的前端项目开发中 ， 把前端开发所需要的工 具 、 技术 、 流程 、 经验进行规范化和标准化 。 从而提升开发效率 ， 降低开发难度等等 。 接 下 来 我 们 就 需 要 学 习 v u e的 官 方 提 供 的 脚 手 架 帮 我 们 完 成 前 端 的 工 程 化 。
3 . 2 前端工程化入门
3 . 2 . 1 环 境准 备
我 们 的 前 端 工 程 化 是 通 过v u e 官 方 提 供 的 脚 手 架 Vu e - c li 来 完 成 的 ， 用 于 快 速 的 生 成 一 个 Vu e的 项 目 模 板 。 Vu e - c li 主 要 提 供 了 如 下 功 能 ：
统 一 的 目 录 结 构
本 地 调 试
热 部 署
单 元 测 试
集 成 打 包 上 线
我 们 需 要 运 行 Vu e - c li ， 需 要 依 赖 N od e JS ， N od e JS 是 前 端 工 程 化 依 赖 的 环 境 。 所 以 我 们 需 要 先 安 装 N od e JS ， 然 后 才 能 安 装 Vu e - c li
N od e JS 安 装 和 Vu e - c li 安 装
详 细 安 装 步 骤 ， 请 参 考 资 料 /Node JS 安 装 文 档 /Node JS 安 装 文 档 . md 文 件
环 境 准 备 好 了 ， 接 下 来 我 们 需 要 通 过 Vu e - c li 创 建 一 个 v u e项 目 ， 然 后 再 学 习 一 下 v u e项 目 的 目 录 结 构 。 Vu e - c li 提 供 了 如 下 2 种 方 式 创 建v u e项 目 :
命 令 行 ： 直 接 通 过 命 令 行 方 式 创 建v u e项 目
v u e c r e at e v u e - p r oj e ct 0 1
图 形 化 界 面 ： 通 过 命 令 先 进 入 到 图 形 化 界 面 ， 然 后 再 进 行v u e 工 程 的 创 建
v u e u i
图形化界面如下 ：
3 . 2 . 2 . 1 创 建vue项 目
此处我们通过第二种图形化界面方式给大家演示 。
首 先 ， 我 们 再 桌 面 创 建v u e 文 件 夹 ， 然 后 双 击 进 入 文 件 夹 ， 来 到 地 址 目 录 ， 输 入 c m d ， 然 后 进 入 到v u e 文 件 夹 的 c m d 窗 口 界 面 ， 如 下 图 所 示 ：
然后进入如下界面 ：
然 后 再 当 前 目 录 下 ， 直 接 输 入 命 令 v u e u i 进 入 到v u e 的 图 形 化 界 面 ， 如 下 图 所 示 ：
然 后 我 门 选 择 创 建 按 钮 ， 在 v u e 文 件 夹 下 创 建 项 目 ， 如 下 图 所 示 ：
然 后 来 到 如 下 界 面 ， 进 行v u e项 目 的 创 建
然后预设模板选择手动 ， 如下图所示 ：
然后再功能页面开启路由功能 ， 如下图所示 ：
然后再配置页面选择语言版本和语法检查规范 ， 如下图所示 ：
然后创建项目 ， 进入如下界面 ：
最后我们只需要等待片刻 ， 即可进入到创建创建成功的界面 ， 如下图所示 ：
到 此 ， v u e项 目 创 建 结 束
3 . 2 . 2 . 2 vue项 目 目 录 结 构 介 绍
我 们 通 过 VS C od e 打 开 之 前 创 建 的v u e 文 件 夹 ， 打 开 之 后 ， 呈 现 如 下 图 所 示 页 面 ：
v u e项 目 的 标 准 目 录 结 构 以 及 目 录 对 应 的 解 释 如 下 图 所 示 :
其 中 我 们 平 时 开 发 代 码 就 是 在s rc 目 录 下
3 . 2 . 2 . 3 运 行 vue 项 目
那 么v u e项 目 开 发 好 了 ， 我 们 应 该 怎 么 运 行v u e项 目 呢 ？ 主 要 提 供 了 2 种 方 式
· 第 一 种 方 式 ： 通 过 VS C od e 提 供 的 图 形 化 界 面 ， 如 下 图 所 示 ： （注 意 ： N PM 脚 本 窗
口默认不显示 ， 可以参考本节的最后调试出来 ）
点击之后 ， 我们等待片刻 ， 即可运行 ， 在终端界面中 ， 我们发现项目是运行在本地服 务的8080端口 ， 我们直接通过浏览器打开地址
最终浏览器打开后 ， 呈现如下界面 ， 表示项目运行成功
其 实 此 时 访 问 的 是 s rc/ App . v ue这 个 根 组 件 ， 此 时 我 们 打 开 这 个 组 件 ， 修 改 代 码 ： 添 加 内 容 Vu e
只要我们保存更新的代码 ， 我们直接打开浏览器 ， 不需要做任何刷新 ， 发现页面呈现 内容发生了变化 ， 如下图所示 ：
这 就 是 我 们v u e项 目 的 热 更 新 功 能
对于8080端口 ， 经常被占用 ， 所以我们可以去修改默认的8080端口 。 我们修改 v u e . c o nfig .j s 文 件 的 内 容 ， 添 加 如 下 代 码 ：
d ev S e r v e r : {
p o r t : 7 0 0 0
}
如下图所示 ， 然后我们关闭服务器 ， 并且重新启动 ，
重新启动如下图所示 ：
端口更改成功 ， 可以通过浏览器访问7000端口来访问我们之前的项目
· 第 二 种 方 式 ： 命 令 行 方 式
直 接 基 于 c m d 命 令 窗 口 ， 在 v u e 目 录 下 ， 执 行 输 入 命 令 n p m r u n s e r v e 即 可 ， 如 下 图所示 ：
补 充 ： N PM 脚 本 窗 口 调 试 出 来
第 一 步 ： 通 过 设 置 / 用 户 设 置 / 扩 展 /M PM 更 改 N PM 默 认 配 置 ， 如 下 图 所 示
然 后 重 启 VS C od e ， 并 且 双 击 打 开 package .j so n文 件 ， 然 后 点 击 资 源 管 理 器 处 的 3 个 小 点 ， 勾 选n p m脚 本 选 项 ， 如 图 所 示
然 后 就 能 都 显 示 N PM 脚 本 小 窗 口 了 。
3 . 2 . 3 Vue项 目 开 发 流 程
那 么 我 们 访 问 的 首 页 是 i n d ex . ht m l ， 但 是 我 们 找 到 p ubli c / i n d ex . ht m l 文 件 ， 打 开 之 后 发现 ， 里面没有什么代码 ， 但是能够呈现内容丰富的首页 ： 如下图所示 ：
我 们 自 习 观 察 发 现 ， i n d ex . ht m l 的 代 码 很 简 洁 ， 但 是 浏 览 器 所 呈 现 的 i n d ex . ht m l 内 容 却 很 丰 富 ， 代 码 和 内 容 不 匹 配 ， 所 以v u e是 如 何 做 到 的 呢 ？ 接 下 来 我 们 学 习 一 下 v u e项 目 的 开发流程 。
对 于v u e项 目 ， i n d ex . ht m l 文 件 默 认 是 引 入 了 入 口 函 数 m a i n .j s 文 件 ， 我 们 找 到 s rc/ ma i n .j s 文 件 ， 其 代 码 如 下 ：
i m p o r t V u e f r o m 'vue '
i m p o r t App f r o m './App. vue '
i m p o r t r o ut e r f r o m './router '
V u e . c o n fig . p r o d u cti o n Tip = f a l s e
n ew V u e ( {
r o ut e r,
r e n d e r : h = > h (App )
} ) . $ m o u nt ( '#app ')
上述代码中 ， 包括如下几个关键点 ：
i m p o r t : 导 入 指 定 文 件 ， 并 且 重 新 起 名 。 例 如 上 述 代 码 i m p o r t App f r o m ' . / App . v u e ' 导 入 当 前 目 录 下 得 App . v u e 并 且 起 名 为 App
n ew Vu e( ) : 创 建v u e对 象
$ m o u nt ( ' # a pp ' ) ; 将v u e对 象 创 建 的 d o m对 象 挂 在 到 id = a pp 的 这 个 标 签 区 域 中 ， 作 用 和 之 前 学 习 的v u e对 象 的 l e 属 性 一 致 。
ro ute r : 路 由 ， 详 细 在 后 面 的 小 节 讲 解
re n d e r : 主 要 使 用 视 图 的 渲 染 的 。
来 到 p ublic / i ndex . ht m l 中 ， 我 们 删 除 div 的 id = a pp 属 性 ， 打 开 浏 览 器 ， 发 现 之 前 访 问
的 首 页 一 片 空 白 ， 如 下 图 所 示 ， 这 样 就 证 明 了 ， 我 们 m a i n .j s 中 通 过 代 码 挂 在 到 i n d ex . ht m l 的 id = a pp 的 标 签 区 域 的 。
此 时 我 们 知 道 了 v u e创 建 的 d o m对 象 挂 在 到 id = a pp 的 标 签 区 域 ， 但 是 我 们 还 是 没 有 解 决 最 开 始 的 问 题 ： 首 页 内 容 如 何 呈 现 的 ？ 这 就 涉 及 到 re n d e r 中 的 App 了 ， 如 下 图 所 示 ：
那 么 这 个 App 对 象 怎 么 回 事 呢 ， 我 们 打 开 App . v u e , 注 意 的 是 . v u e结 尾 的 都 是v u e 组 件 。 而 v u e 的 组 件 文 件 包 含 3 个 部 分 ：
· te m plate : 模 板 部 分 ， 主 要 是 HTML 代 码 ， 用 来 展 示 页 面 主 体 结 构 的
· s c r ipt : j s 代 码 区 域 ， 主 要 是 通 过j s 代 码 来 控 制 模 板 的 数 据 来 源 和 行 为 的
· styl e : c s s样 式 部 分 ， 主 要 通 过 c s s样 式 控 制 模 板 的 页 面 效 果 得
如 下 图 所 示 就 是 一 个 v u e 组 件 的 小 案 例 ：
此 时 我 们 可 以 打 开 App . v u e ， 观 察 App . v u e 的 代 码 ， 其 中 可 以 发 现 ， App . v u e 组 件 的 te m plate部 分 内 容 ， 和 我 们 浏 览 器 访 问 的 首 页 内 容 是 一 致 的 ， 如 下 图 所 示 ：
接 下 来 我 们 可 以 简 化 模 板 部 分 内 容 ， 添 加 s c r ipt 部 分 的 数 据 模 型 ， 删 除 c s s样 式 ， 完 整 代 码 如下 ：
< t e m pl at e >
< div i d = "app " >
{ { m e s s a g e } }
< / div >
< / t e m pl at e >
< s c r ipt >
ex p o r t d ef a u lt {
d at a ( ) {
r et u r n {
"message ": "hello world "
}
}
}
< / s c r ipt >
< styl e >
< / styl e >
保存直接 ， 回到浏览器 ， 我们发现首页展示效果发生了变化 ， 如下图所示 ：
4 Vue组件库Element
4 . 1 Element介绍
不 知 道 同 学 们 还 否 记 得 我 们 之 前 讲 解 的 前 端 开 发 模 式 MVV M ， 我 们 之 前 学 习 的v u e是 侧 重 于 VM 开 发 的 ， 主 要 用 于 数 据 绑 定 到 视 图 的 ， 那 么 接 下 来 我 们 学 习 的 El e m e nt UI 就 是 一 款 侧重于V开发的前端框架 ， 主要用于开发美观的页面的 。
El e m e nt ： 是 饿 了 么 公 司 前 端 开 发 团 队 提 供 的 一 套 基 于 Vu e 的 网 站 组 件 库 ， 用 于 快 速 构 建网页 。
El e m e nt 提 供 了 很 多 组 件 （组 成 网 页 的 部 件 ） 供 我 们 使 用 。 例 如 超 链 接 、 按 钮 、 图 片 、 表 格 等 等 。 如 下 图 所 示 就 是 我 们 开 发 的 页 面 和 El e m e nt UI 提 供 的 效 果 对 比 ： 可 以 发 现 El e m e nt UI 提 供 的 各 式 各 样 好 看 的 按 钮
El e m e nt UI 的 学 习 方 式 和 我 们 之 前 的 学 习 方 式 不 太 一 样 ， 对 于 El e m e nt UI ， 我 们 作 为 一 个 后 台 开 发 者 ， 只 需 要 学 会 如 何 从 Ele me nt UI 的 官 网 拷 贝 组 件 到 我 们 自 己 的 页 面 中 ， 并 且 做 一 些 修 改 即 可 。 其 官 网 地 址 ： h t t p s : / / e l e m e n t . e l e m e . c n / # / z h - C N ， 我 们 主 要 学 习 的 是 El e m e nt UI 中 提 供 的 常 用 组 件 ， 至 于 其 他 组 件 同 学 们 可 以 通 过 我 们 这 几 个 组 件 的 学 习 掌 握 到 El e m e nt UI 的 学 习 技 巧 ， 然 后 课 后 自 行 学 习 。
4 . 2 快速入门
首 先 我 们 要 掌 握 El e m e nt UI 的 快 速 入 门 ， 接 下 来 同 学 们 就 一 起 跟 着 步 骤 来 操 作 一 下 。
首 先 ， 我 们 先 要 安 装 El e m e nt UI 的 组 件 库 ， 打 开 VS C od e ， 停 止 之 前 的 项 目 ， 然 后 在 命 令行输入如下命令 ：
n p m i n st a ll e l e m e nt - u i @ 2 . 1 5 . 3
具体操作如下图所示 ：
然 后 我 们 需 要 在 m a i n .j s 这 个 入 口j s 文 件 中 引 入 El e m e nt UI 的 组 件 库 ， 其 代 码 如 下 ：
i m p o r t El e m e nt U I f r o m 'element- ui ';
i m p o r t 'element- ui/lib/theme - chalk/index. css ';
V u e . u s e ( El e m e nt U I ) ;
具体操作如图所示 ：
然 后 我 们 需 要 按 照v u e项 目 的 开 发 规 范 ， 在 s rc/ v iew s 目 录 下 创 建 一 个 v u e 组 件 文 件 ， 注 意 组 件 名 称 后 缀 是 . v u e ， 并 且 在 组 件 文 件 中 编 写 之 前 介 绍 过 的 基 本 组 件 语 法 ， 代 码 如 下 ：
< t e m pl at e >
< / t e m pl at e >
< s c r ipt >
ex p o r t d ef a u lt {
}
< / s c r ipt >
< styl e >
< / styl e >
具体操作如图所示 ：
最 后 我 们 只 需 要 去 El e m e nt UI 的 官 网 ， 找 到 组 件 库 ， 然 后 找 到 按 钮 组 件 ， 抄 写 代 码 即 可 ， 具体操作如下图所示 ：
然后找到按钮的代码 ， 如下图所示 ：
紧 接 着 我 们 复 制 组 件 代 码 到 我 们 的v u e 组 件 文 件 中 ， 操 作 如 下 图 所 示 ：
最 后 ， 我 们 需 要 在 默 认 访 问 的 根 组 件 s rc/ App . v ue 中 引 入 我 们 自 定 义 的 组 件 ， 具 体 操 作 步骤如下 ：
然 后 App . v u e 组 件 中 的 具 体 代 码 如 下 ， 代 码 是 我 们 通 过 上 述 步 骤 引 入 e le me nt - v iew组 件时自动生成的 。
< t e m pl at e >
< div i d = "app " >
<!- - {{message}} - - >
< e l e m e nt - v i ew > </ e l e m e nt - v i ew >
< / div >
< / t e m pl at e >
< s c r ipt >
i m p o r t El e m e nt Vi ew f r o m './views/Element/Element View. vue ' ex p o r t d ef a u lt {
c o m p o n e nt s : { El e m e nt Vi ew } ,
d at a ( ) {
r et u r n {
"message ": "hello world "
}
}
}
< / s c r ipt >
< styl e >
< / styl e >
然 后 运 行 我 们 的v u e项 目 ， 浏 览 器 直 接 访 问 之 前 的 7 0 0 0 端 口 ， 展 示 效 果 如 下 图 所 示 ：
到 此 ， 我 们 El e m e nt UI 的 入 门 程 序 编 写 成 功
4 . 3 Element组件
接 下 来 我 们 来 学 习 一 下 El e m e nt UI 的 常 用 组 件 ， 对 于 组 件 的 学 习 比 较 简 单 ， 我 们 只 需 要 参 考官方提供的代码 ， 然后复制粘贴即可 。
1 4 . 3 . 1 Table 表 格
4 . 3 . 1 . 1 组 件 演 示
Ta bl e 表 格 ： 用 于 展 示 多 条 结 构 类 似 的 数 据 ， 可 对 数 据 进 行 排 序 、 筛 选 、 对 比 或 其 他 自 定 义操作 。
接下来我们通过代码来演示 。
首 先 我 们 需 要 来 到 El e m e nt UI 的 组 件 库 中 ， 找 到 表 格 组 件 ， 如 下 图 所 示 ：
然 后 复 制 代 码 到 我 们 之 前 的 El e m e nt Vu e . v u e 组 件 中 ， 需 要 注 意 的 是 ， 我 们 组 件 包 括 了 3 个 部 分 ， 如 果 官 方 有 除 了 te m plate部 分 之 外 的styl e 和 s c r ipt 都 需 要 复 制 。 具 体 操 作 如 下 图所示 ：
te m plate模 板 部 分 ：
s c r ipt 脚 本 部 分
El e m e nt Vi ew . v u e 组 件 文 件 整 体 代 码 如 下 ：
< t e m pl at e >
< div >
<!- - Button按钮 - - >
< e l- r ow >
< e l-b utt o n >默 认 按 钮 < / e l-b utt o n >
< e l-b utt o n | typ e = "primary " > 主 要 按 钮 < / e l-b utt o n > |
< e l-b utt o n | typ e = "success " > 成 功 按 钮 < / e l-b utt o n > |
< e l-b utt o n | typ e = "info " > 信 息 按 钮 < / e l-b utt o n > |
< e l-b utt o n | typ e = "warning " > 警 告 按 钮 < / e l-b utt o n > |
< e l-b utt o n | typ e = "danger " > 危 险 按 钮 < / e l-b utt o n > |
< / e l- r ow >
<!- - Table表格 - - >
< e l- t a bl e
: d at a = "table Data "
styl e = "width: 100% " >
< e l- t a bl e - c o l u m n
p r o p = "date "
l a b e l = "日期 "
w idt h = "180 " >
< / e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n
" "
p r o p = name
l a b e l = "姓名 "
w idt h = "180 " >
< / e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n
p r o p = "address "
l a b e l = "地址 " >
< / e l- t a bl e - c o l u m n >
< / e l- t a bl e >
< / div >
< / t e m pl at e >
< s c r ipt >
ex p o r t d ef a u lt {
d at a ( ) {
r et u r n {
t a bl e D at a : [ {
d at e : '2016- 05- 02 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1518 弄 '
} , {
d at e : '2016- 05- 04 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1517 弄 '
} , {
d at e : '2016- 05- 01 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1519 弄 '
} , {
d at e : '2016- 05- 03 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1516 弄 '
} ]
}
}
}
< / s c r ipt >
< styl e >
< / styl e >
此时回到浏览器 ， 我们页面呈现如下效果 ：
4 . 3 . 1 . 2 组 件 属 性 详 解
那 么 我 们 的 El e m e nt UI 是 如 何 将 数 据 模 型 绑 定 到 视 图 的 呢 ？ 主 要 通 过 如 下 几 个 属 性 ：
· data : 主 要 定 义 tabl e 组 件 的 数 据 模 型
· p ro p : 定 义 列 的 数 据 应 该 绑 定 data 中 定 义 的 具 体 的 数 据 模 型
· la b e l : 定 义 列 的 标 题
· w idth : 定 义 列 的 宽 度
其具体示例含义如下图所示 ：
PS : Ele me nt 组 件 的 所 有 属 性 都 可 以 在 组 件 页 面 的 最 下 方 找 到 ， 如 下 图 所 示 ：
4 . 3 . 2
4 . 3 . 2 . 1
Pagination分 页
组件演示
Pa gi n ati o n : 分 页 组 件 ， 主 要 提 供 分 页 工 具 条 相 关 功 能 。 其 展 示 效 果 图 下 图 所 示 ：
接下来我们通过代码来演示功能 。
首先在官网找到分页组件 ， 我们选择带背景色分页组件 ， 如下图所示 ：
然 后 复 制 代 码 到 我 们 的 El e m e nt Vi ew . v u e 组 件 文 件 的 te m plate 中 ， 拷 贝 如 下 代 码 ：
< e l- pa gi n ati o n
b a c kg r o u n d
l ay o ut = "prev, pager, next "
: t ot a l = "1000 " >
< / e l- pa gi n ati o n >
浏览器打开呈现如下效果 ：
4 . 3 . 2 . 2 组 件 属 性 详 解
对于分页组件我们需要关注的是如下几个重要属性 （可以通过查阅官网组件中最下面的组 件属性详细说明得到 ） ：
ba c kg ro u nd : 添 加 北 京 颜 色 ， 也 就 是 上 图 蓝 色 背 景 色 效 果 。
layo ut : 分 页 工 具 条 的 布 局 ， 其 具 体 值 包 含 s iz e s , p r ev , pa g e r , n ex t , j u m p e r , - > , t ot a l , s l ot 这 些 值
tota l : 数 据 的 总 数 量
然 后 根 据 官 方 分 页 组 件 提 供 的 layo ut 属 性 说 明 ， 如 下 图 所 示 ：
我 们 修 改 layo ut 属 性 如 下 ：
l ay o ut = "sizes, prev, pager, next,jumper, total "
浏览器打开呈现如下效果 ：
发现在原来的功能上 ， 添加了一些额外的功能 ， 其具体对应关系如下图所示 ：
4 . 3 . 2 . 3 组 件 事 件 详 解
对于分页组件 ， 除了上述几个属性 ， 还有2个非常重要的事件我们需要去学习 ：
· s iz e - c ha n g e ： pa g e Siz e 改 变 时 会 触 发
· c u r re nt - c ha n g e ： c u r re nt Pa g e 改 变 时 会 触 发
其官方详细解释含义如下图所示 ：
对于这2个事件的参考代码 ， 我们同样可以通过官方提供的完整案例中找到 ， 如下图所示 ：
然后我们找到对应的代码 ， 首先复制事件 ， 复制代码如下 ：
@ s iz e - c h a n g e = "handle Size Change "
@ c u r r e nt - c h a n g e = "handle Current Change "
此 时 Pa ni g ati o n 组 件 的 te m plate完 整 代 码 如 下 ：
<!- - Pagination分页 - - >
< e l- pa gi n ati o n
@ s iz e - c h a n g e = "handle Size Change "
@ c u r r e nt - c h a n g e = "handle Current Change "
b a c kg r o u n d
l ay o ut = "sizes, prev, pager, next,jumper, total "
: t ot a l = "1000 " >
< / e l- pa gi n ati o n >
紧 接 着 需 要 复 制 事 件 需 要 的 2 个 函 数 ， 需 要 注 意 m eth o d s 属 性 和 data 同 级 ， 其 代 码 如 下 ：
m et h o d s : {
h a n dl e Siz e Ch a n g e ( v a l ) {
c o n s o l e . l o g ( ` 每 页 $ { v a l } 条 ` ) ;
} ,
h a n dl e C u r r e nt Ch a n g e ( v a l ) {
c o n s o l e . l o g ( ` 当 前 页 : $ { v a l } ` ) ;
}
} ,
此 时 Pa ni g ati o n 组 件 的 s c r ipt 部 分 完 整 代 码 如 下 ：
< s c r ipt >
ex p o r t d ef a u lt {
m et h o d s : {
h a n dl e Siz e Ch a n g e ( v a l ) {
c o n s o l e . l o g ( ` 每 页 $ { v a l } 条 ` ) ;
} ,
h a n dl e C u r r e nt Ch a n g e ( v a l ) {
c o n s o l e . l o g ( ` 当 前 页 : $ { v a l } ` ) ;
}
} ,
d at a ( ) {
r et u r n {
t a bl e D at a : [ {
d at e : '2016- 05- 02 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1518 弄 '
} , {
d at e : '2016- 05- 04 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1517 弄 '
} , {
d at e : '2016- 05- 01 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1519 弄 '
} , {
d at e : '2016- 05- 03 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1516 弄 '
} ]
}
}
}
< / s c r ipt >
回 到 浏 览 器 中 ， 我 们 f1 2 打 开 开 发 者 控 制 台 ， 然 后 切 换 当 前 页 码 和 切 换 每 页 显 示 的 数 量 ， 呈 现如下效果 ：
1 4 . 3 . 3 Dialog 对 话 框
4 . 3 . 3 . 1 组 件 演 示
Dia l o g : 在 保 留 当 前 页 面 状 态 的 情 况 下 ， 告 知 用 户 并 承 载 相 关 操 作 。 其 企 业 开 发 应 用 场 景 示例如下图所示 ：
首 先 我 们 需 要 在 El e m e nt UI 官 方 找 到 Dia l o g 组 件 ， 如 下 图 所 示 ：
然 后 复 制 如 下 代 码 到 我 们 的 组 件 文 件 的 te m plate模 块 中
< b r > < b r >
<!- - Dialog 对话框 - - >
<!- - Table - - >
< e l-b utt o n typ e = "text " @ c li c k = "dialog Table Visible = true " > 打 开 嵌 套 表 格 的 Di a l o g </ e l-b utt o n >
< e l-di a l o g tit l e = "收货地址 " : v i s ibl e . sy n c = "dialog Table Visible " > < e l- t a bl e : d at a = "gridData " >
< e l- t a bl e - c o l u m n p r o p e r ty = "date " l a b e l = "日期 " w idt h = "150 " > </ e l - t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p e r ty = "name " l a b e l = "姓名 " w idt h = "200 " > </ e l - t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p e r ty = "address " l a b e l = "地址 " > </ e l- t a bl e - c o l u m n >
< / e l- t a bl e >
< / e l-di a l o g >
并 且 复 制 数 据 模 型 s c ript 模 块 中 ：
g r id D at a : [ {
d at e : ' 2 0 1 6 - 0 5 - 0 2 ' ,
n a m e : ' 王 小 虎 ' ,
a dd r e s s : ' 上 海 市 普 陀 区 金 沙 江 路 1 5 1 8 弄 '
} , {
d at e : ' 2 0 1 6 - 0 5 - 0 4 ' ,
n a m e : ' 王 小 虎 ' ,
a dd r e s s : ' 上 海 市 普 陀 区 金 沙 江 路 1 5 1 8 弄 '
} , {
d at e : ' 2 0 1 6 - 0 5 - 0 1 ' ,
n a m e : ' 王 小 虎 ' ,
a dd r e s s : ' 上 海 市 普 陀 区 金 沙 江 路 1 5 1 8 弄 '
} , {
d at e : ' 2 0 1 6 - 0 5 - 0 3 ' ,
n a m e : ' 王 小 虎 ' ,
a dd r e s s : ' 上 海 市 普 陀 区 金 沙 江 路 1 5 1 8 弄 '
} ] ,
di a l o g Ta bl e Vi s ibl e : f a l s e ,
其 完 整 的 s c r ipt 部 分 代 码 如 下 ：
< s c r ipt >
ex p o r t d ef a u lt {
m et h o d s : {
h a n dl e Siz e Ch a n g e ( v a l ) {
c o n s o l e . l o g ( ` 每 页 $ { v a l } 条 ` ) ;
} ,
h a n dl e C u r r e nt Ch a n g e ( v a l ) {
c o n s o l e . l o g ( ` 当 前 页 : $ { v a l } ` ) ;
}
} ,
d at a ( ) {
r et u r n {
g r id D at a : [ {
d at e : '2016- 05- 02 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1518 弄 '
} , {
d at e : '2016- 05- 04 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1518 弄 '
} , {
d at e : '2016- 05- 01 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1518 弄 '
} , {
d at e : '2016- 05- 03 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1518 弄 '
} ] ,
di a l o g Ta bl e Vi s ibl e : f a l s e ,
t a bl e D at a : [ {
d at e : '2016- 05- 02 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1518 弄 '
} , {
d at e : '2016- 05- 04 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1517 弄 '
} , {
d at e : '2016- 05- 01 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1519 弄 '
} , {
d at e : '2016- 05- 03 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1516 弄 '
} ]
}
}
}
< / s c r ipt >
然后我们打开浏览器 ， 点击按钮 ， 呈现如下效果 ：
4 . 3 . 3 . 2 组 件 属 性 详 解
那 么 El e m e nt UI 是 如 何 做 到 对 话 框 的 显 示 与 隐 藏 的 呢 ？ 是 通 过 如 下 的 属 性 ：
· v i s ibl e . sy n c ： 是 否 显 示 Dia l o g
具体释意如下图所示 ：
v i s ibl e 属 性 绑 定 的 dia l o g Table Vi s bl e 属 性 一 开 始 默 认 是 fa l s e ， 所 以 对 话 框 隐 藏 ； 然 后 我 们 点 击 按 钮 ， 触 发 事 件 ， 修 改 属 性 值 为 t r u e ，
然 后 对 话 框v i s ibl e 属 性 值 为 t r u e ， 所 以 对 话 框 呈 现 出 来 。
4 . 3 . 4 Form表 单
4 . 3 . 4 . 1 组 件 演 示
F o r m 表 单 ： 由 输 入 框 、 选 择 器 、 单 选 框 、 多 选 框 等 控 件 组 成 ， 用 以 收 集 、 校 验 、 提 交 数 据 。
表单在我们前端的开发中使用的还是比较多的 ， 接下来我们学习这个组件 ， 与之前的流程 一 样 ， 我 们 首 先 需 要 在 El e m e nt UI 的 官 方 找 到 对 应 的 组 件 示 例 ： 如 下 图 所 示 ：
我们的需求效果是 ： 在对话框中呈现表单内容 ， 类似如下图所示 ：
所以 ， 首先我们先要根据上一小结所学习的内容 ， 制作一个新的对话框 ， 其代码如下 ：
< b r > < b r >
<!- - Dialog对话框- Form表单 - - >
< e l-b utt o n typ e = "text " @ c li c k = "dialog Form Visible = true " > 打 开 嵌 套 F o r m 的 Di a l o g </ e l-b utt o n >
< e l-di a l o g tit l e = "Form表单 " : v i s ibl e . sy n c = "dialog Form Visible " >
< / e l-di a l o g >
还 需 要 注 意 的 是 ， 针 对 这 个 新 的 对 话 框 ， 我 们 需 要 在 data 中 声 明 新 的 变 量 dia l o g F o r m Vi s ibl e 来 控 制 对 话 框 的 隐 藏 与 显 示 ， 代 码 如 下 ：
di a l o g F o r m Vi s ibl e : f a l s e ,
打开浏览器 ， 此时呈现如图所示的效果 ：
然 后 我 们 复 制 官 网 提 供 的 te m plate部 分 代 码 到 我 们 的v ue组 件 文 件 的 Dia log 组 件 中 ， 但 是 ， 此处官方提供的表单项标签太多 ， 所以我们只需要保留前面3个表单项组件 ， 其他多余 的 删 除 ， 所 以 最 终 te m plate部 分 代 码 如 下 ：
< e l-di a l o g tit l e = "Form表单 " : v i s ibl e . sy n c = "dialog Form Visible " >
< e l-f o r m r ef = "form " : m o d e l = "form " l a b e l - w idt h = "80px " > < e l-f o r m -it e m l a b e l = "活动名称 " >
< e l-i n p ut v - m o d e l = "form. name " > </ e l-i n p ut >
< / e l-f o r m -it e m >
< e l-f o r m -it e m l a b e l = "活动区域 " >
< e l- s e l e ct v - m o d e l = "form. region " pl a c e h o ld e r = "请选择活动
区域 " >
< e l- o pti o n l a b e l = "区域一 " v a l u e = "shanghai " > </ e l- o pti o n > < e l- o pti o n l a b e l = "区域二 " v a l u e = "beijing " > </ e l- o pti o n >
< / e l- s e l e ct >
< / e l-f o r m -it e m >
< e l-f o r m -it e m l a b e l = "活动时间 " >
< e l- c o l : s p a n = "11 " >
< e l-d at e - pi c ke r typ e = "date " pl a c e h o ld e r = "选择日期 " v - m o d e l = "form. date 1 " styl e = "width: 100%; " > </ e l-d at e - pi c ke r >
< / e l- c o l >
< e l- c o l c l a s s = "line " : s p a n = "2 " > - < / e l- c o l >
< e l- c o l : s p a n = "11 " >
< e l- ti m e - pi c ke r pl a c e h o ld e r = "选择时间 " v -
m o d e l = "form. date2 " styl e = "width: 100%; " > </ e l- ti m e - pi c ke r > < / e l- c o l >
< / e l-f o r m -it e m >
< e l-f o r m -it e m >
< e l-b utt o n typ e = "primary " @ c li c k = "on Submit " > 立 即 创 建 < / e l-b utt o n >
< e l-b utt o n >取 消 < / e l-b utt o n >
< / e l-f o r m -it e m >
< / e l-f o r m >
< / e l-di a l o g >
观 察 上 述 代 码 ， 我 们 发 现 其 中 表 单 项 标 签 使 用 了 v - m o d e l 双 向 绑 定 ， 所 以 我 们 需 要 在v u e 的数据模型中声明变量 ， 同样可以从官方提供的代码中复制粘贴 ， 但是我们需要去掉我们 不 需 要 的 属 性 ， 通 过 观 察 上 述 代 码 ， 我 们 发 现 双 向 绑 定 的 属 性 有 4 个 ， 分 别 是
fo r m . n a m e , fo r m . re gi o n , fo r m . date 1 , fo r m . date 2 , 所 以 最 终 数 据 模 型 如 下 ：
f o r m : {
' '
n a m e : ,
r e gi o n : ' ' ,
d at e 1 : ' ' ,
d at e 2 : ' '
} ,
同 样 ， 官 方 的 代 码 中 ， 在 s c r ipt 部 分 中 ， 还 提 供 了 o n S ub m it 函 数 ， 表 单 的 立 即 创 建 按 钮
绑 定 了 此 函 数 ， 我 们 可 以 输 入 表 单 的 内 容 ， 而 表 单 的 内 容 是 双 向 绑 定 到 fo r m对 象 的 ， 所 以 我 们 修 改 官 方 的o n S u b m it 函 数 如 下 即 可 ， 而 且 我 们 还 需 要 关 闭 对 话 框 ， 最 终 函 数 代 码 如 下 ：
o n S u b m it ( ) {
c o n s o l e . l o g (t hi s . f o r m ) ; / / 输 出 表 单 内 容 到 控 制 台
t hi s . di a l o g F o r m Vi s ibl e = f a l s e ; / / 关 闭 表 案 例 的 对 话 框
}
然后打开浏览器 ， 我们打开对话框 ， 并且输入表单内容 ， 点击立即创建按钮 ， 呈现如下效
果 ；
最 终v u e 组 件 完 整 代 码 如 下 ， 同 学 们 可 以 针 对 fo r m表 单 案 例 ， 参 考 该 案 例 对 应 的 te m plate部 分 和 s c r ipt 部 分 代 码
< t e m pl at e >
< div >
<!- - Button按钮 - - >
< e l- r ow >
< e l-b utt o n >默 认 按 钮 < / e l-b utt o n >
< e l-b utt o n | typ e = "primary " > 主 要 按 钮 < / e l-b utt o n > |
< e l-b utt o n | typ e = "success " > 成 功 按 钮 < / e l-b utt o n > |
< e l-b utt o n | typ e = "info " > 信 息 按 钮 < / e l-b utt o n > |
< e l-b utt o n | typ e = "warning " > 警 告 按 钮 < / e l-b utt o n > |
< e l-b utt o n | typ e = "danger " > 危 险 按 钮 < / e l-b utt o n > |
< / e l- r ow >
<!- - Table表格 - - >
< e l- t a bl e
: d at a = "table Data "
styl e = "width: 100% " >
< e l- t a bl e - c o l u m n
p r o p = "date "
l a b e l = "日期 "
w idt h = "180 " >
< / e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n
" "
p r o p = name
l a b e l = "姓名 "
w idt h = "180 " >
< / e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n
p r o p = "address "
l a b e l = "地址 " >
< / e l- t a bl e - c o l u m n >
< / e l- t a bl e >
< b r >
<!- - Pagination分页 - - >
< e l- pa gi n ati o n
@ s iz e - c h a n g e = "handle Size Change "
@ c u r r e nt - c h a n g e = "handle Current Change "
b a c kg r o u n d
l ay o ut = "sizes, prev, pager, next,jumper, total "
: t ot a l = "1000 " >
< / e l- pa gi n ati o n >
< b r > < b r >
<!- - Dialog 对话框 - - >
<!- - Table - - >
< e l-b utt o n typ e = "text " @ c li c k = "dialog Table Visible = true " > 打 开 嵌 套 表 格 的 Di a l o g </ e l-b utt o n >
< e l-di a l o g tit l e = "收货地址 " : v i s ibl e . sy n c = "dialog Table Visible " > < e l- t a bl e : d at a = "gridData " >
< e l- t a bl e - c o l u m n p r o p e r ty = "date " l a b e l = "日期 " w idt h = "150 " > < / e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p e r ty = "name " l a b e l = "姓名 " w idt h = "200 " > < / e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p e r ty = "address " l a b e l = "地址 " > </ e l- t a bl e - c o l u m n >
< / e l- t a bl e >
< / e l-di a l o g >
< b r > < b r >
<!- - Dialog对话框- Form表单 - - >
< e l-b utt o n typ e = "text " @ c li c k = "dialog Form Visible = true " > 打 开 嵌 套 F o r m 的 Di a l o g </ e l-b utt o n >
< e l-di a l o g tit l e = "Form表单 " : v i s ibl e . sy n c = "dialog Form Visible " >
< e l-f o r m r ef = "form " : m o d e l = "form " l a b e l - w idt h = "80px " > < e l-f o r m -it e m l a b e l = "活动名称 " >
< e l-i n p ut v - m o d e l = "form. name " > </ e l-i n p ut >
< / e l-f o r m -it e m >
< e l-f o r m -it e m l a b e l = "活动区域 " >
< e l- s e l e ct v - m o d e l = "form. region " pl a c e h o ld e r = "请选择活动
区域 " >
< e l- o pti o n l a b e l = "区域一 " v a l u e = "shanghai " > </ e l- o pti o n > < e l- o pti o n l a b e l = "区域二 " v a l u e = "beijing " > </ e l- o pti o n >
< / e l- s e l e ct >
< / e l-f o r m -it e m >
< e l-f o r m -it e m l a b e l = "活动时间 " >
< e l- c o l : s p a n = "11 " >
< e l-d at e - pi c ke r typ e = "date " pl a c e h o ld e r = "选择日期 " v - m o d e l = "form. date 1 " styl e = "width: 100%; " > </ e l-d at e - pi c ke r >
< / e l- c o l >
< e l- c o l c l a s s = "line " : s p a n = "2 " > - < / e l- c o l >
< e l- c o l : s p a n = "11 " >
< e l- ti m e - pi c ke r pl a c e h o ld e r = "选择时间 " v -
m o d e l = "form. date2 " styl e = "width: 100%; " > </ e l- ti m e - pi c ke r > < / e l- c o l >
< / e l-f o r m -it e m >
< e l-f o r m -it e m >
< e l-b utt o n typ e = "primary " @ c li c k = "on Submit " > 立 即 创 建 < / e l-b utt o n >
< e l-b utt o n >取 消 < / e l-b utt o n >
< / e l-f o r m -it e m >
< / e l-f o r m >
< / e l-di a l o g >
< / div >
< / t e m pl at e >
< s c r ipt >
ex p o r t d ef a u lt {
m et h o d s : {
h a n dl e Siz e Ch a n g e ( v a l ) {
c o n s o l e . l o g ( ` 每 页 $ { v a l } 条 ` ) ;
} ,
h a n dl e C u r r e nt Ch a n g e ( v a l ) {
c o n s o l e . l o g ( ` 当 前 页 : $ { v a l } ` ) ;
} ,
//表单案例的提交事件
o n S u b m it ( ) {
c o n s o l e . l o g (t hi s . f o r m ) ; //输出表单内容到控制台
t hi s . di a l o g F o r m Vi s ibl e = f a l s e ; //关闭表案例的对话框
}
} ,
d at a ( ) {
r et u r n {
//表单案例的数据双向绑定
f o r m : {
' '
n a m e : ,
r e gi o n : ' ',
d at e 1 : ' ',
d at e 2 : ' '
} ,
g r id D at a : [ {
d at e : '2016- 05- 02 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1518 弄 '
} , {
d at e : '2016- 05- 04 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1518 弄 '
} , {
d at e : '2016- 05- 01 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1518 弄 '
} , {
d at e : '2016- 05- 03 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1518 弄 '
} ] ,
di a l o g Ta bl e Vi s ibl e : f a l s e ,
di a l o g F o r m Vi s ibl e : f a l s e , //控制form表单案例的对话框
t a bl e D at a : [ {
d at e : '2016- 05- 02 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1518 弄 '
} , {
d at e : '2016- 05- 04 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1517 弄 '
} , {
d at e : '2016- 05- 01 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1519 弄 '
} , {
d at e : '2016- 05- 03 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1516 弄 '
} ]
}
}
}
< / s c r ipt >
< styl e >
< / styl e >
4 .4 案例
4 . 4 . 1 案 例 需 求
参 考 资 料 / 页 面 原 型 /tli a s 智 能 学 习 辅 助 系 统 / 首 页 . ht m l 文 件 ， 浏 览 器 打 开 ， 点 击 页 面 中的左侧栏的员工管理 ， 如下所示 ：
需求说明 ：
1 . 制 作 类 似 格 式 的 页 面 即上面是标题 ， 左侧栏是导航 ， 右侧是数据展示区域 2 . 右 侧 需 要 展 示 搜 索 表 单 3 . 右 侧 表 格 数 据 是 动 态 展 示 的 ， 数 据 来 自 于 后 台 4 . 实 际 示 例 效 果 如 下 图 所 示 ： |
数 据 M o c k 地 址 ： h t t p : / / y a p i . s m a r t- x w o r k . c n / m o c k / 1 6 9 3 2 7 / e m p / l i s t ， 浏 览 器 打开 ， 数据格式如下图所示 ：
通 过 观 察 数 据 ， 我 们 发 现 返 回 的j s o n数 据 的 data属 性 中 ， 才 是 返 回 的 人 员 列 表 信 息
4 . 4 . 2 案 例 分 析
整个案例相对来说功能比较复杂 ， 需求较多 ， 所以我们需要先整体 ， 后局部细节 。 整个页 面我们可以分为3个部分 ， 如下图所示 ：
一旦这样拆分 ， 那么我们的思路就清晰了 ， 主要步骤如下 ：
1 . 创 建 页 面 ， 完 成 页 面 的 整 体 布 局 规 划 2 . 然 后 分 别 针 对 3 个 部 分 进 行 各 自 组 件 的 具 体 实 现 3 . 针 对 于 右 侧 核 心 内 容 展 示 区 域 ， 需 要 使 用 异 步 加 载 数 据 ， 以 表 格 渲 染 数 据 |
4 . 4 . 3
4 . 4 . 3 . 1
代码实现
环境搭建
首 先 我 们 来 到 VS C od e 中 ， 在 v i ew s 目 录 下 创 建 tli a s/ E m p Vi ew . v u e这 个v u e 组 件 ， 并 且编写组件的基本模板代码 ， 其效果如下图所示 ： 其中模板代码在之前的案例中已经提
供 ， 此处不再赘述
并 且 需 要 注 意 的 是 ， 我 们 默 认 访 问 的 是 App . v u e这 个 组 件 ， 而 我 们 App . v u e这 个 组 件 之 前 是 引 入 了 el e m e nt - v i ew这 个 组 件 ， 此 时 我 们 需 要 修 改 成 引 入e m p - v i ew这 个 组 件 ， 并 且 注 释 掉 之 前 的 e l e m e nt - v i ew这 个 组 件 ， 此 时 App . v u e整 体 代 码 如 下 ：
< t e m pl at e >
< div i d = "app " >
<!- - {{message}} - - >
<!- - <element-view > </element-view > - - >
< e m p - v i ew > </ e m p - v i ew >
< / div >
< / t e m pl at e >
< s c r ipt >
i m p o r t E m p Vi ew './views/tlias/Emp View. vue '
// import Element View './views/Element/Element View. vue '
ex p o r t d ef a u lt {
c o m p o n e nt s : { E m p Vi ew } ,
d at a ( ) {
r et u r n {
"message ": "hello world "
}
}
}
< / s c r ipt >
< styl e >
< / styl e >
打 开 浏 览 器 ， 我 们 发 现 之 前 的 e l e m e nt 案 例 内 容 没 了 ， 从 而 呈 现 的 是 一 片 空 白 ， 那 么 接 下 来我们就可以继续开发了 。
4 . 4 . 3 . 2 整 体 布 局
此 处 肯 定 不 需 要 我 们 自 己 去 布 局 的 ， 我 们 直 接 来 到 El e m e nt UI 的 官 网 ， 找 到 布 局 组 件 ， 如 下图所示 ：
从官网提供的示例 ， 我们发现由现成的满足我们需求的布局 ， 所以我们只需要做一位代码 搬 运 工 即 可 。 拷 贝 官 方 提 供 的 如 下 代 码 直 接 粘 贴 到 我 们 E m p Vi ew . v u e 组 件 的 te m plate模 块中即可 ：
< e l- c o nt a i n e r >
< e l-h e a d e r > H e a d e r </ e l-h e a d e r >
< e l- c o nt a i n e r >
< e l- a s id e w idt h = "200px " > A s id e </ e l- a s id e >
< e l- m a i n > M a i n </ e l- m a i n >
< / e l- c o nt a i n e r >
< / e l- c o nt a i n e r >
打开浏览器 ， 此时呈现如下效果 ：
因 为 我 们 没 有 拷 贝 官 方 提 供 的 c s s样 式 ， 所 以 和 官 方 案 例 的 效 果 不 太 一 样 ， 但 是 我 们 需 要 的 布局格式已经有 ， 具体内容我们有自己的安排 。 首先我们需要调整整体布局的高度 ， 所以 我 们 需 要 在 < e l- c o nta i n e r > 上 添 加 一 些 样 式 ， 代 码 如 下 ：
<!- - 设置最外层容器高度为700px, 在加上一个很细的边框 - - >
< e l- c o nt a i n e r styl e = "height: 700px; border : 1px solid #eee " >
到此我们布局功能就完成了
4 . 4 . 3 . 3 顶 部 标 题
对于顶部 ， 我们需要实现的效果如下图所示 ：
所 以 我 们 需 要 修 改 顶 部 的 文 本 内 容 ， 并 且 提 供 背 景 色 的 c s s样 式 ， 具 体 代 码 如 下 ：
< e l-h e a d e r styl e = "font- size:40px;background- color : rgb(238, 241, 246) " > t li a s 智 能 学 习 辅 助 系 统 < / e l-h e a d e r >
此时浏览器打开 ， 呈现效果如下图所示 ：
至此 ， 我们的顶部标题就搞定了
此时整体代码如下 ：
< t e m pl at e >
< div >
<!- - 设置最外层容器高度为700px, 在加上一个很细的边框 - - >
< e l- c o nt a i n e r styl e = "height: 700px; border : 1px solid #eee " >
< e l-h e a d e r styl e = "font- size:40px;background- color : rgb(238,
241, 246) " > t li a s 智 能 学 习 辅 助 系 统 < / e l-h e a d e r >
< e l- c o nt a i n e r >
< e l- a s id e w idt h = "200px " > A s id e </ e l- a s id e >
< e l- m a i n > M a i n </ e l- m a i n >
< / e l- c o nt a i n e r >
< / e l- c o nt a i n e r >
< / div >
< / t e m pl at e >
< s c r ipt >
ex p o r t d ef a u lt {
}
< / s c r ipt >
< styl e >
< / styl e >
4 . 4 . 3 . 4 左 侧 导 航 栏
接下来我们来实现左侧导航栏 ， 那么还是在上述布局组件中提供的案例 ， 找到左侧栏的案 例 ， 如下图所示 ：
所以我们依然只需要搬运代码 ， 然后做简单修改即可 。 官方提供的导航太多 ， 我们不需 要 ， 所以我们需要做删减 ， 在我们的左侧导航栏中粘贴如下代码即可 ：
< e l- m e n u : d ef a u lt - o p e n e d s = "[ '1 ', '3 '] " >
< e l- s u b m e n u i n d ex = "1 " >
< t e m pl at e s l ot = "title " > < i c l a s s = "el-icon - message " > </ i > 导 航 一 < / t e m pl at e >
< e l- m e n u -it e m i n d ex = "1- 1 " > 选 项 1 </ e l- m e n u -it e m >
< e l- m e n u -it e m i n d ex = "1- 2 " > 选 项 2 </ e l- m e n u -it e m >
< / e l- s u b m e n u >
< / e l- m e n u >
删减前后对比图 ：
然后我们打开浏览器 ， 展示如下内容 ：
最后我们只需要替换文字内容即可 。
此时整体代码如下 ：
< t e m pl at e >
< div >
<!- - 设置最外层容器高度为700px, 在加上一个很细的边框 - - >
< e l- c o nt a i n e r styl e = "height: 700px; border : 1px solid #eee " >
< e l-h e a d e r styl e = "font- size:40px;background- color : rgb(238,
241, 246) " > t li a s 智 能 学 习 辅 助 系 统 < / e l-h e a d e r >
< e l- c o nt a i n e r >
< e l- a s id e w idt h = "200px " >
< e l- m e n u : d ef a u lt - o p e n e d s = "[ '1 ', '3 '] " >
< e l- s u b m e n u i n d ex = "1 " >
< t e m pl at e s l ot = "title " > < i c l a s s = "el-icon - message " > < / i > 系 统 信 息 管 理 < / t e m pl at e >
< e l- m e n u -it e m i n d ex = "1- 1 " > 部 门 管 理 < / e l- m e n u -
it e m >
< e l- m e n u -it e m i n d ex = "1- 2 " > 员 工 管 理 < / e l- m e n u -
it e m >
< / e l- s u b m e n u >
< / e l- m e n u >
< / e l- a s id e >
< e l- m a i n >
< / e l- m a i n >
< / e l- c o nt a i n e r >
< / e l- c o nt a i n e r >
< / div >
< / t e m pl at e >
< s c r ipt >
ex p o r t d ef a u lt {
}
< / s c r ipt >
< styl e >
< / styl e >
4 . 4 . 3 . 5 右 侧 核 心 内 容
4 . 4 . 3 . 5 . 1 表 格 编 写
右侧显示的是表单和表格 ， 首先我们先来完成表格的制作 ， 我们同样在官方直接找表格组 件 ， 也可以直接通过我们上述容器组件中提供的案例中找到表格相关的案例 ， 如下图所
示 ：
然 后 找 到 表 格 的 代 码 ， 复 制 到 我 们 布 局 容 器 的 主 题 区 域 ， te m plate模 块 代 码 如 下 ：
< e l- t a bl e : d at a = "table Data " >
< e l- t a bl e - c o l u m n p r o p = "date " l a b e l = "日期 " w idt h = "140 " > < / e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "name " l a b e l = "姓名 " w idt h = "120 " > < / e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "address " l a b e l = "地址 " >
< / e l- t a bl e - c o l u m n >
< / e l- t a bl e >
表格是有数据模型的绑定的 ， 所以我们需要继续拷贝数据模型 ， 代码如下 ：
d at a ( ) {
r et u r n {
t a bl e D at a : [
{
d at e : '2016- 05- 02 ',
n a m e : '王小虎 ',
a dd r e s s : '上海市普陀区金沙江路 1518 弄 '
}
]
}
浏览器打开 ， 呈现如下效果 ：
但是这样的表格和数据并不是我们所需要的 ， 所以 ， 接下来我们需要修改表格 ， 添加列 ， 并且修改列名 。 代码如下 ：
< e l- t a bl e - c o l u m n p r o p = "name " l a b e l = "姓名 " w idt h = "180 " > </ e l- t a bl e -
c o l u m n > < e l- t a bl e - c o l u m n c o l u m n > < e l- t a bl e - c o l u m n c o l u m n > < e l- t a bl e - c o l u m n c o l u m n > | p r o p = "image " l a b e l = "图像 " w idt h = "180 " > </ e l- t a bl e - p r o p = "gender " l a b e l = "性别 " w idt h = "140 " > </ e l- t a bl e - p r o p = "job " l a b e l = "职位 " w idt h = "140 " > </ e l- t a bl e - |
< e l- t a bl e - c o l u m n p r o p = "entrydate " l a b e l = "入职日期 " w idt h = "180 " > </ e l - t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "update time " l a b e l = "最后操作时间 " w idt h = "230 " > < / e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n l a b e l = "操作 " >
< e l-b utt o n typ e = "primary " s iz e = "mini " > 编 辑 < / e l-b utt o n >
< e l-b utt o n typ e = "danger " s iz e = "mini " > 删 除 < / e l-b utt o n > < / e l- t a bl e - c o l u m n >
需 要 注 意 的 是 ， 我 们 列 名 的 p ro p 属 性 值 得 内 容 并 不 是 乱 写 的 ， 因 为 我 们 将 来 需 要 绑 定 后 台 的数据的 ， 所以如下图所示 ：
并 且 此 时 我 们 data 中 之 前 的 数 据 模 型 就 不 可 用 了 ， 所 以 需 要 清 空 数 据 ， 设 置 为 空 数 组 ， 代 码 如 下 ：
d at a ( ) {
r et u r n {
t a bl e D at a : [
]
}
}
此时打开浏览器 ， 呈现如下效果 ：
此时整体页面代码如下 ：
< t e m pl at e >
< div >
<!- - 设置最外层容器高度为700px, 在加上一个很细的边框 - - >
< e l- c o nt a i n e r styl e = "height: 700px; border : 1px solid #eee " >
< e l-h e a d e r styl e = "font- size:40px;background- color : rgb(238,
241, 246) " > t li a s 智 能 学 习 辅 助 系 统 < / e l-h e a d e r >
< e l- c o nt a i n e r >
< e l- a s id e w idt h = "200px " >
< e l- m e n u : d ef a u lt - o p e n e d s = "[ '1 ', '3 '] " >
< e l- s u b m e n u i n d ex = "1 " >
< t e m pl at e s l ot = "title " > < i c l a s s = "el-icon - message " > < / i > 系 统 信 息 管 理 < / t e m pl at e >
< e l- m e n u -it e m i n d ex = "1- 1 " > 部 门 管 理 < / e l- m e n u -
it e m >
< e l- m e n u -it e m i n d ex = "1- 2 " > 员 工 管 理 < / e l- m e n u -
it e m >
< / e l- s u b m e n u >
< / e l- m e n u >
< / e l- a s id e >
< e l- m a i n >
< e l- t a bl e : d at a = "table Data " >
< e l- t a bl e - c o l u m n p r o p = "name "
w idt h = "180 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "image "
w idt h = "180 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "gender "
w idt h = "140 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "job "
w idt h = "140 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "entrydate " l a b e l = "入职日期 " w idt h = "180 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "update time " l a b e l = "最后操作时 间 " w idt h = "230 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n l a b e l = "操作 " >
< e l-b utt o n typ e = "primary " s iz e = "mini " > 编 辑 < / e l -
b utt o n >
< e l-b utt o n typ e = "danger " s iz e = "mini " > 删 除 < / e l -
b utt o n >
< / e l- t a bl e - c o l u m n >
< / e l- t a bl e >
< / e l- m a i n >
< / e l- c o nt a i n e r >
< / e l- c o nt a i n e r >
< / div >
< / t e m pl at e >
< s c r ipt >
ex p o r t d ef a u lt {
d at a ( ) {
r et u r n {
t a bl e D at a : [
]
}
}
}
< / s c r ipt >
< styl e >
< / styl e >
l a b e l = "姓名 "
l a b e l = "图像 "
l a b e l = "性别 "
l a b e l = "职位 "
4 . 4 . 3 . 5 . 2 表 单 编 写
在表格的上方 ， 还需要如下图所示的表单 ：
所 以 接 下 来 我 们 需 要 去 El e m e nt UI 官 网 ， 在 表 单 组 件 中 找 到 与 之 类 似 的 示 例 ， 加 以 修 改 从 而打成我们希望的效果 ， 官方示例如下图所示 ：
所 以 我 们 直 接 拷 贝 代 码 主 体 区 域 的 tabl e 组 件 的 上 方 即 可 ， 并 且 我 们 需 要 修 改 数 据 绑 定 的 的变量名 ， 最终代码如下 ：
<!- - 表单 - - >
< e l-f o r m : i n li n e = "true " : m o d e l = "searchForm " c l a s s = "demo -form -inline " > < e l-f o r m -it e m l a b e l = "姓名 " >
< e l-i n p ut v - m o d e l = "searchForm. name " pl a c e h o ld e r = "姓名 " > </ e l - i n p ut >
< / e l-f o r m -it e m >
< e l-f o r m -it e m l a b e l = "性别 " >
< e l- s e l e ct v - m o d e l = "searchForm. gender " pl a c e h o ld e r = "性别 " > < e l- o pti o n l a b e l = "男 " v a l u e = "1 " > </ e l- o pti o n >
< e l- o pti o n l a b e l = "女 " v a l u e = "2 " > </ e l- o pti o n >
< / e l- s e l e ct >
< / e l-f o r m -it e m >
< e l-f o r m -it e m >
< e l-b utt o n typ e = "primary " @ c li c k = "on Submit " > 查 询 < / e l-b utt o n > < / e l-f o r m -it e m >
< / e l-f o r m >
代码修改前后对比图 ：
既 然 我 们 表 单 使 用v - m o d e l 进 行 数 据 的 双 向 绑 定 了 ， 所 以 我 们 紧 接 着 需 要 在 data 中 定 义 s ea rc h F o r m的 数 据 模 型 ， 代 码 如 下 ：
d at a ( ) {
r et u r n {
t a bl e D at a : [
] ,
s e a r c h F o r m : {
' '
n a m e : ,
g e n d e r : ' '
}
}
}
而 且 ， 表 单 的 提 交 按 钮 ， 绑 定 了 o n S ub m it 函 数 ， 所 以 我 们 还 需 要 在 m eth o d s 中 定 义 o n S u b m it 函 数 ， 代 码 如 下 ：
注 意 的 是 m eth o d s 属 性 需 要 和 data属 性 同 级
m et h o d s : {
o n S u b m it : f u n cti o n ( ) {
c o n s o l e . l o g ( t hi s . s e a r c h F o r m ) ;
}
}
浏览器打开如图所示 ：
1 6 6 9 3 8 1 5 2 0 0 0 4
可 以 发 现 我 们 还 缺 少 一 个 时 间 ， 所 以 可 以 从 e l e m e nt UI 官 网 找 到 日 期 组 件 ， 如 下 图 所 示 ：
参考官方代码 ， 然后在我们之前的表单中添加一个日期表单 ， 具体代码如下 ：
< / e l-f o r m -it e m >
< e l-f o r m -it e m l a b e l = "入职日期 " >
< e l-d at e - pi c ke r
v - m o d e l = "searchForm. entrydate "
typ e = "date range "
r a n g e - s e p a r at o r = "至 "
st a r t - pl a c e h o ld e r = "开始日期 "
e n d - pl a c e h o ld e r = "结束日期 " >
< / e l-d at e - pi c ke r >
< / e l-f o r m -it e m >
我 们 添 加 了 双 向 绑 定 ， 所 以 我 们 需 要 在 data的 s ea rc h F o r m 中 定 义 出 来 ， 需 要 注 意 的 是 这 个日期包含2个值 ， 所以我们定义为数组 ， 代码如下 ：
s e a r c h F o r m : {
' '
n a m e : ,
g e n d e r : ' ' ,
e nt r y d at e : [ ]
}
此时我们打开浏览器 ， 填写表单 ， 并且点击查询按钮 ， 查看浏览器控制台 ， 可以看到表单 的内容 ， 效果如下图所示 ：
此时完整代码如下所示 ：
< t e m pl at e >
< div >
<!- - 设置最外层容器高度为700px, 在加上一个很细的边框 - - >
< e l- c o nt a i n e r styl e = "height: 700px; border : 1px solid #eee " >
< e l-h e a d e r styl e = "font- size:40px;background- color : rgb(238,
241, 246) " > t li a s 智 能 学 习 辅 助 系 统 < / e l-h e a d e r >
< e l- c o nt a i n e r >
< e l- a s id e w idt h = "200px " >
< e l- m e n u : d ef a u lt - o p e n e d s = "[ '1 ', '3 '] " >
< e l- s u b m e n u i n d ex = "1 " >
< t e m pl at e s l ot = "title " > < i c l a s s = "el-icon - message " > < / i > 系 统 信 息 管 理 < / t e m pl at e >
< e l- m e n u -it e m i n d ex = "1- 1 " > 部 门 管 理 < / e l- m e n u -
it e m >
< e l- m e n u -it e m i n d ex = "1- 2 " > 员 工 管 理 < / e l- m e n u -
it e m >
< / e l- s u b m e n u >
< / e l- m e n u >
< / e l- a s id e >
< e l- m a i n >
<!- - 表单 - - >
< e l-f o r m : i n li n e = "true " : m o d e l = "searchForm "
c l a s s = "demo -form -inline " >
< e l-f o r m -it e m l a b e l = "姓名 " >
< e l-i n p ut v - m o d e l = "searchForm. name "
pl a c e h o ld e r = "姓名 " > </ e l-i n p ut >
< / e l-f o r m -it e m >
< e l-f o r m -it e m l a b e l = "性别 " >
< e l- s e l e ct v - m o d e l = "searchForm. gender " pl a c e h o ld e r = "性别 " >
< e l- o pti o n l a b e l = "男 " v a l u e = "1 " > </ e l- o pti o n > < e l- o pti o n l a b e l = "女 " v a l u e = "2 " > </ e l- o pti o n >
< / e l- s e l e ct >
< / e l-f o r m -it e m >
< e l-f o r m -it e m l a b e l = "入职日期 " >
< e l-d at e - pi c ke r
v - m o d e l = "searchForm. entrydate "
typ e = "date range "
r a n g e - s e p a r at o r = "至 "
st a r t - pl a c e h o ld e r = "开始日期 "
e n d - pl a c e h o ld e r = "结束日期 " >
< / e l-d at e - pi c ke r >
< / e l-f o r m -it e m >
< e l-f o r m -it e m >
< e l-b utt o n typ e = "primary " @ c li c k = "on Submit " > 查 询
< / e l-b utt o n >
< / e l-f o r m -it e m >
< / e l-f o r m >
<!- - 表格 - - >
< e l- t a bl e : d at a = "table Data " >
< e l- t a bl e - c o l u m n p r o p = "name " l a b e l = "姓名 "
w idt h = "180 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "image " l a b e l = "图像 "
w idt h = "180 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "gender " l a b e l = "性别 "
w idt h = "140 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "job " l a b e l = "职位 "
w idt h = "140 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "entrydate " l a b e l = "入职日期 " w idt h = "180 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "update time " l a b e l = "最后操作时 间 " w idt h = "230 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n l a b e l = "操作 " >
< e l-b utt o n typ e = "primary " s iz e = "mini " > 编 辑 < / e l -
b utt o n >
< e l-b utt o n typ e = "danger " s iz e = "mini " > 删 除 < / e l -
b utt o n >
< / e l- t a bl e - c o l u m n >
< / e l- t a bl e >
< / e l- m a i n >
< / e l- c o nt a i n e r >
< / e l- c o nt a i n e r >
< / div >
< / t e m pl at e >
< s c r ipt >
ex p o r t d ef a u lt {
d at a ( ) {
r et u r n {
t a bl e D at a : [
] ,
s e a r c h F o r m : {
' '
n a m e : ,
g e n d e r : ' ',
e nt r y d at e : [ ]
}
}
} ,
m et h o d s : {
o n S u b m it : f u n cti o n ( ) {
c o n s o l e . l o g ( t hi s . s e a r c h F o r m ) ;
}
}
}
< / s c r ipt >
< styl e >
< / styl e >
4 . 4 . 3 . 5 . 3 分 页 工 具 栏
分页条我们之前做过 ， 所以我们直接找到之前的案例 ， 复制即可 ， 代码如下 ：
其 中 te m plate模 块 代 码 如 下 ：
<!- - Pagination分页 - - >
< e l- pa gi n ati o n
@ s iz e - c h a n g e = "handle Size Change "
@ c u r r e nt - c h a n g e = "handle Current Change "
b a c kg r o u n d
l ay o ut = "sizes, prev, pager, next,jumper, total "
: t ot a l = "1000 " >
< / e l- pa gi n ati o n >
同 时 m eth o d s 中 需 要 声 明 2 个 函 数 ， 代 码 如 下 ：
h a n dl e Siz e Ch a n g e ( v a l ) {
c o n s o l e . l o g ( ` 每 页 $ { v a l } 条 ` ) ;
} ,
h a n dl e C u r r e nt Ch a n g e ( v a l ) {
c o n s o l e . l o g ( ` 当 前 页 : $ { v a l } ` ) ;
}
此时打开浏览器 ， 效果如下图所示 ：
此时整体代码如下 ：
< t e m pl at e >
< div >
<!- - 设置最外层容器高度为700px, 在加上一个很细的边框 - - >
< e l- c o nt a i n e r styl e = "height: 700px; border : 1px solid #eee " >
< e l-h e a d e r styl e = "font- size:40px;background- color : rgb(238,
241, 246) " > t li a s 智 能 学 习 辅 助 系 统 < / e l-h e a d e r >
< e l- c o nt a i n e r >
< e l- a s id e w idt h = "200px " >
< e l- m e n u : d ef a u lt - o p e n e d s = "[ '1 ', '3 '] " >
< e l- s u b m e n u i n d ex = "1 " >
< t e m pl at e s l ot = "title " > < i c l a s s = "el-icon - message " > < / i > 系 统 信 息 管 理 < / t e m pl at e >
< e l- m e n u -it e m i n d ex = "1- 1 " > 部 门 管 理 < / e l- m e n u -
it e m >
< e l- m e n u -it e m i n d ex = "1- 2 " > 员 工 管 理 < / e l- m e n u -
it e m >
< / e l- s u b m e n u >
< / e l- m e n u >
< / e l- a s id e >
< e l- m a i n >
<!- - 表单 - - >
< e l-f o r m : i n li n e = "true " : m o d e l = "searchForm "
c l a s s = "demo -form -inline " >
< e l-f o r m -it e m l a b e l = "姓名 " >
< e l-i n p ut v - m o d e l = "searchForm. name "
pl a c e h o ld e r = "姓名 " > </ e l-i n p ut >
< / e l-f o r m -it e m >
< e l-f o r m -it e m l a b e l = "性别 " >
< e l- s e l e ct v - m o d e l = "searchForm. gender " pl a c e h o ld e r = "性别 " >
< e l- o pti o n l a b e l = "男 " v a l u e = "1 " > </ e l- o pti o n > < e l- o pti o n l a b e l = "女 " v a l u e = "2 " > </ e l- o pti o n > < / e l- s e l e ct >
< / e l-f o r m -it e m >
< e l-f o r m -it e m l a b e l = "入职日期 " >
< e l-d at e - pi c ke r
v - m o d e l = "searchForm. entrydate "
typ e = "date range "
r a n g e - s e p a r at o r = "至 "
st a r t - pl a c e h o ld e r = "开始日期 "
e n d - pl a c e h o ld e r = "结束日期 " >
< / e l-d at e - pi c ke r >
< / e l-f o r m -it e m >
< e l-f o r m -it e m >
< e l-b utt o n typ e = "primary " @ c li c k = "on Submit " > 查 询
< / e l-b utt o n >
< / e l-f o r m -it e m >
< / e l-f o r m >
<!- - 表格 - - >
< e l- t a bl e : d at a = "table Data " >
< e l- t a bl e - c o l u m n p r o p = "name " l a b e l = "姓名 "
w idt h = "180 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "image " l a b e l = "图像 "
w idt h = "180 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "gender " l a b e l = "性别 "
w idt h = "140 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "job " l a b e l = "职位 "
w idt h = "140 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "entrydate " l a b e l = "入职日期 " w idt h = "180 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "update time " l a b e l = "最后操作时 间 " w idt h = "230 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n l a b e l = "操作 " >
< e l-b utt o n typ e = "primary " s iz e = "mini " > 编 辑 < / e l -
b utt o n >
< e l-b utt o n typ e = "danger " s iz e = "mini " > 删 除 < / e l -
b utt o n >
< / e l- t a bl e - c o l u m n >
< / e l- t a bl e >
<!- - Pagination分页 - - >
< e l- pa gi n ati o n
@ s iz e - c h a n g e = "handle Size Change "
@ c u r r e nt - c h a n g e = "handle Current Change "
b a c kg r o u n d
l ay o ut = "sizes, prev, pager, next,jumper, total " : t ot a l = "1000 " >
< / e l- pa gi n ati o n >
< / e l- m a i n >
< / e l- c o nt a i n e r >
< / e l- c o nt a i n e r >
< / div >
< / t e m pl at e >
< s c r ipt >
ex p o r t d ef a u lt {
d at a ( ) {
r et u r n {
t a bl e D at a : [
] ,
s e a r c h F o r m : {
' '
n a m e : ,
g e n d e r : ' ',
e nt r y d at e : [ ]
}
}
} ,
m et h o d s : {
o n S u b m it : f u n cti o n ( ) {
c o n s o l e . l o g ( t hi s . s e a r c h F o r m ) ;
} ,
h a n dl e Siz e Ch a n g e ( v a l ) {
c o n s o l e . l o g ( ` 每 页 $ { v a l } 条 ` ) ;
} ,
h a n dl e C u r r e nt Ch a n g e ( v a l ) {
c o n s o l e . l o g ( ` 当 前 页 : $ { v a l } ` ) ;
}
}
}
< / s c r ipt >
< styl e >
< / styl e >
4 . 4 . 3 . 6 异 步 数 据 加 载
4 . 4 . 3 . 6 . 1 异 步 加 载 数 据
我 们 最 后 要 做 的 就 是 异 步 加 载 数 据 ， 所 以 我 们 需 要 使 用 ax i o s发 送 ajax 请 求 。
在 v u e项 目 中 ， 对 于 axi o s 的 使 用 ， 分 为 如 下 2 步 ：
1 . 安 装 ax i o s : n p m i n sta ll a x i o s 2 . 需 要 使 用 ax i o s 时 ， 导 入 ax i o s : i m p o r t ax i o s ' a x i o s ' |
接 下 来 我 们 先 来 到 项 目 的 执 行 终 端 ， 然 后 输 入 命 令 ， 安 装 ax i o s ， 具 体 操 作 如 下 图 所 示 ：
然 后 重 启 项 目 ， 来 到 我 们 的 E m p Vi ew . v u e 组 件 页 面 ， 通 过 im p o r t 命 令 导 入 ax i o s ， 代 码 如下 ：
i m p o r t ax i o s ' a x i o s ' ;
那 么 我 们 什 么 时 候 发 送 ax i o s 请 求 呢 ？ 页 面 加 载 完 成 ， 自 动 加 载 ， 所 以 可 以 使 用 之 前 的
m o u nted 钩 子 函 数 ， 并 且 我 们 需 要 将 得 到 的 员 工 数 据 要 展 示 到 表 格 ， 所 以 数 据 需 要 赋 值 给 数 据 模 型 table Data ， 所 以 我 们 编 写 如 下 代 码 ：
m o u nt e d ( ) {
a x i o s . g et ( "http://yap i. smart-x work. cn/mock/169327/emp/list ") . t h e n ( r e s p = > {
t hi s . t a ble D at a = r e s p . d at a . d at a ; //响应数据赋值给数据模型 } ) ;
}
此时浏览器打开 ， 呈现如下效果 ：
但是很明显 ， 性别和图片的内容显示不正确 ， 所以我们需要修复 。
4 . 4 . 3 . 6 . 2 性 别 内 容 展 示 修 复
首 先 我 们 来 到 El e m e nt UI 提 供 的 表 格 组 件 ， 找 到 如 下 示 例 ：
我们仔细对比效果和功能实现代码 ， 发现其中涉及2个非常重要的点 ：
· < te m plate > : 用 于 自 定 义 列 的 内 容
。 s l ot - s c o p e : 通 过 属 性 的 row获 取 当 前 行 的 数 据
所以接下来 ， 我们可以通过上述的标签自定义列的内容即可 ， 修改性别列的内容代码如 下 ：
< e l- t a bl e - c o l u m n p r o p = "gender " l a b e l = "性别 " w idt h = "140 " >
< t e m pl at e s l ot - s c o p e = "scope " >
{ { s c o p e . r ow . g e n d e r = = 1 ? " 男 " : " 女 " } }
< / t e m pl at e >
< / e l- t a bl e - c o l u m n >
此时打开浏览器 ， 效果如下图所示 ： 性别一列的值修复成功
4 . 4 . 3 . 6 . 3 图 片 内 容 展 示 修 复
图 片 内 容 的 修 复 和 上 述 一 致 ， 需 要 借 助 < te m plate >标 签 自 定 义 列 的 内 容 ， 需 要 需 要 展 示 图 片 ， 直 接 借 助 < i m g >标 签 即 可 ， 并 且 需 要 设 置 图 片 的 宽 度 和 高 度 ， 所 以 直 接 修 改 图 片 列 的代码如下 ：
< e l- t a bl e - c o l u m n p r o p = "image " l a b e l = "图像 " w idt h = "180 " > < t e m pl at e s l ot - s c o p e = "scope " >
< i m g : s r c = "scope. row. image " w idt h = "100px " h e ight = "70px " > < / t e m pl at e >
< / e l- t a bl e - c o l u m n >
此时回到浏览器 ， 效果如下图所示 ： 图片展示修复成功
此时整个案例完整 ， 其完整代码如下 ：
< t e m pl at e >
< div >
<!- - 设置最外层容器高度为700px, 在加上一个很细的边框 - - >
< e l- c o nt a i n e r styl e = "height: 700px; border : 1px solid #eee " >
< e l-h e a d e r styl e = "font- size:40px;background- color : rgb(238,
241, 246) " > t li a s 智 能 学 习 辅 助 系 统 < / e l-h e a d e r >
< e l- c o nt a i n e r >
< e l- a s id e w idt h = "230px " styl e = "border : 1px solid #eee " > < e l- m e n u : d ef a u lt - o p e n e d s = "[ '1 ', '3 '] " >
< e l- s u b m e n u i n d ex = "1 " >
< t e m pl at e s l ot = "title " > < i c l a s s = "el-icon - message " > < / i > 系 统 信 息 管 理 < / t e m pl at e >
< e l- m e n u -it e m i n d ex = "1- 1 " > 部 门 管 理 < / e l- m e n u -
it e m >
< e l- m e n u -it e m i n d ex = "1- 2 " > 员 工 管 理 < / e l- m e n u -
it e m >
< / e l- s u b m e n u >
< / e l- m e n u >
< / e l- a s id e >
< e l- m a i n >
<!- - 表单 - - >
< e l-f o r m : i n li n e = "true " : m o d e l = "searchForm "
c l a s s = "demo -form -inline " >
< e l-f o r m -it e m l a b e l = "姓名 " >
< e l-i n p ut v - m o d e l = "searchForm. name "
pl a c e h o ld e r = "姓名 " > </ e l-i n p ut >
< / e l-f o r m -it e m >
< e l-f o r m -it e m l a b e l = "性别 " >
< e l- s e l e ct v - m o d e l = "searchForm. gender " pl a c e h o ld e r = "性别 " >
< e l- o pti o n l a b e l = "男 " v a l u e = "1 " > </ e l- o pti o n > < e l- o pti o n l a b e l = "女 " v a l u e = "2 " > </ e l- o pti o n > < / e l- s e l e ct >
< / e l-f o r m -it e m >
< e l-f o r m -it e m l a b e l = "入职日期 " >
< e l-d at e - pi c ke r
v - m o d e l = "searchForm. entrydate "
typ e = "date range "
r a n g e - s e p a r at o r = "至 "
st a r t - pl a c e h o ld e r = "开始日期 "
e n d - pl a c e h o ld e r = "结束日期 " >
< / e l-d at e - pi c ke r >
< / e l-f o r m -it e m >
< e l-f o r m -it e m >
< e l-b utt o n typ e = "primary " @ c li c k = "on Submit " > 查 询
< / e l-b utt o n >
< / e l-f o r m -it e m >
< / e l-f o r m >
<!- - 表格 - - >
< e l- t a bl e : d at a = "table Data " >
< e l- t a bl e - c o l u m n p r o p = "name " l a b e l = "姓名 "
w idt h = "180 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "image " l a b e l = "图像 "
w idt h = "180 " >
< t e m pl at e s l ot - s c o p e = "scope " >
< i m g : s r c = "scope. row. image " w idt h = "100px "
h e ight = "70px " >
< / t e m pl at e >
< / e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "gender " l a b e l = "性别 "
w idt h = "140 " >
< t e m pl at e s l ot - s c o p e = "scope " >
{ { s c o p e . r ow . g e n d e r = = 1 ? " 男 " : " 女 " } }
< / t e m pl at e >
< / e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "job " l a b e l = "职位 "
w idt h = "140 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "entrydate " l a b e l = "入职日期 " w idt h = "180 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n p r o p = "update time " l a b e l = "最后操作时 间 " w idt h = "230 " > </ e l- t a bl e - c o l u m n >
< e l- t a bl e - c o l u m n l a b e l = "操作 " >
< e l-b utt o n typ e = "primary " s iz e = "mini " > 编 辑 < / e l -
b utt o n >
< e l-b utt o n typ e = "danger " s iz e = "mini " > 删 除 < / e l -
b utt o n >
< / e l- t a bl e - c o l u m n >
< / e l- t a bl e >
<!- - Pagination分页 - - >
< e l- pa gi n ati o n
@ s iz e - c h a n g e = "handle Size Change "
@ c u r r e nt - c h a n g e = "handle Current Change "
b a c kg r o u n d
l ay o ut = "sizes, prev, pager, next,jumper, total " : t ot a l = "1000 " >
< / e l- pa gi n ati o n >
< / e l- m a i n >
< / e l- c o nt a i n e r >
< / e l- c o nt a i n e r >
< / div >
< / t e m pl at e >
< s c r ipt >
i m p o r t ax i o s 'a xios '
ex p o r t d ef a u lt {
d at a ( ) {
r et u r n {
t a bl e D at a : [
] ,
s e a r c h F o r m : {
' '
n a m e : ,
g e n d e r : ' ',
e nt r y d at e : [ ]
}
}
} ,
m et h o d s : {
o n S u b m it : f u n cti o n ( ) {
c o n s o l e . l o g ( t hi s . s e a r c h F o r m ) ;
} ,
h a n dl e Siz e Ch a n g e ( v a l ) {
c o n s o l e . l o g ( ` 每 页 $ { v a l } 条 ` ) ;
} ,
h a n dl e C u r r e nt Ch a n g e ( v a l ) {
c o n s o l e . l o g ( ` 当 前 页 : $ { v a l } ` ) ;
}
} ,
m o u nt e d ( ) {
a x i o s . g et ( "http://yap i. smart-x work. cn/mock/169327/emp/list ") . t h e n ( r e s p = > {
t hi s . t a bl e D at a = r e s p . d at a . d at a ;
} ) ;
}
}
< / s c r ipt >
< styl e >
< / styl e >
5 Vue路由
5 . 1 路由介绍
将 资 代 码 /v u e - p roj e ct ( 路 由 ) /v u e - p roj e ct/ s rc/ v i ew s/ tli a s/ D e pt Vi ew . v u e拷 贝 到 我 们 当 前 E m p Vi ew . v u e 同 级 ， 其 结 构 如 下 ：
此 时 我 们 希 望 基 于 4 . 4 案 例 中 的 功 能 ， 实 现 点 击 侧 边 栏 的 部 门 管 理 ， 显 示 部 门 管 理 的 信 息 ， 点击员工管理 ， 显示员工管理的信息 ， 效果如下图所示 ：
这 就 需 要 借 助 我 们 的v u e 的 路 由 功 能 了 。
前 端 路 由 ： URL 中 的 ha s h ( # 号 之 后 的 内 容 ） 与 组 件 之 间 的 对 应 关 系 ， 如 下 图 所 示 ：
当 我 们 点 击 左 侧 导 航 栏 时 ， 浏 览 器 的 地 址 栏 会 发 生 变 化 ， 路 由 自 动 更 新 显 示 与 u r l 所 对 应 的 v u e 组 件 。
而 我 们v u e 官 方 提 供 了 路 由 插 件 Vu e Ro ute r, 其 主 要 组 成 如 下 ：
Vu e Ro ute r ： 路 由 器 类 ， 根 据 路 由 请 求 在 路 由 视 图 中 动 态 渲 染 选 中 的 组 件
· < ro ute r -li n k > ： 请 求 链 接 组 件 ， 浏 览 器 会 解 析 成 < a >
· < ro ute r - v i ew > ： 动 态 视 图 组 件 ， 用 来 渲 染 展 示 与 路 由 路 径 对 应 的 组 件
其工作原理如下图所示 ：
首 先 Vu e Ro ute r根 据 我 们 配 置 的 u r l 的 ha s h 片 段 和 路 由 的 组 件 关 系 去 维 护 一 张 路 由 表 ;
然 后 我 们 页 面 提 供 一 个 < ro ute r -li n k > 组 件 , 用 户 点 击 ， 发 出 路 由 请 求 ;
接 着 我 们 的 Vu e Ro ute r根 据 路 由 请 求 ， 在 路 由 表 中 找 到 对 应 的v u e 组 件 ；
最 后 Vu e Ro ute r会 切 换 < ro ute r - v i ew > 中 的 组 件 ， 从 而 进 行 视 图 的 更 新
5 . 2 路由入门
接 下 来 我 们 来 演 示v u e 的 路 由 功 能 。
首 先 我 们 需 要 先 安 装v u e - ro ute r插 件 ， 可 以 通 过 如 下 命 令
n p m i n st a ll v u e - r o ut e r @ 3 . 5 . 1
但是我们不需要安装 ， 因为当初我们再创建项目时 ， 已经勾选了路由功能 ， 已经安装好
了 。
然 后 我 们 需 要 在 s rc/ ro ute r/ i ndex .j s 文 件 中 定 义 路 由 表 ， 根 据 其 提 供 的 模 板 代 码 进 行 修 改 ， 最终代码如下 ：
i m p o r t V u e 'vue '
i m p o r t V u e Ro ut e r 'vue - router '
V u e . u s e ( V u e Ro ut e r)
c o n st r o ut e s = [
{
p ath : '/emp ', //地址hash
' '
n a m e : emp ,
c o m p o n e nt : ( ) = > i m p o r t ( '. ./views/tlias/Emp View. vue ') //对应的vue组件 } ,
{
p at h : '/dept ',
n a m e : 'dept ',
c o m p o n e nt : ( ) = > i m p o r t ( '. ./views/tlias/Dept View. vue ')
}
]
c o n st r o ut e r = n ew V u e Ro ut e r ( {
r o ut e s
} )
ex p o r t d ef a u lt r o ut e r
注 意 需 要 去 掉 没 有 引 用 的 im p o r t 模 块 。
在 m a i n .j s 中 ， 我 们 已 经 引 入 了 ro ute r功 能 ， 如 下 图 所 示 ：
路 由 基 本 信 息 配 置 好 了 ， 路 由 表 已 经 被 加 载 ， 此 时 我 们 还 缺 少 2 个 东 西 ， 就 是 < ro ute r -
li n >和 < ro ute r - v i ew > , 所 以 我 们 需 要 修 改 2 个 页 面 （ E m p Vi ew . v u e和
D e pt Vi ew . v u e ） 我 们 左 侧 栏 的 2 个 按 钮 为 ro ute r -li n k , 其 代 码 如 下 ：
< e l- m e n u -it e m i n d ex = "1- 1 " >
< r o ut e r -li n k t o = "/dept " > 部 门 管 理 < / r o ut e r -li n k >
< / e l- m e n u -it e m >
< e l- m e n u -it e m i n d ex = "1- 2 " >
< r o ut e r -li n k t o = "/emp " > 员 工 管 理 < / r o ut e r -li n k >
< / e l- m e n u -it e m >
然 后 我 们 还 需 要 在 内 容 展 示 区 域 即 App . v u e 中 定 义 ro ute - v i ew ， 作 为 组 件 的 切 换 ， 其 App . v u e 的 完 整 代 码 如 下 ：
< t e m pl at e >
< div i d = "app " >
<!- - {{message}} - - >
<!- - <element-view > </element-view > - - >
<!- - <emp -view > </emp -view > - - >
< r o ut e r - v i ew > </ r o ut e r - v i ew >
< / div >
< / t e m pl at e >
< s c r ipt >
// import Emp View './views/tlias/Emp View. vue '
// import Element View './views/Element/Element View. vue '
ex p o r t d ef a u lt {
c o m p o n e nt s : { } ,
d at a ( ) {
r et u r n {
"message ": "hello world "
}
}
}
< / s c r ipt >
< styl e >
< / styl e >
但 是 我 们 浏 览 器 打 开 地 址 ： h t t p : / / l o c a l h o s t : 7 0 0 0 / ， 发 现 一 片 空 白 ， 因 为 我 们 默 认 的 路 由 路 径 是 / , 但 是 路 由 配 置 中 没 有 对 应 的 关 系 ，
所 以 我 们 需 要 在 路 由 配 置 中 / 对 应 的 路 由 组 件 ， 代 码 如 下 ：
c o n st r o ut e s = [
{
p at h : '/emp ',
' '
n a m e : emp ,
c o m p o n e nt : ( ) = > i m p o r t ( '. ./views/tlias/Emp View. vue ')
} ,
{
p at h : '/dept ',
n a m e : 'dept ',
c o m p o n e nt : ( ) = > i m p o r t ( '. ./views/tlias/Dept View. vue ')
} ,
{
p at h : '/',
r e di r e ct : '/emp ' //表示重定向到/emp即可
} ,
]
此 时 我 们 打 开 浏 览 器 ， 访 问h t t p : / / l o c a l h o s t : 7 0 0 0 发 现 直 接 访 问 的 是e m p 的 页 面 ， 并 且能够进行切换了 ， 其具体如下图所示 ：
到此我们的路由实现成功 。
6 打包部署
我们的前端工程开发好了 ， 但是我们需要发布 ， 那么如何发布呢 ？ 主要分为2步 ：
1 . 前 端 工 程 打 包 |
2 . 通 过n g i n x 服 务 器 发 布 前 端 工 程 |
6 . 1 前端工程打包
接下来我们先来对前端工程进行打包
我 们 直 接 通 过 VS C od e 的 N PM 脚 本 中 提 供 的 b u ild 按 钮 来 完 整 ， 如 下 图 所 示 ， 直 接 点 击 即 可 ：
然 后 会 在 工 程 目 录 下 生 成 一 个 dist 目 录 ， 用 于 存 放 需 要 发 布 的 前 端 资 源 ， 如 下 图 所 示 ：
6 . 2 部署前端工程
6 . 2 . 1 ngin x介 绍
n g in x : Ng i n x是 一 款 轻 量 级 的 Web 服 务 器 / 反 向 代 理 服 务 器 及 电 子 邮 件 （ IMAP/ POP 3 ） 代理服务器 。 其特点是占有内存少 ， 并发能力强 ， 在各大型互联网公司都有非常广泛的使 用 。
n igi n x在 w i n d ow s 中 的 安 装 是 比 较 方 便 的 ， 直 接 解 压 即 可 。 所 以 我 们 直 接 将 资 料 中 的 n g i n x - 1 . 2 2 . 0 . z ip 压 缩 文 件 拷 贝 到 无 中 文 的 目 录 下 ， 直 接 解 压 即 可 ， 如 下 图 所 示 就 是 n g i n x 的 解 压 目 录 以 及 目 录 结 构 说 明 ：
很 明 显 ， 我 们 如 果 要 发 布 ， 直 接 将 资 源 放 入 到 ht m l 目 录 中 。
6 . 2 . 2 部 署
将 我 们 之 前 打 包 的 前 端 工 程 dist 目 录 下 得 内 容 拷 贝 到n g i n x 的 ht m l 目 录 下 ， 如 下 图 所 示 ：
然 后 我 们 通 过 双 击n g i n x 下 得n g i n x . ex e 文 件 来 启 动n g i n x ， 如 下 图 所 示 ：
到此 ， 我们的前端工程发布成功 。
PS : 如 果 8 0 端 口 被 占 用 ， 我 们 需 要 通 过 co nf /ng i n x . co nf 配 置 文 件 来 修 改 端 口 号 。 如 下 图所示 ：
浙公网安备 33010602011771号