微信搜索【大奇測試開】，關注這個堅持分享測試開發干貨的家伙。
回歸主線更新，由於本次知識點只有一個，就不給思維導圖了，在上系列測試平台開發實踐中主要學習了頁面直接的轉跳方法和遠程搜索的如何做，最終實現了提測的添加的過程，這里補下效果圖和測試結果。
演示1: 跳轉獨立新頁面做form表單並支持返回上一頁
演示2: 輸入關鍵字進行遠程多數據的搜索選擇，並且回帶一些默認配置數據
演示3: 輸入必填信息提交成功自動返回上一頁面刷新數據
查看是否收到郵件，正常收到郵件沒問題，在這里如果你還不清楚郵件這個是如何處理的，請往前翻看之前發布的文章。
ICON的使用
接下來通過練習對提測平台菜單的一個小小的前端優化，了解 項目圖標的使用方法，注意到菜單到目前為止都是相同的默認圖標，這個其實是可以進行更改的，目前element-ui admin這個框架版本菜單部分需要使用自定義的資源，因此需要通過在icon資源網站下載合適圖標（.svg格式），放到前端代碼路徑/scr/icons/svg目錄下，然后通過直接指定名字就可以了。這里推薦“阿里巴巴圖標矢量庫”，資源比較豐富，可以授權非商業化自由使用。
動手優化菜單圖標，這里為了驗證效果，兩種方式分別找兩個圖標，修改TPMWeb/src/router/index.js 中 icon值，一頓搜索-下載-重名-導入-修改變量后，編碼的內容如下，這里嘗試了中英文都支持，但對於編程命令什么還是建議全部為英文的最為妥當。
優化這部分后，啟動看下前后的改變，是不是看着舒服了。
另外一種在其他 控件或單獨使用Icon，比如之前開發的一些添加按鈕上或有 + 的圖標，這里順便就講解下默認圖標組件的使用。
從官方文檔看有兩種模式，一個是用 <i class="對應版本圖標名稱"> ，另外一個是對應組件有icon這個屬性的，舉個例子：將之前的產品管理頁面的搜索按鈕改造成一個搜索圖標按鈕，就會有如下的效果。
<el-button icon="el-icon-search" circle></el-button>
其實在其他地方也可以通過自定義的樣式進行組合使用，具體使用的時候可以再說說。
最后擴展一下最上邊的說的iconfont資源庫，是支持自己賬號創建資源項目，將自己的設計icon或者別人設計好的免費資源添加到自己的項目，然后通過不同的引用方式引入后，直接在線使用，實際測試font class方式：
步驟1：創建項目->搜索->添加到購物車->點擊列表添加到項目
步驟2: 切換到font class 方式下（其他方式可以點擊官方右側使用幫助查看。），生成一個css連接代碼，將其添加到public/index.html 的head中，這里使用link的引用。
步驟3: 通過<i class="iconfont 項目里圖標名稱"></i>進行使用，再拿產品這個添加按鈕改動下代碼
<el-button type="primary" style="float:right" @click="dialogProduct()"> <i class="iconfont tpm-code"></i> 新增 </el-button>
看下引用的效果，這樣的好處就是可以在線管理屬於自己的一套icon庫了。
好了，偷個懶本次就更新這么多吧，代碼也不多，源碼等下次更新一並打TAG提交。
堅持原創，堅持實踐，堅持干貨，如果你覺得有用，請點擊推薦，也歡迎關注我博客園和微信公眾號。