一：什么是Egg? 它能做什么？
Egg.js是nodejs的一个框架，它是基于koa框架的基础之上的上层框架，它继承了koa的，它可以帮助开发人员提高开发效率和维护成本。
Egg约定了一些规则，在开发中，我们可以按照一套统一的约定进行应用开发，团队内部使用这种方式开发可以减少开发人员的学习成本。

Express也是Node.js的一个框架，express简单且扩展性强，但是express框架缺少了一些约定，不同的开发者会写出不同的代码，适合做个人项目，不太适合团队开发，而Egg它约定了一些规则，对整个团队开发效率会提高。

官网对Egg有如下特性：
1. 可以基于Egg定制上层框架的能力。
2. 高度可扩展的插件机制。
3. 内置多进程管理。
4. 基于koa开发的，性能好。
5. 框架稳定，测试覆盖了高。
6. 渐进性开发。

二：使用egg快速生成项目 (根据官网来学习的)

官网有脚手架提供，只需要如下几条命令即可快速生成项目：如下命令：

  1. npm i egg-init -g
  2. egg-init egg-example --type=simple
  3. cd egg-example
  4. npm i

生成项目后，我们可以使用 npm run dev 启动即可。

我们也可以手动搭建项目：

1. 初始化目录结构：

  1. $ mkdir egg-demo1
  2. $ cd egg-demo1
  3. $ npm init
  4. $ npm i egg --save
  5. $ npm i egg-bin -- save-dev

2. 在package.json文件中加上 scripts 启动命令如下：

  1. {
  2.   "name": "egg-demo1",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "dev": "egg-bin dev"
  8.   },
  9.   "author": "",
  10.   "license": "ISC",
  11.   "dependencies": {
  12.     "egg": "^2.14.2"
  13.   },
  14.   "devDependencies": {
  15.     "egg-bin": "^4.9.0"
  16.   }
  17. }

3. 在项目中的跟目录新建 app文件夹，再在下面新建 controller文件夹，在该文件夹下新建 home.js，因此代码如下：

  1. // app/controller/home.js
  2.  
  3. const Controller = require('egg').Controller;
  4. class HomeController extends Controller {
  5.   async index() {
  6.     this.ctx.body = 'Hello world';
  7.   }
  8. }
  9. module.exports = HomeController;

4. 在app文件下新建router.js ，配置路由映射，如下代码：

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

5. 在项目的根目录下新建 config文件夹，在该文件夹下新建 config.default.js， 简单的代码如下：

  1. // 下面是我自己的 Cookie 安全字符串密钥
  2.  
  3. exports.keys = '123456';

因此项目的总目录结构如下：

  1. egg-demo1
  2. ├── app
  3. │   ├── controller
  4. │   │   └── home.js
  5. │   └── router.js
  6. ├── config
  7. │   └── config.default.js
  8. └── package.json

6. 启动项目，使用命令 npm run dev, 如下所示：

我们打开浏览器访问 http://127.0.0.1:7001/ 可以看到如下所示了：

三：静态资源

Egg内置了static插件，因此我们可以把静态资源放在 app/public 下即可：目录结构如下：

  1. egg-demo1
  2. ├── app
  3. │   ├── controller
  4. │   │   └── home.js
  5. │   └── router.js
  6. │   ├──public
  7. |   | |---css
  8. |   | | |-- index.css
  9. |   | |---js
  10. |   | | |-- index.js
  11. ├── config
  12. │   └── config.default.js
  13. └── package.json

四：模板渲染

4.1 有时候我们需要读取数据后渲染模板，然后呈现给用户，因此我们需要引入对应的模板引擎。因此我们可以使用 Nunjucks 来渲染，先安装对应的插件 egg-view-nunjucks

  1. npm i egg-view-nunjucks --save

安装完成后，我们需要开启插件，因此我们需要在 app/config 下新建 plugin.js 来开启插件配置功能，如下代码：

  1. // app/config/plugin.js
  2.  
  3. exports.nunjucks = {
  4.   enable: true,
  5.   package: 'egg-view-nunjucks'
  6. };

在 config/config.default.js 代码也要加上对应的配置，如下代码：

  1. // 下面是我自己的 Cookie 安全字符串密钥
  2. exports.keys = '123456';
  3.  
  4. // 添加view配置
  5. exports.view = {
  6.   defaultViewEngine: 'nunjucks',
  7.   mapping: {
  8.     '.tpl': 'nunjucks'
  9.   }
  10. };

4.2 为页面编写模板文件，我们一般是放在 app/view 目录下，因此我们需要在app下再新建一个 view文件夹。

  1. <!-- app/view/index/list.tpl -->
  2. <html>
  3.   <head>
  4.     <title>第一天学习egg</title>
  5.     <link rel="stylesheet" href="/public/css/index.css" />
  6.   </head>
  7.   <body>
  8.     <ul class="view-list">
  9.       {% for item in list %}
  10.         <li class="item">
  11.           <a href = "{{ item.url }}">{{ item.title }}</a>
  12.         </li>
  13.       {% endfor %}
  14.     </ul>
  15.   </body>
  16. </html>

4.3 添加 Controller 代码：代码如下：

  1. // app/controller/index.js
  2.  
  3. const Controller = require('egg').Controller;
  4.  
  5. class IndexController extends Controller {
  6.   async list() {
  7.     const dataList = {
  8.       list: [
  9.         { id: 1, title: '今天是我第一天学习egg了', url: '/index/1' },
  10.         { id: 2, title: '今天是我第一次学习egg了', url: '/index/2' }
  11.       ]
  12.     };
  13.     await this.ctx.render('index/list.tpl', dataList);
  14.   }
  15. }
  16.  
  17. module.exports = IndexController;

4.4 添加 Router 路由，代码如下：

  1. module.exports = app => {
  2.   const { router, controller } = app;
  3.   router.get('/', controller.home.index);
  4.   router.get('/index', controller.index.list);
  5. }

现在我们再运行下 npm run dev 后，访问下：http://127.0.0.1:7001/index 就可以看到如下页面了，

注意：开发期默认开启了 development 插件，修改后端代码后，保存后会重新打包的。

其他的待续~ 慢慢来学习~

github上的源码

Egg入门学习(一)的更多相关文章

  1. Egg入门学习(二)---理解service作用

    在上一篇文章 Egg入门学习一 中,我们简单的了解了Egg是什么东西,且能做什么,这篇文章我们首先来看看官网对Egg的整个框架的约定如下,及约定对应的目录是做什么的,来有个简单的理解,注意:我也是按照 ...

  2. Egg入门学习(三)---理解中间件作用

    Egg是基于koa的,因此Egg的中间件和Koa的中间件是类似的.都是基于洋葱圈模型的. 在Egg中,比如我想禁用某些IP地址来访问我们的网页的时候,在egg.js中我们可以使用中间件来实现这个功能, ...

  3. JavaSE入门学习21：Java面向对象之接口(interface)(二)

    一接口实现的多态 在上一篇博文:JavaSE入门学习20:Java面向对象之接口(interface)(一)中提到了接口的实现存在多态性,那么 这一篇主要就要分析接口实现的多态. 实例一 Test.j ...

  4. vue入门学习（基础篇）

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  5. Hadoop入门学习笔记---part4

    紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...

  6. Hadoop入门学习笔记---part3

    2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...

  7. PyQt4入门学习笔记（三）

    # PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...

  8. PyQt4入门学习笔记（一）

    PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...

  9. Hadoop入门学习笔记---part2

    在<Hadoop入门学习笔记---part1>中感觉自己虽然总结的比较详细,但是始终感觉有点凌乱.不够系统化,不够简洁.经过自己的推敲和总结,现在在此处概括性的总结一下,认为在准备搭建ha ...

随机推荐

  1. arcgis建立拓扑分析(检验矢量图)

    目的:矢量图画好后,检查是否有伪节点,悬挂节点等,线要素和面要素都可以检查.伪节点,两条线应该相交但是画的没相交:悬挂节点,两条线看似相交了但是没有节点,因此路径不同(类似于高架桥和交叉口,悬挂节点就 ...

  2. Linux 新磁盘分区与挂载

      1.查看未分区的盘   2.新建分区   3.格式化分区(/dev/sdb1)   4.查看磁盘uuid [root@web-node1 ~]# blkid /dev/vdb1 /dev/vdb1 ...

  3. LockSupport的源码实现原理以及应用

    一.为什么使用LockSupport类 如果只是LockSupport在使用起来比Object的wait/notify简单, 那还真没必要专门讲解下LockSupport.最主要的是灵活性. 上边的例 ...

  4. Android为TV端助力 比较完善json请求格式

    public static String getHttpText(String url) { if (MyApplication.FOR_DEBUG) { Log.i(TAG, "[getH ...

  5. ie6常见的兼容性问题

    1.<!DOCTYPE HTML>文档类型的声明. 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象: 解决办法:书写文档声明. 2.不同浏览器当 ...

  6. 解决OpenCV JavaCameraView相机preview方向问题

    网上找了很多解决都是有问题的,研究了半天源码解决了这个问题.我是从整个相机启动和数据传输的过程着手的,这里捡重点介绍一下,最后会贴上修改后的两个源文件. 首先要知道一个概念. 图里的小圆圈是Home按 ...

  7. RecyclerView 高度不能随着Item数量 自适应高度

    在最近项目中遇到 ,在RecyclerView加载list数据时,高度无法自适应增长,看了很多博客,各种尝试,都没有解决这个问题,在某个博客中,讲到此解决方法,在此记录下. 即在RecyclerVie ...

  8. 电脑端支付宝支付 -前端获取支付宝返回的form 以及submit 调用支付扫码页面

    前端调取支付宝支付接口(后台进行封装,没有直接调取支付宝接口),调用返回的数据中,将会有一串的form表单数据返回,我们需要将此表单在当前调用页面submit下,以跳转到支付扫码页: 支付宝返回的fo ...

  9. session,cookie,sessionStorage,localStorage的区别

    浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互. 一.cookie和session cookie和session都是用来跟踪浏览器 ...

  10. Unity端游无法下载资源问题

    问题:用Unity编辑器Build的游戏(MyGame.exe)无法下载服务器上资源文件: starting www download: http://10.123.102.142/resources ...