5分钟上手Egg.js+nunjucks模板引擎快速开发SEO友好的官网项目

时间 2020-06-14

标签 5分上手 egg.js+nunjucks egg nunjucks 模板引擎快速开发 seo 友好项目栏目 JavaScript 繁體版

原文原文链接

在平常的项目中，有时候仍是不可避免的会维护一些jq官网项目等。面对此类需求，不少仍是之前的老套路，前端写页面交给后端去套数据。很烦有木有～～而改动以后还得交给后端再次修改，时间和沟通都是个麻烦。同时开发中，写静态页面也很麻烦，不能复用，不能使用如今的工具，心累有木有～～固然了，解决办法不少javascript

本身写个webpack脚本维护起来，把工程化的那一套东西搬过来。
使用现成的nust\next等服务端渲染框架
借助于node+模板引擎等
...

而本文介绍一下node的egg.js框架配合模板引擎来快速开发项目的模式。上手简单快速，一我的搞定先后端。PS：又能够学习新知识来，我好（草）开（泥）心（马），奥利给～～～css

初始化项目

# 初始化
cnpm init egg --type=simple

# 安装依赖
cnpm i

# 启动服务
npm run dev
复制代码

简单看下生成的文件目录（ps：个别文件是没有的，后期本身添加的）html

基本介绍

先介绍一下egg中app下的这些文件的基本做用，有个大概的概念：前端

app/router.js中编写路由
app/controller/下编写对应的控制器
app/service/下编写service
app/view/下编写对应的模板

路由编写

路由，相似前端项目中的路由。是用来定义请求的URL。
当用户访问该路由地址时，将映射到对应的controller进行进一步的处理。
因而可知，路由router就是定义和controller之间的一种映射关系。

定义路由，首先要打开app/router.js文件，在里面进行定义，例如：vue

'use strict';

module.exports = app => {
  const { router, controller } = app;
  // 定义首页的路由
  // 即当直接访问域名的时候，将请求映射到controller.home.home中进行进一步的处理
  router.get('/', controller.home.home);
  // 定义关于咱们的路由
  router.get('/about', controller.home.about);
  // 定义新闻详情的路由
  router.get('/details/:id', controller.home.details);
};
复制代码

此处的路由能够理解为就是咱们访问的域名后面的具体的路径地址。例如xxx.com/about中的/aboutjava
controller.xx.xx是指当咱们访问了这个路由的时候，服务将当前路由映射到这个控制器中。具体的控制器做用，下面会详细介绍。node

控制器Controller

控制器，主要的做用就是处理用户请求的参数，而后能够调用service服务获得咱们须要的数据，最后返回数据或者直接渲染出一个模板。
而咱们这里则是根据router（router参数非必须）渲染出一个页面，也就是渲染一个html页面返回，这样浏览器打开的就直接是页面了。

'use strict';

const Controller = require('egg').Controller;

class HomeController extends Controller {
  async home() {
    const { ctx } = this;
    await ctx.render('index.njk')
  }
}

module.exports = HomeController

// 或者你也能够简化一下写法
module.exports = class extends require('egg').Controller {
    // ...
}
复制代码

经过调用ctx.render('index.njk')方法，咱们将渲染一个模板并返回（能够理解为返回给浏览器）
在渲染模板的时候咱们也能够给模板传递一个数据对象，ctx.render('index.njk', {})，而后模板内就能够经过模板引擎的语法渲染咱们的数据了。
通常这个数据是经过service读取的数据库或者调用其余接口获得的数据。这个会在下面的service中讲到。

下面演示一个调用service的例子：jquery

// app/controller/home.js

'use strict';
module.exports = class extends require('egg').Controller {
    async details() {
    const { ctx } = this;
    try {
        // 调用service的home模块中的details服务
        // 获得数据后，塞给静态模板使用
        const data = await ctx.service.home.details(ctx.params.id)
        // 渲染一个模板
        await ctx.render('details.njk', data)
    } catch (error) {
      ctx.body = '新闻获取出错'
    }
  }
}

复制代码

关于模板相关的内会在下面详细讲解
关于service的定义和使用接下来立刻讲解

Service服务

service服务主要是用来作什么的呢？上面在controller中也提到了，主要用来获取数据，拿到数据以后也能够格式化再返回给controller使用。webpack

下面演示一个service调用某些接口服务获得数据并返回给controller使用：ios

// 首先须要在app/下新建service文件夹
// 而后在service下新建home.js，最终为app/service/home.js

'use strict';

module.exports = class extends require('egg').Service {
    // 根据文章id获取文章数据
    // 此处的id是controll调用service服务时传递的id
    async details(id) {
        try {
            const url = `https:xxxx.com/api/${id}`
            const { data } = await this.ctx.curl(url, { dataType: 'json' })
            if (data.data && data.code === 200) {
                // 此处也能够对数据进行处理后再返回
                
                // 返回数据
                return data.data
            }
            throw '数据获取失败'
        } catch (error) {
          throw error
        }
    }

}
复制代码

之因此叫home.js，是由于咱们controller中使用的是ctx.service.home
service.home中的home就是service文件的文件名称
此处进行了最简单的数据获取，经过this.ctx.curl方法请求其余接口的数据。相似于使用axios获取数据的操做。
固然了，也能够进行数据库数据的增删改查操做，本次就不作演示了，后面会考虑新开一篇egg作项目开发的文章再详细介绍吧。
此处对于接口的域名配置能够放在配置文件中
对于curl方法也能够进一步的封装在helper中
对于数据返回的拦截也能够封装在中间件进行拦截
对于上面这些内容有兴趣的能够翻看egg文件中相应的说明，仍是蛮详细的。

模板渲染

定义好了基本的路由、控制器和service以后，就剩下模板了。首先模板，多是前端小伙伴写的静态页面给到咱们的（ps：这个前端充气小伙伴或许就是咱们本身！哦呸，不是充气的）

好了，言归正传！Egg中有关于模板渲染的文档，能够看一下。Egg自己内置了egg-view做为模板的解决方案，其中View支持插件egg-view-nunjucks，本文也是经过该插件进行的模板开发。

# 首先安装
cnpm i egg-view-nunjucks --save

# 而后在根目录下的config/plugin.js中使用插件
'use strict';

module.exports = {
  nunjucks: {
    enable: true,
    package: 'egg-view-nunjucks',
  }
};

# 完成了插件的安装和引入，咱们还须要配置插件的参数
# 根目录下的config/config.default.js中
module.exports = appInfo => {
    // 其余代码
    // ...
    
    // 配置咱们的插件参数
    config.view = {
        // 定义映射的文件后缀名
        // 此处咱们定义为.njk，那么咱们的模板都须要以.njk结束，
        // 这样该类型的文件才会被咱们的模板插件进行处理
        mapping: {
          '.njk': 'nunjucks',
        }
    }

    // 其余代码
    // ...
}
复制代码

注意，若是不叫.njk也是能够的，这个是自定义的，只要知足你的模板文件的后缀名和你定义的同样就行，这样才会被插件处理。
egg-view-nunjucks封装的是nunjucks,nunjucks推荐叫.njk

egg-view-nunjucks文档 nunjucks文档

有了模板引擎，咱们嵌套数据等就会方便不少了。下面来简单看下一个模板的文件夹：

如上图所示，须要新建app/view文件夹，全部的模板放在该文件夹下。这个也是能够经过配置修改的（若是你有需求的话）；
上面的模板文件，根据你的项目来，这里仅做为演示。一般的，咱们可能会把页面一些通用的头部啊、底部、菜单等单独抽离处理复用，具体的仍是看你的项目。

下面咱们简单看下base.njk这个模板，作了什么事情：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{% block title %}title默认内容{% endblock %}</title>
    <meta name="keywords" content="{% block keywords %}keywords默认内容{% endblock %}">
    <meta name="description" content="{% block description %}description默认内容{% endblock %}">
    

    <link rel="stylesheet" type="text/css" href="../../public/css/base.css">
    {% block head %}{% endblock %}
  </head>

  <body>
    <!-- 主体内容部分 -->
    {% block content %}{% endblock %}

    <script src="../../public/js/jquery.js"></script>
    <!-- script部分 -->
    {% block script %}{% endblock %}
  </body>
</html>
复制代码

不少时候，静态页面基本的结构都是同样的，或者说相似的。因此咱们能够定义一个基本的模板，而后全部的页面继承咱们这个基础的模板就好。如何继承，后面会讲。
好比，这里咱们定义的基本模板中有头部，可是头部中的title等内容可能各个页面不同，因此咱们自定义一个block块，这样就能够在页面中替换掉这块的内容。有些相似于vue的slot插槽。

// 定义block块
{% block title %}默认内容{% endblock %}
复制代码

简单说一下这里我的定义的几个基本的block的做用吧：

名称	说明
head块	用于在head内最底部插入一些代码。例如，公共模板引入了公共css，可是每一个页面还有可能单独引入css，全局只有一个css文件的除外
content块	用于放置每一个页面的主体部分
script块	用于放置每一个页面须要单独引入的js文件

定义好了基本的模板和块，下面咱们看下页面中如何使用：

{% extends "./base/base.njk" %}

{% block title %}这是一个新的title{% endblock %}
{% block description %}这是一个新的description{% endblock %}
{% block keywords %}壹沓科技,加入壹沓,联系咱们{% endblock %}
{% set navActive = "about" %}

{% block head %}
  <link rel="stylesheet" href="../public/css/swiper.min.css">
{% endblock %}

{% block content %}
  <div class="page-wrapper">
    <!-- 导入公共的nav模板 -->
    {% include './base/nav.njk' %}

    <!-- 背景图 -->
    <section class="banner-wrapper">
      <img src="../public/img/icon/about-banner.jpg" alt="背景LOGO">
      <span>{{ userName }}</span>
    </section>
    
    <!-- 渲染html模板演示 -->
    <div>{{content | safe}}</div>

    <!-- 导入公共的底部模板 -->
    {% include './base/foot.njk' %}
  </div>
{% endblock %}

{% block script %}
  <script src="../public/js/swiper.min.js"></script>
  <script src="../public/js/about.js"></script>
{% endblock %}
复制代码

经过上面一个简单的模板，却包含了最经常使用和最关键的不少特性。首先第一行，咱们要让当前页面继承咱们定义的基础模板：

// 相对路径便可
{% extends "./base/base.njk" %}
复制代码

覆盖咱们在基础模板中自定义的块。也能够理解为给vue的slot传入新的内容：

// 例如，设置该页面的title
// 若是不设置，就会使用基础模板中默认的
{% block title %}这是一个新的title{% endblock %}
复制代码

设置变量，在当前模板中均可以使用。包括引入的其余模板，只要是出如今了当前模板中，均可以取到该值进行使用。

// 定义了一个navActive变量
// 后面会讲解一个常见的场景
{% set navActive = "about" %}
复制代码

使用变量、渲染内容/html

// 变量的使用，和vue的{{}}插值同样
// 好比这个userName是咱们从controller中调用service获取的数据对象中的一个属性，
// 而后把对象传递给了模板，
// 那么在模板中能够直接取对象中的属性进行渲染
// 注意，传递给模板的是一个对象，例如{userName: 'jack'},可是咱们使用的时候直接取userName
{{userName}}


// 一样的，咱们在模板内定义的变量也能够直接使用的

// 渲染html，好比很常见的富文本
// 相似vue的过滤器，这个safe是内置的，
// 过滤器也能够自定义，具体的查看文档吧
{{content | safe}}
复制代码

引入其余模板。好比上面能够看到，咱们继承了基础的模板，可是咱们还能够会提取一些公共的像nav模板进行复用。

// 导入咱们的nav模板
{% include './base/nav.njk' %}
复制代码

nav模板通常很常见的会有这么一个场景，好比就是当前页面选项须要高亮。来，先看一下nav模板：

<!-- 导航头部 -->
<nav class="nav-wrapper">
  <ul class="menu-content">
    <li>
      <a href="/news" class="{{ 'active' if navActive == 'news' else '' }}">动态资讯</a>
    </li>
    <li>
      <a href="/about" class="{{ 'active' if navActive == 'about' else '' }}">关于咱们</a>
    </li>
  </ul>
</nav>
复制代码

能够看到，咱们对class名进行了一个if判断，判断当变量navActive是某些值的时候给他增长一个active类名，不然就是各空的class名。这里仔细注意一下写法便可。那么咱们怎么定义变量呢？此时再回到上面定义变量的部分介绍，咱们已经在页面中定义了一个变量navActive，因此咱们只须要每一个页面定义一个navActive且值为咱们须要的便可了。

最后再补充说明一下，模板内的调整路径，就直接写成咱们在router.js中定义的路由便可，而不是写的模板地址。

// a标签跳转
<a href="/news"></a>

// js调整也是同样，使用router.js定义的路由
window.location.href="/news"
复制代码

百尺竿头、日进一步我是大家的老朋友愣锤～喜欢的小伙伴欢迎关注点赞，一块儿分享交流更多的前端好玩技术！