初探 Node.js 框架：eggjs （環境搭配篇）

eggjs 是一個優秀的 Node.js 框架

概述：爲何標題上說 eggjs 是一個優秀的 Node.js 框架（可跳過）？

換言之，咱們爲何選擇 eggjs 進行開發而不是以前初學時使用的 Express 框架呢？

 

　　Express 是最著名的 Node.js 框架，它甚至是官方惟一推薦過的（目前）

　　可是根據實際開發，我以爲它的配置至關冗長，比方說：它能夠一句 app.use() 佈滿長達數十行

　　這一點，我無法繼續使用下去，因此就中止對它的學習。

 

就配置方面來講： eggjs 作得很好，它經過開發約束，將全部的配置文件放置在 config 文件中。

起初加載時便進行逐一對服務器進行設置，後設置的將會覆蓋以前的。配置則是基於 相似 json 同樣的寫法，這使得咱們容易定位某一處配置並進行修改（由於 key 不能重複，檢索一下就知道在哪了）

 

一樣的，eggjs 擁有大量的插件，開發者須要怎樣的功能，在官方插件上幾乎均可以找到。

若是沒有找到所需插件，eggjs 也支持定製。

在這裏能夠找到官方 API 以及使用文檔：https://eggjs.org/zh-cn/

 

再也不進行多說了，讓咱們開始進行一個 eggjs 框架工程吧（跟官方的有些不一樣，按照官方的快速入門，老是遇到莫名其妙的錯誤）

官方的錯誤，配置讓我耗費了三四個小時才得以真正明白框架的使用方法，但願你看完這篇文章，只需半小時就能寫出一個高質量的項目

 

1.1 使用 腳手架 進行初步的工程目錄創建

這一步也是全部基於 Node.js 工程所必備的環節之一：固然，你也能夠手動建立。

打開 DOS / 終端 ，使用如下命令轉到你須要存放的項目位置（這裏是個人項目存放位置）：

 

cd C:\Users\chong\Documents\NodeJS

 

我是在 Windows 系統下的 「文檔」 中建立了一個 NodeJS 目錄，它將是我用於全部 Node 項目的根目錄。

建立一個項目文件夾並進入（ project 是項目名稱，可更改）：

mkdir project && cd project

 

在這裏，開始進行 腳手架 的初始化和安裝依賴並進行啓動：

# 初始化目錄（會建立必備的文件夾和JS，package.json 文件）
npm init egg --type=simple
 # 安裝依賴 npm i

 

執行初始化目錄的時候，須要你填寫一些信息，這些信息最終都會導入 package.json 配置文件中。

 

 

 

 

紅框是 eggjs 初始化時建立的文件以及文件夾，後續咱們再來了解它們的做用【重要】

而箭頭所指的則是須要填寫的信息，例如項目名稱，描述信息，做者以及 Cookie 密鑰

 

如今，你已經獲得了一個較爲完整的目錄結構（我已經運行過幾回，比剛建立的還多了一些文件，沒必要在乎）：

 

 

好了，再啓動項目，這裏有幾種啓動方式：

# 啓動項目
npm run dev

npm start

 

npm start 屬於生產環境中使用，使用這種方式的話，須要打印信息輸出到控制檯就看不到了。

而 npm run dev 是開發中所推薦的啓動方式，當你修改代碼時，則沒必要手動重啓服務器，eggjs 會本身重啓，你只須要等待一會就能夠在瀏覽器看到相對應的修改。

重要的是：你隨時能夠在代碼中寫上 console.log ，控制檯也會有相應的顯示。

 

下方是多種啓動或測試的命令（ package.json ），均在前方加入 npm 便可使用。

也能夠修改它們，若是你須要換個端口，例如 dev，修改成 egg-bin dev --port 8081 （注意：兩個 - 符號）

 

 

 

啓動完成後，在瀏覽器中訪問 DOS / 終端 顯示的路徑（紅色箭頭）：

 

 

 

黃色部分是被修改的文件，在這裏沒必要理會。

到這裏，你的初始化工做已經作完，不妨休息會，再繼續往下閱讀。

 

 

1.2 瞭解各個目錄、文件的做用以及 eggjs 如何處理它們

相信你已經成功初始化了吧，如今讓咱們來了解 eggjs 的目錄結構，各個文件的做用：

從新回到以前的一張圖，咱們能夠清晰地看見 eggjs 到底建立了什麼。

 

 

 

前一些以 . 開頭的文件咱們沒必要理會，從 package.json 文件開始（咱們已經知道這是配置文件），往下看：

它建立了兩個文件夾，分別是： app、config （test 屬於測試，如單元測試等，咱們也沒必要理會）

 

app 是網站處理用戶請求，以及瀏覽器請求服務器資源的應用文件夾

它包含：router（路由文件）、controller（處理器）

是的，初始化就這麼兩個，因此我建議在 app 目錄下再手動建立如下幾個文件夾：

 

public（存放靜態資源，如 css、js、img）

view （存放視圖文件）

service（處理數據等業務操做）

 

先來詳細說說路由文件，全部的網站都會有一個訪問地址，路由則是客戶端首先進入位置：

 

 

客戶端（瀏覽器）會發送一個請求，這個請求將會首先進入路由分發文件，匹配成功到某一個 處理器（Controller）後

這個處理器將會去進行相關業務操做（Service）拿到數據，以後 view 渲染一個頁面成功後一層層返還回去。

 

controller 文件夾下則放置着咱們全部核心的網站代碼（後續解釋）

 

任何一個網站都須要進行配置，而全部的 Web服務器 都應該自身有建立環境的能力，而不是人爲去爲這個服務器配置好環境。

那麼 config 文件夾就是爲此而生。

 

由前面得知：eggjs 有着豐富的插件，因此必然有一個插件的管理、配置文件，它就是 plugin.js 

後續咱們將知道一個插件應該怎樣啓用，關閉，安裝，這裏先不說明；

 

eggjs 最重要的配置文件則是 ：config.default.js，它管理着整個 Node服務器 的全部配置，包括插件、Cookie安全密鑰、視圖渲染等等配置。

 

好了，看到這裏你已經對生成的 eggjs 項目工程有了一個大體的瞭解（我昨天才接觸 node.js ，如有不對，望在評論中指出，我會進行修改，多謝）

 

1.3  瞭解一個請求是如何被處理的【重要】

讀完前面，你已經明白：eggjs 工程中的目錄，文件的做用（只介紹了部分），如今讓咱們來深刻了解代碼層次上，eggjs 如何處理用戶請求（不解析源碼，從生成的文件來看）：

 

先來了解路由文件怎樣工做（建議全部的路由設計都放在一個文件中）：

'use strict'; /** * @param {Egg.Application} app - egg application */ module.exports = app => { const { router, controller } = app; router.get('/', controller.main.index); };

 

router.get() 方法指的是 GET 請求。

第一個參數表示 URL，例如 www.cnblogs.com 是域名，那麼 www.cnblogs.com/index 中的  / 開始，則都是該網站下的‘路由’

第二個參數表示 controller 文件夾下的 main.js 中的 index 方法【重要】，以下：

'use strict'; const Controller = require('egg').Controller; class MainController extends Controller { async index() { this.ctx.body = '<h1>Hello world</h1>'; } } module.exports = MainController;

 

因此，你會在瀏覽器的窗口中看見：

 

 

看，你已經知道它的請求過程了！先在 router.js 文件中找到用戶請求的位置，而網站進入默認是 / 

因此咱們已經捕獲到了此次請求，以後根據路由文件的描述找到 controller 文件夾下的 main 文件，在從中檢索到 index 方法

這個方法設置了body，讓它輸出一個 h1 標籤，寫上 Hello world 。

 

即 router -> controller.main.index() 

 

可是這樣的網站根本不具有使用能力，留不住用戶，咱們還須要根據不一樣用戶數據，渲染一個好看的頁面給用戶。

這時，咱們就能夠知道 eggjs 插件的強大之處了（再緩緩，梳理下閱讀到的知識，準備好了再繼續瞭解吧）。

 

 

1.4 經過模板引擎渲染頁面

eggjs 強大的插件足以使你在 Node服務器 上作到與其它Web服務器不一樣的體驗

先述說模板引擎，以後，讓咱們瞭解一下網站多語言一鍵配置。

 

以 Nunjucks 模板引擎爲例：

首先引入兩個插件：egg-view、egg-view-nunjucks

npm i egg-view -save npm i egg-view-nunjucks -save

 

以後打開 config/config.default.js 文件：

'use strict'; const path = require('path'); module.exports = appInfo => { return { // Cookie 安全密鑰
        keys: "_skfhj8546542354.16554", // 項目日誌存放文件夾
 logger: { dir: path.join(appInfo.baseDir, 'logs'), }, // 渲染模板配置
 view: { // 配置視圖根路徑
            root: path.join(appInfo.baseDir, 'app/view'), // 是否緩存路徑
            cache: true, // 配置文件默認擴展名
            defaultExtension: '.nj', // 默認渲染模板引擎
            defaultViewEngine: 'nunjucks', // 文件映射配置
 mapping: { '.nj': 'nunjucks' } } }; };

 

我已經註明了各個屬性的做用，可複製到你的文件中。

以後啓用插件：egg-view-nunjucks，打開 config/plugin.js 文件

'use strict'; /** * 模板引擎:用於渲染頁面數據 */ exports.nunjucks = { enable: true, package: 'egg-view-nunjucks', };

 

配置方面已經準備完畢，以後須要在 app/view 目錄下建立一個 index.nj 模板文件

<html>
    <head>
        <title>{{ page_title }}</title>
    </head>
    <body>
        <h1>{{ page_content }}</h1>
    </body>
</html>

 

雙括號是模板引擎的語法之一，還有循環等（是否是以爲跟 jsp 差很少）

好了，讓咱們修改 controller/main.js 文件

'use strict'; const Controller = require('egg').Controller; class MainController extends Controller { async index() { const { ctx } = this; await ctx.render('index',{ page_title : "標題", page_content : "模板引擎所渲染的頁面" }); } } module.exports = MainController;

 

注意：請加上 await 關鍵字，它表示等待一個 Promise 對象，若是不加上，會出現 404 錯誤，

由於在渲染過程當中，處理器卻返回告終果（沒數據的結果），天然客戶端也會認爲服務器沒有找到資源。

 

 

 

 

 

如今已經跟咱們所想的一致，那麼到這裏，你已經具有了開發一個項目的能力；

以後會逐步介紹數據庫鏈接，數據處理等方法。敬請期待。

 

 

1.4.1  多語言配置（將會引用一些官方例子）

多語言顯示（按需配置），很簡單，基於插件擴展能力，咱們首先在 config.default.js 中增長配置，完整看起來是這個樣子的：

'use strict'; const path = require('path'); module.exports = appInfo => { return { // Cookie 安全密鑰
        keys: "_tourism_2650159865482545.265", // 項目日誌存放文件夾
 logger: { dir: path.join(appInfo.baseDir, 'logs'), }, // 渲染模板配置
 view: { // 配置視圖根路徑
            root: path.join(appInfo.baseDir, 'app/view'), // 是否緩存路徑
            cache: true, // 配置文件默認擴展名
            defaultExtension: '.qyml', // 默認渲染模板引擎
            defaultViewEngine: 'nunjucks', // 文件映射配置
 mapping: { '.qyml': 'nunjucks' } }, // 多語言配置
 i18n: { // 默認語言，默認 "en_US"
            defaultLocale: 'zh-CN', // URL 參數，默認 "locale"
            queryField: 'locale', // Cookie 記錄的 key, 默認："locale"
            cookieField: 'locale', // Cookie 的 domain 配置，默認爲空，表明當前域名有效
            cookieDomain: '', // Cookie 默認 `1y` 一年後過時， 若是設置爲 Number，則單位爲 ms
            cookieMaxAge: '1y', } }; };

 

第二步：將 egg-i18n 插件進行安裝，並寫入項目配置文件中

npm i egg-i18n -save

 

最新版的 eggjs 中默認開啓多語言插件，因此咱們沒必要手動啓用。

 

以後在 config 目錄下建立一個 locale 文件夾【重要：拼寫必定要正確】

在 locale 文件夾中建立所需配置的語言文件（圖僅示例兩種），能夠是 JSON 文件，也能夠是 JS 文件，大概是這樣的（個人是 JS 格式）：

 

 

全部的多語言開發都會基於一種語言，我以英語爲例（國際化也都是英語）：

zh-CN.js 是這樣配置的（用官方的例子）：

module.exports = {
  "Email": "郵箱",
  "Welcome back, %s!": "歡迎回來，%s!"
};

 

若是你是基於 JSON 文件，也就是 zh-CN.json ，那麼編寫是這個樣子的：

{ "Email": "郵箱", "Welcome back, %s!": "歡迎回來，%s!" }

 

就算是英語也須要配置：

en_US.js 會是這樣編寫的：

module.exports = { "Email": "Email", "Welcome back, %s!": "Welcome back，%s!" };

 

至於 %s %d 之類的 format 標識，它們的做用是這樣的（引用官方例子）：

// config/locale/zh-CN.js
module.exports = { 'Welcome back, %s!': '歡迎回來，%s!', }; ctx.__('Welcome back, %s!', 'Shawn'); // zh-CN => 歡迎回來，Shawn! // en-US => Welcome back, Shawn!

 

好了，一切準備就緒，若是須要在 Controller 中直接輸出，須要調用 __ 方法進行轉義，注意是兩個下斜槓，不是讓你填空...

class HomeController extends Controller { async index() { const ctx = this.ctx; ctx.body = { message: ctx.__('Welcome back, %s!', ctx.user.name) // 或者使用 gettext，gettext 是 __ 函數的 alias
      // message: ctx.gettext('Welcome back', ctx.user.name)
 user: ctx.user, }; } }

 

在視圖模板中這樣使用，假設你是 nunjucks 模板引擎：

<html>
    <head>
        <title>{{ page_title }}</title>
    </head>
    <body>
        <h1>{{ __('Welcome back, %s!', page_content) }}</h1>
    </body>
</html>

 

通過處理後，咱們將獲得這樣的頁面效果：

 

 

如今你也能夠開發一個支持多語言的網站了，我所示例的都是基礎代碼，關於多語言支持請參考如下網址：

https://eggjs.org/zh-cn/core/i18n.html

 

今天就到這裏了，後續會出一些插件使用，或者是能夠快速開發的方法。

 

 

 

2020-2-11 寫於揭陽

轉載請附上本博客地址：https://www.cnblogs.com/chongsaid/ 或當前文章連接，不然視爲侵犯著做權。

原文出處：https://www.cnblogs.com/chongsaid/p/nodejs_eggframe_getStart.html