快速初始化

使用脚手架，对项目进行快速初始化

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

启动项目

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

访问效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8NRKYXKR-1595137239837)(https://www.iming.info/wp-content/uploads/2020/07/wp_editor_md_976949143a4a48533829d49a6bdde651.jpg)]

逐步搭建

初始化项目

$ mkdir egg-example
$ cd egg-example
$ npm init
$ npm i egg --save
$ npm i egg-bin --save-dev

添加相关的执行脚本

{"name": "egg-example","scripts": {"dev": "egg-bin dev"}
}

编写Controller

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

添加路由

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

添加配置文件

exports.keys = '_1595046215730_9281';

此时目录文件结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kYDqwg5U-1595137239859)(https://www.iming.info/wp-content/uploads/2020/07/wp_editor_md_6b3139be16c29f38aeb986ca436c91b7.jpg)]

访问效果

此时输入命令

 npm run dev

输入地址进行访问

http://localhost:7001

效果如下

静态资源

这里使用egg.js的插件完成对egg.js文件进行处理。

启动项目，访问静态资源

http://localhost:7001/public/js/lib.js

然后就可以访问了。

模板渲染

在本例子中，使用egg-view-nunjucks作为插件，进行模板的渲染

安装插件

C:\Users\Administrator\Desktop\untitled2\egg-example>npm i egg-view-nunjucks --save
npm WARN acorn-jsx@5.2.0 requires a peer of acorn@^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yo
urself.
npm WARN co-mocha@1.2.2 requires a peer of mocha@>=1.18 <6 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (cu
rrent: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\nunjucks\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (cur
rent: {"os":"win32","arch":"x64"})+ egg-view-nunjucks@2.2.0
added 1 package from 1 contributor in 11.263s36 packages are looking for fundingrun `npm fund` for detailsC:\Users\Administrator\Desktop\untitled2\egg-example>

完成了插件的安装

开启插件

配置如下目录，开启插件

config/plugin.js

配置内容如下

exports.nunjucks = {enable: true,package: 'egg-view-nunjucks'
};

修改总的配置文件

exports.keys = "_fduhuhrefguir83238uhfr";exports.view = {defaultViewEngine: 'nunjucks',mapping: {'.tpl': 'nunjucks',},
}

编写模板文件

在app/view文件下增加新的模板文件。

<!-- app/view/news/list.tpl -->
<html><head><title>Hacker News</title><link rel="stylesheet" href="/public/css/news.css" /></head><body><ul class="news-view view">{% for item in list %}<li class="item"><a href="{{ item.url }}">{{ item.title }}</a></li>{% endfor %}</ul></body>
</html>

添加控制器和路由

const Controller = require('egg').Controller;class NewsController extends Controller {// 同步，设置模板参数列表async list() {const dataList = {list: [{ id: 1, title: 'this is news 1', url: '/news/1' },{ id: 2, title: 'this is news 2', url: '/news/2' }]};// 等待进入renderawait this.ctx.render('news/list.tpl', dataList);}
}module.exports = NewsController;

添加路由

module.exports = app => {const { router, controller } = app;router.get('/', controller.home.index);router.get('/news', controller.news.list);
};

访问 http://localhost:7001/news 即可看到页面

编写service

在app/service 目录下，添加service相关文件。
代码如下

const Service = require('egg').Service;class NewsService extends Service {async list(page = 1) {// read configconst { serverUrl, pageSize } = this.config.news;// use build-in http client to GET hacker-news apiconst { data: idList } = await this.ctx.curl(`${serverUrl}/topstories.json`, {data: {orderBy: '"$key"',startAt: `"${pageSize * (page - 1)}"`,endAt: `"${pageSize * page - 1}"`,},dataType: 'json',});// parallel GET detailconst newsList = await Promise.all(Object.keys(idList).map(key => {const url = `${serverUrl}/item/${idList[key]}.json`;return this.ctx.curl(url, { dataType: 'json' });}));return newsList.map(res => res.data);}
}module.exports = NewsService;

修改Controller 添加相关的service

const Controller = require('egg').Controller;class NewsController extends Controller {async list() {const ctx = this.ctx;const page = ctx.query.page || 1;const newsList = await ctx.service.news.list(page);await ctx.render('news/list.tpl', { list: newsList });}
}module.exports = NewsController;

此时ctx.service.news.list 提供相关的数据。

增加配置文件

这时增加相关的配置文件

exports.news = {pageSize: 5,serverUrl: 'https://hacker-news.firebaseio.com/v0',
};

在模板里添加自定义函数

安装插件

npm i moment --save

// app/extend/helper.js
const moment = require('moment');
exports.relativeTime = time => moment(new Date(time * 1000)).fromNow();

<!-- app/view/news/list.tpl -->
{{ helper.relativeTime(item.time) }}

编写中间件

// app/middleware/robot.js
// options === app.config.robot
module.exports = (options, app) => {return async function robotMiddleware(ctx, next) {const source = ctx.get('user-agent') || '';const match = options.ua.some(ua => ua.test(source));if (match) {ctx.status = 403;ctx.message = 'Go away, robot.';} else {await next();}}
};// config/config.default.js
// add middleware robot
exports.middleware = ['robot'
];
// robot's configurations
exports.robot = {ua: [/Baiduspider/i,]
};

最后

对于egg.js 来说，总体上也是MVC三层架构。外加中间件，设置相关的文件。
以后的内容将会再次挨个深入讲解。

学习 | egg.js 从入门到精通相关推荐

【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
#[2022.3]尚硅谷Vue.js从入门到精通基础笔记(理论+实操+知识点速查) 前言本文完全基于参考资料:加工整理而成,包括其代码,案例,资源等.前置知识是学习尚硅谷的视频教程,本文配合其教程 ...
【笔记-node】《Egg.js框架入门与实战》、《用 React+React Hook+Egg 造轮子全栈开发旅游电商应用》
20210226-20210227:<Egg.js框架入门与实战> 课程地址:https://www.imooc.com/learn/1185 第一章课程导学 01-01 课程介绍一. ...
2023最全软件测试学习路线图（从入门到精通）
六维全息课程注重综合能力培养,从入学到职后一站式服务测试开发人才.2023年最新软件测试学习路线图,从入门到精通一应俱全. 9阶段专业课+11大专项测试项目适应互联网企业测试开发需求. 对于想入行学 ...
最新软件测试学习资源（小白入门到精通）
最新软件测试学习资源(小白入门到精通) 第一阶段:软件测试环境配置与管理此阶段,主要是熟练掌握在各种主流PC环境中,如何高效准确的搭建测试环境,并同时掌握关于软件基础运行环境的相关知识,为后续课程学 ...
【JS从入门到精通】08-构造函数与原型对象
笔记来源:尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)_哔哩哔哩_bilibili 文章目录构造函数与原型对象 1.使用工厂方法创建对象 2.构造函数构 ...
js 移动端滑块验证码插件_VUE技术详解，Vue.js从入门到精通
[Vue.js简介] Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue采用自底向上增量开发的设计.Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
自学python需要的软件-学习Python，从入门到精通，其实只需要两个月就够了
毫无疑问,Python 是当下最火的编程语言之一.对于许多未曾涉足计算机编程的领域「小白」来说,深入地掌握 Python 看似是一件十分困难的事.其实,只要掌握了科学的学习方法并制定了合理的学习计划, ...
php+html5+jquery断点续传_PHP学习路线:PHP从入门到精通教程
PHP入门到精通需要多久?PHP学习难吗?PHP快速入门的学习方法有哪些?这是很多人在PHP学习阶段,经常会遇到的PHP问题,完整的PHP学习路线图对于PHP小白的重要性是很有必要的.PHP从入门到精 ...

学习 | egg.js 从入门到精通

快速初始化

启动项目

逐步搭建

初始化项目

添加相关的执行脚本

编写Controller

添加路由

添加配置文件

此时目录文件结构

访问效果

静态资源

模板渲染

安装插件

开启插件

编写模板文件

添加控制器和路由

编写service

修改Controller 添加相关的service

增加配置文件

在模板里添加自定义函数

编写中间件

最后

学习 | egg.js 从入门到精通相关推荐

最新文章

热门文章