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进行实时编译,希望能获得您的指点。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,456评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,763评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,265评论 0 238
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,716评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,071评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,435评论 1 212
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,751评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,437评论 0 195
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,148评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,411评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,912评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,281评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,913评论 3 234
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,020评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,776评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,462评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,350评论 2 262

推荐阅读更多精彩内容