专注前端开发,每年100集免费视频。
首页/视频教程/ Egg.js快速入门 200分钟掌握企业级框架开发和应用/
Egg.js快速入门 200分钟掌握企业级框架开发和应用
2021-10-05 视频教程 885222

随着IT行业的发展,对前端程序员的要求越来越高,甚至要求前端会全栈开发。也就是既要会前端开发,又要会后端开发。对于一个前端开发者,最快速成为全栈开发者的途径,你的最优选择是学习Egg.js框架了。

Egg.js的语法仍然是JavaScript。也就是说,你不用再学习Golang或者Java这样的基础语言了。而是只要学习Egg.js的框架API,就可以快速开发全栈。

Egg.js是阿里旗下为数不多的 ,让人放心使用的开源项目。Egg.js为企业级框架和应用而生的Node.js框架,Egg(简写)奉行【约定优于配置】的框架,按照一套同意的约定进行应用开发。适合团队开发,学习成本小,减少维护成本。

01.Egg.js介绍和HelloWorld程序

学习前言和Egg.js介绍

随着IT行业的发展,对前端程序员的要求越来越高,甚至要求前端会全栈开发。也就是既要会前端开发,又要会后端开发。对于一个前端开发者,最快速成为全栈开发者的途径,你的最优选择是学习Egg.js框架了。

Egg.js的语法仍然是JavaScript。也就是说,你不用再学习Golang或者Java这样的基础语言了。而是只要学习Egg.js的框架API,就可以快速开发全栈。

Egg.js是阿里旗下为数不多的 ,让人放心使用的开源项目。Egg.js为企业级框架和应用而生的Node.js框架,Egg(简写)奉行【约定优于配置】的框架,按照一套同意的约定进行应用开发。适合团队开发,学习成本小,减少维护成本。

Egg.js的特点j介绍

  • 提供基于Egg定制上层框架的能力
  • 高度可扩展的插件机制
  • 内置多进程管理(Node是单进程,无法使用多核CPU的能力)
  • 基于Koa开发,性能优异
  • 框架稳定,测试覆盖率高
  • 渐进式开发,逐步模块化模式

本套视频努力在200分钟内,让你快速上手Egg.js的使用。视频分为视频教程和图文教程。

视频教程地址:https://www.bilibili.com/video/BV1s3411C71V/

图文教程地址:http://jspang.com/detailed?id=79

在熟悉Egg.js的基本使用后,还会出一套用Egg.js制作博客后台实战的教学视频。由于本人平时上班,所以更新频率不确定,但每周至少会更新三集。

本套视频进行全方位指导学习【教程+辅导完全免费】

  • 看视频+图文教程学习
  • 每周三次直播进行辅导(直播时间会在群里通知)
  • 群里解答小伙伴学习Egg.js时遇到的问题

如果你想跟技术胖一起学习,就加入微信群吧,加入方法是,先加我微信好友 微信号为: php100,加上好友后发信息说,我要加入Egg.js群,我会邀请你进群。(此处进行配图)

追教程请点击关注或收藏文字版网址。

Egg.js环境搭建和HelloWorld编写

直接开始操作,来安装Egg.js的开发环境和编写第一个HelloWorld

以管理方式打开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 dev开启项目,开启后会告诉我们 访问地址为 http://127.0.0.1:7001

打开浏览器,输入地址,就会在页面中显示出hi.egg

直接用code .命令,直接打开VSCode编辑器。找到app/controller/home.js文件,然后把文件的第8行,改为Hello World,并保存。刷新页面中的hi , egg. 就变成了 Hello World

'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与Koa/Express 对比

当我们安装好了Egg.js,并简单体验之后。我需要简单的对Egg.js、Koa和Express进行对比。当你知道一个矿建的优点后,你才更有信心进行学习。

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

https://newimg.jspang.com/Egg_01_01.jpg

如果你有信心和技术胖学会Egg.js的开发技能,请把"加油"两个字打在公屏上。我们一起努力,共同学习。

本视频每周更新三集,请点赞收藏。

02.Egg.js项目结构介绍

这节学习的主要目的是了解Egg.js生成项目的目录结构,只有对项目结构有所了解,才能进行进一步的学习和开发。

Egg的目录

版本不同和使用的类型不同,你的目录可能跟我的目录有所不同。学习时也没必要完全纠结。只要大概知道生成文件夹和文件的作用就可以了。

- 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                  - 项目描述文件  

dev和start的区别

打开package.json文件的scripts属性中,有下面这样一段代码。

"scripts": {
    "start": "egg-scripts start --daemon --title=egg-server-egg",
    "stop": "egg-scripts stop --title=egg-server-egg",
    "dev": "egg-bin dev",
    "debug": "egg-bin debug",
    "test": "npm run lint -- --fix && npm run test-local",
    "test-local": "egg-bin test",
    "cov": "egg-bin cov",
    "lint": "eslint .",
    "ci": "npm run lint && npm run cov",
    "autod": "autod"
  },

其中有 start 和dev,这两个是有区别的,我在上节也简单的一嘴概括了。这里给大家详细的解释一下。

  • dev : 开发环境中使用,不用重启服务器,只要刷新。修改内容就会更改。
  • start:生产环境中使用,也就是开发完成,正式运营之后。以服务的方式运行。修改后要停止和重启后才会发生改变。

尝试创建一个新的页面

对目录和操作命令了解后,我们再试着去创建一个新的 页面。打开/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').Controller;

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

  async jspang(){
    const {ctx} = this;
    ctx.body="<h1>Hello JSPang</h1>";
  }

}

module.exports = HomeController;

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

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

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

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

'use strict';

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

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

好了,这节课我们算是一个简单的入门,你只要会编写一个新的页面就可以了。

03.Controller控制器的使用

跟着技术胖学习的一个优点就是全程无痛,我会努力把知识讲的通俗易懂。你只要跟着做,就会一步步的学会Egg.js。这节课就学习一下Egg.js里最重要的部分Controller。虽然重要,但是并不难,所以不要有任何的学习压力。

特别说明一下

我相信一定会有小伙伴认为,看视频还不如看官方文档,或者直接说我是按照官方文档讲的。说实话我确实要按照官方文档来讲,因为官方文档是最权威的教程。所以我首先会按照官方文档来保证知识的正确性,然后我会对知识的顺序和内容进行二次加工。目的是保证看不下去官方文档的人,能够通过这个视频简单高效的学会Egg.js。还会在视频中演示很多自己学习中踩的坑,目的是减少阻断你学习关卡,增加学习成功率。

我并不是专职的讲师,我只是利用下班后的时间分享知识和共同学习。因为不是专职讲师,所以视频中难免有讲错的地方,我非常欢迎各位小伙伴给我指出我的错误。

Controller是什么?

动手操作之前,我们需要先学点理论知识。Controller,也就是控制器,简单说Controller负责解析用户的输入,处理后返回相应的结果。但是由于开发形式的不同,Controller的具体作用还是有一些区别的。

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

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

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

创建一个新的Controller

理论问题解决以后,再自己手写一个Controller,我会在视频中介绍手写时每一个要注意的知识点。这样才能完全了解Controller的写法。

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

'use strict';

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

class JspangController extends Controller{
    async index(){
        const { ctx } = this;
        ctx.body = '<h1>I am  JSPang</h1>';
    }

}

module.exports =JspangController;

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

路由的配置

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

router.get('/my',controller.jspang.index);

这节课就是的主要目的,就是了解如何编写一个新的Controller,使用Egg.js基本有一半时间都在处理Controller,所以我们拿出几分钟来详细了解一下是非常划算的事情。

如果你也是一个新手,建议你还是手写Controller文件,只有动手编写,我们才能领悟更深。我在教程中反复强调要动手编写代码。我没有别的目的,只是单纯的希望你学会知识。

04.Egg.js单元测试介绍

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

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

同步单元测试

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

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

'use strict';

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

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

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

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

编写异步方法

写异步单元测试,需要有一个异步的Controller方法。所以回到回到/app/controller/jspang.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.jspang.getGirls);

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

异步单元测试

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

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

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

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

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

05.Get请求和参数传递

通过四节课的学习,你应该对Egg.js有了基本了解。这节课开始我们学习一下各种请求的接受和参数传递方法。先来学习最常用的get请求和参数传递。

Get请求的特点

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

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

既有优点,又有缺点,所以就要根据具体的使用情况,而选择使用哪种请求方式。

自由传参模式

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

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

打开/app/controller/jspang.js文件,重新编写一个getGirl( )的方法。(视频中会对这个方法作详细的介绍)

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

  }

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

打开/app/router.js文件。

router.get('/getGirl', controller.jspang.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

这时候是不是学程序还是挺有意思的,真的可以随便创造出一个女朋友出来。

严格传参模式

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

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

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

设置好路由后,再到/app/controller/jspang.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.jspang.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传参分为自由传参模式和严格传参模式。个人建议如果想让程序健壮性更强,可以多使用严格传参模式。

06.POST请求和参数的接收

这节学习一下Egg.js中的POST请求,POST是在开发中经常使用的请求方式,比如表单数据的传递和图片的上传,都需要用到POST请求。这些是GET请求无法完成的。

编写POST请求的Controller方法

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

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

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

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

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

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=jspang

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

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

{
    "name":"小红"
}

需要注意的是,这个插件你需要完全按照这个格式来写,不能随意多出空行,否则就会发送失败。得不到数据。

安全设置解除

当你第一次请求时,可能会返回403错误,这是因为Egg.js默认开启了CSRF安全策略,学习阶段,我们可以关闭掉这个选项。

CSRF的全名为 Cross-site request forgery, 它的中文名为 伪造跨站请求。

关闭方法是,打开/config/config/default.js文件,也就是项目的默认配置文件。

然后设置配置项,关闭掉CSRF

config.security = {
    csrf :{
      enable:false,
    }
  }

写完这段配置代码后,CSRF安全策略就被关闭了。我们就可以发送请求了。

接收POST参数

能发送POST请求后,需要在服务端接收请求。Egg.js已经给我们封装好了,直接使用ctx,request.body来获取。代码如下。

async add(){
    const ctx = this.ctx
    ctx.body={
      status: 200,
      data:ctx.request.body
    }
  }

写完代码后,再用REST Client来发送请求就可以得到返回的参数了。

总结:这节我们主要学些Egg.js中的POST请求和参数接收方法,还学习了用于发送请求的VSCode插件REST Client,并使用两种方式向后端传递数据。

07.Service服务的编写

这节课学习一下Egg中的Service。Service用来编写和数据库直接交互的业务逻辑代码。

官方对Service服务的说明

Service就是在复杂业务场景下用于做业务逻辑封装的一个抽象层。

简单来说,就是把业务逻辑代码进一步细化和分类,所以和数据库交互的代码都放到Service中。这样作有三个明显的好处。

  • 保持Controller中的逻辑更加简介。
  • 保持业务逻辑的独立性,抽象出来的Service可以被多个Controller调用。
  • 将逻辑和展现分离,更容易编写测试用例。

个人建议只要是和数据库的交互操作,都写在Service里,用了Egg框架,就要遵守它的约定。

创建编写第一个Service文件

Egg规定Service文件必须放在/app/service目录,所以我们在/app文件夹下面,新建一个service文件夹。然后在新建一个jspang.js文件。编写下面的代码(视频中会详细讲解代码)

'use strict';

const Service = require("egg").Service;

class JspangService extends Service{
    async getGirl(id){
        //因为没有真实连接数据库,所以模拟数据
        return {
            id:id,
            name:'小红',
            age:18
        }

    }
}

module.exports =JspangService;

从代码中可以看出,命名规则和写法跟Controller是非常类似的。如果你能对比记忆,学习会简单很多。同样Service里的方法也全部是异步方法,所以要使用async关键字。

Controller调用Service获取数据

写完Service方法后,就可以在Controller中使用Service获取它提供的数据了。现在我们回到/app/controller/jspang.js文件中的getGirl( )方法。

编写代码前,我们并不需要把service进行引入,因为Egg已经为我们作好了这一切。直接使用ctxs上下文就可以进行使用了。

下面为Controller中的getGirl( )方法改写。

async getGirl(){
    const {ctx} = this;
    const res = await ctx.service.jspang.getGirl('1818');
    ctx.body = res

  }

写完后,用yarn dev命令,启动服务。然后打开浏览器,输入[http://127.0.0.1:7001/getGirl?id=1818](http://127.0.0.1:7001/getGirl?id=1818) 就可以看到页面会呈现出service给我们返回的数据。

Service方法的可调用性

当你写完一个service方法后,你可以在其它的Controller里进行使用。比如我们现在去home.js中进行使用。打开/app/controller/home.js文件下,新建一个testGetGirl( )方法。

async testGetGirl(){
    const ctx = this.ctx;
    let id = ctx.query.id
    const res = await ctx.service.jspang.getGirl(id)
    ctx.body=res;
  }

写完上面的代码,到/app/router.js文件里,增加一个新的路由。

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

写完后保存文件,然后在浏览器中输入URL[http://127.0.0.1:7001/testGetGirl?id=2000](http://127.0.0.1:7001/testGetGirl?id=2000)。可以看到,页面如愿以偿的获得了这些数据。

总结:这节课学习了Egg.js的Service的使用,Service应该放在/app/servcie文件夹下面,起名的时候最好和Controller对应起来。写法和Controller类似,并且在任何Controller下都可以得到Service提供的数据。

08.View中使用EJS模板引擎-1

Egg.js专注后端开发,但是也提供了View层的渲染,个人觉的这是有必要的,因为就算是这个时代,也并不是所有的开发都是前后端分离的。还是有很多应用需要服务端渲染的,比如博客就需要服务端渲染。

这节课就学习一下Egg.js中的View层,并使用Ejs模板引擎来操作,当然Egg还支持其他模板引擎。

服务端渲染页面的好处

先来说说理论,大家如果烦可以跳过去。

还是先来说一下服务端渲染页面的三个优点。我怕有很多小伙伴认为服务端渲染页面是一个落后的技术,现在都讲究前后端分离和SPA应用。当然无论是Vue还是React都有很好的服务端渲染插件。所以理论上你不用学习Egg的引擎,而还是使用前后端分离模式就可以进行开发。

  • 对SEO非常友好,单页应用,比如Vue是到客户端才生成的。这种应用对于国内的搜索引擎是没办法爬取的,这样SEO就不会有好的结果。所以如果是官网、新闻网站、博客这些展示类、宣传类的网址,必须要使用服务端渲染技术。
  • 后端渲染是老牌开发模式,渲染性能也是得到一致认可的。在PHP时代,这种后端渲染的技术达到了顶峰。
  • 对前后端分离开发模式的补充,并不是所有的功能都可以实现前后端分离的。特别现在流行的中台系统,有很多一次登录,处处可用的原则。这时候就需要服务端渲染来帮忙。

EJS模板引擎的介绍

EJS属于老牌的模板引擎,记得我在使用ThinkPHP的使用,用的就是EJS模板引擎。EJS模板引擎一直在维护,所以稳定性和生态上都比较好。所以最终选择用EJS给小伙伴讲解Egg中的View层。

如果你对EJS还不熟悉,可以先浏览一下EJS的官方网站和文档。

EJS官方网站(英文): https://ejs.co/ 中文网站:https://ejs.bootcss.com/

EJS在Egg中的安装和配置

Egg.js提供了EJS的插件egg-view-ejs,直接哦那个yarn或者npm安装。

npm 的安装方法

$ npm i egg-view-ejs --save

yarn 的安装方法

yarn add egg-view-ejs

安装完成后,并不能直接使用,需要再进行一些简单的配置。

配置/config/plugin.js文件

exports.ejs = {
  enable :true,
  package:"egg-view-ejs"
}

plugin.js文件配置完成后,再到/config /config.default.js文件里进行配置。

config.view = {
    mapping : {
      ".html":"ejs"
    }
  };

  config.ejs={

  }

这两部配置完成后,就可以在Controller里使用EJS模板引擎了。

使用EJS模板引擎

当配置项都完成后,就可以使用模板EJS模板引擎了。打开/config/controller/jspang.js文件。修改index( ),因为render( )方法返回的是Promise的对象,所以要使用关键字await.

async index() {
  const { ctx } = this;
  await ctx.render('jspang.html')
}

这时候我们还没有jspang.html这个页面,所以需要马上建立一个。Egg.js规定view的引擎模板,必须写在/app/view/文件夹下面(如果没有view文件夹,可以自己建立)。在文件夹下面新建一个 文件jspang.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>I am  JSPang!</h1>
</body>
</html>

PowerShell里输入yarn dev开启服务,在浏览器中输入[http://127.0.0.1:7001/my](http://127.0.0.1:7001/my),可以看到输出了我们想要的结果。

好了,这节课就先学到这里,下节课继续学习EJS模板相关语法的使用。

09.View中使用EJS模板引擎-2

上节课在Egg中已经配置好了EJS模板,这节课学习一下EJS模板引擎的基本使用语法。如果你有PHP开发经验,这些语法就非常简单了,因为跟PHP的模板语法基本一样。

EJS模板中显示controller返回的数据

在Controller中我们有一些动态的数据,需要在EJS模板中进行显示。这时候可以使用render( )第二个参数,第二个参数可以传递JavaScript中的对象,也就是说你可以任意的传递各种形式的参数过去。

我们先到/app/controller/jspang.js文件下面。在index( )方法里,使用第二个render( )的参数,来传递参数。

async index() {
  const { ctx } = this;
  await ctx.render(
    'jspang.html',{
      id:2021,
      name:'小红',
      age: 18,
      skill:'泰式按摩'
    })
}

有了这些数据后,就可以在/controller/view/jspang.html文件下使用这些参数了。默认使用的方法是<%= 参数 %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>欢迎来到红浪漫~~</h1>
    <h2>现在由<%= id %>号技师,为你服务!</h2>
    <h3>你好,我是<%= name %><%= age %>岁,专业技能是<%= skill %></h3>
</body>
</html>

通过这种方式,在EJS模板中就可以使用controller传递过来的变量了。

EJS模板中的循环显示

技师小姐姐不可能只会一项技能,比如我们小红,可能就会三项技能泰式按摩、精油搓背、水疗SPA,那这时候我希望他是循环展示出来的。也就是说cotroller传递过来的数据是一个数组,如何利用列表来展示。

先来修改\app\controller\jspang.js文件中的index( )方法。

async index() {
  const { ctx } = this;
  await ctx.render(
    'jspang.html',{
      id:2021,
      name:'小红',
      age: 18,
      skills:[
        '泰式按摩',
        '精油搓背',
        '水疗SPA'
      ]
    })
}

这时候已经传递了一个数组到模板中,重点是如何再模板中用列表的形式进行展示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>欢迎来到红浪漫~~</h1>
    <h2>现在由<%= id %>号技师,为你服务!</h2>
    <h3>你好,我是<%= name %><%= age %></h3>
    <br/>
     我的技能如下:
     <ul>
         <% for(var i=0;i<skills.length;i++){ %>
         <li><%= skills[i] %></li>
         <%}%>
     </ul>
</body>
</html>

这里使用了for循环进行展示,这种写法跟php的写法也非常类似。

修改默认分隔符符号

其实很多前端小伙伴是不喜欢用这种<%%>的形式展示数据的,这很不前端。EJS也为我们提供了配置型方法,你可以根据你的喜好配置这个配置符。

打开/config/config.default.js文件,然后修改config.ejs选项。

config.ejs={
     delimiter: "$"
  }

然后再回到jspang.html文件,用全部地替换的方法,把%换车$,这样就更换成功了。建议这个还是在项目初级就规范好,不要随意改动。

EJS还提供了单独修改某个修饰符,但这里不建议这样修改,会让项目变的混乱不堪,也就是render的第三个参数。

总结:这节课我们学习了EJS模板引擎的基本使用方法,还学习了配置EJS的配置分隔符的方法。其实EJS是完全可定制的,有很多地方都可以根据需要自行修改。但是个人不建议作太多的个性化配置,这会给团队和项目带来混乱和跟多的学习成本。

10.View中使用EJS模板引擎-3

这节我们主要学习一下,如何在ESJ模板引擎中配置和使用静态资源文件。作为前端转全栈,肯定少不了CSS图片JS文件的引入,而这些全部属于静态资源。所以说静态资源也是项目开发中的一部分,也需要关注和学习的。

公共代码片段的使用

比如网站项目中的头部和底部往往都是一样的,这时候我们把公共的部分抽离出来,单独到一个文件夹中,然后在需要的页面直接引入。

/app/view/目录建立一个header.html文件。在文件里我们只需要写一些代码片段就可以了,没必须写出全部的html架构。

/app/view/header.html文件

<h1>欢迎来到红浪漫!</h1>

然后回到/app/view/jspang.html文件,直接使用<% include header.html %>引入到模板里就可以了。

<body>
    <% include header.html %>
    <h2>现在由<%= id %>号技师,为你服务!</h2>
    <h3>你好,我是<%= name %><%= age %></h3>
    <br/>
     我的技能如下:
     <ul>
         <% for(var i=0;i<skills.length;i++){ %>
         <li><%= skills[i] %></li>
         <%}%>
     </ul>
</body>

在终端中用yarn dev启动服务,然后在浏览器中输入http://127.0.0.1/my。 可以看到公用部分的文件已经引入进来了。

配置静态资源

Egg中默认的静态资源文件在/app/public目录下,比如我们在public文件夹下新建一个css文件夹,然后新建default.css文件。

body{
   color:red; 
}

然后直接在浏览器中试着查看这个CSS文件。浏览器中输入地址http://127.0.0.1:7001/public/css/default.css 。正常情况css代码内容已经显示在浏览器里了。

疑问:静态资源我们并没有配置路由,为什么就可以方法到那?

不用配置,静态资源就可以方法到,是因为Egg使用了egg-static插件,这个插件是koa-static的升级版。我们可以打开node_modules 文件夹,直接搜索egg-static文件夹,就可以看到。

知道了这个道理,我们也可以猜测到,这个public前缀一定是可以修改的,比如修改为assets.

打开/config/config.default.js文件,然后写入如下配置。

onfig.static = {
    prefix:"/assets/"
  }

这时候再访问原来的URL就会报404错误,你这时候修改一下路径,把public改成assets就又可以访问到了。

甚至你可以配置静态文件放置的文件夹,但我个人不建议你修改,包括public的前缀也不建议你修改。

使用静态资源文件

会配置静态资源了,我们就可以在EJS模板里使用这些资源了,比如现在引入刚才写的default.css文件。(先把刚才修改的配置删除掉,回归默认配置。)

然后到/app/view/jspang.html中引入这个CSS样式。引入方法和正常的HTML引入方法一样就可以了。

<link rel="stylesheet" type="text/css" href="public/css/default.css"  />

到浏览器进行查看,发现字体已经全部变成了红色。

总结:这节我们主要学习了在EJS模板中如何配置和使用静态资源。希望小i伙伴们能多练习一下。

11.Cookie的增删改查

EJS模板就先学这么多,这节学习一下Cookie的相关知识。Cookie的作用就是在浏览器客户端留下一些数据,比如我们经常使用的登录一个网站,下次再来的时候就不用再次登录了。但是Cookie是可以设置时间限制的,所以经常看到7天内不用重复登录,这样的信息。

对Cookie的简单了解

HTTP请求是无状态的,但是在开发时,有些情况是需要知道请求的人是谁的。为了解决这个问题,HTTP协议设计了一个特殊的请求头:Cookie。服务端可以通过响应头(set-cookie)将少量数据响应给客户端,浏览器会遵循协议将数据保留,并在下一次请求同一个服务的时候带上。

简单来说,就相当于你去上班,给你发了一个工牌,这样你就可以进出办公大楼了。你也可以想象成,你去红浪漫,办了一张VIP卡。每次去拿出卡,可以打9折一样。

编写前基本准备

你初步了解Cookie后,我们来进行实际操作。

我们先来了解在Egg下,如何实现Cookie的增删改查,这也是最基本的操作。(提示,在实际开发中Cookie的操作应该放在服务端,而不是用客户端的JS操作。)

在讲解之前,我们还是要作一些提前的代码编写,比如设置好对应的按钮、Controller方法和路由。

我们先来到上节课的/app/view/jspang.html模板中,编写四个按钮,分别是增加Cookie删除Cookie修改Cookie查看Cookie

<div>
    <button onclick="add()">增加Cookie</button>
    <button onclick="del()">删除Cookie</button>
    <button onclick="editor()">修改Cookie</button>
    <button onclick="show()">查看Cookie</button>
</div>

写完按钮后,增加对应的方法JavaScript。

可以先写一个方法(function),然后其它的复制后进行修改。就可以快速写出这些代码了。

<script>
    function add(){
        fetch("/add",{
            method:"post",
            headers:{
                "Content-type":"application/json"
            }
        });
    }
    function del(){
        fetch("/del",{
            method:"post",
            headers:{
                "Content-type":"application/json"
            }
        });
    }
    function editor(){
        fetch("/editor",{
            method:"post",
            headers:{
                "Content-type":"application/json"
            }
        });
    }
    function show(){
        fetch("/show",{
            method:"post",
            headers:{
                "Content-type":"application/json"
            }
        });
    }
</script>

再去/app/controller/jspang.js文件下,增加这四个对应的方法。

async add(){
  const ctx = this.ctx
}
async del(){
  const ctx = this.ctx
}
async editor(){
  const ctx = this.ctx
}
async show(){
  const ctx = this.ctx
}

最后再到/app/router.js中配置对应的路由

router.post('/add', controller.jspang.add);
router.post('/del', controller.jspang.del);
router.post('/editor', controller.jspang.editor);
router.post('/show', controller.jspang.show);

作完上面这四步,我们的基本结构就有了,剩下就可以好好的学习Cookie的基本操作了。

Cookie的增加操作

先到/app/controller/jspang.js文件的add( )方法里编写代码。其实egg已经为我们准备好了操作Cookie的方法。直接使用就可以了。

async add(){
  const ctx = this.ctx
  ctx.cookies.set("user","jspang.com")
  ctx.body = {
    status:200,
    data:'Cookie添加成功'
  }
}

这部分代码写完后,就可以可以在终端中开启服务,输入yarn dev开启。

来到页面点击增加Cookie按钮,然后按F12打开调试模式,找到Application,可以看到Cookie值已经被加入进来了。

Cookie的删除操作

再来看一下Cookie的删除操作,再来到/app/controller/jspang.js文件。修改del( )方法。

async del(){
  const ctx = this.ctx
  ctx.cookies.set("user",null)
  ctx.body = {
    status:200,
    data:'Cookie删除成功'
  }
}

写好后,直接到浏览器中点击删除,就可以删除Cookie了。

Cookie的修改操作

修改操作和删除和增加一样。直接修改值就可以了。

async editor(){
  const ctx = this.ctx
  ctx.cookies.set("user",'bilibili')
  ctx.body = {
    status:200,
    data:'Cookie修改成功'
  }
}

Cookie的显示

显示Cookie要使用ctx.cookies.get( )方法。

async show(){
  const ctx = this.ctx
  const user=ctx.cookies.get("user")
  console.log(user)
  ctx.body = {
    status:200,
    data:'Cookie显示成功'
  }
}

点击按钮后,可以在VSCode的终端中显示出结果。你可以试着让它显示在页面上。

好了,这节课我们就先学这么多。记住一定要跟着作一下。要不你下节课也没办法练习了。程序的学习听懂不代表学会,你只有跟着作出来,才会有所收获。

12.Cookie的配置和加密

上节学习了Egg.js对Cookie的增删改查操作,这节学习一下Cookie的一些配置选项,比如有效时间、服务端操作设置和中文编写加密这些操作。

Cookie时效设置

ctx.cookies.set( ) 方法是有三个参数的,第一个参数是key,第二个参数是value,第三个参数就可以进行配置。比如你需要配置Cookie的有效时间,可以使用maxAge属性。(这个时间是毫秒。)

比如现在我们到/app/controller/jspang.js文件里,修改add( )方法,把maxAge设置为两秒,在添加Cookie两秒后,这个Cookie就会自己失效。

async add(){
  const ctx = this.ctx
  ctx.cookies.set("user","jspang.com",{
    maxAge:1000*2
  })
  ctx.body = {
    status:200,
    data:'Cookie添加成功'
  }
}

打开浏览器,添加Cookie,等2秒钟之后再刷新页面,Cookie就自动消失了,也就是到达了最大有效时间。

HttpOnly的设置

伪造Cookie来绕过登录是黑客经常使用的一种手段,所以为了安全,Egg.js默认设置只允许服务端来操作Cookie。

比如现在你通过JS的方式document.cookie获取Cookie是不能获取的(需要在浏览器的控制台输入获取)。当我们想通过客户端操作Cookie时,可以通过下面的代码进行设置。

sync add(){
  const ctx = this.ctx
  ctx.cookies.set("user","jspang.com",{
    maxAge:1000*60,
    httpOnly:false
  })
  ctx.body = {
    status:200,
    data:'Cookie添加成功'
  }
}

上面设置了httpOnly:false,再次刷新页面,然后看浏览器控制台的HttpOnly就变成false属性了。

设置中文Cookie的方法

有时候开发需求我们在Cookie里设置中文,如果直接设置&添加,服务端会直接报错的。比如我们在add( )方法里设置中文,然后再操作就会报错500

ctx.cookies.set("user","技术胖")

点击按钮后,会直接报500的错误。那下面就学习一下解决中文Cookie的方法。

设置中文Cookie的时候进行加密

加密只要在第三个参数中,加入encrypt:true,就可以加密成功。

ctx.cookies.set("user","技术胖",{
  encrypt:true
})

加密成功了,再来获取这个值。如果你直接通过ctx.cookies.get( )方法获取,获取的是undefind,也就是无法获取的。这时候需要再次配置解密才可以使用, 在show( )方法里配置代码如下。

const user=ctx.cookies.get("user",{
  encrypt:true
})

这时候到VSCode的终端中就可以获取这个解密后的值了。

当然你也可以使用base64对字符串进行加密解密。这个属于JavaScript的基础知识了,我这里就不做过多讲解了。

总结:本届主要讲了Egg.js中Cookie的有效期设置、服务端操作设置和中文Cookie的编写方法。

13.Session的相关操作

Cookie和Session非常类似,Egg中的Session就存储再Cookie中,但是Session比Cookie的安全性更高。所以在开发中经常使用Cookie来保存是否登录,而用Session来保存登录信息和用户信息。这节课就学习一下Session的使用。

Session的添加

在开发中你可以理解为不重要的,公开的信息都可以临时存在Cookie里,但是隐私重要的信息,可以存在Session里,并且只允许在服务端进行操作。

先来看一下如何添加一个Session。打开/app/controller/jspang.js文件,在add( )方法里编写。

ctx.session.username='jspang'

Session的获取

添加完成后,我们在index( )方法里获取一下session并展示在页面上。

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

  //获取Session
  const username= ctx.session.username

  await ctx.render(
    'jspang.html',{
      id:2021,
      name:'小红',
      age: 18,
            //赋值给模板
      username:username,
      skills:[
        '泰式按摩',
        '精油搓背',
        '水疗SPA'
      ]
    })
}

在Session存在的情况下,我们已获得了Session的值,并且把获得的值发送给了模板。再到模板中修改模板,把值显示出来app/view/jspang.html

<h3><%=username%></h3>

作完后,我们到浏览器中输入http://127.0.0.1:7001/my,然后点击增加Cookie按钮,刷新页面后,可以在页面中看到出现jspang,说明已经添加Session和读取Session成功了。

这时候打开浏览器的控制台的Application标签,可以看到多了一个EGG_SESS的Cookie,这个就是我们刚才存储的Session了。

Session是直接可以支持中文的

比如现在我们要把Session中username的值换成中问的技术胖,代码如下。

ctx.session.username='技术胖最帅'

删除所有Cookie,然后再次点击增加Cookie按钮,然后再次刷新按钮,页面显示出了技术胖最帅字样,说明中文的Session值也是完全可以使用的。

Session的删除

删除Session非常简单,只需要把值设置为null就可以了。在del( )方法中编写下面的代码。

ctx.session.username=null

这样就可以删除session了。这时候到浏览器中,可以先点击增加Cookie按钮,再点击删除Cookie按钮,可以看到Session也被删除掉了,页面中的值就消失掉了。

Session的相关项配置

配置Session的一些选项,需要到config.default.js文件中进行配置。

config.session = {
    key :"PANG_SESS",   // 设置Key的默认值
    httpOnly:true,      // 设置服务端操作
    maxAge:1000*60  ,   // 设置最大有效时间
    renew: true,        // 页面有访问动作自动刷新session 
}

总结:这节课我们主要学习了Egg中Session的增删改查和配置相关的操作。

14. Egg.js中间件的编写

本节主要学习Egg.js中的中间件。Egg是对Koa的二次封装,所以中间件这部分和Koa框架是一样的,也追寻洋葱圈模型。

中间件的编写

Egg.js约定中间件要写在/app/middleware文件夹下面,如果没有middleware可以自己建立。在文件夹下,新建一个counter.js的文件。我们来作一下访问页面的次数这样的计数器。由于我们还没学数据库,所以把这个计数器的值保存在Session当中。

module.exports = options =>{

    return async (ctx,next)=>{
        if(ctx.session.counter){
            ctx.session.counter++
        }else{
            ctx.session.counter=1
        }
        await next();
    }

};

中间件的全局使用

写完这个之后,我们需要手动的挂载中间件。挂载方法是打开/config/config.default.js文件。

config.middleware = ['counter'];

这样配置之后,就是全局的中间件,无论访问那个页面,计数器都会增加。为了看到效果。分别在\app\controller\home.js文件的index( )方法中 和 \app\controller\jspang.jsindex( )方法中,加入控制台输出代码。

console.log(ctx.session.counter)

然后分别访问这两个页面,看到session都会增加。这就说明了中间件现在的作用域是全局的。

router中间件的使用

如果只想让访问/my时,计数器才会增加,这时候就要使用在router(路由)中配置中间件的使用。直接在\app\router.js 中实例化和挂载。

我们先去掉全局的挂载,然后到router.js文件中挂载单个路由。

'use strict';

module.exports = app => {
  const counter = app.middleware.counter()
  const { router, controller } = app;
  router.get('/', controller.home.index);
  router.get('/my',counter ,controller.jspang.index);
};

这时候在访问首页,计数器虽然会显示,但是不会增加。只有在访问/my路径的时候才会继续增加。也就是说中间件才会起作用。

我这里使用的中间件非常简单,在实际开发中中间件还是有很多用处的,比如日志的记录、比如所有页面的Gzip压缩展示、比如全局埋点的使用。以后在实战项目中,我们还会学习更多的中间件使用方法。

15.Egg.js的Extend-application

Egg虽然给我们提供了很多内置的方法,但有时候还是感觉不够用,这时候就需要我们自己对Egg中的方法进行扩展和编写了。

多种对象进行扩展

Egg.js可以对内部的五种对象进行扩展,我也作了一个表格。给出了可扩展的对象、说明、this指向和使用方式。

https://newimg.jspang.com/Egg.js-Extends.png

对application对象的方法扩展

这节重点学习一下对application对象的扩展。需求是作一个全局的获取时间的扩展。比如用app.currentTime( )这个全局的方法,就可以获得当前时间,并显示在页面上。

按照Egg的约定,扩展的文件夹文件的名字必须是固定的。比如我们要对application扩展,要在/app目录下,新建一个/extend文件夹,然后在建立一个application.js文件。

这里给出具体代码,详细编写思路会在视频中讲解。

module.exports = {
    //方法扩展
    currentTime(){
        const current = getTime();
        return current;
    }
};

function getTime(){
    let  now = new Date();
    let year = now.getFullYear(); //得到年份
    let  month = now.getMonth()+1;//得到月份
    let date = now.getDate();//得到日期
    let  hour= now.getHours();//得到小时数
    let minute= now.getMinutes();//得到分钟数
    let second= now.getSeconds();//得到秒数
    let nowTime = year+'年'+month+'月'+date+'日 '+hour+':'+minute+':'+second;
    return nowTime;
}

这样就完成了 一个application对象的方法扩展。扩展写好后,不用再作过多的配置,直接在一个Controller方法里使用就可以了。比如我们要在/app/controller/jspang.jsindex( )方法里使用。

async index() {
  const { ctx ,app } = this;
  await ctx.render(
    'jspang.html',{
      nowTime: app.currentTime()
    })
}

这样就可以在/app/view/jspang.html模板中使用了。

<%=nowTime%>

这是Egg中对application方法的扩展,我们再来看看对属性的扩展。

对application对象的属性扩展

属性( property) 的扩展的关键字是get,也需要写在application.js文件里。

module.exports = {
    //方法扩展
    currentTime(){
        const current = getTime();
        return current;
    },
    //属性扩展
    get timeProp(){
        return getTime();
    }
};

加入get,就会默认是一个属性,可以直接以属性的形式在controller方法里进行调用。

Egg.js中的扩展是经常使用的,所以你有必要多练习几遍。这节课我们主要学习了如何扩展application中的方法扩展和属性扩展。写扩展时要遵照Egg的约束,方法扩展和平时写的方法一样,属性扩展以get为关键字。

16.Egg.js的Extend-context

接着上节课,再来学习一下Egg.js中对Context(上下文)的扩展。

重新编写一个方法

为了学习更简单明了,在/app/controller/jspang.js文件里重新编写一个方法newContext( )。先用最简单的方式,在页面显示一个方法名称newContext就可以了。

async newContext(){
  const {ctx} = this ; 
  ctx.body = 'newContext';
}

写完方法,到/app/router.js里,配置路由。

router.get('/newContext',controller.jspang.newContext);

路由配置完成后,可以在终端中用yarn dev打开测试服务,然后在浏览器里输入[http://127.0.0.1:7001/newContext](http://127.0.0.1:7001/newContext)如果能正常在页面中显示出newContext就说明正常了,可以继续下面的操作。

编写Contenxt扩展

上面的一些准备方法和路由都写好后,就可以开始本节的正式内容了“扩展Context方法”。以前通过上下文来获取传递参数时,get方法请求和post方法请求的获取方式是不同的,我们编写的方法就是让这两个请求获取参数的方法统一化,都用params( )方法。

/app/extend文件夹下,新建一个文件context.js(此文件名称是Egg.js要求的固定写法,不能改变)。然后编写下面的代码。

module.exports = {
  params(key){
    const method = this.request.method
    if(method ==='GET'){
      return key ? this.query[key]:this.query;
    }else{
      return key? this.request.body[key] :this.request.body;
    }
  }  
};

写完之后,打开/app/controller/jspang.js文件,使用刚编写的params获取参数,然后打印在服务端控制台。

async newContext(){
  const {ctx} = this ; 
  const params = ctx.params();
  console.log(params)
  ctx.body = 'newContext';
}

这样写完,理论上就可以接收postget请求的参数都可以了。

测试请求参数获得情况

get请求参数获取

直接在浏览器里输入

http://127.0.0.1:7001/newContext?username=jspang

在到VSCode的终端中查看结果,是可以接收到{ username: 'jspang' }参数的。

post请求参数获取

get请求没问题了,先修改router.js,把请求方式改为post

router.post('/newContext',controller.jspang.newContext);

这里继续使用第06节中讲过的REST Client插件进行Post请求测试。在根目录下,打开test.http文件,然后编写测试代码。

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

{
    "name":"小红",
    "age":18
}

写好后,点击Send Request按钮测试,可以看到也是可以接收到POST传递的参数的。

这节课我们讲解了Egg.js中对Context(上下文对象)的方法扩展,我们编写了一个可以同时接受POSTGET的请求的参数Context扩展方法,并进行了基本的测试。下节课继续学习Egg.js中的请求。

17.Egg.js 的 Extend-request

这节课继续学习 Egg.js 中 Request 对象的扩展,Request 中的扩展一般是扩展的属性。比如扩展 Request 中的一个属性,通过属性直接得到请求头中的 token 属性。

开发前的准备工作

我们新写一个方法,用来获取请求头中的token属性。所以我们在/app/controller/jspang.js中添加一个方法。

async newRequest(){
  const { ctx } = this;
  const token = ctx.request.token
  ctx.body = {
    status:200,
    body:token
  }

}

然后再到router.js中设置路由。

router.post("/newRequest", controller.jspang.newRequest);

request 对象扩展 token 属性

Egg.js 对 Request 的扩展也需要在/app/extend文件夹下,新建一个request.js文件,然后在这个文件里写扩展属性。

module.exports = {
  get token() {
    console.log("token", this.get("token"));
    return this.get("token");
  },
};

使用 REST Client 进行测试

写完上面的代码之后,就可以使用REST Client 插件进行测试了。编写测试代码如下。

POST http://127.0.0.1:7001/newRequest
Content-Type: application/json
token: 'jspang'

{
    "name":"小红",
    "age":18
}

在点击send Request按钮,在 VSCdoe 控制台和请求后返回的数据中,就可以看到token了。这样一个简单的 Request 扩展就完成了。

18.Egg.js的Extend-response、helper

这节是Extend(扩展)的最后一节,主要讲一下response对象和helper对象的扩展。

编写Respose扩展

/app/extend文件夹下,新建立一个response.js文件。我们的需求是和上节课向对应的,作一个设置token的扩展。打开response.js文件,编写下面的代码。

module.exports={
  set token(token){
    this.set('token',token)
  }
};

需要设置的方法以set关键字开头,然后用this.set( )就可以设置返回的token了。

编写使用方法和路由

/app/controll/jspang.js文件下,新建一个方法。然后用response.token来设置token 的值。

async newResponse(){
  const {ctx} = this;
  ctx.response.token='jspang.com'
  ctx.body = 'newRespose'
}

然后设置路由,router.js 。

router.get('/newResponse',controller.jspang.newResponse);

在终端里开启服务yarn dev,然后输入http://127.0.0.1/newResponse。然后按F12打开浏览器的调试模式,然后进入Network标签,再次刷新浏览器,再选择All,点击newResponse。就可以看到token

编写helper扩展

我们紧接着再来学一下helper对象的扩展。我们作一个把字符串进行base64加密的方法。在/app/extend/文件夹下,新建一个helper.js文件。

module.exports = {
  base64Encode(str = '' ){
    return   new Buffer(str).toString('base64');
  } 
}

虽然Buffer( )方法显示已经弃用,但是你还是可以使用的。

使用Helper扩展

我们省事一点,直接在/app/controller/jspang.js文件中的newResponse方法里,直接使用。

async newResponse(){
  const {ctx} = this;
  ctx.response.token='jspang.com'
  const testBase64 = ctx.helper.base64Encode('jspang.com')
  ctx.body = testBase64
}

然后到浏览器,刷新一下页面。就可以看到输出的结果编程了base64加密的文字了。

好了,我们通过四节学习了Egg.js中的Extend扩展。下节课开始学习一下Egg.js中的插件机制。

19. Egg.js中的定时任务编写

在程序开发的后端领域,定时任务是一个经常使用的功能,比如从数据库定时读取数据,存到缓存当中,定时删除日志,定时更新数据库文件。这节课我们就学习一下定时任务的写法。

定时任务的编写

定时任务需要按照Egg的约定,/app目录下,新建shedule文件夹。然后再shedule文件夹下,新建一个get_time.js文件。设置每3秒钟,在控制台输出当前时间戳。

const Subscription = require('egg').Subscription

class GetTime extends Subscription{
  static get schedule(){
    return {
      interval:'10s',
      type:'worker'
    };
  }

  async subscribe(){

    console.log(Date.now())
  }

};

module.exports =GetTime;

更复杂的定时

我们也可以使用更复杂的cron属性进行定时。cron属性有6个参数。

*    *    *    *    *    *
┬    ┬    ┬    ┬    ┬    ┬
│    │    │    │    │    |
│    │    │    │    │    └ day of week (0 - 7) (0 or 7 is Sun)
│    │    │    │    └───── month (1 - 12)
│    │    │    └────────── day of month (1 - 31)
│    │    └─────────────── hour (0 - 23)
│    └──────────────────── minute (0 - 59)
└───────────────────────── second (0 - 59, optional)

比如我们还是要设置每3秒钟,返回时间戳,就可以写成下面的样子。

static get schedule(){
  return {
    cron: '*/3 * * * * *',
    type:'worker'
  };
}

这节课主要学习了如何在Egg中制作定时任务,定时任务几乎每个项目都会用到,所以一定要学好。

20. Egg.js配置连接MySql数据库

因为是讲Egg.js的课程,所以我大胆的默认你已经会了MySql数据库,如果你还不会,可以暂停在这里学习一下MySql的基础知识,不用学的很精通,了解就好。数据库就是我们存储数据的地方,MySQL数据库是关系型数据库。适合处理复杂的业务逻辑,目前淘宝仍然以MySql数据库为主。

安装egg-mysql插件

打开VSCode中的终端,然后在项目根目录下输入yarn命令进行安装。正常来讲安装的速度是非常快的。

yarn add egg-mysql -S

安装完成后,在终端中,再启动这个项目(你也可以先不启用)。

yarn dev

然后在项目根目录,找到并打开package.json文件,查看安装是否成功和对应的版本。

"dependencies": {
    "egg": "^2.15.1",
    "egg-mysql": "^3.0.0",
    "egg-scripts": "^2.11.0",
    "egg-view-ejs": "^2.0.1"
  },

可以看到,我这里的egg-mysql版本为3.0.0.

配置egg-mysql插件

安装完的插件并不能正常使用,需要在plugin.js中配置插件。打开/config/plugin.js文件,然后在最后面编写。

exports.mysql = {
  enable:true,
  package:'egg-mysql'
}

然后再到/config/config.default.js当中进行 进一步配置。

config.mysql ={
    app:true,     //是否挂载到app下面
    agent:false,  //是否挂载到代理下面
    client:{
      host:'127.0.0.1',      // 数据库地址
      prot:'3306',           // 端口
      user:'root',           // 用户名
      password:'root123',    // 密码
      database:'test-egg'    // 连接的数据库名称
    }
  }

如果这些连接信息正确,就可以连接成功了。

新建一个数据库test-egg

我这里使用的软件MySql界面管理软件是Navicat for MySql 当然,你使用什么都可以,个人只是习惯于使用这个软件了。

利用软件,新建一个数据库test-egg, 在新建一个girls表。

CREATE TABLE `girls` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(10) NOT NULL,
  `age` int(11) NOT NULL,
  `skill` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

数据表建完,这节课就先到这里,下节课我们继续学习,如何用Egg-mysql插件,对数据表的增删改查。

21.Egg.js 操作 MySql 数据库

这节学习一下 Egg.js 通过 egg-mysql 插件,如何操作数据库。我们讲过操作数据库的过程应该都在service里进行。

学习前的准备页面和相关方法

/service文件夹下面,新建一个文件testdb.js文件,专门用于操作数据库。在文件中编写下面的方法。方法分别代表增、删、改、查。

"use strict";

const Service = require("egg").Service;

class testdbService extends Service {
  // 添加数据库
  async addGirl() {}
  // 删除数据库
  async delGirl() {}
  // 修改数据库
  async updateGirl() {}

  // 查询数据库
  async getGirls(id) {}
}

module.exports = testdbService;

写完之后在/controller文件夹下面新增一个控制器girlsManage.js文件,是对女孩的管理。

"use strict";

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

class GirlManage extends Controller {
  async addGirl() {
    const { ctx } = this;

    ctx.body = "添加女孩";
  }

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

    ctx.body = "删除女孩";
  }

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

    ctx.body = "修改女孩";
  }

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

    ctx.body = "查询女孩";
  }
}

module.exports = GirlManage;

配置相关路由,这里我们全部使用get请求方式,在router.js文件下加入下面的代码。

router.get("/addGirl", controller.girlManage.addGirl);
router.get("/delGirl", controller.girlManage.delGirl);
router.get("/updateGirl", controller.girlManage.updateGirl);
router.get("/getGirls", controller.girlManage.getGirls);

然后打开终端,开启服务,然后打开浏览器,输入地址,查看写的方法是否可用[http://127.0.0.1:7001/addGirl](http://127.0.0.1:7001/addGirl)

查询方法的编写

我们先来学习一个最简单的方法,就是查询方法。进入/servic/testdb.js文件下的getGirls( )方法。然后编写代码。

// 查询数据库
   async getGirl(id){
    try{
      const app = this.app;
      const res= await app.mysql.select('girls')
      return res

    }catch(error){
      console.log(error)
      return null
    }
   }

写完代码以后,再编写/controller/girlManage.js文件下的getGirls( )方法。

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

    const res = await ctx.service.testdb.getGirl()

    ctx.body = '查询女孩:'+JSON.stringify(res);
  }

这时候再到浏览器中进行预览,就可以看到可以返回数据了。为了避免视频太长,这节我们就学到这里,一定要记得动手作一下,要不下节课就没办法学习了。

22.Egg.js操作MySql数据库-2

上节课已经准备好了数据库操作的相关文件,还小试身手的作了一个数据库的查询操作。这节课我们继续完成数据库的增加、删除和修改操作,内容有点多,小伙伴注意学习。

添加数据操作

打开/app/service/testdb.js文件,在addGirl( ) 方法下,编写下面的代码。这里插入使用的insert( )方法,

// 添加数据库
async addGirl(params){
  try {
    const { app } = this;
    const res = await app.mysql.insert('girls',params);
    return res;
  } catch (error) {
    console.log(error);
    return null;
  }
}

insert( ) 方法接收两个参数,第一个参数是表名称,第二个参数是插入到表里的值。

然后再到/app/controller/girlManage.js文件里addGirl( )方法里编写代码。

async addGirl() {
  const { ctx } = this;
  const params = {
    name:'小白',
    age:18,
    skill:'头疗'
  }
  const res =  await ctx.service.testdb.addGirl(params)
  ctx.body = '添加女孩-成功!';
}

写完之后打开终端,运行yarn dev开启服务,然后在浏览器中输入http://127.0.0.1/addGirl就可以看到结果了。再打开Navicat for MySQL查看数据表的内容。如果没有任何错误,应该是可以顺利添加成功的。

修改数据操作

会了添加,我们再来看一下如何来修改数据。打开/app/service/testdb.js文件,在updateGirl( )方法中编写代码。

// 修改数据库
async updateGirl(params){
  try {
    const { app } = this;
    const res= await app.mysql.update('girls',params);
    return res;
  } catch (error) {
    console.log(error);
      return null;
  }
}

然后再到/app/controller/girlManage.js文件中的updateGirl( )方法中,编写代码如下。

async updateGirl() {
  const { ctx } = this;
  const params = {
    id:3,
    name:'小白',
    age:20,
    skill:'头疗'
  }
  const res  = await ctx.service.testdb.updateGirl(params)
  if(res){
    ctx.body = '修改女孩-成功';
  }else{
    ctx.body = '修改失败';
  }
}

写完以后,就可以到浏览器中访问,http://127.0.0.1/updateGirl

删除数据操作

最后我们再看一下如何删除数据。还是到/app/service/testdb.js文件下的delGirl( )方法。编写下面的代码。

// 删除数据库
async delGirl(id){
  try {
      const { app } = this;
      const res = await app.mysql.delete('girls',id)
      return res;
  } catch (error) {
      console.log(error);
      return null;
  }

}

然后再到controller里边,进行编写delGirl( )方法。

async delGirl() {
    const { ctx } = this;
    const id={"id":3};
    const res = await ctx.service.testdb.delGirl(id)
    console.log(res)
    if(res){
      ctx.body = '删除女孩-成功';
    }else{
      ctx.body = '删除失败';
    }

  }

写好后,我们到浏览器里访问http://127.0.0.1/delGirl就可以了。

好了,这节课学完,我们就可以对数据库进行增删改查操作了。这就是本套课程的全部内容了,当然这只是基础,以后还会用Egg.js作为后台代码,Vue作为前端代码,只做一个博客系统,请你持续关注技术胖的视频教程。每年努力出100集视频教程,希望你能和我一起学习。

对不起,该文章暂时不支持留言。
最新留言

No Data

技术胖
光头Coder12年经验业余讲师免费视频被访问
文章目录