egg.js使用模板和静态资源

官方文档地址:https://eggjs.org/zh-cn/core/view.html
1.首先安装view 插件
npm i egg-view-nunjucks --save
2.启用插件

// config/plugin.js
module.exports = {

    //...其它配置

    nunjucks: {
        enable: true,
        package: 'egg-view-nunjucks',
    },
};

3.配置插件

//config/config.default.js


const path = require('path');
module.exports = appInfo => {

    const config = exports = {};

   //...其它配置
  
   //模板配置
    config.view = {
        defaultViewEngine: 'nunjucks',
        mapping: {
            '.html': 'nunjucks'
        }
    };

   //静态资源配置
    config.static = {
        prefix: '/',
        dir: path.join(appInfo.baseDir, 'app/public'),
    };

    return {
        ...config,
    };
};

4.配置路由

//router.js
router.get('/login', controller.public.login);

5.controller控制器配置
在controller文件夹新增一个public.js

//controller/public.js
'use strict';
 
const Controller = require('egg').Controller;
 
class PublicController extends Controller {
    async login() {
        let title = "登录页",
            footer = "Copyright © XXXXXXX",
            name = "XXX后台管理系统";
        await this.ctx.render('login',{
            title,
            footer,
            name
        });
    }
}
 
module.exports = PublicController;

然后再app/view文件夹里面新增 login.html




    
    
    
    
    {{title}}
    
    
    



    
    
{{footer}}

常用模板语法可自行百度

ps:github https://github.com/eggjs/egg-static上提供的静态资源配置,缓存超级严重。

egg.js使用模板和静态资源_第1张图片
image.png

你可能感兴趣的:(egg.js使用模板和静态资源)