eggjs Node.js를위한 우수한 프레임 워크
개요 : 왜 eggjs 제목에 탁월한 Node.js를 프레임 워크 (건너 뛸 수)인가?
즉, 왜 우리는 전에 익스프레스 초보자를 사용하는 것보다 eggjs 개발 프레임 워크를 대신 선택합니까?
익스프레스 (현재) 그것도 유일한 공식 권장했다이며, 가장 유명한 Node.js를 프레임 워크입니다
그러나, 실제 개발에 따라, 나는 그것이 예를 들어 매우 긴 구성, 생각 : 그것은 app.use 할 수 있습니다 () 라인의 수십 은폐
이것은 학습 중지 그래서 나는 그것을 사용에 갈 수있다.
구성 약관 : 잘 eggjs, 그것은, 개발 제한을 설정 파일에있는 모든 구성 파일입니다.
먼저 하나 하나에서 당신은 서버 설정은 이전 설정 후 덮어 될 것입니다로드 할 때. JSON 유사한 구성이 우리가 쉽게 구성 할 수있는 장소를 찾아 수정할 수 있도록 같은 표현을 기반으로합니다 (키가 반복 될 수 없기 때문에하는 검색 위치를 알 수 있습니다)
같은, eggjs이 플러그인의 큰 숫자를 가지고, 개발자는 어떤 기능을 거의 모든 공식 플러그인에서 찾을 수 있습니다 무엇을해야합니다.
플러그인을 찾을 수없는 경우 eggjs 또한 사용자 정의를 지원합니다.
여기에서 찾을 공식 API 문서 사용할 수 있습니다 https://eggjs.org/zh-cn/를
더 이상의 프로젝트 프레임 워크를 eggjs 시작하자, 말 (공식 퀵 스타트에 따르면, 공식 다소 다른과, 항상 설명 할 수없는 오류가 발생 없음)
공식 오류, 구성은 정말 이해하기 위해 프레임 워크를 사용하는 서너 시간 동안, 나는 당신이 높은 품질의 프로젝트를 작성하는이 문서 단지 반 시간을 읽기 바란다
1.1 비계 예비 엔지니어링 디렉토리를 설정
물론, 당신은 또한 수동으로 만들 수 있습니다 Node.js를의 중요한 측면 중 하나가 작동에이 단계는 모든 기반으로합니다.
열기 DOS는 / 터미널, 프로젝트에 변경하려면 다음 명령을 사용하여 어디 (여기 내 프로젝트 저장 위치 임)를 저장해야합니다 :
CD C : \ 사용자 \ \ 문서 \ NodeJS를 종
내가 Windows에서 "문서"의 디렉토리 NodeJS를 생성, 나를 위해 모든 노드 프로젝트의 루트 될 것입니다.
(프로젝트, 변경할 수있는 프로젝트 이름) 프로젝트 폴더를 만들고 입력 :
에서 mkdir 프로젝트 && CD 프로젝트
여기, 우리는 비계 설치를 초기화하고 시작 의존 :
# 초기화 디렉토리 (필요한 폴더와 JS, package.json 파일 생성)
초기화를 NPM을 = 단순 계란 --type
# 종속성을 설치
위의 해수면,
시간이 초기화 디렉토리를 수행하기 위해, 당신은 몇 가지 정보 것이다 결국 수입 package.json의 프로필을 작성해야합니다.
빨간색 상자는 후속 우리가 자신의 역할을 이해하게, eggjs 파일 및 폴더의 초기화 중에 생성 [중요]
화살표 포인트는 프로젝트 이름, 설명, 저자 및 쿠키 키로 정보를 입력 할 필요가있다
지금, 당신은 더 완전한 디렉토리 구조를 가지고있다 (단지 몇 가지 더 파일보다 만들어보다 난 상관 없어, 몇 번을 실행했습니다)
그럼 시작하는 방법은 여러 가지가 있으며, 프로젝트를 시작합니다
# 프로젝트 시작
NPM의 RUN dev에
NPM 시작
NPM 프로덕션 환경에 사용이 방법에 속해 시작, 다음, 필요가 그것을보고 콘솔에 정보 출력을 인쇄합니다.
NPM 실행 디바이스가 코드를 수정할 때 권장되는 시작 모드의 개발이다, 수동, 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', } }; };
最新版的 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/ 或当前文章链接，否则视为侵犯著作权。