day03_Vue_Element

文章目錄

01.Ajax
- 1.1 Ajax 概述
- 1.2 同步異步
- 1.3 原生Ajax
2. Axios
- 2.1 Axios的基本使用
- 2.2 Axios快速入門
- 2.3請求方法的別名
- 2.4 案例
3 前后臺分離開發
- 3.1 前后臺分離開發介紹
04 YAPI
- 4.1 YAPI介紹
- 4.2 接口文檔管理
05 前端工程化
- 5.1 前端工程化介紹
- 5.2 前端工程化入門
- - 5.2.1 環境準備
  - 5.2.2 Vue項目簡介
  - 5.2.3 創建vue項目
- 5.2.4 vue項目目錄結構介紹
- 5.2.5 運行vue項目
- 5.2.6 Vue項目開發流程
06 Vue組件庫Element
- 6.1 Element介紹
- 6.2 快速入門
- 6.3 Table表格
- - 6.3.1 組件演示
- 6.3.2 組件屬性詳解
- 6.4 Pagination分頁
- - 6.4.1 組件演示
  - 6.4.2 組件屬性詳解
  - 6.4.3 組件事件詳解
- 6.5 Dialog對話框
- - 6.5.1 組件演示
  - 6.5.2 組件屬性詳解
- 6.6 Form表單
- - 組件演示
7 案例
- 7.1 案例需求
- 7.2 案例分析
- 7.3 環境搭建
- 7.4 整體布局
- 7.5 頂部標題
- 7.6 左側導航欄
- 7.7 右側核心內容
- - 7.7.1 表格編寫
  - 7.7.2 表單編寫
  - - 7.7.3 分頁工具欄
- 7.8 異步加載數據
- - 7.8.1 異步加載數據
  - 7.8.2 性別內容展示修復
  - 7.8.3 圖片內容展示修復
8. Vue路由
- 8.1 路由介紹
- 8.2 路由入門
9. 打包部署
- 9.1 前端工程打包
- 9.2 部署前端工程
- - 9.2.1 nginx介紹
  - 9.2.2 部署

01.Ajax

1.1 Ajax 概述

Ajax: 全稱Asynchronous JavaScript And XML，異步的JavaScript和XML。其作用有如下2點：

與服務器進行數據交換：通過Ajax可以給服務器發送請求，并獲取服務器響應的數據。
異步交互：可以在不重新加載整個頁面的情況下，與服務器交換數據并更新部分網頁的技術，如：搜索聯想、用戶名是否可用的校驗等等。

1.2 同步異步

在這里插入圖片描述

1.3 原生Ajax

對于Ajax技術有了充分的認知了，我們接下來通過代碼來演示Ajax的效果。此處我們先采用原生的Ajax代碼來演示。因為Ajax請求是基于客戶端發送請求，服務器響應數據的技術。所以為了完成快速入門案例，我們需要提供服服務器端和編寫客戶端。

服務器端
因為我們暫時還沒學過服務器端的代碼，所以此處已經直接提供好了服務器端的請求地址，我們前端直接通過Ajax請求訪問該地址即可。后臺服務器地址：http://yapi.smart-xwork.cn/mock/169327/emp/list

上述地址我們也可以直接通過瀏覽器來訪問，訪問結果如圖所示：只截取部分數據

在這里插入圖片描述

客戶端

客戶端的Ajax請求代碼如下有如下4步，接下來我們跟著步驟一起操作一下。

第一步：首先我們再VS Code中創建AJAX的文件夾，并且創建名為01. Ajax-原生方式.html的文件，提供如下代碼，主要是按鈕綁定單擊事件，我們希望點擊按鈕，來發送ajax請求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>原生Ajax</title>
</head>
<body><input type="button" value="獲取數據" onclick="getData()"><div id="div1"></div></body>
<script>function getData(){}
</script>
</html>

第二步：創建XMLHttpRequest對象，用于和服務器交換數據，也是原生Ajax請求的核心對象，提供了各種方法。代碼如下：

//1. 創建XMLHttpRequest 
var xmlHttpRequest  = new XMLHttpRequest();

第三步：調用對象的open()方法設置請求的參數信息，例如請求地址，請求方式。然后調用send()方法向服務器發送請求，代碼如下：

//2. 發送異步請求
xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
xmlHttpRequest.send();//發送請求

四步：我們通過綁定事件的方式，來獲取服務器響應的數據。

//3. 獲取服務響應數據
xmlHttpRequest.onreadystatechange = function(){//此處判斷 4表示瀏覽器已經完全接受到Ajax請求得到的響應， 200表示這是一個正確的Http請求，沒有錯誤if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;}
}

最后我們通過瀏覽器打開頁面，請求點擊按鈕，發送Ajax請求，最終顯示結果如下圖所示：
在這里插入圖片描述
并且通過瀏覽器的f12抓包，我們點擊網絡中的XHR請求，發現可以抓包到我們發送的Ajax請求。XHR代表的就是異步請求

2. Axios

上述原生的Ajax請求的代碼編寫起來還是比較繁瑣的，所以接下來我們學習一門更加簡單的發送Ajax請求的技術Axios 。Axios是對原生的AJAX進行封裝，簡化書寫。Axios官網是：https://www.axios-http.cn

2.1 Axios的基本使用

Axios的使用比較簡單，主要分為2步：

引入Axios文件

<script src="js/axios-0.18.0.js"></script>

使用Axios發送請求，并獲取響應結果，官方提供的api很多，此處給出2種，如下
- 發送 get 請求
```
axios({method:"get",url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){alert(resp.data);
})
```
- 發送 post 請求
```
axios({method:"post",url:"http://localhost:8080/ajax-demo1/aJAXDemo1",data:"username=zhangsan"
}).then(function (resp){alert(resp.data);
});
```
axios()是用來發送異步請求的，小括號中使用 js的JSON對象傳遞請求相關的參數：
- method屬性：用來設置請求方式的。取值為 get 或者 post。
- url屬性：用來書寫請求的資源路徑。如果是 get 請求，需要將請求參數拼接到路徑的后面，格式為： url?參數名=參數值&參數名2=參數值2。
- data屬性：作為請求體被發送的數據。也就是說如果是 post 請求的話，數據需要作為 data 屬性的值。
then() 需要傳遞一個匿名函數。我們將 then()中傳遞的匿名函數稱為 回調函數，意思是該匿名函數在發送請求時不會被調用，而是在成功響應后調用的函數。而該回調函數中的 resp 參數是對響應的數據進行封裝的對象，通過 resp.data 可以獲取到響應的數據。

2.2 Axios快速入門

后端實現

查詢所有員工信息服務器地址：http://yapi.smart-xwork.cn/mock/169327/emp/list

根據員工id刪除員工信息服務器地址：http://yapi.smart-xwork.cn/mock/169327/emp/deleteById

前端實現

首先在VS Code中創建js文件夾，與html同級，然后將資料/axios-0.18.0.js 文件拷貝到js目錄下，然后創建名為02. Ajax-Axios.html的文件，工程結果如圖所示：
在這里插入圖片描述
然后在html中引入axios所依賴的js文件，并且提供2個按鈕，綁定單擊事件，分別用于點擊時發送ajax請求
瀏覽器打開，f12抓包，然后分別點擊2個按鈕，查看控制臺效果如下：

完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios</title><script src="js/axios-0.18.0.js"></script>
</head>
<body><input type="button" value="獲取數據GET" onclick="get()"><input type="button" value="刪除數據POST" onclick="post()"></body>
<script>function get(){//通過axios發送異步請求-getaxios({method: "get",url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"}).then(result => {console.log(result.data);})}function post(){// 通過axios發送異步請求-postaxios({method: "post",url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",data: "id=1"}).then(result => {console.log(result.data);})}
</script>
</html>

2.3請求方法的別名

Axios還針對不同的請求，提供了別名方式的api,具體如下：

方法	描述
axios.get(url [, config])	發送get請求
axios.delete(url [, config])	發送delete請求
axios.post(url [, data[, config]])	發送post請求
axios.put(url [, data[, config]])	發送put請求

我們目前只關注get和post請求，所以在上述的入門案例中，我們可以將get請求代碼改寫成如下：

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {console.log(result.data);
})

post請求改寫成如下：

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {console.log(result.data);
})

2.4 案例

需求：基于Vue及Axios完成數據的動態加載展示，如下圖所示

其中數據是來自于后臺程序的，地址是：http://yapi.smart-xwork.cn/mock/169327/emp/list
分析：

前端首先是一張表格，我們缺少數據，而提供數據的地址已經有了，所以意味這我們需要使用Ajax請求獲取后臺的數據。但是Ajax請求什么時候發送呢？頁面的數據應該是頁面加載完成，自動發送請求，展示數據，所以我們需要借助vue的mounted鉤子函數。那么拿到數據了，我們該怎么將數據顯示表格中呢？這里就得借助v-for指令來遍歷數據，展示數據。
步驟：
1. 首先創建文件，提前準備基礎代碼，包括表格以及vue.js和axios.js文件的引入
2. 我們需要在vue的mounted鉤子函數中發送ajax請求，獲取數據
3. 拿到數據，數據需要綁定給vue的data屬性
4. 在<tr>標簽上通過v-for指令遍歷數據，展示數據
代碼實現：
1. 首先創建文件，提前準備基礎代碼，包括表格以及vue.js和axios.js文件的引入

在這里插入圖片描述
提供初始代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios-案例</title><script src="js/axios-0.18.0.js"></script><script src="js/vue.js"></script>
</head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>編號</th><th>姓名</th><th>圖像</th><th>性別</th><th>職位</th><th>入職日期</th><th>最后操作時間</th></tr><tr align="center" ><td>1</td><td>Tom</td><td><img src="" width="70px" height="50px"></td><td><span>男</span><!-- <span>女</span>--></td><td>班主任</td><td>2009-08-09</td><td>2009-08-09 12:00:00</td></tr></table></div>
</body>
<script>new Vue({el: "#app",data: {}});
</script>
</html>

在vue的mounted鉤子函數，編寫Ajax請求，請求數據，代碼如下：

mounted () {//發送異步請求,加載數據axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {})
}

ajax請求的數據我們應該綁定給vue的data屬性，之后才能進行數據綁定到視圖；并且瀏覽器打開后臺地址，數據返回格式如下圖所示：

在這里插入圖片描述
因為服務器響應的json中的data屬性才是我們需要展示的信息，所以我們應該將員工列表信息賦值給vue的data屬性，代碼如下：

 //發送異步請求,加載數據
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {this.emps = result.data.data;
})

其中，data中生命emps變量，代碼如下：

data: {emps:[]
},

在<tr>標簽上通過v-for指令遍歷數據，展示數據，其中需要注意的是圖片的值，需要使用vue的屬性綁定，男女的展示需要使用條件判斷，其代碼如下：

<tr align="center" v-for="(emp,index) in emps"><td>{{index + 1}}</td><td>{{emp.name}}</td><td><img :src="emp.image" width="70px" height="50px"></td><td><span v-if="emp.gender == 1">男</span><span v-if="emp.gender == 2">女</span></td><td>{{emp.job}}</td><td>{{emp.entrydate}}</td><td>{{emp.updatetime}}</td>
</tr>

完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios-案例</title><script src="js/axios-0.18.0.js"></script><script src="js/vue.js"></script>
</head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>編號</th><th>姓名</th><th>圖像</th><th>性別</th><th>職位</th><th>入職日期</th><th>最后操作時間</th></tr><tr align="center" v-for="(emp,index) in emps"><td>{{index + 1}}</td><td>{{emp.name}}</td><td><img :src="emp.image" width="70px" height="50px"></td><td><span v-if="emp.gender == 1">男</span><span v-if="emp.gender == 2">女</span></td><td>{{emp.job}}</td><td>{{emp.entrydate}}</td><td>{{emp.updatetime}}</td></tr></table></div>
</body>
<script>new Vue({el: "#app",data: {emps:[]},mounted () {//發送異步請求,加載數據axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {console.log(result.data);this.emps = result.data.data;})}});
</script>
</html>

3 前后臺分離開發

3.1 前后臺分離開發介紹

在之前的課程中，我們介紹過，前端開發有2種方式：前后臺混合開發和前后臺分離開發。

我們目前基本都是采用的前后臺分離開發方式，如下圖所示：
在這里插入圖片描述
我們將原先的工程分為前端工程和后端工程這2個工程，然后前端工程交給專業的前端人員開發，后端工程交給專業的后端人員開發。前端頁面需要數據，可以通過發送異步請求，從后臺工程獲取。但是，我們前后臺是分開來開發的，那么前端人員怎么知道后臺返回數據的格式呢？后端人員開發，怎么知道前端人員需要的數據格式呢？所以針對這個問題，我們前后臺統一指定一套規范！我們前后臺開發人員都需要遵循這套規范開發，這就是我們的接口文檔。接口文檔有離線版和在線版本，接口文檔示可以查詢今天提供資料/接口文檔示例里面的資料。那么接口文檔的內容怎么來的呢？是我們后臺開發者根據產品經理提供的產品原型和需求文檔所撰寫出來的，產品原型示例可以參考今天提供資料/頁面原型里面的資料。

那么基于前后臺分離開發的模式下，我們后臺開發者開發一個功能的具體流程如何呢？如下圖所示：
在這里插入圖片描述

需求分析：首先我們需要閱讀需求文檔，分析需求，理解需求。
接口定義：查詢接口文檔中關于需求的接口的定義，包括地址，參數，響應數據類型等等
前后臺并行開發：各自按照接口文檔進行開發，實現需求
測試：前后臺開發完了，各自按照接口文檔進行測試
前后段聯調測試：前段工程請求后端工程，測試功能

04 YAPI

4.1 YAPI介紹

前后臺分離開發中，我們前后臺開發人員都需要遵循接口文檔，所以接下來我們介紹一款撰寫接口文檔的平臺。

YApi 是高效、易用、功能強大的 api 管理平臺，旨在為開發、產品、測試人員提供更優雅的接口管理服務。

其官網地址：http://yapi.smart-xwork.cn/

YApi主要提供了2個功能：

API接口管理：根據需求撰寫接口，包括接口的地址，參數，響應等等信息。
Mock服務：模擬真實接口，生成接口的模擬測試數據，用于前端的測試。

4.2 接口文檔管理

接下來我們演示一下YApi是如何管理接口文檔的。

首先我們登錄YAPI的官網，然后使用github或者百度賬號登錄，沒有的話去注冊一個
登錄進去后，在個人空間中，選擇項目列表->添加測試項目
然后點擊創建的項目，進入到項目中，緊接著先添加接口的分類
然后我們選擇當前創建的分類，創建接口信息
緊接著，我們來到接口的編輯界面，對接口做生層次的定制，例如：接口的參數，接口的返回值等等，效果圖下圖所示：
在這里插入圖片描述
添加接口的請求參數，如下圖所示：

添加接口的返回值，如下圖所示：

然后保存上述設置，緊接著我們可以來到接口的預覽界面，查詢接口的信息，其效果如下圖所示：篇幅有限，只截取部分

在這里插入圖片描述
最后，我們還可以設置接口的mock信息，

來到接口的Mock設置窗口，如下圖所示：

在這里插入圖片描述
緊接著我們來到接口的預覽界面，直接點擊Mock地址，如下圖所示：

我們發現瀏覽器直接打開，并返回如下數據：

如上步驟就是YAPI接口平臺中對于接口的配置步驟。

05 前端工程化

5.1 前端工程化介紹

我們目前的前端開發中，當我們需要使用一些資源時，例如：vue.js，和axios.js文件，都是直接再工程中導入的，如下圖所示：

在這里插入圖片描述
但是上述開發模式存在如下問題：

每次開發都是從零開始，比較麻煩
多個頁面中的組件共用性不好
js、圖片等資源沒有規范化的存儲目錄，沒有統一的標準，不方便維護

所以現在企業開發中更加講究前端工程化方式的開發，主要包括如下4個特點

模塊化：將js和css等，做成一個個可復用模塊
組件化：我們將UI組件，css樣式，js行為封裝成一個個的組件，便于管理
規范化：我們提供一套標準的規范的目錄接口和編碼規范，所有開發人員遵循這套規范
自動化：項目的構建，測試，部署全部都是自動完成

所以對于前端工程化，說白了，就是在企業級的前端項目開發中，把前端開發所需要的工具、技術、流程、經驗進行規范化和標準化。從而提升開發效率，降低開發難度等等。接下來我們就需要學習vue的官方提供的腳手架幫我們完成前端的工程化。

5.2 前端工程化入門

5.2.1 環境準備

我們的前端工程化是通過vue官方提供的腳手架Vue-cli來完成的，用于快速的生成一個Vue的項目模板。Vue-cli主要提供了如下功能：

統一的目錄結構
本地調試
熱部署
單元測試
集成打包上線

我們需要運行Vue-cli，需要依賴NodeJS，NodeJS是前端工程化依賴的環境。所以我們需要先安裝NodeJS，然后才能安裝Vue-cli

NodeJS安裝和Vue-cli安裝

詳細安裝步驟，請參考資料/NodeJS安裝文檔/NodeJS安裝文檔.md文件

5.2.2 Vue項目簡介

環境準備好了，接下來我們需要通過Vue-cli創建一個vue項目，然后再學習一下vue項目的目錄結構。Vue-cli提供了如下2種方式創建vue項目:

命令行：直接通過命令行方式創建vue項目
```
vue create vue-project01
```
圖形化界面：通過命令先進入到圖形化界面，然后再進行vue工程的創建
```
vue ui
```
圖形化界面如下：

5.2.3 創建vue項目

此處我們通過第二種圖形化界面方式給大家演示。

首先，我們再桌面創建vue文件夾，然后雙擊進入文件夾，來到地址目錄，輸入cmd，然后進入到vue文件夾的cmd窗口界面，然后再當前目錄下，直接輸入命令vue ui進入到vue的圖形化界面，如下圖所示：
在這里插入圖片描述
然后我門選擇創建按鈕，在vue文件夾下創建項目，如下圖所示：

然后來到如下界面，進行vue項目的創建

然后預設模板選擇手動，如下圖所示：

然后再功能頁面開啟路由功能，如下圖所示：

然后再配置頁面選擇語言版本和語法檢查規范，如下圖所示：
在這里插入圖片描述
然后創建項目，進入如下界面：

最后我們只需要等待片刻，即可進入到創建創建成功的界面，如下圖所示：

到此，vue項目創建結束

5.2.4 vue項目目錄結構介紹

我們通過VS Code打開之前創建的vue文件夾，打開之后，呈現如下圖所示頁面：

在這里插入圖片描述

其中我們平時開發代碼就是在src目錄下

5.2.5 運行vue項目

那么vue項目開發好了，我們應該怎么運行vue項目呢？主要提供了2種方式

第一種方式：通過VS Code提供的圖形化界面，如下圖所示：（注意：NPM腳本窗口默認不顯示，可以參考本節的最后調試出來）

點擊之后，我們等待片刻，即可運行，在終端界面中，我們發現項目是運行在本地服務的8080端口，我們直接通過瀏覽器打開地址

最終瀏覽器打開后，呈現如下界面，表示項目運行成功

其實此時訪問的是 src/App.vue這個根組件，此時我們打開這個組件，修改代碼：添加內容Vue

在這里插入圖片描述
只要我們保存更新的代碼，我們直接打開瀏覽器，不需要做任何刷新，發現頁面呈現內容發生了變化，如下圖所示：

在這里插入圖片描述
這就是我們vue項目的熱更新功能

對于8080端口，經常被占用，所以我們可以去修改默認的8080端口。我們修改vue.config.js文件的內容，添加如下代碼：

devServer:{port:7000
}

如下圖所示，然后我們關閉服務器，并且重新啟動，
在這里插入圖片描述重新啟動如下圖所示：

端口更改成功，可以通過瀏覽器訪問7000端口來訪問我們之前的項目

第二種方式：命令行方式
直接基于cmd命令窗口，在vue目錄下，執行輸入命令npm run serve即可，如下圖所示：

補充：NPM腳本窗口調試出來
第一步：通過設置/用戶設置/擴展/MPM更改NPM默認配置，如下圖所示

然后重啟VS Code，并且雙擊打開package.json文件，然后點擊資源管理器處的3個小點，勾選npm腳本選項，如圖所示

5.2.6 Vue項目開發流程

那么我們訪問的首頁是index.html，但是我們找到public/index.html文件，打開之后發現，里面沒有什么代碼，但是能夠呈現內容豐富的首頁：如下圖所示：
在這里插入圖片描述
我們自習觀察發現，index.html的代碼很簡潔，但是瀏覽器所呈現的index.html內容卻很豐富，代碼和內容不匹配，所以vue是如何做到的呢？接下來我們學習一下vue項目的開發流程。

對于vue項目，index.html文件默認是引入了入口函數main.js文件，我們找到src/main.js文件，其代碼如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')

上述代碼中，包括如下幾個關鍵點：

import: 導入指定文件，并且重新起名。例如上述代碼import App from './App.vue'導入當前目錄下得App.vue并且起名為App
new Vue(): 創建vue對象
$mount(‘#app’);將vue對象創建的dom對象掛在到id=app的這個標簽區域中，作用和之前學習的vue對象的le屬性一致。
router: 路由，詳細在后面的小節講解
render: 主要使用視圖的渲染的。

來到public/index.html中，我們刪除div的id=app屬性，打開瀏覽器，發現之前訪問的首頁一片空白，如下圖所示，這樣就證明了，我們main.js中通過代碼掛在到index.html的id=app的標簽區域的。

此時我們知道了vue創建的dom對象掛在到id=app的標簽區域，但是我們還是沒有解決最開始的問題：首頁內容如何呈現的？這就涉及到render中的App了，如下圖所示：

在這里插入圖片描述
那么這個App對象怎么回事呢，我們打開App.vue,注意的是.vue結尾的都是vue組件。而vue的組件文件包含3個部分：

template: 模板部分，主要是HTML代碼，用來展示頁面主體結構的
script: js代碼區域，主要是通過js代碼來控制模板的數據來源和行為的
style: css樣式部分，主要通過css樣式控制模板的頁面效果得

如下圖所示就是一個vue組件的小案例：
在這里插入圖片描述
此時我們可以打開App.vue，觀察App.vue的代碼，其中可以發現，App.vue組件的template部分內容，和我們瀏覽器訪問的首頁內容是一致的，如下圖所示：

在這里插入圖片描述
接下來我們可以簡化模板部分內容，添加script部分的數據模型，刪除css樣式，完整代碼如下：

<template><div id="app">{{message}}</div>
</template><script>
export default {data(){return {"message":"hello world"}}
}
</script>
<style></style>

保存直接，回到瀏覽器，我們發現首頁展示效果發生了變化，如下圖所示：
在這里插入圖片描述

06 Vue組件庫Element

6.1 Element介紹

不知道同學們還否記得我們之前講解的前端開發模式MVVM，我們之前學習的vue是側重于VM開發的，主要用于數據綁定到視圖的，那么接下來我們學習的ElementUI就是一款側重于V開發的前端框架，主要用于開發美觀的頁面的。

Element：是餓了么公司前端開發團隊提供的一套基于 Vue 的網站組件庫，用于快速構建網頁。

Element 提供了很多組件（組成網頁的部件）供我們使用。例如超鏈接、按鈕、圖片、表格等等。如下圖所示就是我們開發的頁面和ElementUI提供的效果對比：可以發現ElementUI提供的各式各樣好看的按鈕

在這里插入圖片描述
ElementUI的學習方式和我們之前的學習方式不太一樣，對于ElementUI，我們作為一個后臺開發者，只需要學會如何從ElementUI的官網拷貝組件到我們自己的頁面中，并且做一些修改即可。其官網地址：https://element.eleme.cn/#/zh-CN，我們主要學習的是ElementUI中提供的常用組件，至于其他組件同學們可以通過我們這幾個組件的學習掌握到ElementUI的學習技巧，然后課后自行學習。

6.2 快速入門

首先我們要掌握ElementUI的快速入門，接下來同學們就一起跟著步驟來操作一下。

首先，我們先要安裝ElementUI的組件庫，打開VS Code，停止之前的項目，然后在命令行輸入如下命令：

npm install element-ui@2.15.3

具體操作如下圖所示：

在這里插入圖片描述
然后我們需要在main.js這個入口js文件中引入ElementUI的組件庫，其代碼如下：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

具體操作如圖所示：
在這里插入圖片描述
然后我們需要按照vue項目的開發規范，在src/views目錄下創建一個vue組件文件，注意組件名稱后綴是.vue，并且在組件文件中編寫之前介紹過的基本組件語法，代碼如下：

<template></template><script>
export default {}
</script><style></style>

具體操作如圖所示：
在這里插入圖片描述
最后我們只需要去ElementUI的官網，找到組件庫，然后找到按鈕組件，抄寫代碼即可，具體操作如下圖所示：

然后找到按鈕的代碼，如下圖所示：

在這里插入圖片描述
緊接著我們復制組件代碼到我們的vue組件文件中，操作如下圖所示：

最后，我們需要在默認訪問的根組件src/App.vue中引入我們自定義的組件，具體操作步驟如下：

然后App.vue組件中的具體代碼如下，代碼是我們通過上述步驟引入element-view組件時自動生成的。

當你在 JavaScript 代碼中使用駝峰命名注冊組件時，Vue 會自動將其轉換為短橫線分隔的形式，以便在模板中使用。這就是為什么盡管你使用 ElementView 作為注冊名，仍然可以通過來引用它。

<template><div id="app"><!-- {{message}} --><element-view></element-view> </div>
</template><script>
import ElementView from './views/Element/ElementView.vue'
export default {components: { ElementView },data(){return {"message":"hello world"}}
}
</script>
<style></style>

然后運行我們的vue項目，瀏覽器直接訪問之前的7000端口，展示效果如下圖所示：

在這里插入圖片描述
到此，我們ElementUI的入門程序編寫成功

6.3 Table表格

6.3.1 組件演示

Table 表格：用于展示多條結構類似的數據，可對數據進行排序、篩選、對比或其他自定義操作。

接下來我們通過代碼來演示。

首先我們需要來到ElementUI的組件庫中，找到表格組件，如下圖所示：
在這里插入圖片描述
然后復制代碼到我們之前的ElementVue.vue組件中，需要注意的是，我們組件包括了3個部分，如果官方有除了template部分之外的style和script都需要復制。具體操作如下圖所示：

template模板部分：
在這里插入圖片描述
script腳本部分

ElementView.vue組件文件整體代碼如下：

<template><div><!-- Button按鈕 --><el-row><el-button>默認按鈕</el-button><el-button type="primary">主要按鈕</el-button><el-button type="success">成功按鈕</el-button><el-button type="info">信息按鈕</el-button><el-button type="warning">警告按鈕</el-button><el-button type="danger">危險按鈕</el-button></el-row><!-- Table表格 --><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></div>
</template><script>
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></style>

此時回到瀏覽器，我們頁面呈現如下效果：
在這里插入圖片描述

6.3.2 組件屬性詳解

那么我們的ElementUI是如何將數據模型綁定到視圖的呢？主要通過如下幾個屬性：

data: 主要定義table組件的數據模型
prop: 定義列的數據應該綁定data中定義的具體的數據模型
label: 定義列的標題
width: 定義列的寬度

其具體示例含義如下圖所示：
在這里插入圖片描述
PS:Element組件的所有屬性都可以在組件頁面的最下方找到，如下圖所示：

6.4 Pagination分頁

6.4.1 組件演示

Pagination: 分頁組件，主要提供分頁工具條相關功能。其展示效果圖下圖所示：
在這里插入圖片描述
接下來我們通過代碼來演示功能。

首先在官網找到分頁組件，我們選擇帶背景色分頁組件，如下圖所示：
在這里插入圖片描述
然后復制代碼到我們的ElementView.vue組件文件的template中，拷貝如下代碼：

<el-paginationbackgroundlayout="prev, pager, next":total="1000">
</el-pagination>

瀏覽器打開呈現如下效果：
在這里插入圖片描述

6.4.2 組件屬性詳解

對于分頁組件我們需要關注的是如下幾個重要屬性（可以通過查閱官網組件中最下面的組件屬性詳細說明得到）：

background: 添加北京顏色，也就是上圖藍色背景色效果。
layout: 分頁工具條的布局，其具體值包含sizes, prev, pager, next, jumper, ->, total, slot 這些值
total: 數據的總數量

然后根據官方分頁組件提供的layout屬性說明，如下圖所示：
在這里插入圖片描述
我們修改layout屬性如下：

 layout="sizes,prev, pager, next,jumper,total"

瀏覽器打開呈現如下效果：
在這里插入圖片描述
發現在原來的功能上，添加了一些額外的功能，其具體對應關系如下圖所示：

6.4.3 組件事件詳解

對于分頁組件，除了上述幾個屬性，還有2個非常重要的事件我們需要去學習：

size-change ： pageSize 改變時會觸發
current-change ：currentPage 改變時會觸發

其官方詳細解釋含義如下圖所示：
在這里插入圖片描述
對于這2個事件的參考代碼，我們同樣可以通過官方提供的完整案例中找到，如下圖所示：

然后我們找到對應的代碼，首先復制事件，復制代碼如下：

@size-change="handleSizeChange"
@current-change="handleCurrentChange"

此時Panigation組件的template完整代碼如下：

<!-- Pagination分頁 -->
<el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange"backgroundlayout="sizes,prev, pager, next,jumper,total":total="1000">
</el-pagination>

緊接著需要復制事件需要的2個函數，需要注意methods屬性和data同級，其代碼如下：

methods: {handleSizeChange(val) {console.log(`每頁 ${val} 條`);},handleCurrentChange(val) {console.log(`當前頁: ${val}`);}},

此時Panigation組件的script部分完整代碼如下：

<script>
export default {methods: {handleSizeChange(val) {console.log(`每頁 ${val} 條`);},handleCurrentChange(val) {console.log(`當前頁: ${val}`);}},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>

回到瀏覽器中，我們f12打開開發者控制臺，然后切換當前頁碼和切換每頁顯示的數量，呈現如下效果：
在這里插入圖片描述

6.5 Dialog對話框

6.5.1 組件演示

Dialog: 在保留當前頁面狀態的情況下，告知用戶并承載相關操作。其企業開發應用場景示例如下圖所示：
在這里插入圖片描述
首先我們需要在ElementUI官方找到Dialog組件，如下圖所示：

然后復制如下代碼到我們的組件文件的template模塊中

<br><br>
<!--Dialog 對話框 -->
<!-- Table -->
<el-button type="text" @click="dialogTableVisible = true">打開嵌套表格的 Dialog</el-button><el-dialog title="收貨地址" :visible.sync="dialogTableVisible"><el-table :data="gridData"><el-table-column property="date" label="日期" width="150"></el-table-column><el-table-column property="name" label="姓名" width="200"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table>
</el-dialog>

并且復制數據模型script模塊中：

 gridData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}],dialogTableVisible: false,

其完整的script部分代碼如下：

<script>
export default {methods: {handleSizeChange(val) {console.log(`每頁 ${val} 條`);},handleCurrentChange(val) {console.log(`當前頁: ${val}`);}},data() {return {gridData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}],dialogTableVisible: false,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>

然后我們打開瀏覽器，點擊按鈕，呈現如下效果：
在這里插入圖片描述

6.5.2 組件屬性詳解

那么ElementUI是如何做到對話框的顯示與隱藏的呢？是通過如下的屬性：

visible.sync ：是否顯示 Dialog

具體釋意如下圖所示：
在這里插入圖片描述
visible屬性綁定的dialogTableVisble屬性一開始默認是false，所以對話框隱藏；然后我們點擊按鈕，觸發事件，修改屬性值為true，

然后對話框visible屬性值為true，所以對話框呈現出來。

6.6 Form表單

組件演示

Form 表單：由輸入框、選擇器、單選框、多選框等控件組成，用以收集、校驗、提交數據。

表單在我們前端的開發中使用的還是比較多的，接下來我們學習這個組件，與之前的流程一樣，我們首先需要在ElementUI的官方找到對應的組件示例：如下圖所示：

在這里插入圖片描述
我們的需求效果是：在對話框中呈現表單內容，類似如下圖所示：

所以，首先我們先要根據上一小結所學習的內容，制作一個新的對話框，其代碼如下：

<br><br>
<!-- Dialog對話框-Form表單 -->
<el-button type="text" @click="dialogFormVisible = true">打開嵌套Form的 Dialog</el-button><el-dialog title="Form表單" :visible.sync="dialogFormVisible"></el-dialog>

還需要注意的是，針對這個新的對話框，我們需要在data中聲明新的變量dialogFormVisible來控制對話框的隱藏與顯示，代碼如下：

 dialogFormVisible: false,

打開瀏覽器，此時呈現如圖所示的效果：
在這里插入圖片描述
然后我們復制官網提供的template部分代碼到我們的vue組件文件的Dialog組件中，但是，此處官方提供的表單項標簽太多，所以我們只需要保留前面3個表單項組件，其他多余的刪除，所以最終template部分代碼如下：

<el-dialog title="Form表單" :visible.sync="dialogFormVisible"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="活動名稱"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活動區域"><el-select v-model="form.region" placeholder="請選擇活動區域"><el-option label="區域一" value="shanghai"></el-option><el-option label="區域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活動時間"><el-col :span="11"><el-date-picker type="date" placeholder="選擇日期" v-model="form.date1" style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="選擇時間" v-model="form.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即創建</el-button><el-button>取消</el-button></el-form-item></el-form></el-dialog>

觀察上述代碼，我們發現其中表單項標簽使用了v-model雙向綁定，所以我們需要在vue的數據模型中聲明變量，同樣可以從官方提供的代碼中復制粘貼，但是我們需要去掉我們不需要的屬性，通過觀察上述代碼，我們發現雙向綁定的屬性有4個，分別是form.name,form.region,form.date1,form.date2,所以最終數據模型如下：
在這里插入圖片描述

 form: {name: '',region: '',date1: '',date2:''},

同樣，官方的代碼中，在script部分中，還提供了onSubmit函數，表單的立即創建按鈕綁定了此函數，我們可以輸入表單的內容，而表單的內容是雙向綁定到form對象的，所以我們修改官方的onSubmit函數如下即可，而且我們還需要關閉對話框，最終函數代碼如下：

在這里插入圖片描述

 onSubmit() {console.log(this.form); //輸出表單內容到控制臺this.dialogFormVisible=false; //關閉表案例的對話框}

然后打開瀏覽器，我們打開對話框，并且輸入表單內容，點擊立即創建按鈕，呈現如下效果；
在這里插入圖片描述
最終vue組件完整代碼如下，同學們可以針對form表單案例，參考該案例對應的template部分和script部分代碼

最終vue組件完整代碼如下，同學們可以針對form表單案例，參考該案例對應的template部分和script部分代碼

<template><div><!-- Button按鈕 --><el-row><el-button>默認按鈕</el-button><el-button type="primary">主要按鈕</el-button><el-button type="success">成功按鈕</el-button><el-button type="info">信息按鈕</el-button><el-button type="warning">警告按鈕</el-button><el-button type="danger">危險按鈕</el-button></el-row><!-- Table表格 --><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table><br><!-- Pagination分頁 --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange"backgroundlayout="sizes,prev, pager, next,jumper,total":total="1000"></el-pagination><br><br><!--Dialog 對話框 --><!-- Table --><el-button type="text" @click="dialogTableVisible = true">打開嵌套表格的 Dialog</el-button><el-dialog title="收貨地址" :visible.sync="dialogTableVisible"><el-table :data="gridData"><el-table-column property="date" label="日期" width="150"></el-table-column><el-table-column property="name" label="姓名" width="200"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table></el-dialog><br><br><!-- Dialog對話框-Form表單 --><el-button type="text" @click="dialogFormVisible = true">打開嵌套Form的 Dialog</el-button><el-dialog title="Form表單" :visible.sync="dialogFormVisible"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="活動名稱"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活動區域"><el-select v-model="form.region" placeholder="請選擇活動區域"><el-option label="區域一" value="shanghai"></el-option><el-option label="區域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活動時間"><el-col :span="11"><el-date-picker type="date" placeholder="選擇日期" v-model="form.date1" style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="選擇時間" v-model="form.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即創建</el-button><el-button>取消</el-button></el-form-item></el-form></el-dialog></div>
</template><script>
export default {methods: {handleSizeChange(val) {console.log(`每頁 ${val} 條`);},handleCurrentChange(val) {console.log(`當前頁: ${val}`);},//表單案例的提交事件onSubmit() {console.log(this.form); //輸出表單內容到控制臺this.dialogFormVisible=false; //關閉表案例的對話框}},data() {return {//表單案例的數據雙向綁定form: {name: '',region: '',date1: '',date2:''},gridData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}],dialogTableVisible: false,dialogFormVisible: false, //控制form表單案例的對話框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></style>

7 案例

7.1 案例需求

參考 資料/頁面原型/tlias智能學習輔助系統/首頁.html 文件，瀏覽器打開，點擊頁面中的左側欄的員工管理，如下所示：
在這里插入圖片描述
需求說明：

制作類似格式的頁面

即上面是標題，左側欄是導航，右側是數據展示區域
右側需要展示搜索表單
右側表格數據是動態展示的，數據來自于后臺
實際示例效果如下圖所示：

在這里插入圖片描述
數據Mock地址：http://yapi.smart-xwork.cn/mock/169327/emp/list，瀏覽器打開，數據格式如下圖所示：

7.2 案例分析

整個案例相對來說功能比較復雜，需求較多，所以我們需要先整體，后局部細節。整個頁面我們可以分為3個部分，如下圖所示：
在這里插入圖片描述
一旦這樣拆分，那么我們的思路就清晰了，主要步驟如下：

創建頁面，完成頁面的整體布局規劃
然后分別針對3個部分進行各自組件的具體實現
針對于右側核心內容展示區域，需要使用異步加載數據，以表格渲染數據

7.3 環境搭建

首先我們來到VS Code中，在views目錄下創建 tlias/EmpView.vue這個vue組件，并且編寫組件的基本模板代碼，其效果如下圖所示：其中模板代碼在之前的案例中已經提供，此處不再贅述
在這里插入圖片描述
并且需要注意的是，我們默認訪問的是App.vue這個組件，而我們App.vue這個組件之前是引入了element-view這個組件，此時我們需要修改成引入emp-view這個組件，并且注釋掉之前的element-view這個組件，此時App.vue整體代碼如下：

<template><div id="app"><!-- {{message}} --><!-- <element-view></element-view> --><emp-view></emp-view></div>
</template><script>
import EmpView  './views/tlias/EmpView.vue'
// import ElementView  './views/Element/ElementView.vue'
export default {components: {EmpView },data(){return {"message":"hello world"}}
}
</script>
<style></style>

打開瀏覽器，我們發現之前的element案例內容沒了，從而呈現的是一片空白，那么接下來我們就可以繼續開發了。

7.4 整體布局

此處肯定不需要我們自己去布局的，我們直接來到ElementUI的官網，找到布局組件，如下圖所示：
在這里插入圖片描述
從官網提供的示例，我們發現由現成的滿足我們需求的布局，所以我們只需要做一位代碼搬運工即可。拷貝官方提供的如下代碼直接粘貼到我們EmpView.vue組件的template模塊中即可：

<el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-main>Main</el-main></el-container>
</el-container>

打開瀏覽器，此時呈現如下效果：
在這里插入圖片描述

因為我們沒有拷貝官方提供的css樣式，所以和官方案例的效果不太一樣，但是我們需要的布局格式已經有，具體內容我們有自己的安排。首先我們需要調整整體布局的高度，所以我們需要在<el-container>上添加一些樣式，代碼如下：

<!-- 設置最外層容器高度為700px,在加上一個很細的邊框 -->
<el-container style="height: 700px; border: 1px solid #eee">

到此我們布局功能就完成了

7.5 頂部標題

對于頂部，我們需要實現的效果如下圖所示：
在這里插入圖片描述
所以我們需要修改頂部的文本內容，并且提供背景色的css樣式，具體代碼如下：

至此，我們的頂部標題就搞定了

此時整體代碼如下：

<template><div><!-- 設置最外層容器高度為700px,在加上一個很細的邊框 --><el-container style="height: 700px; border: 1px solid #eee"><el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能學習輔助系統</el-header><el-container><el-aside width="200px">Aside</el-aside><el-main>Main</el-main></el-container></el-container></div>
</template><script>
export default {}
</script><style></style>

7.6 左側導航欄

接下來我們來實現左側導航欄，那么還是在上述布局組件中提供的案例，找到左側欄的案例，如下圖所示：

在這里插入圖片描述
所以我們依然只需要搬運代碼，然后做簡單修改即可。官方提供的導航太多，我們不需要，所以我們需要做刪減，在我們的左側導航欄中粘貼如下代碼即可：

<el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>導航一</template><el-menu-item index="1-1">選項1</el-menu-item><el-menu-item index="1-2">選項2</el-menu-item></el-submenu>
</el-menu>

刪減前后對比圖：

在這里插入圖片描述
然后我們打開瀏覽器，展示如下內容：

最后我們只需要替換文字內容即可。

此時整體代碼如下：

<template><div><!-- 設置最外層容器高度為700px,在加上一個很細的邊框 --><el-container style="height: 700px; border: 1px solid #eee"><el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能學習輔助系統</el-header><el-container><el-aside width="200px"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系統信息管理</template><el-menu-item index="1-1">部門管理</el-menu-item><el-menu-item index="1-2">員工管理</el-menu-item></el-submenu></el-menu></el-aside><el-main></el-main></el-container></el-container></div>
</template><script>
export default {}
</script><style></style>

7.7 右側核心內容

7.7.1 表格編寫

右側顯示的是表單和表格，首先我們先來完成表格的制作，我們同樣在官方直接找表格組件，也可以直接通過我們上述容器組件中提供的案例中找到表格相關的案例，如下圖所示：
在這里插入圖片描述
然后找到表格的代碼，復制到我們布局容器的主題區域，template模塊代碼如下：

<el-table :data="tableData"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"></el-table-column>
</el-table>

表格是有數據模型的綁定的，所以我們需要繼續拷貝數據模型，代碼如下：

  data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}]}

瀏覽器打開，呈現如下效果：
在這里插入圖片描述
但是這樣的表格和數據并不是我們所需要的，所以，接下來我們需要修改表格，添加列，并且修改列名。代碼如下：

<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="image" label="圖像" width="180"></el-table-column>
<el-table-column prop="gender" label="性別" width="140"></el-table-column>
<el-table-column prop="job" label="職位" width="140"></el-table-column>
<el-table-column prop="entrydate" label="入職日期" width="180"></el-table-column>
<el-table-column prop="updatetime" label="最后操作時間" width="230"></el-table-column>
<el-table-column label="操作" ><el-button type="primary" size="mini">編輯</el-button><el-button type="danger" size="mini">刪除</el-button>
</el-table-column>

需要注意的是，我們列名的prop屬性值得內容并不是亂寫的，因為我們將來需要綁定后臺的數據的，所以如下圖所示：

在這里插入圖片描述
并且此時我們data中之前的數據模型就不可用了，所以需要清空數據，設置為空數組，代碼如下：

 data() {return {tableData: []}}

此時打開瀏覽器，呈現如下效果：
在這里插入圖片描述
此時整體頁面代碼如下：

<template><div><!-- 設置最外層容器高度為700px,在加上一個很細的邊框 --><el-container style="height: 700px; border: 1px solid #eee"><el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能學習輔助系統</el-header><el-container><el-aside width="200px"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系統信息管理</template><el-menu-item index="1-1">部門管理</el-menu-item><el-menu-item index="1-2">員工管理</el-menu-item></el-submenu></el-menu></el-aside><el-main><el-table :data="tableData"><el-table-column prop="name"      label="姓名" width="180"></el-table-column><el-table-column prop="image"     label="圖像" width="180"></el-table-column><el-table-column prop="gender"    label="性別" width="140"></el-table-column><el-table-column prop="job"       label="職位" width="140"></el-table-column><el-table-column prop="entrydate" label="入職日期" width="180"></el-table-column><el-table-column prop="updatetime" label="最后操作時間" width="230"></el-table-column><el-table-column label="操作" ><el-button type="primary" size="mini">編輯</el-button><el-button type="danger" size="mini">刪除</el-button></el-table-column></el-table></el-main></el-container></el-container></div>
</template><script>
export default {data() {return {tableData: []}}
}
</script><style></style>

7.7.2 表單編寫

在表格的上方，還需要如下圖所示的表單：
在這里插入圖片描述
所以接下來我們需要去ElementUI官網，在表單組件中找到與之類似的示例，加以修改從而打成我們希望的效果，官方示例如下圖所示：

所以我們直接拷貝代碼主體區域的table組件的上方即可，并且我們需要修改數據綁定的的變量名，最終代碼如下：

      <!-- 表單 -->
<el-form :inline="true" :model="searchForm" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="searchForm.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性別"><el-select v-model="searchForm.gender" placeholder="性別"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查詢</el-button></el-form-item>
</el-form>

代碼修改前后對比圖：
在這里插入圖片描述
既然我們表單使用v-model進行數據的雙向綁定了，所以我們緊接著需要在data中定義searchForm的數據模型，代碼如下：

  data() {return {tableData: [],searchForm:{name:'',gender:''}}}

而且，表單的提交按鈕，綁定了onSubmit函數，所以我們還需要在methods中定義onSubmit函數，代碼如下：

注意的是methods屬性需要和data屬性同級

 methods:{onSubmit:function(){console.log(this.searchForm);}
}

我們還缺少一個時間，所以可以從elementUI官網找到日期組件，如下圖所示：
在這里插入圖片描述
參考官方代碼，然后在我們之前的表單中添加一個日期表單，具體代碼如下：

 </el-form-item><el-form-item label="入職日期"><el-date-pickerv-model="searchForm.entrydate"type="daterange"range-separator="至"start-placeholder="開始日期"end-placeholder="結束日期"></el-date-picker></el-form-item>

我們添加了雙向綁定，所以我們需要在data的searchForm中定義出來，需要注意的是這個日期包含2個值，所以我們定義為數組，代碼如下：

 searchForm:{name:'',gender:'',entrydate:[]
}

此時我們打開瀏覽器，填寫表單，并且點擊查詢按鈕，查看瀏覽器控制臺，可以看到表單的內容，效果如下圖所示：

在這里插入圖片描述
此時完整代碼如下所示：

<template><div><!-- 設置最外層容器高度為700px,在加上一個很細的邊框 --><el-container style="height: 700px; border: 1px solid #eee"><el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能學習輔助系統</el-header><el-container><el-aside width="200px"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系統信息管理</template><el-menu-item index="1-1">部門管理</el-menu-item><el-menu-item index="1-2">員工管理</el-menu-item></el-submenu></el-menu></el-aside><el-main><!-- 表單 --><el-form :inline="true" :model="searchForm" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="searchForm.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性別"><el-select v-model="searchForm.gender" placeholder="性別"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item label="入職日期"><el-date-pickerv-model="searchForm.entrydate"type="daterange"range-separator="至"start-placeholder="開始日期"end-placeholder="結束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查詢</el-button></el-form-item></el-form><!-- 表格 --><el-table :data="tableData"><el-table-column prop="name"      label="姓名" width="180"></el-table-column><el-table-column prop="image"     label="圖像" width="180"></el-table-column><el-table-column prop="gender"    label="性別" width="140"></el-table-column><el-table-column prop="job"       label="職位" width="140"></el-table-column><el-table-column prop="entrydate" label="入職日期" width="180"></el-table-column><el-table-column prop="updatetime" label="最后操作時間" width="230"></el-table-column><el-table-column label="操作" ><el-button type="primary" size="mini">編輯</el-button><el-button type="danger" size="mini">刪除</el-button></el-table-column></el-table></el-main></el-container></el-container></div>
</template><script>
export default {data() {return {tableData: [],searchForm:{name:'',gender:'',entrydate:[]}}},methods:{onSubmit:function(){console.log(this.searchForm);}}
}
</script><style></style>

7.7.3 分頁工具欄

分頁條我們之前做過，所以我們直接找到之前的案例，復制即可，代碼如下：

其中template模塊代碼如下：

 <!-- Pagination分頁 -->
<el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange"backgroundlayout="sizes,prev, pager, next,jumper,total":total="1000">
</el-pagination>

同時methods中需要聲明2個函數，代碼如下：

handleSizeChange(val) {console.log(`每頁 ${val} 條`);},handleCurrentChange(val) {console.log(`當前頁: ${val}`);}

此時打開瀏覽器，效果如下圖所示：
在這里插入圖片描述
此時整體代碼如下：

<template><div><!-- 設置最外層容器高度為700px,在加上一個很細的邊框 --><el-container style="height: 700px; border: 1px solid #eee"><el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能學習輔助系統</el-header><el-container><el-aside width="200px"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系統信息管理</template><el-menu-item index="1-1">部門管理</el-menu-item><el-menu-item index="1-2">員工管理</el-menu-item></el-submenu></el-menu></el-aside><el-main><!-- 表單 --><el-form :inline="true" :model="searchForm" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="searchForm.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性別"><el-select v-model="searchForm.gender" placeholder="性別"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item label="入職日期"><el-date-pickerv-model="searchForm.entrydate"type="daterange"range-separator="至"start-placeholder="開始日期"end-placeholder="結束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查詢</el-button></el-form-item></el-form><!-- 表格 --><el-table :data="tableData"><el-table-column prop="name"      label="姓名" width="180"></el-table-column><el-table-column prop="image"     label="圖像" width="180"></el-table-column><el-table-column prop="gender"    label="性別" width="140"></el-table-column><el-table-column prop="job"       label="職位" width="140"></el-table-column><el-table-column prop="entrydate" label="入職日期" width="180"></el-table-column><el-table-column prop="updatetime" label="最后操作時間" width="230"></el-table-column><el-table-column label="操作" ><el-button type="primary" size="mini">編輯</el-button><el-button type="danger" size="mini">刪除</el-button></el-table-column></el-table><!-- Pagination分頁 --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange"backgroundlayout="sizes,prev, pager, next,jumper,total":total="1000"></el-pagination></el-main></el-container></el-container></div>
</template><script>
export default {data() {return {tableData: [],searchForm:{name:'',gender:'',entrydate:[]}}},methods:{onSubmit:function(){console.log(this.searchForm);},handleSizeChange(val) {console.log(`每頁 ${val} 條`);},handleCurrentChange(val) {console.log(`當前頁: ${val}`);}}
}
</script><style></style>

7.8 異步加載數據

7.8.1 異步加載數據

對于案例，我們只差最后的數據了，而數據的mock地址已經提供：http://yapi.smart-xwork.cn/mock/169327/emp/list

我們最后要做的就是異步加載數據，所以我們需要使用axios發送ajax請求。

在vue項目中，對于axios的使用，分為如下2步：

安裝axios: npm install axios
需要使用axios時，導入axios: import axios ‘axios’

接下來我們先來到項目的執行終端，然后輸入命令，安裝axios，具體操作如下圖所示：
在這里插入圖片描述
然后重啟項目，來到我們的EmpView.vue組件頁面，通過import命令導入axios，代碼如下：

import axios  'axios';

那么我們什么時候發送axios請求呢？頁面加載完成，自動加載，所以可以使用之前的mounted鉤子函數，并且我們需要將得到的員工數據要展示到表格，所以數據需要賦值給數據模型tableData，所以我們編寫如下代碼：

 mounted(){axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(resp=>{this.tableData=resp.data.data; //響應數據賦值給數據模型});}

此時瀏覽器打開，呈現如下效果：
在這里插入圖片描述
但是很明顯，性別和圖片的內容顯示不正確，所以我們需要修復。

7.8.2 性別內容展示修復

首先我們來到ElementUI提供的表格組件，找到如下示例：
在這里插入圖片描述
我們仔細對比效果和功能實現代碼，發現其中涉及2個非常重要的點：

<template> : 用于自定義列的內容
- slot-scope: 通過屬性的row獲取當前行的數據

所以接下來，我們可以通過上述的標簽自定義列的內容即可，修改性別列的內容代碼如下：

 <el-table-column prop="gender"    label="性別" width="140"><template slot-scope="scope">{{scope.row.gender==1?"男":"女"}}</template></el-table-column>

此時打開瀏覽器，效果如下圖所示：性別一列的值修復成功

在這里插入圖片描述

7.8.3 圖片內容展示修復

圖片內容的修復和上述一致，需要借助<template>標簽自定義列的內容，需要需要展示圖片，直接借助<img>標簽即可，并且需要設置圖片的寬度和高度，所以直接修改圖片列的代碼如下：

<el-table-column prop="image"     label="圖像" width="180"><template slot-scope="scope"><img :src="scope.row.image" width="100px" height="70px"></template>
</el-table-column>

此時回到瀏覽器，效果如下圖所示：圖片展示修復成功
在這里插入圖片描述
此時整個案例完整，其完整代碼如下：

<template><div><!-- 設置最外層容器高度為700px,在加上一個很細的邊框 --><el-container style="height: 700px; border: 1px solid #eee"><el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能學習輔助系統</el-header><el-container><el-aside width="230px"  style="border: 1px solid #eee"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系統信息管理</template><el-menu-item index="1-1">部門管理</el-menu-item><el-menu-item index="1-2">員工管理</el-menu-item></el-submenu></el-menu></el-aside><el-main><!-- 表單 --><el-form :inline="true" :model="searchForm" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="searchForm.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性別"><el-select v-model="searchForm.gender" placeholder="性別"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item label="入職日期"><el-date-pickerv-model="searchForm.entrydate"type="daterange"range-separator="至"start-placeholder="開始日期"end-placeholder="結束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查詢</el-button></el-form-item></el-form><!-- 表格 --><el-table :data="tableData"><el-table-column prop="name"      label="姓名" width="180"></el-table-column><el-table-column prop="image"     label="圖像" width="180"><template slot-scope="scope"><img :src="scope.row.image" width="100px" height="70px"></template></el-table-column><el-table-column prop="gender"    label="性別" width="140"><template slot-scope="scope">{{scope.row.gender==1?"男":"女"}}</template></el-table-column><el-table-column prop="job"       label="職位" width="140"></el-table-column><el-table-column prop="entrydate" label="入職日期" width="180"></el-table-column><el-table-column prop="updatetime" label="最后操作時間" width="230"></el-table-column><el-table-column label="操作" ><el-button type="primary" size="mini">編輯</el-button><el-button type="danger" size="mini">刪除</el-button></el-table-column></el-table><!-- Pagination分頁 --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange"backgroundlayout="sizes,prev, pager, next,jumper,total":total="1000"></el-pagination></el-main></el-container></el-container></div>
</template><script>
import axios  'axios'
export default {data() {return {tableData: [],searchForm:{name:'',gender:'',entrydate:[]}}},methods:{onSubmit:function(){console.log(this.searchForm);},handleSizeChange(val) {console.log(`每頁 ${val} 條`);},handleCurrentChange(val) {console.log(`當前頁: ${val}`);}},mounted(){axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(resp=>{this.tableData=resp.data.data;});}
}
</script><style></style>

8. Vue路由

8.1 路由介紹

將資代碼/vue-project(路由)/vue-project/src/views/tlias/DeptView.vue拷貝到我們當前EmpView.vue同級，其結構如下：
在這里插入圖片描述
此時我們希望基于4.4案例中的功能，實現點擊側邊欄的部門管理，顯示部門管理的信息，點擊員工管理，顯示員工管理的信息，效果如下圖所示：

這就需要借助我們的vue的路由功能了。

前端路由：URL中的hash(#號之后的內容）與組件之間的對應關系，如下圖所示：
在這里插入圖片描述
當我們點擊左側導航欄時，瀏覽器的地址欄會發生變化，路由自動更新顯示與url所對應的vue組件。

而我們vue官方提供了路由插件Vue Router,其主要組成如下：

VueRouter：路由器類，根據路由請求在路由視圖中動態渲染選中的組件
<router-link>：請求鏈接組件，瀏覽器會解析成<a>
<router-view>：動態視圖組件，用來渲染展示與路由路徑對應的組件

其工作原理如下圖所示：
在這里插入圖片描述
首先VueRouter根據我們配置的url的hash片段和路由的組件關系去維護一張路由表;

然后我們頁面提供一個<router-link>組件,用戶點擊，發出路由請求;

接著我們的VueRouter根據路由請求，在路由表中找到對應的vue組件；

最后VueRouter會切換<router-view>中的組件，從而進行視圖的更新

8.2 路由入門

接下來我們來演示vue的路由功能。

首先我們需要先安裝vue-router插件，可以通過如下命令

npm install vue-router@3.5.1

但是我們不需要安裝，因為當初我們再創建項目時，已經勾選了路由功能，已經安裝好了。

然后我們需要在src/router/index.js文件中定義路由表，根據其提供的模板代碼進行修改，最終代碼如下：

import Vue  'vue'
import VueRouter  'vue-router'Vue.use(VueRouter)const routes = [{path: '/emp',  //地址hashname: 'emp',component:  () => import('../views/tlias/EmpView.vue')  //對應的vue組件},{path: '/dept',name: 'dept',component: () => import('../views/tlias/DeptView.vue')}
]const router = new VueRouter({routes
})export default router

注意需要去掉沒有引用的import模塊。

在main.js中，我們已經引入了router功能，如下圖所示：
在這里插入圖片描述
路由基本信息配置好了，路由表已經被加載，此時我們還缺少2個東西，就是<router-lin>和<router-view>,所以我們需要修改2個頁面（EmpView.vue和DeptView.vue）我們左側欄的2個按鈕為router-link,其代碼如下：

<el-menu-item index="1-1"><router-link to="/dept">部門管理</router-link>
</el-menu-item>
<el-menu-item index="1-2"><router-link to="/emp">員工管理</router-link>
</el-menu-item>

然后我們還需要在內容展示區域即App.vue中定義route-view，作為組件的切換，其App.vue的完整代碼如下：

<template><div id="app"><!-- {{message}} --><!-- <element-view></element-view> --><!-- <emp-view></emp-view> --><router-view></router-view></div>
</template><script>
// import EmpView  './views/tlias/EmpView.vue'
// import ElementView  './views/Element/ElementView.vue'
export default {components: { },data(){return {"message":"hello world"}}
}
</script>
<style></style>

但是我們瀏覽器打開地址： http://localhost:7000/ ，發現一片空白，因為我們默認的路由路徑是/,但是路由配置中沒有對應的關系，

所以我們需要在路由配置中/對應的路由組件，代碼如下：

const routes = [{path: '/emp',name: 'emp',component:  () => import('../views/tlias/EmpView.vue')},{path: '/dept',name: 'dept',component: () => import('../views/tlias/DeptView.vue')},{path: '/',redirect:'/emp' //表示重定向到/emp即可},
]

此時我們打開瀏覽器，訪問http://localhost:7000 發現直接訪問的是emp的頁面，并且能夠進行切換了，其具體如下圖所示：

在這里插入圖片描述
到此我們的路由實現成功。

9. 打包部署

我們的前端工程開發好了，但是我們需要發布，那么如何發布呢？主要分為2步：

前端工程打包
通過nginx服務器發布前端工程

9.1 前端工程打包

接下來我們先來對前端工程進行打包

我們直接通過VS Code的NPM腳本中提供的build按鈕來完整，如下圖所示，直接點擊即可：
在這里插入圖片描述
然后會在工程目錄下生成一個dist目錄，用于存放需要發布的前端資源，如下圖所示：

9.2 部署前端工程

9.2.1 nginx介紹

nginx: Nginx是一款輕量級的Web服務器/反向代理服務器及電子郵件（IMAP/POP3）代理服務器。其特點是占有內存少，并發能力強，在各大型互聯網公司都有非常廣泛的使用。

niginx在windows中的安裝是比較方便的，直接解壓即可。所以我們直接將資料中的nginx-1.22.0.zip壓縮文件拷貝到無中文的目錄下，直接解壓即可，如下圖所示就是nginx的解壓目錄以及目錄結構說明：
在這里插入圖片描述
很明顯，我們如果要發布，直接將資源放入到html目錄中。

9.2.2 部署

將我們之前打包的前端工程dist目錄下得內容拷貝到nginx的html目錄下，如下圖所示：
在這里插入圖片描述
然后我們通過雙擊nginx下得nginx.exe文件來啟動nginx，如下圖所示：

nginx服務器的端口號是80，所以啟動成功之后，我們瀏覽器直接訪問http://localhost:80 即可，其中80端口可以省略，其瀏覽器展示效果如圖所示：