Egg

Egg

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

文章目录

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

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

启用它：

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

// config/config.default.js
exports.keys = ;
// add view's configurations
exports.view = {defaultViewEngine: 'nunjucks',mapping: {'.tpl': 'nunjucks',},
};

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

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

{% for item in list %}
{ item.url }}">{{ item.title }}
{% endfor %}

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

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;

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

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

不错