揭開NoahV智能運維前端框架的神祕面

乾貨概覽

衆所周知，前端有三大主流框架：Vue、React、Angular，這些前端框架能夠幫助咱們快速搭建項目，可是咱們在實際項目中每每還須要投入很大精力去使用其餘代碼庫與應用做爲補充支持（如：須要一些基礎的UI組件庫，須要HTTP請求庫等），另外，在實際應用到不一樣領域時，會有不少重複性的開發工做。

正由於上述緣由，咱們構建了本身的智能運維前端框架——NoahV（現已開源），它能夠結合運維業務場景，提供經常使用的運維組件庫及工具，好比：表格、表單、趨勢圖、數據請求、數據模擬等等。除了上面提到的一些可視化組件，NoahV還特別提供了佈局應用，咱們的佈局應用除了左-右，上-下佈局，還有運維領域中經典的左側服務樹與右側應用的交互佈局。此外，咱們還把數據請求、數據交互與組件結合，並用配置化的開發模式來大幅度下降二次開發的成本。下面，咱們就來詳細介紹NoahV是如何幫助開發人員快速提高研發效率的。

NoahV把後端工程師變成了全棧

1.表格組件

在運維業務中，表格一般用來展現一些運維對象、運維事件列表（好比上線任務列表、監控任務列表、監控報警事件列表等）。可是運維的表格與基礎表格不一樣的是，有一些運維對象，如圖1，上線模板表格，除了渲染上線模板的列表信息，還須要按模板名稱、建立時間進行篩選(圖1.b)，對具體的一條模板信息進行編輯或者刪除操做(圖1.c)。因此運維業務中的表格應用一般包含了增刪改查的操做，這類操做雖然簡單，對於非前端人員上手這類開發仍是須要必定的前端知識。咱們在NoahV中把表格組件作了進一步的加強，用配置化實現數據展現，數據操做等行爲的開發，讓非前端開發人員輕鬆上手。

圖1  上線模板表格

具體的配置看下圖：

圖2  上線模板表格配置

• columns：表格每列的數據定義，對應圖1.a

• url: 表格數據請求的url，對應圖1.a

• method: 表格數據請求的方式，對應圖1.a

• items: 表格篩選的交互，對應圖1.b

• action: 表格編輯，刪除的數據交互，對應圖1.c

在先後端分離的開發模式中，前端須要後端提供數據，可是後端一般還沒開發完畢，這個時候前端就須要按照固定的數據結構本身來模擬數據。模擬數據實際上是一個很繁瑣的工做，好比上面的表格這類應用，在咱們的實際業務場景中，需求還挺多的，模擬數據就是一個重複性的工做。在NoahV中，咱們就用NoahV Mockup工具來生成這類重複性的應用。

noahv cli就是咱們的命令行工具，裏面包含了NoahV Mockup模塊，這個模塊有一個命令就是noahv create命令，當執行noahv create，提示輸入模擬數據的接口名稱，這個接口名稱由一個具體的文件路徑+文件名稱組成，好比輸入api/table, 會自動在mockup目錄下生成api文件夾，同時會在api文件夾中建立table模擬數據。

備註：使用noahv create以前須要安裝noahv cli命令行工具，更詳細的使用步驟，請查看咱們的文檔中心（ https://baidu.github.io/NoahV）。

2.佈局應用

表格是前端的一個經常使用應用，固然還有一些如表單應用、列表應用等等，可是這些應用都不能成爲獨立的頁面。這個獨立的頁面是包含了導航、麪包屑、內容體，有的頁面還會有更復雜的佈局。因此前端應該如何佈局，是不少開發人員關心的問題。

2.1 上-下佈局

咱們經常使用的頁面佈局有上-下佈局，或者左-右佈局模式。一般上-下佈局中的上就是頭部導航，下就是內容體，頭部導航又有一級導航、二級導航之類，登陸/退出等。這類共性的佈局需求，咱們在NoahV中也作了統一的封裝，就是導航配置，咱們先看下導航配置出來的效果圖。

圖3  導航應用

a對應logo，b對應導航菜單，c對應登陸，d對應麪包屑，e對應內容體。

咱們來看下經過怎樣的配置來實現上面的界面：

圖4  導航配置

• 圖4中的logo是對圖3.a logo的配置

• header是對圖3.b的菜單導航配置

• login是對圖3.c的登陸配置

• separator是對圖3.d麪包屑的配置，hasBread能夠配置是否須要麪包屑

2.2 左-右佈局

前面說到除了上-下這類佈局，還有左-右這類狀況，顧名思義，就是左側導航，右側內容體，一般狀況下，頭部導航與左側導航有聯動，其實看圖4的導航配置中，看到有個type類型，type類型這裏有兩種值: header/header-sidebar，看具體的值就能對應上header-sidebar就是頭部導航與左側導航的狀況。咱們直接把圖4中的type值改成header-sidebar，就獲得下圖的佈局界面：

圖5  左側導航配置

2.3 自定義佈局擴展

固然，頁面佈局遠不止這兩種狀況，好比在運維場景中，咱們有不少交互是對服務的某個節點作操做，因此就有左側是服務樹，右側是服務節點對應的應用。這類佈局就須要前端開發人員本身作自定義的佈局開發。咱們在佈局的入口頁面作了普通佈局與自定義佈局的開關，能夠在兩種模式中進行切換。咱們提供了自定義佈局的layout文件，若是須要自定義模式就把這個文件引入，並使用便可。

NoahV可擴展性是前端工程師的利器

上面詳細介紹了NoahV中表格組件，佈局組件如何幫助開發人員解決效率問題，接下來咱們從架構上對NoahV作一個更全面的介紹。如下是NoahV的架構圖：

圖6  NoahV架構圖

從這個架構圖看，NoahV由三個部分組成，第一個是NoahV的架構主體，第二個是NoahV的工具，第三個是NoahV的規範。

架構主體是NoahV的主要部分，由底層依賴、組件、場景、頁面、系統組成。NoahV又提供了開發階段的項目初始化、頁面建立、數據模擬，還有聯調階段、發佈階段的工具。架構主體與工具都遵循咱們的開發規範、UI規範、API規範。下面咱們來詳細介紹NoahV的這三個部分。

1.NoahV架構主體

NoahV架構主體分紅5層，第一層是NoahV的底層依賴Vue JS。第二層是組件，咱們一般說的組件就是基礎UI組件，好比Element UI，Iview之類的組件庫，好比Input, Select等等，把基礎UI組件與咱們的運維對象、運維操做結合，就是咱們的運維UI組件，好比前面介紹的表格組件。在運維業務中，咱們的儀表盤，除了有趨勢圖、柱狀圖之類的基礎UI組件或運維UI組件，還須要趨勢圖組件的佈局、儀表盤展現等，咱們把這些若干個組件放在一塊兒，就是咱們的場景。基礎UI組件、運維UI組件、場景的組裝就是咱們的頁面。經過導航、路由等把各個頁面結合，就造成了一個完整的系統。

接下來咱們來看下NoahV在開發、聯調、發佈階段都有哪些工具。

2.NoahV的工具

2.1 開發階段

當項目進入開發階段的時候，咱們用項目初始化工具來初始化項目，開發者也能夠根據本身的須要用頁面建立工具來建立頁面、組件等，生成的頁面與組件均可以用配置化的方式來開發，固然開發者也能夠按照前面講的佈局那樣用擴展的方式來作自定義開發。在開發階段咱們還須要使用模擬數據，因此NoahV用數據模擬工具來自動生成模擬接口。有了數據，就須要數據請求，對於數據請求，市面上有Fetch、Axios等一些高效的HTTP庫，可是在實際的業務場景中，咱們須要處理如Restful接口的支持，未登陸的跳轉，全局loading等等需求，這些在Fetch、Axios是沒有封裝的，因此NoahV的NoahV Request對這些需求作了必定的集成封裝，並且還能經過Request Hook提供hook入口，讓開發者在請求前與請求成功之後的數據適配與轉換。

關於NoahV Request更細的使用細節，請查看咱們的使用文檔（ https://baidu.github.io/NoahV/#/guide/request）。

2.2 聯調階段

當開發完成之後，就進入了先後聯調階段。當前端與後端進行聯調的時候，前端項目一般是有本身的服務，因此在調用後端接口的時候，會有跨域數據訪問的問題，爲了解決跨域問題，在項目初始化的時候，NoahV引入了代理功能，能夠將瀏覽器的的請求代理到目標Server上，從而繞過瀏覽器同源策略的安全限制，實現跨域數據訪問，只需在devProxy中加入相關配置便可。最後在項目發佈的時候，前端發佈成靜態的文件，經過後端服務能夠直接訪問這些文件，因此代理服務就不須要了。焦做國醫胃腸醫院口碑怎麼樣__良心醫院：http://jz.lieju.com/zhuankeyiyuan/37571399.htm

2.3 發佈階段

對於發佈階段的編譯發佈，咱們結合Webpack與Babel實現NoahV的開發階段，發佈階段的構建與編譯，裏面安裝了通用的Webpack Loader與Weback Plugin去解析相應的文件，咱們還新增如數據統計之類的Webpack Plugin，開發人員無需關心具體的編譯過程。NoahV還提供了Webpack 與Typescript的環境配置，因此開發人員能夠根據本身的項目須要去選擇本身須要的開發環境。

3.NoahV規範

上面的基礎UI組件、運維UI組件、場景、頁面以及咱們的一些開發工具生成的相關應用都遵循咱們的開發規範、UI規範、API規範。咱們用命令行工具來實現應用的初始化，頁面的建立等等，頁面建立的時候自動添加頁面的路由。因此命令行工具自動把頁面建立、頁面佈局、頁面導航、以及頁面路由等的邏輯自動化、規範化了。同時，像組件、頁面佈局、頁面導航、頁面路由這些元素都是可配置的，這些配置讓非前端開發人員輕鬆上手，開發人員還能夠根據項目的實際需求作自定義的擴展開發。焦做國醫胃腸醫院好很差__看胃腸就選國醫：http://jz.lieju.com/zhuankeyiyuan/37571607.htm

前面對NoahV作了這麼多的介紹，下面咱們來看看如何使用NoahV。

如何使用NoahV

在開始以前，確保正確安裝和配置了 Node.js v6.5 或以上。

如何安裝：

• npm install noahv-cli -g

• noahv –help

運行noahv –help，會獲得以下界面：

圖7  noahv –help

步驟一：初始化頁面

• mkdir project && cd project && noahv init

• 若是建立儀表盤應用採用：noahv init  --dashboard

• 若是想使用Typescript開發應用採用：noahv init --ts

• 用noahv start來啓動應用

啓動應用之後，會看到以下的界面：

圖8  NoahV初始化界面

步驟二：建立頁面

• noahv create list

NoahV目前的建立功能包含有noahv create action | list | filterList | form | chart | api | test, 更詳細的細節請參考咱們的使用文檔。

關於noahv-mockup、noahv-request、noahv-test等等也請參考咱們的使用文檔（https://baidu.github.io/NoahV/#/guide/quickstart）。

當建立相應的應用的時候，控制檯界面會有相應的提示：

圖9  noahv create命令

步驟三：發佈項目

• sh build.sh

運行build腳本，會自動對整個使用的項目進行打包編譯。

總  結

前面對NoahV運維前端框架作了總體介紹，它在咱們的實際項目中，大幅提高了運維產品的研發效率。同時，經過NoahV框架，咱們的產品易用性和體驗一致性也獲得了大幅增強。

更詳細的介紹與使用細節請查看：https://baidu.github.io/NoahV

NoahV現已開源，Github地址：https://github.com/baidu/NoahV

你們有任何疑問或者想要了解更多，能夠直接後臺聯繫咱們，有小編在等着和你們交流~