eggjs+nunjucks前后端分离seo友好的前端静态页面

利用egg.js脚手架项目初始化

公司需要做公司的一个官网项目,需要做seo,之前使用nuxt.js框架,后期感觉虽然基于vue.js框架来书写代码很方便,但是在一些配置方便感觉很不爽,在源码中会渲染一些数据源的东西,很乱,所以这次选择使用egg.js+nunjucks的渲染方式,基础数据处理还是后端java提供服务,然后通过本框架获取后端数据,在通过模板渲染,发现nunjuck的模板渲染功能十分强大且优秀,也十分方便。egg.js提供的egg-bin模块也十分强大,处理能力极强,且省去了pm2的监听守护,用起来十分方便。下面介绍一下怎么使用这些技术搭建一个自己的框架。

这里是项目地址,欢迎大家指正。

  • 首先创建一个文件目录并切换至该目录
    mkdir egg-njk && cd egg-njk
  • 项目初始化
    npm init egg --type=simple
  • 安装项目必要插件
    npm i
  • 项目启动
    开发:npm run dev
    生产:npm run start
    停止:npm run stop

使用egg-view-nunjucks插件

  • 安装egg-view-nunjucks
    npm i egg-view-nunjucks --save
  • 使用插件
    // config/plugin.js
    'use strict';

    /** @type Egg.EggPlugin */
    
    const nunjucks = {
      enable: true,
      package: 'egg-view-nunjucks',
    };
    module.exports = {
      nunjucks,
      // had enabled by egg
      // static: {
      //   enable: true,
      // }
    };

    
    // config/config.default.js
    // 添加 view 配置
    config.view = {
        defaultViewEngine: 'nunjucks',
        mapping: {
          '.tpl': 'nunjucks',
        },
    };
  • 创建一个controller

使用vscode插件库提供的eggjs插件能快速的生成代码结构

    // app/controller/home.js
    'use strict';

    const Controller = require('egg').Controller;
    
    class HomeController extends Controller {
      async index() {
        const { ctx } = this;
        const text = '首页';
        await ctx.render('home.tpl', { text });
      }
    }
    
    module.exports = HomeController;
  • 创建一个页面模板
    // app/view/home.tpl
    
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>首页</title>
        </head>
        <body>
            <div>{{text}}</div>
        </body>
    </html>

此时启动项目,已经可以看到一个页面,下面我们来看看nunjucks怎么用?

nunjucks使用

  • 创建项目模板
    <!--app/view/layout/layout.tpl-->
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            {% block description %}
                <meta name="description" itemprop="description" content="description继承">
            {% endblock %}
            {% block keywords %}
                <meta name="keywords" content="keywords继承">
            {% endblock %}
            {% block stylesheet %}{% endblock %}
            <title>{% block title %} egg-huk {% endblock %}</title>
        </head>
        <body>
            <div id="header">
                {% block header %} {% endblock %}
            </div>
            <div id="main">
                {% block main %} {% endblock %}
            </div>
            <div id="footer">
                {% block footer %} {% endblock %}
            </div>
        </body>
        {% block script %}{% endblock %}
    </html>
  • 创建公共模块
    <!--app/view/commons/header.tpl-->
    <div>头部</div>
    
    <!--app/view/commons/footer.tpl-->
    <div>底部</div>
  • 修改home.tpl以使用模板继承
    <# app/view/home.tpl #>
    {# 继承自全局的layout模板 #}
    {% extends "./layout/layout.tpl" %}
    {# 独立引入的css #}
    {% block stylesheet %}{% endblock %}
    {# header #}
    {% block header %}
      {% include "./commons/header.tpl" %}
    {% endblock %}
    {# 页面主体 #}
    {% block main %}
        <div>
            <span>{{text}}</span>
        </div>
    {% endblock %}
    {# header #}
    {% block footer %}
      {% include "./commons/footer.tpl" %}
    {% endblock %}
    {% block script %}{% endblock %}

如果需要使用到css、js、images等文件,需要在public文件夹下创建文件/文件夹 然后在模板中引入,layout文件中引入公共css/js模块,在.tpl文件中通过继承引入各自独立的css/js文件

  • layout.tpl 引入公共模块
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        {% block description %}
            <meta name="description" itemprop="description" content="description继承">
        {% endblock %}
        {% block keywords %}
            <meta name="keywords" content="keywords继承">
        {% endblock %}
        <link rel="stylesheet" href="/public/css/reset.min.css">
        <link rel="stylesheet" href="/public/css/animate.min.css">
        <link rel="stylesheet" href="/public/css/bootstrap.min.css">
        {% block stylesheet %}{% endblock %}
        <title>{% block title %} egg-huk {% endblock %}</title>
    </head>
    <body>
        <div id="header">
            {% block header %} {% endblock %}
        </div>
        <div id="main">
            {% block main %} {% endblock %}
        </div>
        <div id="footer">
            {% block footer %} {% endblock %}
        </div>
    </body>
        <script src="/public/js/jquery-3.4.1.min.js"></script>
        <script src="/public/js/bootstrap.min.js"></script>
        {% block script %}{% endblock %}
    </html>
  • home.tpl中继承独立的文件
    {# 继承自全局的layout模板 #}
    {% extends "./layout/layout.tpl" %}
    {# 独立引入的css #}
    {% block stylesheet %}
        <link rel="stylesheet" href="/public/css/home.min.css">
    {% endblock %}
    {# header #}
    {% block header %}
      {% include "./commons/header.tpl" %}
    {% endblock %}
    {# 页面主体 #}
    {% block main %}
        <div class="content">
            <span>{{text}}</span>
        </div>
    {% endblock %}
    {# header #}
    {% block footer %}
      {% include "./commons/footer.tpl" %}
    {% endblock %}
    {% block script %}
        <script src="/public/js/home.js"></script>
    {% endblock %}

egg.js遵循mvc模式,数据处理请放在service文件中

    // app/config/default.js
    
    // add you api config here
    // config.api = 'https://xxx.xxxx.com/';
    
    // app/service/home.js
    'use strict';

    const Service = require('egg').Service;
    
    class HomeService extends Service {
      async getList() {
        // const { config } = this;
        // const api = config.api;
        // console.log(api);
        const userList = [
          {
            name: 'leehan',
            age: 22,
            sex: 1,
          },
          {
            name: 'spider man',
            age: 16,
            sex: 1,
          },
          {
            name: '猩红女巫',
            age: 20,
            sex: 2,
          },
          {
            name: '灭霸',
            age: 40,
            sex: null,
          },
        ];
        return userList;
      }
    }
    
    module.exports = HomeService;

  • 在controller中调用
    'use strict';

    const Controller = require('egg').Controller;
    
    class HomeController extends Controller {
      async index() {
        const { ctx, service } = this;
        const userList = await service.home.getList();
        await ctx.render('home.tpl', { userList });
      }
    }
    
    module.exports = HomeController;
  • 在页面中渲染数据
    {# 继承自全局的layout模板 #}
    {% extends "./layout/layout.tpl" %}
    {# 独立引入的css #}
    {% block stylesheet %}
        <link rel="stylesheet" href="/public/css/home.min.css">
    {% endblock %}
    {# header #}
    {% block header %}
      {% include "./commons/header.tpl" %}
    {% endblock %}
    {# 页面主体 #}
    {% block main %}
        <ul class="content">
            {% for item in userList %}
                <li>
                    <i>序号</i>:<span>{{loop.index}}</span>
                    <i>姓名</i>:<span>{{item.name}}</span>
                    <i>年龄</i>:<span>{{item.age}}</span>
                    <i>性别</i>:<span>{{item.sex | getSex}}</span>
                </li>
            {% endfor %}
        </ul>
    {% endblock %}
    {# header #}
    {% block footer %}
      {% include "./commons/footer.tpl" %}
    {% endblock %}
    {% block script %}
        <script src="/public/js/home.js"></script>
    {% endblock %}

框架地址:egg-njk 如果需要可以下载之后改一改直接使用

==注意:== 项目中想要引入sass进行编译,但是没有找到好的方法,所以使用了vscode的easy-sass插件进行编译,如果哪位了解这里应该怎么使用sass进行实时编译,希望能获得您的指点。

推荐阅读更多精彩内容

  • 整体项目代码钢材信息小程序开发总结(一) --- 整体介绍钢材信息小程序开发总结(二) ---uniapp 这次是...
    ZZES_ZCDC阅读 856评论 0 6
  • 一、Egg.js 是什么? 由阿里巴巴团队开源的一套基于koa的应用框架,已经在集团内部服务了大量的nodejs系...
    朝朝_c53e阅读 227评论 0 0
  • 官方文档地址:https://eggjs.org/zh-cn/core/view.html1.首先安装view 插...
    索哥来了阅读 2,273评论 0 0
  • 一:什么是egg.js? egg.js是nodejs 的一个框架,是基于koa框架的基础上整合的一套上层框架,既定...
    梦想成真213阅读 3,040评论 0 4
  • 1.编码规范 1.1 编码格式与语法 项目默认编码格式统一为UTF-8格式,语法采用ES6+语法 1.2 代码注释...
    中v中阅读 1,967评论 0 3
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 6,784评论 16 21
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    迷月闪星情阅读 9,748评论 0 10
  • 可爱进取,孤独成精。努力飞翔,天堂翱翔。战争美好,孤独进取。胆大飞翔,成就辉煌。努力进取,遥望,和谐家园。可爱游走...
    赵原野阅读 2,351评论 1 1
  • 在妖界我有个名头叫胡百晓,无论是何事,只要找到胡百晓即可有解决的办法。因为是只狐狸大家以讹传讹叫我“倾城百晓”,...
    猫九0110阅读 2,694评论 7 3