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

news2024/12/25 2:11:28

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 = <YOUR_SECURITY_COOKE_KEYS>;
// add view's configurations
exports.view = {
  defaultViewEngine: 'nunjucks',
  mapping: {
    '.tpl': 'nunjucks',
  },
};

在这里插入图片描述

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

在这里插入图片描述

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

<!-- app/view/news/list.tpl -->
<html>
  <head>
    <title>Egg HackerNews Clone</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>

在这里插入图片描述

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

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;

在这里插入图片描述