之前一直使用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