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

时间 2020-04-21

标签初探 node.js node 框架 eggjs 环境搭配栏目 Node.js 繁體版

原文原文链接

eggjs 是一个优秀的 Node.js 框架css

概述：为何标题上说 eggjs 是一个优秀的 Node.js 框架（可跳过）？html

换言之，咱们为何选择 eggjs 进行开发而不是以前初学时使用的 Express 框架呢？node

　　Express 是最著名的 Node.js 框架，它甚至是官方惟一推荐过的（目前）数据库

　　可是根据实际开发，我以为它的配置至关冗长，比方说：它能够一句 app.use() 布满长达数十行npm

　　这一点，我无法继续使用下去，因此就中止对它的学习。json

就配置方面来讲： 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/ 或当前文章连接，不然视为侵犯著做权。