Egg入门学习(一)

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

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

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

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

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

npm i egg-init -g
egg-init egg-example --type=simple
cd egg-example
npm i

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

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

1. 初始化目录结构:

$ mkdir egg-demo1
$ cd egg-demo1
$ npm init
$ npm i egg --save
$ npm i egg-bin -- save-dev

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

{
  "name": "egg-demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "egg-bin dev"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "egg": "^2.14.2"
  },
  "devDependencies": {
    "egg-bin": "^4.9.0"
  }
}

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

// app/controller/home.js

const Controller = require(‘egg‘).Controller;
class HomeController extends Controller {
  async index() {
    this.ctx.body = ‘Hello world‘;
  }
}
module.exports = HomeController;

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

module.exports = app => {
  const { router, controller } = app;
  router.get(‘/‘, controller.home.index);
}

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

// 下面是我自己的 Cookie 安全字符串密钥

exports.keys = ‘123456‘;

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

egg-demo1
├── app
│   ├── controller
│   │   └── home.js
│   └── router.js
├── config
│   └── config.default.js
└── package.json

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

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

三:静态资源

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

egg-demo1
├── app
│   ├── controller
│   │   └── home.js
│   └── router.js
│   ├──public
|   | |---css
|   | | |-- index.css
|   | |---js
|   | | |-- index.js
├── config
│   └── config.default.js
└── package.json

四:模板渲染

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

npm i egg-view-nunjucks --save

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

// app/config/plugin.js

exports.nunjucks = {
  enable: true,
  package: ‘egg-view-nunjucks‘
};

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

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

// 添加view配置
exports.view = {
  defaultViewEngine: ‘nunjucks‘,
  mapping: {
    ‘.tpl‘: ‘nunjucks‘
  }
};

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

<!-- app/view/index/list.tpl -->
<html>
  <head>
    <title>第一天学习egg</title>
    <link rel="stylesheet" href="/public/css/index.css" />
  </head>
  <body>
    <ul class="view-list">
      {% for item in list %}
        <li class="item">
          <a href = "{{ item.url }}">{{ item.title }}</a>
        </li>
      {% endfor %}
    </ul>
  </body>
</html>

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

// app/controller/index.js

const Controller = require(‘egg‘).Controller;

class IndexController extends Controller {
  async list() {
    const dataList = {
      list: [
        { id: 1, title: ‘今天是我第一天学习egg了‘, url: ‘/index/1‘ },
        { id: 2, title: ‘今天是我第一次学习egg了‘, url: ‘/index/2‘ }
      ]
    };
    await this.ctx.render(‘index/list.tpl‘, dataList);
  }
}

module.exports = IndexController;

4.4 添加 Router 路由,代码如下:

module.exports = app => {
  const { router, controller } = app;
  router.get(‘/‘, controller.home.index);
  router.get(‘/index‘, controller.index.list);
}

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

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

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

github上的源码

原文地址:https://www.cnblogs.com/tugenhua0707/p/10217134.html

时间: 2024-07-29 04:56:54

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

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

Egg是基于koa的,因此Egg的中间件和Koa的中间件是类似的.都是基于洋葱圈模型的. 在Egg中,比如我想禁用某些IP地址来访问我们的网页的时候,在egg.js中我们可以使用中间件来实现这个功能,中间件的作用无非就是说在Egg的外层在包一层来判断某些事情是否符合要求,也就是在洋葱圈模型外面再进行包一层.在Egg入门二学习中(https://www.cnblogs.com/tugenhua0707/p/10226799.html), 我们最后的项目的目录结构如下: egg-demo2 ├──

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

一接口实现的多态 在上一篇博文:JavaSE入门学习20:Java面向对象之接口(interface)(一)中提到了接口的实现存在多态性,那么 这一篇主要就要分析接口实现的多态. 实例一 Test.java源文件代码: public class Test{ public static void main(String[] args){ //实现接口Singer Singer s1 = new Student("Amy"); s1.sing(); s1.sleep(); s1.study

Retrofit 入门学习

Retrofit 入门学习官方RetrofitAPI 官方的一个例子 public interface GitHubService { @GET("users/{user}/repos") Call<List<Repo>> listRepos(@Path("user") String user); } 这些注解都有一个参数 value,用来配置其路径,比如示例中的 users/{user}/repos, 我们还注意到在构造 Retrofit

[Todo] Nodejs学习及Spider实验(包括php入门学习、React入门学习)

/Users/baidu/Documents/Data/Interview/Web-Server开发 深入浅出Node.js-f46c http://blog.csdn.net/u012273376/article/details/52736906 利用nodejs做爬虫 http://www.runoob.com/nodejs/nodejs-callback.html nodejs学习之路 http://www.runoob.com/php/php-tutorial.html php学习之路

JavaSE入门学习24:Java面向对象补充

一Java中的Object类 Object类是所有Java类的父类,如果一个类没有使用extends关键字明确标识继承另外一个类,那么这个类默认 继承Object类. public class Person{ // } //等价于 public class Person extends Object{ // } Object类中的方法,适合所有子类. 1)toString()方法 在Object类中定义有public String toString()方法,其返回值是String类型,描述当前对

js入门学习

在HTML,CSS学习的最后,开始入门学习javascript, 首先就是去了解它的用途 作用:使web页面能够与用户交互,作为控制浏览器给网页增添活力的方法 定义:它是一种脚本语言,作用于浏览器.和java没有半毛钱关系,主要是当时Netscape公司为了增加影响力改了名,,(是不是感觉很无耻) ps:区分程序的一种方式:1.客户端程序(client-side),像javascript就是,我觉得HTML,CSS应该也是. 2.服务器端程序(server-side),java,perl,php

mybatis入门学习

一.mybaits简介 java程序中常用的数据库框架. 二.mybait入门学习 1.环境 创建一个java或者javaweb项目:我是创建了一个structs项目,helloworld 2.添加相应的jar包

angularjs入门学习【指令篇】

一.首先我们来了解下指令API 属性 含义 restrict 申明标识符在模版中作为元素,属性,类,注释或组合,如何使用 priority 设置模版中相对于其他标识符的执行顺序 Template 指定一个字符串式的内嵌模版,如果你指定了模版是一个URL,那么是不会使用的 tempateUrl 指定URL加载的模版,如果你已经指定了内嵌的模版字符串,那么它不会使用的 Replace 如果为真,替换当前元素,如果是假或未指定,拼接到当前元素 Transclude 移动一个标识符的原始字节带你到一个新

正则表达式入门学习

\b-元字符,代表单词的开头或结尾,也就是单词的分界处. \bHi\b     下列未进行说明的都是元字符. .  匹配除了换行符以外的任意字符. * 指定*前边的内容可以连续重复使用任意次以使整个表达式得到匹配.(不包含换行的字符) \bHi\b.*\bLucy\b \d 匹配一位数字(0或1或2......或9)  0\d\d-\d\d\d\d\d\d\d\d - 不是元字符 ,只匹配它本身. 避免重复 0\d{2}-\d{8}  {2}({8})指前面\d必须连续重复匹配2次(8次). \