5分鐘上手Egg.js+nunjucks模板引擎快速開發(fā)SEO友好的官網(wǎng)項(xiàng)目

時(shí)間：2023-06-06 13:36:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-06-06 13:36:01 來源：網(wǎng)站運(yùn)營

5分鐘上手Egg.js+nunjucks模板引擎快速開發(fā)SEO友好的官網(wǎng)項(xiàng)目：在日常的項(xiàng)目中，有時(shí)候還是不可避免的會(huì)維護(hù)一些jq官網(wǎng)項(xiàng)目等。面對(duì)此類需求，很多還是以前的老套路，前端寫頁面交給后端去套數(shù)據(jù)。很煩有木有～～而改動(dòng)之后還得交給后端再次修改，時(shí)間和溝通都是個(gè)麻煩。同時(shí)開發(fā)中，寫靜態(tài)頁面也很麻煩，不能復(fù)用，不能使用現(xiàn)在的工具，心累有木有～～當(dāng)然了，解決辦法很多

• 自己寫個(gè)webpack腳本維護(hù)起來，把工程化的那一套東西搬過來。
• 使用現(xiàn)成的nust/next等服務(wù)端渲染框架
• 借助于node+模板引擎等
• ...

而本文介紹一下node的egg.js框架配合模板引擎來快速開發(fā)項(xiàng)目的模式。上手簡單快速，一個(gè)人搞定前后端。PS：又可以學(xué)習(xí)新知識(shí)來，我好（草）開（泥）心（馬），奧利給～～～

初始化項(xiàng)目

# 初始化 cnpm init egg --type=simple ? # 安裝依賴 cnpm i ? # 啟動(dòng)服務(wù) npm run dev簡單看下生成的文件目錄（ps：個(gè)別文件是沒有的，后期自己添加的）

基本介紹

先介紹一下egg中app下的這些文件的基本作用，有個(gè)大概的概念：

• app/router.js中編寫路由
• app/controller/下編寫對(duì)應(yīng)的控制器
• app/service/下編寫service
• app/view/下編寫對(duì)應(yīng)的模板

路由編寫

• 路由，類似前端項(xiàng)目中的路由。是用來定義請(qǐng)求的URL。
• 當(dāng)用戶訪問該路由地址時(shí)，將映射到對(duì)應(yīng)的controller進(jìn)行進(jìn)一步的處理。
• 由此可見，路由router就是定義和controller之間的一種映射關(guān)系。

定義路由，首先要打開app/router.js文件，在里面進(jìn)行定義，例如：

'use strict'; ? module.exports = app => { const { router, controller } = app; // 定義首頁的路由 // 即當(dāng)直接訪問域名的時(shí)候，將請(qǐng)求映射到controller.home.home中進(jìn)行進(jìn)一步的處理 router.get('/', controller.home.home); // 定義關(guān)于我們的路由 router.get('/about', controller.home.about); // 定義新聞詳情的路由 router.get('/details/:id', controller.home.details); };

• 此處的路由可以理解為就是我們?cè)L問的域名后面的具體的路徑地址。例如xxx.com/about中的/about
• controller.xx.xx是指當(dāng)我們?cè)L問了這個(gè)路由的時(shí)候，服務(wù)將當(dāng)前路由映射到這個(gè)控制器中。具體的控制器作用，下面會(huì)詳細(xì)介紹。

控制器Controller

• 控制器，主要的作用就是處理用戶請(qǐng)求的參數(shù)，然后可以調(diào)用service服務(wù)得到我們需要的數(shù)據(jù)，最后返回?cái)?shù)據(jù)或者直接渲染出一個(gè)模板。
• 而我們這里則是根據(jù)router（router參數(shù)非必須）渲染出一個(gè)頁面，也就是渲染一個(gè)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 { // ... }

• 通過調(diào)用ctx.render('index.njk')方法，我們將渲染一個(gè)模板并返回（可以理解為返回給瀏覽器）
• 在渲染模板的時(shí)候我們也可以給模板傳遞一個(gè)數(shù)據(jù)對(duì)象，ctx.render('index.njk', {})，然后模板內(nèi)就可以通過模板引擎的語法渲染我們的數(shù)據(jù)了。
• 一般這個(gè)數(shù)據(jù)是通過service讀取的數(shù)據(jù)庫或者調(diào)用其他接口得到的數(shù)據(jù)。這個(gè)會(huì)在下面的service中講到。

下面演示一個(gè)調(diào)用service的例子：

// app/controller/home.js ? 'use strict'; module.exports = class extends require('egg').Controller { async details() { const { ctx } = this; try { // 調(diào)用service的home模塊中的details服務(wù) // 得到數(shù)據(jù)后，塞給靜態(tài)模板使用 const data = await ctx.service.home.details(ctx.params.id) // 渲染一個(gè)模板 await ctx.render('details.njk', data) } catch (error) { ctx.body = '新聞獲取出錯(cuò)' } } } ?

• 關(guān)于模板相關(guān)的內(nèi)會(huì)在下面詳細(xì)講解
• 關(guān)于service的定義和使用接下來馬上講解

Service服務(wù)

service服務(wù)主要是用來做什么的呢？上面在controller中也提到了，主要用來獲取數(shù)據(jù)，拿到數(shù)據(jù)之后也可以格式化再返回給controller使用。

下面演示一個(gè)service調(diào)用某些接口服務(wù)得到數(shù)據(jù)并返回給controller使用：

// 首先需要在app/下新建service文件夾 // 然后在service下新建home.js，最終為app/service/home.js ? 'use strict'; ? module.exports = class extends require('egg').Service { // 根據(jù)文章id獲取文章數(shù)據(jù) // 此處的id是controll調(diào)用service服務(wù)時(shí)傳遞的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) { // 此處也可以對(duì)數(shù)據(jù)進(jìn)行處理后再返回 // 返回?cái)?shù)據(jù) return data.data } throw '數(shù)據(jù)獲取失敗' } catch (error) { throw error } } ? }

• 之所以叫home.js，是因?yàn)槲覀?code>controller中使用的是ctx.service.home
• service.home中的home就是service文件的文件名稱
• 此處進(jìn)行了最簡單的數(shù)據(jù)獲取，通過this.ctx.curl方法請(qǐng)求其他接口的數(shù)據(jù)。類似于使用axios獲取數(shù)據(jù)的操作。
• 當(dāng)然了，也可以進(jìn)行數(shù)據(jù)庫數(shù)據(jù)的增刪改查操作，本次就不做演示了，后面會(huì)考慮新開一篇egg做項(xiàng)目開發(fā)的文章再詳細(xì)介紹吧。
• 此處對(duì)于接口的域名配置可以放在配置文件中
• 對(duì)于curl方法也可以進(jìn)一步的封裝在helper中
• 對(duì)于數(shù)據(jù)返回的攔截也可以封裝在中間件進(jìn)行攔截
• 對(duì)于上面這些內(nèi)容有興趣的可以翻看egg文件中相應(yīng)的說明，還是蠻詳細(xì)的。

模板渲染

定義好了基本的路由、控制器和service之后，就剩下模板了。首先模板，可能是前端小伙伴寫的靜態(tài)頁面給到我們的（ps：這個(gè)前端充氣小伙伴或許就是我們自己！哦呸，不是充氣的）

好了，言歸正傳！Egg中有關(guān)于模板渲染的文檔，可以看一下。Egg本身內(nèi)置了egg-view作為模板的解決方案，其中View支持插件egg-view-nunjucks，本文也是通過該插件進(jìn)行的模板開發(fā)。

# 首先安裝 cnpm i egg-view-nunjucks --save ? # 然后在根目錄下的config/plugin.js中使用插件 'use strict'; ? module.exports = { nunjucks: { enable: true, package: 'egg-view-nunjucks', } }; ? # 完成了插件的安裝和引入，我們還需要配置插件的參數(shù) # 根目錄下的config/config.default.js中 module.exports = appInfo => { // 其他代碼 // ... // 配置我們的插件參數(shù) config.view = { // 定義映射的文件后綴名 // 此處我們定義為.njk，那么我們的模板都需要以.njk結(jié)束， // 這樣該類型的文件才會(huì)被我們的模板插件進(jìn)行處理 mapping: { '.njk': 'nunjucks', } } ? // 其他代碼 // ... }

• 注意，如果不叫.njk也是可以的，這個(gè)是自定義的，只要滿足你的模板文件的后綴名和你定義的一樣就行，這樣才會(huì)被插件處理。
• egg-view-nunjucks封裝的是nunjucks,nunjucks推薦叫.njk

egg-view-nunjucks文檔 nunjucks文檔

有了模板引擎，我們嵌套數(shù)據(jù)等就會(huì)方便很多了。下面來簡單看下一個(gè)模板的文件夾：

• 如上圖所示，需要新建app/view文件夾，所有的模板放在該文件夾下。這個(gè)也是可以通過配置修改的（如果你有需求的話）；
• 上面的模板文件，根據(jù)你的項(xiàng)目來，這里僅作為演示。通常的，我們可能會(huì)把頁面一些通用的頭部啊、底部、菜單等單獨(dú)抽離處理復(fù)用，具體的還是看你的項(xiàng)目。

下面我們簡單看下base.njk這個(gè)模板，做了什么事情：

<!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默認(rèn)內(nèi)容{% endblock %}</title> <meta name="keywords" content="{% block keywords %}keywords默認(rèn)內(nèi)容{% endblock %}"> <meta name="description" content="{% block description %}description默認(rèn)內(nèi)容{% endblock %}"> ? <link rel="stylesheet" type="text/css" href="../../public/css/base.css"> {% block head %}{% endblock %} </head> ? <body> <!-- 主體內(nèi)容部分 --> {% block content %}{% endblock %} ? <script src="../../public/js/jquery.js"></script> <!-- script部分 --> {% block script %}{% endblock %} </body> </html>

• 很多時(shí)候，靜態(tài)頁面基本的結(jié)構(gòu)都是一樣的，或者說類似的。所以我們可以定義一個(gè)基本的模板，然后所有的頁面繼承我們這個(gè)基礎(chǔ)的模板就好。如何繼承，后面會(huì)講。
• 比如，這里我們定義的基本模板中有頭部，但是頭部中的title等內(nèi)容可能各個(gè)頁面不一樣，所以我們自定義一個(gè)block塊，這樣就可以在頁面中替換掉這塊的內(nèi)容。有些類似于vue的slot插槽。

// 定義block塊 {% block title %}默認(rèn)內(nèi)容{% endblock %}

• 簡單說一下這里個(gè)人定義的幾個(gè)基本的block的作用吧：

名稱說明head塊用于在head內(nèi)最底部插入一些代碼。例如，公共模板引入了公共css，但是每個(gè)頁面還有可能單獨(dú)引入css，全局只有一個(gè)css文件的除外content塊用于放置每個(gè)頁面的主體部分script塊用于放置每個(gè)頁面需要單獨(dú)引入的js文件

定義好了基本的模板和塊，下面我們看下頁面中如何使用：

{% extends "./base/base.njk" %} ? {% block title %}這是一個(gè)新的title{% endblock %} {% block description %}這是一個(gè)新的description{% endblock %} {% block keywords %}壹沓科技,加入壹沓,聯(lián)系我們{% endblock %} {% set navActive = "about" %} ? {% block head %} <link rel="stylesheet" href="../public/css/swiper.min.css"> {% endblock %} ? {% block content %} <div class="page-wrapper"> <!-- 導(dǎo)入公共的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> ? <!-- 導(dǎo)入公共的底部模板 --> {% include './base/foot.njk' %} </div> {% endblock %} ? {% block script %} <script src="../public/js/swiper.min.js"></script> <script src="../public/js/about.js"></script> {% endblock %}

• 通過上面一個(gè)簡單的模板，卻包含了最常用和最關(guān)鍵的很多特性。首先第一行，我們要讓當(dāng)前頁面繼承我們定義的基礎(chǔ)模板：

// 相對(duì)路徑即可 {% extends "./base/base.njk" %}

• 覆蓋我們?cè)诨A(chǔ)模板中自定義的塊。也可以理解為給vue的slot傳入新的內(nèi)容：

// 例如，設(shè)置該頁面的title // 如果不設(shè)置，就會(huì)使用基礎(chǔ)模板中默認(rèn)的 {% block title %}這是一個(gè)新的title{% endblock %}

• 設(shè)置變量，在當(dāng)前模板中都可以使用。包括引入的其他模板，只要是出現(xiàn)在了當(dāng)前模板中，都可以取到該值進(jìn)行使用。

// 定義了一個(gè)navActive變量 // 后面會(huì)講解一個(gè)常見的場(chǎng)景 {% set navActive = "about" %}

• 使用變量、渲染內(nèi)容/html

// 變量的使用，和vue的{{}}插值一樣 // 比如這個(gè)userName是我們從controller中調(diào)用service獲取的數(shù)據(jù)對(duì)象中的一個(gè)屬性， // 然后把對(duì)象傳遞給了模板， // 那么在模板中可以直接取對(duì)象中的屬性進(jìn)行渲染 // 注意，傳遞給模板的是一個(gè)對(duì)象，例如{userName: 'jack'},但是我們使用的時(shí)候直接取userName {{userName}} ? ? // 同樣的，我們?cè)谀０鍍?nèi)定義的變量也可以直接使用的 ? // 渲染html，比如很常見的富文本 // 類似vue的過濾器，這個(gè)safe是內(nèi)置的， // 過濾器也可以自定義，具體的查看文檔吧 {{content | safe}}

• 引入其他模板。比如上面可以看到，我們繼承了基礎(chǔ)的模板，但是我們還可以會(huì)提取一些公共的像nav模板進(jìn)行復(fù)用。

// 導(dǎo)入我們的nav模板 {% include './base/nav.njk' %}

• nav模板一般很常見的會(huì)有這么一個(gè)場(chǎng)景，比如就是當(dāng)前頁面選項(xiàng)需要高亮。來，先看一下nav模板：

<!-- 導(dǎo)航頭部 --> <nav class="nav-wrapper"> <ul class="menu-content"> <li> <a href="/news" class="{{ 'active' if navActive == 'news' else '' }}">動(dòng)態(tài)資訊</a> </li> <li> <a href="/about" class="{{ 'active' if navActive == 'about' else '' }}">關(guān)于我們</a> </li> </ul> </nav>可以看到，我們對(duì)class名進(jìn)行了一個(gè)if判斷，判斷當(dāng)變量navActive是某些值的時(shí)候給他增加一個(gè)active類名，否則就是各空的class名。這里仔細(xì)注意一下寫法即可。 那么我們?cè)趺炊x變量呢？此時(shí)再回到上面定義變量的部分介紹，我們已經(jīng)在頁面中定義了一個(gè)變量navActive，所以我們只需要每個(gè)頁面定義一個(gè)navActive且值為我們需要的即可了。

• 最后再補(bǔ)充說明一下，模板內(nèi)的調(diào)整路徑，就直接寫成我們?cè)?code>router.js中定義的路由即可，而不是寫的模板地址。

// a標(biāo)簽跳轉(zhuǎn) <a href="/news"></a> ? // js調(diào)整也是一樣，使用router.js定義的路由 window.location.href="/news"

總結(jié)

文章是有點(diǎn)水，請(qǐng)輕噴 ?♂?

如果你覺得這篇文章不錯(cuò)，請(qǐng)別忘記點(diǎn)個(gè)贊跟關(guān)注哦~