Egg 1. 快速开始 Quick Start 1.3 一步步 Step by Step 1.3.3 添加静态资源 & 1.3.4 添加渲染模板

Egg

Egg

本文仅用于学习记录，不存在任何商业用途，如侵删

1. 快速开始 Quick Start

1.3 一步步 Step by Step

1.3.3 添加静态资源

Egg 有一个名为static的内置插件。

在生产中，建议您将静态资产部署到 CDN，而不是使用此插件。

static默认映射/public/*到目录app/public/*。

在这种情况下，我们只需要将静态资产放入目录app/public中。

app/public
├── css
│ └── news.css
└── js
├── lib.js
└── news.js

举个例子：

重启服务测试：

没毛病。

1.3.4 添加渲染模板

在大多数情况下，数据通常在呈现给用户之前由模板读取、处理和呈现。

因此我们需要引入相应的模板引擎来处理它。

Egg 不强制使用任何特定的模板引擎，而是指定View Plugins Specification以允许开发人员使用不同的插件来满足他们的个人需求。

有关更多信息，请参阅。查看.

在本例中，我们将使用Nunjucks。

首先安装对应的插件，egg-view-nunjucks

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

启用它：

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

// config/config.default.js
exports.keys = ;
// add view's configurations
exports.view = {
  defaultViewEngine: 'nunjucks',
  mapping: {
    '.tpl': 'nunjucks',
  },
};
1
2
3
4
5
6
7
8
9

这个配置要小心，config目录，不是app/config

然后为index页面创建一个模板。这通常进入 app/view 目录。

  
    
    
  
  
    

      {% for item in list %}
      

        {{ item.title }}
      
      {% endfor %}
    
  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

然后添加控制器和路由器：

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

class NewsController extends Controller{
    async list(){
        const dataList = {
            list: [
                {id:1,title:'这是新闻1',url:'/news/1'},
                {id:2,title:'这是新闻2',url:'/news/2'},
            ],
        };
        await this.ctx.render('news/list.tpl',dataList);
    }
}

module.exports = NewsController;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

重启服务，访问路径 http://localhost:7001/news

提示：在开发中，Egg 默认启用开发插件，当您的后端代码发生更改时，它会重新加载您的工作进程。

不错