node.js项目改进之View模块改进

最新推荐文章于 2024-01-09 11:00:25 发布

Merlin~

最新推荐文章于 2024-01-09 11:00:25 发布

阅读量1.2k

点赞数

分类专栏： node.js 文章标签： node.js

本文链接：https://blog.youkuaiyun.com/qq_25804071/article/details/68953229

版权

node.js 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了在Node.js项目中，由于Jade模板引擎的复杂性，选择使用Nunjucks作为新的View模块。通过移除原有的`koa-views`模块，安装并引入`nunjucks`，并在项目中创建`view.js`文件以供视图渲染使用。通过修改路由模块的代码，实现了使用Nunjucks渲染的`index.html`页面。项目源代码可在GitHub上找到。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在项目View模块的尴尬之处

我们打开routes目录下的index.js模块看一下结构是这样的

var router = require('koa-router')();

router.get('/', async function (ctx, next) {
  ctx.state = {
    title: 'koa2 title'
  };

  await ctx.render('index', {
  });
})

router.get('/foo', async function (ctx, next) {
  await ctx.render('index', {
    title: 'koa2 foo'
  });
});

module.exports = router;

结构清晰，代码简洁，当用户分别访问/目录和/foo目录时产生分别的对应产生不同的数据并对应·不同的模板文件。
但是我们再看看模板文件views目录下面的
index.jade

extends layout

block content
  h1= title
  p Welcome to #{title}

乍一看说是什么鬼，这提莫也是模板文件，不过仔细瞧瞧其实很有规律可循的extends 应该是引入/继承外部文件，block content，应该是替代内容部分，下面的就是内容，然后#{title}是变异成index.js传输来的title数据。但是不管他再多直接了当，简洁易懂，向来我们编写前端页面和后端都是分离的，前端我们编写出来的都是一个完成的html页面才是，难道我们还要根据这个html页面的结构再翻译成这么个.jade文件吗？我感觉就算是自己写前端页面写成这样也会很费脑子的，所以我们要用其他的模块替换掉。
关于view的模块是很多的，最终决定使用Nunjucks

Nunjucks

Nunjucks是Mozilla开发的一个纯JavaScript编写的模板引擎
接下来就是我们的改造过程，首先，要去除原来的koa-views模块
在app.js中去掉const views = require(‘koa-views’);这句话
和
app.use(views(__dirname + ‘/views’, {
extension: ‘jade’
}));
这句话，也就把入口的模块给去除了。
然后我们在package.json文件中去掉依赖包的索引”koa-views”: “^5.2.1”这句，放入nunjucks的索引
“nunjucks”:”^3.0.0”这句话，之后我们在bash或终端的本目录下
npm i一下。我们的nunjucks依赖包就装好了。
之后我们在项目目录添加一个叫app_need的目录用于存放我们的添加的模块。写入一个叫view.js的文件

'use strict'
const nunjucks = require('nunjucks');

function createEnv(path, opts) {
    var
        autoescape = opts.autoescape && true,
        noCache = opts.noCache || false,
        watch = opts.watch || false,
        throwOnUndefined = opts.throwOnUndefined || false,
        env = new nunjucks.Environment(
            new nunjucks.FileSystemLoader('views', {
                noCache: noCache,
                watch: watch,
            }), {
                autoescape: autoescape,
                throwOnUndefined: throwOnUndefined
            });
    if (opts.filters) {
        for (var f in opts.filters) {
            env.addFilter(f, opts.filters[f]);
        }
    }
    return env;
}

var env = createEnv('views', {
    watch: true,
    filters: {
        hex: function (n) {
            return '0x' + n.toString(16);
        }
    }
});
module.exports=env;

这个模块就可以被需要展示页面的模块所调用然后被使用。
最后，我们暂时的目录结构MVC结构还不是很清晰，展现视图的控制器和渲染视图的模型都是写在路由目录routes下面的，所以我们暂时就在路由模块中引入这个模块并调用，之后细化结构的时候再分离。以routes index.js的/目录响应为例：
原来的代码是这样的

var router = require('koa-router')();

router.get('/', async function (ctx, next) {
  ctx.state = {
    title: 'koa2 title'
  };
  await ctx.render('index', {
  });
})

我们要引入我们自己的模块于是要变成这样

var router = require('koa-router')();
var view = require('../app_need/view');
router.get('/', async function (ctx, next) {
  var v = view.render('index.html', { name: '小明' });
  await function (ctx, v) {
    ctx.body = v;
  }(ctx,v);
});

基本的视图就有了，我们在views下面写入一个文件叫index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{{name}}
</body>
</html>

最后启动程序
localhost:3000
就会出现一个小明。
鼓掌。
此外，关于nunjucks的模板的写法直接查资料就好了在这里就不写了。
最终项目地址：https://github.com/jijuxie/koa2_all.git