egg的学习笔记整理（自己学习用的）

最新推荐文章于 2023-10-30 23:36:45 发布

原创

最新推荐文章于 2023-10-30 23:36:45 发布 · 393 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #笔记 #javascript

1.Egg.js与Koa/Express 对比

Egg.js相对比Koa和Express框架的学习成本要高，但更适合企业级开发，有成熟的插件机制、扩展机制，还可以使用多进程管理。所以多付出一点学习成本是很划算的事情。我制作了一张图，对Egg.js和Express/Koa框架进行了对比

特征对比	egg.js	koa和Express
代码规范性(mvc开发模式)	符合mvc开发模式Controller/Service/View	灵活编码，没有明确规范
学习成本	中	易
创建机制/扩展机制	有	无
多线程管理	有	无
HttpClient集成	有	无

2.Egg.js环境搭建

2.1 使用yarn命令进行安装

以管理方式打开Windows中的PowerShell（如果不以管理员方式打开，没办新建目录），选择要创建目录的位置。然后创建目录。

mkdir egg      // 创建egg目录
cd egg         // 进入egg目录

使用yarn命令来创建一个egg项目，命令如下。

yarn create egg  --type=simple

如果你没安装yarn命令，可以使用下面这条命令进行安装。

npm install -g yarn

这时候yarn会给我们去远程拉去egg.js框架和生成项目。其中有几项需要我们配置：项目名称、描述和作者。如果不愿意配置，也可以直接略过。

创建完成后，我们需要安装相关的项目依赖。

yarn install
yarn run dev|| yarn  dev

2.2 使用npm进行安装

快速初始化

我们推荐直接使用脚手架，只需几条简单指令，即可快速生成项目（npm >=6.1.0）:

$ mkdir egg-example && cd egg-example
$ npm init egg --type=simple$ npm i

启动项目:

$ npm run dev
$ open http://localhost:7001

2.3Egg的目录

- app                        - 项目开发的主目录，工作中的代码几乎都写在这里面
-- controller                -- 控制器目录，所有的控制器都写在这个里面
-- router.js                 -- 项目的路由文件
- config                     - 项目配置目录，比如插件相关的配置
-- config.default.js         -- 系统默认配置文件
-- plugin.js                 -- 插件配置文件
- logs                       -- 项目启动后的日志文件夹
- node_modules               - 项目的运行/开发依赖包，都会放到这个文件夹下面
- test                       - 项目测试/单元测试时使用的目录
- run                        - 项目启动后生成的临时文件，用于保证项目正确运行
- typings                    - TypeScript配置目录，说明项目可以使用TS开发
- .eslintignore              - ESLint配置文件
- .eslintrc                  - ESLint配置文件，语法规则的详细配置文件
- .gitignore                 - git相关配置文件，比如那些文件归于Git管理，那些不需要
- jsconfig.js                - js配置文件，可以对所在目录下的所有JS代码个性化支持
- package.json               - 项目管理文件，包含包管理文件和命令管理文件
- README.MD                  - 项目描述文件

3. 尝试建立一个新的页面

对目录和操作命令了解后，我们再试着去创建一个新的页面。打开/app/controller/home.js，可以看到如下的代码。

'use strict';

const Controller = require('egg').Controller;

class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    ctx.body = 'Hello World';
  }
}

module.exports = HomeController;

这里需要注意的是Egg.js全部使用异步模式async。我们在第9行的位置回车，编写下面的代码。

'use strict';

const { Controller } = require('egg');

class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    ctx.body = 'Hello World';
  }

  async MyStudy() {
    const { ctx } = this;
    ctx.body = '<h1>我的学习</h1>';
  }
}

module.exports = HomeController;

写完这个，你可以尝试这去浏览器输入[http://127.0.0.1:7001/studyText](http://127.0.0.1:7001/studyText), 但非常抱歉，这时并不能给你返回正确的结果。因为写完页面以后，还需要去配置路由router.js。

打开/app/router.js文件，然后再第9行的位置，加入下面的代码。

 router.get('/MyStudy', controller.home.MyStudy);

这样就设置完了路由，也就可以使用了。

'use strict';

//项目的路由文件
/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
  router.get('/MyStudy', controller.home.MyStudy);
};

其实我们并没有作过多的配置，开发时只要安装Egg.js的约定去写，这些配置它已经为我们处理好了。这也就是框架的设计理念

4.Controller控制器的使用

4.1 Controller是什么

在RESTful接口中，Controller接受用户的参数，从数据库中查找内容返回给用户或者将用户的请求更新到数据库中。
在HTML页面请求中，Controller根据用户访问不同的URL，渲染不同的模板得到HTML返回给用户。
在代理服务器中，Controller将用户的请求转发到其它服务器上，并将其它服务器的处理结果返回给用户。

官方给的建议是Controller层主要对用户的请求参数进行处理（校验、转换），然后调用对应的service方法处理业务，得到业务结果封装并返回。

这节课我们主要学习三种用途的第二中，在HTML页面请求中的使用。这也是简单、最好理解的一个使用方法。

4.2 创建一个新的Controller

在/app/controller目录下，新建一个文件studyText .js，然后编写下面的代码。

//开启严格模式
'use strict';

//得到Controller

const Controller=require('egg').Controller;

//写一个类用于
class studyTextController extends Controller {
    async index(){
        const {ctx}=this
        ctx.body="<h1>I am Wtd</h1>"
    }
}

//把类暴露出去
module.exports=studyTextController

手写这个的目的就是为了让你熟悉Controller的最简单写法，写完这个Controller后，你在浏览器中是没办法访问到的，这时候你还需要去配置路由。

4.3 路由的配置

打开/app目录下的router.js文件。这时候你不用引入，你只用增加如下代码就可以进行访问了。

//注册路由
  router.get('/my', controller.studyText.index);

5.Egg.js单元测试介绍

工作中写完一个Controller之后，都需要进行单元测试。因为单元测试能够快速发现开发业务逻辑中一些隐藏的问题，越早发现问题，越好解决。这节就介绍一下Egg中的单元测试。

单元测试分为同步单元测试和异步单元测试两种，先来看同步单元测试。

5.1 同步单元测试

Egg框架规定，所有的测试代码，都需要放在/test目录下面。如果是Controller相关的代码就需要放在/test/app/controller文件夹下面。所有的测试文件都需要以.test.js为后缀的。

这里要创建一个studyText.test.js文件，然后编写下面的测试文件。

'use strict';

const { app } = require('egg-mock/bootstrap');

describe('studyText index', () => {
  it('studyText index page', () => {
    return app.httpRequest()
      .get('/my')
      .expect(200)
      .expect('<h1>I am Wtd</h1>');
  });
});

这里的describe( )方法有两个参数，第一个是测试的描述（字符串类型），这个描述一般都是用文件的路径。第二个参数是一个回调函数，里边是对这个控制器里边的具体方法的测试用例。

写完上面的代码之后，在Powershell或终端输入yarn test或npm test就可以运行测试用例了，都是绿色的对号就是通过了单元测试，没通过就是红色的X。（视频中会演示错误的）

5.2异步单元测试

编写异步方法：

写异步单元测试，需要有一个异步的Controller方法。所以回到回到/app/controller/studyText.js文件，编写一个新的方法getGirls的异步方法。

async getGirls(){
    const { ctx } = this;

    await new Promise(resolve => {
        setTimeout(()=>{
          resolve(ctx.body="<h1>杨幂，正在向你走来</h1>")
        },5000)
    })

  }

我们通过setTime( )方法来模拟数据需要5秒钟后，才会返回页面结果。

写完这个方法，再到/router.js里编写对应的路由。

router.get('/getGirls', controller.studyText.getGirls);

之后就可以在浏览器中通过http://127.0.0.1:7001/getGirls访问这个页面了，可以看到页面5秒后才会出现结果,杨幂，正在向你走来。

单元测试方法：

当异步方法写完后，我们再返回到test/app/controller/studyText.test.js文件。继续编写异步的单元测试。

it('studyText getGirls', async () => {
    await app.httpRequest()
      .get('/getGirls')
      .expect(200)
      .expect('<h1>杨幂，正在向你走来</h1>');
  });

注意的是在代码的第一行，我们加入了一个async关键字，这就是异步代码测试的关键。

写完这个测试代码，再次回到PowerShell或终端，输入dev test进行测试，可以看到这次的测试用时变成了5000多毫秒。

总结：本节课我们主要讲了Egg.js中的单元测试，讲了一般情况下的同步测试，也讲了异步测试。为了讲异步单元测试，使用setTimeout( )方法，来模拟异步获取数据的情况。

6.Get请求和参数传递

6.1 get请求的特点

通过URL来访问一个地址，比如http://127.0.0.1:7001，这种请求方式就是Get请求。Get请求也是我们最常用的请求方式。包括现在的扫码请求，其实也是变相的Get请求。

优点：使用简单，清晰有条例。适合网站和对外App的使用。
缺点：传递参数是有大小限制，安全性较差，不能完成重要数据的传递。

6.2 自由传参模式

Get请求我个人把它分为两种传参模式，一种是自由传参模式。这种传参模式和最早的传参模式相同。传递的参数个数和名称没有具体明确定义，设置不限制你是否传递参数。使用起来非常的灵活，所以就叫做自由传参模式。

下面写一个符合资源传参的Controller方法。上节课我们写了一个getGirls的方法，因为不能传参，所以为我们服务的女孩是固定的，这并不是我们想要的结果。这节课能传参了，这个女孩就可以根据我们自己的参数，进行显示了。

打开/app/controller/studyText.js文件，重新编写一个getGirl( )的方法。

async getGirl(){
    const {ctx} = this;
    ctx.body = ctx.query

  }

这里的ctx.query就是获得传递的参数。写完后还需要到router.js文件下，增加路由后才可以访问。

打开/app/router.js文件。

router.get('/getGirl', controller.studyText.getGirl);

你通过浏览器访问，URL为[http://127.0.0.1:7001/getGirl?name=小红](http://127.0.0.1:7001/getGirl?name=%E5%B0%8F%E7%BA%A2)，这时候页面就会显示传你传递的参数。

那如何体现自由那，首先你可以不传递参数，只是页面什么都不显示了，只显示一个{ }。还可以传递多个参数，比如传递名字为小红，年龄为20岁，页面就会完全的显示出来。

http://127.0.0.1:7001/getGirl?name=小红&age=20

6.3 严格传参模式

和自由传参模式对应的就是严格传参模式，也就是你传递的参数个数是固定的，你传递参数顺序是固定的，你传递的参数名称是固定的。

Get的严格传参模式需要配合router.js文件进行设置。例如设置一个getGirl2的路径，然后必须传递一个name的参数，就可以这样设置。

router.get('/getGirl2/:name', controller.studyText.getGirl2);

设置好路由后，再到/app/controller/studyText.js。编写一个getGirl2的方法就可以。（此方法视频中会详细讲解）

async getGirl2(){
    const {ctx} = this;
    ctx.body=ctx.params.name
  }

ctx.params是获取所有的传递参数，ctx.params.name是获取传递参数的name值。

这时候的访问URL不在是用?来开始传递参数了，而是直接用/ 左斜杠来传递。

http://127.0.0.1:7001/getGirl2/小红

这时候如果你的url中不传参或者多传参数，都会报错。我们可以试着先不传参数。

http://127.0.0.1:7001/getGirl2

严格传参中的多参数传递

会了严格传参之后，再来看一下在严格模式下如何传递多个参数，比如我们再传递一个年龄=20岁.

路由配置页面就可以这样设置。

router.get('/getGirl2/:name/:age', controller.studyText.getGirl2);

然后再修改对应的getGirl2( )方法，接受到姓名和年龄后，显示出来。这里就是完全动态的显示了。

async getGirl2(){
    const {ctx} = this;
    let name = ctx.params.name
    let age = ctx.params.age
    ctx.body='大哥你好，我是'+name+',今年'+age+'岁.欢迎光临红浪漫!'
  }

这样的应用是不是越来越好了那？现在程序就支持传递多个参数了。

总结：这篇文章，我们主要学习了Egg.js中的Get请求和传参方式，Get传参分为自由传参模式和严格传参模式。个人建议如果想让程序健壮性更强，可以多使用严格传参模式。

7.POST请求和参数的接收

7.1 编写post请求的Controller

直接在/app/controller/studyText.js文件里，重新编写一个add( )方法。先写个最简单的，只要能用POST方法访问到就可以了。

async add(){
    const {ctx} = this
    ctx.body="add"
  }

然后配置路由/app/router.js文件。

router.post('/add', controller.studyText.add);

这时候就可以进行POST请求了，但是POST请求不是通过浏览器访问页面就可以访问到的，所以我们还需要用到VSCode插件。

7.2插件REST Client插件的使用

你可以使用Postman这样的工具，但Postman需要重新打开一个软件，显得太重了，一点也不优雅。所以我这里推荐使用VSCode中的一个插件REST Client。

安装方法和发送请求

直接打开VSCode中的插件管理，在搜索框查找REST Client，然后进行安装。安装完成后直接可以使用。

在项目根目录下，新建一个test.http(这个名字可以随意起，但是文件后缀名字不能变) , 此处注意后缀是http才可以和插件进行联动。

POST http:*//127.0.0.1:7001/add* 
Content-Type: application/x-www-form-urlencoded
name=study

你也可以使用JSON的格式进行上传。

POST http://127.0.0.1:7001/add  
Content-Type: application/json

{
    "name":"小红"
}
需要注意的是，这个插件你需要完全按照这个格式来写