这是我参与8月更文挑战的第31天，活动详情查看：8月更文挑战
为什么选择egg
- 对于一个初学node的前端来说。我跟倾向于一个成熟而规范的东西。然后理解它。
egg.js 是什么
Egg.js 为企业级框架和应用而生，由阿里团队，基于koa 框架基础上开发的一套框架，koa 是有 express 框架的原班人马开发。 而 Egg 选择了 Koa 作为其基础框架，在它的模型基础上，进一步对它进行了一些增强。
Express 是 Node.js 社区广泛使用的框架，简单且扩展性强，非常适合做个人项目。但框架本身缺少约定，标准的 MVC 模型会有各种千奇百怪的写法。Egg 按照约定进行开发，奉行『约定优于配置』，团队协作成本低。
安装
推荐直接使用脚手架，只需几条简单指令，即可快速生成项目: eggjs.org/zh-cn/intro…
$ mkdir egg-example && cd egg-example
$ npm init egg --type=simple
$ npm i
启动项目:
$ npm run dev
$ open http://localhost:7001
npm
$ npm i egg-init -g
$ egg-init -h
目录约定参看
视频教程
视频课件
- pan.baidu.com/s/1a8-RY-aBm3YkH2ZqJKmztg
egg中的mvc /app
- controoller 控制器 负责一些业务逻辑的处理
- serviece 服务（模型）和数据打交道（查询数据库，请求数据）
- view 视图 模版 页面的展示
egg中的中间件 middleware
- middleware 中间件
extend 框架扩展
schedule 计划，定时任务
路由
得到get参数，和动态路由参数的配置方法
在app/controller中定义路由中间件,新建news.js，创建一个控制器和方法
动态路由参数获取 ctx.params 参数获取方法 ctx.query
'use strict';
const Controller = require('egg').Controller;
class NewsController extends Controller {
async index() {
const { ctx } = this;
console.log(ctx.query); // 得到get传值
ctx.body = ctx.query; // 修改返回数据
}
async list() {
const { ctx } = this;
console.log(ctx.params); // 得到动态路由传值
ctx.body = ctx.params; // 修改返回数据
}
}
module.exports = NewsController;
在router.js 中添加
'use strict';
/**
* @param {Egg.Application} app - egg application
*/
module.exports = app => {
const { router, controller } = app;
router.get('/', controller.home.index);
router.get('/home', controller.home.myhome);
router.get('/news', controller.news.index);
router.get('/news/list:id', controller.news.list);
};
使用view 模版
这里我们使用egg-view-ejs 参看 www.npmjs.com/package/egg…
npm i egg-view-ejs --save
配置plugin
// {app_root}/config/plugin.js
exports.ejs = {
enable: true,
package: 'egg-view-ejs',
};
配置 view、
// {app_root}/config/config.default.js
exports.view = {
mapping: {
'.ejs': 'ejs',
},
};
配置 view 后的代码是
/* eslint valid-jsdoc: "off" */
'use strict';
/**
* @param {Egg.EggAppInfo} appInfo app info
*/
module.exports = appInfo => {
/**
* built-in config
* @type {Egg.EggAppConfig}
**/
const config = exports = {};
// use for cookie sign key, should change to your own and keep security
config.keys = appInfo.name + '_1562745060241_7841';
// add your middleware config here
config.middleware = [];
//修改开始，添加到这里
config.view = {
mapping: {
'.html': 'ejs', // 配置使用ejs来解析html
},
};
//修改结束
// add your user config here
const userConfig = {
// myAppName: 'egg',
};
return {
...config,
...userConfig,
};
};
然后就可以开始使用了，在app/view里面新建index.html
<body>
<h3>接受到的字符串：<%=msg%></h3>
<ul>
<% for(var i = 0 ; i<list.length ; i++) {%>
<li><%=list[i]%></li>
<% } %>
</ul>
</body>
控制器中指定解析的模版，通过 注意这里每一个函数都是async，而解析模版是一个异步的操作需要
使用 await ctx.render 解析模版
async index() {
const { ctx } = this;
// 注意这里是 await 解析index模版
const msg = '传入一个字符串';
const list = [ 111, 222, 333 ];
await ctx.render('index', {
msg,
list,
});
}
如何使用静态资源
在app/public 下面images 下面直接 添加图片
<img src="/public/images/1.jpg">
为什么要使用typings
npm install typings --global //安装 如果使用ts 那么我们要用到typings这个文件
