一:什么是egg.js?
egg.js是nodejs 的一個(gè)框架,是基于koa框架的基礎(chǔ)上整合的一套上層框架散劫,既定的目錄結(jié)構(gòu)稚机,開(kāi)發(fā)者只需要基于MVC模式,根據(jù)項(xiàng)目規(guī)范的目錄結(jié)構(gòu)获搏,專(zhuān)注于編寫(xiě)相應(yīng)的controller,service,router,view,config配置赖条,以及plugin插件可擴(kuò)展。
二:腳手架快速生成項(xiàng)目
1.系統(tǒng)和環(huán)境:windows + node 8以上
2.腳手架命令,快速初始化生成項(xiàng)目
npm i egg-init -g
egg-init egg-myProject --type=simple
cd egg-myProject
npm i
3.啟動(dòng)項(xiàng)目
npm run dev
4.瀏覽器中打開(kāi)http://127.0.0.1:7001:
三:不用腳手架纬乍,逐步搭建碱茁,熟悉項(xiàng)目目錄結(jié)構(gòu)
1.初始化目錄結(jié)構(gòu)
mkdir egg-my-example
cd egg-my-example
npm init
npm init之后一路回車(chē)即可,然后安裝egg egg-bin:
npm i egg --save
npm i egg-bin --save-dev
2.找到package.json文件添加
"scripts": {
"dev": "egg-bin dev"
},
3.編寫(xiě)controller文件仿贬,router路由纽竣,添加配置文件config
在項(xiàng)目 egg-my-example 目錄下新建app文件夾,新建controller文件夾茧泪,新建文件home.js
在項(xiàng)目 egg-my-example 目錄下app文件夾新建router.js文件
在項(xiàng)目 egg-my-example 目錄下新建與app同級(jí)的config文件夾蜓氨,(注意:config文件夾跟app同級(jí)目錄),新建config.default.js文件
//app/controllter/home.js
const Controller = require('egg').Controller;
class HomeController extends Controller{
async index(){
this.ctx.body = "hello world";
}
}
module.exports = HomeController;
//app/router.js
module.exports = app => {
const { router, controller } = app;
router.get('/',controller.home.index);
router.get('/list',controller.news.list);
}
//config/congif.default.js
exports.keys = '123456790'; //key是自己的cookie信息
整體項(xiàng)目目路結(jié)構(gòu)如下:
4.運(yùn)行項(xiàng)目
npm run dev
5.瀏覽器打開(kāi) http://127.0.0.1:7001
如此一個(gè)簡(jiǎn)單的hello world就完成了调炬,手動(dòng)新建項(xiàng)目過(guò)程中一定要注意目路結(jié)構(gòu)语盈,egg根據(jù)既定的項(xiàng)目目錄,開(kāi)發(fā)者可以專(zhuān)注編寫(xiě)controller等業(yè)務(wù)代碼缰泡,快速完成項(xiàng)目刀荒。
6.接下來(lái)可以繼續(xù)編寫(xiě)view模板文件
使用 Nunjucks來(lái)渲染,安裝對(duì)應(yīng)的插件 egg-view-nunjucks
npm i egg-view-nunjucks --save
開(kāi)啟插件:(config目錄下新建plugin.js文件)
//config/plugin.js
exports.nunjucks = {
enable:true,
package:'egg-view-nunjucks'
}
添加view模板配置
//config/config.default.js
exports.view = {
defaultViewEngine:'nunjucks',
mapping:{
'.tpl':'nunjucks'
}
}
7.為一個(gè)列表頁(yè)編寫(xiě)模板文件
在app目錄下新建一個(gè)view文件夾棘钞,將所有模板文件放到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>
添加controller,router
//app/controller/news.js
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' }
]
};
await this.ctx.render('news/list.tpl', dataList);
}
module.exports = NewsController;
//app/router.js
module.exports = app => {
const { router, controller } = app;
router.get('/',controller.home.index);
router.get('/list',controller.news.list);
}
8.瀏覽器中打開(kāi)http://127.0.0.1:7001/list