之前一直使用koa, 刚刚接触egg， 做了一些入门的笔记
准备工作
1 首先安装脚手架,，并创建项目。
1 $ npm i egg-init -g 2 $ egg-init egg-demo --type=simple 3 $ cd egg-demo 4 $ npm i // 也可以使用yarn
2 . 启动项目
1 $ npm run dev
浏览器打开http://127.0.0.1:7001/即可进入默认的首页。
3 . 项目目录
1 ) /app ----------- 主要工作目录
/controller ------------- 控制器，比如获取service的数据和渲染view的模板
/extend ------------- 方法扩展，比如封装时间格式化方法
/middleware ----------- 中间件，比如登录权限设置
/public ------------ 静态文件目录，比如css, js, image
/service ------------- 服务，操作数据库增删改查等
/view ------------- 模板目录，存放模板文件，如ejs, jade, pug, nunjucks等
-router.js ------------- 路由文件
2 ) /config ---------- 主要配置目录
-config.default.js ------------ 配置文件,
-plugin.js ----------- 配置插件, 如开启模板引擎
开发阶段
1 . 新建路由
# app/router.js
1 module.exports = app => { 2 const { router, controller } = app; 3 router.get('/', controller.home.index); // 脚手架默认路由 4 router.get('/user', controller.user.index) // 新建路由 5 };
访问路径 http://127.0.0.1:7001/user时会指向controller.user.index控制器
controller是app应用的一个属性对象，直接指向controller目录，上面的controller.user.index表示，指向app/controller/user.js的index方法
2 . 新建控制器
# app/controller/user.js
1 /* egg内置控制器 */ 2 const Controller = require('egg').Controller; 3 4 /*声明控制器类，并继承与Controller */ 5 class UserController extends Controller { 6 /*声明异步方法*/ 7 async index() { 8 /*ctx与koa中的一样，表示整个应用的上下文环境*/ 9 const ctx = this.ctx; 10 ctx.body = '用户列表' 11 } 12 } 13 14 module.exports = UserController;
3 . 新建服务
# app/service/user.js
1 const Service = require('egg').Service; 2 3 class UserService extends Service { 4 async findAll() { 5 /*这里暂时未从数据库获取数据，而是使用了静态数据填充*/ 6 const users = [ 7 {id: 1, name: '兰陵王'}, 8 {id: 2, name: '程咬金'}, 9 {id: 3, name: '诸葛亮'}, 10 ] 11 return users; 12 } 13 } 14 15 module.exports = UserService;
5. 修改控制器（获取service中的数据, 并渲染到view的模板中）
# app/controller/user.js
1 const Controller = require('egg').Controller; 2 3 class UserController extends Controller { 4 async index() { 5 const ctx = this.ctx; 6 // ctx.body = '用户列表' 7 const title = '用户列表'; 8 const users = await ctx.service.user.findAll(); 9 await ctx.render('user/index.ejs', {users: users, title}) 10 } 11 } 12 13 module.exports = UserController;
这里使用async..await作为异步获取，可以参考ES6教程，意思是users获取成功了，才会执行下一步。
使用ctx.render()渲染ejs模板， 并带有参数传递。
4 . 新建模板
# app/view/user/index.ejs
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 </head> 10 <body> 11 <h2><%= title %></h2> 12 <ul> 13 <% users.forEach(function (item) { %> 14 <li><%= item.name %></li> 15 <% }) %> 16 </ul> 17 </body> 18 </html>
此时重启服务访问 http://127.0.0.1:7001/user会报错，原因是还没配置模板引擎。
5 . 安装并配置模板引擎
1 $ yarn add egg-view-ejs 2 $ yarn add egg-view
# config/plugin.js
1 module.exports = { 2 // had enabled by egg 3 static: { 4 enable: true, 5 }, 6 // 开启ejs模板插件 7 ejs: { 8 enable: true, 9 package: 'egg-view-ejs', 10 } 11 }; 12 13 // 简化形式 exports.key = value 14 // exports.ejs = { 15 // enable: true, 16 // package: 'egg-view-ejs' 17 // } 18 19 // 函数形式 20 // module.exports = () => { 21 // return { 22 // ejs: { 23 // 24 // } 25 // } 26 // }
# config/config.default.js
1 module.exports = appInfo => { 2 /*其他代码*/ 3 config.view = { 4 // 设置ejs为默认的模板引擎 5 defaultViewEngine: '.ejs', 6 mapping: { 7 '.ejs': 'ejs' 8 } 9 }; 10 /*其他代码*/ 11 }
最后，重启服务器，并访问http://127.0.0.1:7001/user
结束：
该入门还未连接数据库，如mongodb, mysql