Koa2入坑(四)

最新推荐文章于 2024-03-08 02:31:24 发布

小溪彼岸

最新推荐文章于 2024-03-08 02:31:24 发布

阅读量1.1k

点赞数

分类专栏： # NodeJS

本文链接：https://blog.csdn.net/zww1984774346/article/details/78940069

版权

NodeJS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

使用引擎模版

1、使用html

目录结构:

| html
  | views
    index.html
    todo.html
    404.html
  app.js

app.js:

const Koa = require('koa');
const fs = require('fs')
const app = new Koa();

/**
 * 用Promise封装异步读取文件方法
 * @param  {string} page html文件名称
 * @return {promise}      
 */
function render( page ) {
    return new Promise(( resolve, reject ) => {
      let viewUrl = `./views/${page}`
      fs.readFile(viewUrl, "binary", ( err, data ) => {
        if ( err ) {
          reject( err )
        } else {
          resolve( data )
        }
      })
    })
  }

/**
 * 根据URL获取HTML内容
 * @param  {string} url koa2上下文的url，ctx.url
 * @return {string}     获取HTML文件内容
 */
async function route( url ) {
    let view = '404.html'
    switch ( url ) {
      case '/':
        view = 'index.html'
        break
      case '/index':
        view = 'index.html'
        break
      case '/todo':
        view = 'todo.html'
        break
      case '/404':
        view = '404.html'
        break
      default:
        break
    }
    let html = await render( view )
    return html
  }

  app.use( async ( ctx , next) => {
    let url = ctx.request.url
    let html = await route( url )
    ctx.body = html
  })

  app.listen(3000,()=>{
    console.log('服务器运行于:127.0.0.1:3000');
  })

2、使用ejs引擎模版

安装ejs引擎

$ npm i ejs --save

目录结构:

| ejs
  | views
    index.ejs
  app.js

app.js:

const Koa = require('koa');
const views = require('koa-views');
const app = new Koa();

app.use(views(__dirname + '/views', {
  extension: 'ejs'
}))

app.use( async ( ctx ) => {
  let title = 'hello koa2'
  await ctx.render('index', {
    title,
  })
})

app.listen(3000, ()=>{
  console.log('[demo] ejs is starting at port 3000')
})

index.ejs:

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <p>EJS Welcome to <%= title %></p>
</body>
</html>

3、使用nunjucks引擎

koa-nunjucks-2 作为模板引擎。Nunjucks 是 Mozilla 开发的，纯 js 编写的模板引擎，既可以用在 Node 环境下，也可以运行在浏览器端。koa-nunjucks-2 是基于 Nunjucks 封装出来的第三方中间件，完美支持 Koa2。

安装 koa-nunjucks-2

$ npm i koa-nunjucks-2 --save

目录结构:

| nunjucks2
  | views
    layout.html
    home.html
  router.js
  app.js

app.js:

const Koa = require('koa');
const path = require('path')
const bodyParser = require('koa-bodyparser');
const nunjucks = require('koa-nunjucks-2');

const app = new Koa();
const router = require('./router');

app.use(nunjucks({
  ext: 'html',
  path: path.join(__dirname, 'views'),// 指定视图目录
  nunjucksConfig: {
    trimBlocks: true // 开启转义 防Xss
  }
}));

app.use(bodyParser());
app.use(router.routes(), router.allowedMethods());

app.listen(3000, () => {
  console.log('server is running at http://localhost:3000')
})

router.js


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

router.get('/',async (ctx, next)=>{
    let title = 'home';
    await ctx.render('home',{
        title
    });
});

module.exports = router;

laout.html

<html>
    <head>
      {% block head %}
      <link rel="stylesheet">
      {% endblock %}
    </head>  
    <body>
      {% block header %}
      <h1>this is header</h1>
      {% endblock %}

      {% block body %}
      <h1>this is body</h1>
      {% endblock %}

      {% block footer %}
      <h1>this is footer</h1>  
      {% endblock %}

      {% block content %}
      <script>
        //this is place for javascript
      </script>
      {% endblock %}
    </body>
  </html>

home.html

{% extends 'layout.html' %}

{% block head %}
<link href="home.css">
{% endblock %}

{% block body %}
<h1>home 页面内容</h1>
{% endblock %}

{% block content %}
<script src="home.js"></script>
{% endblock%}

4、使用jade引擎模版

安装 jade

$ npm i jade --save

目录结构:

| jade
  | views
    layout.jade
    home.jade
  router.js
  app.js

app.js

const Koa = require('koa');
const views = require('koa-views');
const app = new Koa();
const router = require('./router');

app.use(views(__dirname + '/views', {
  extension: 'jade'
}))

app.use(router.routes(), router.allowedMethods());

app.listen(3000, ()=>{
  console.log('server is starting at port 3000')
})

router.js


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

router.get('/',async (ctx, next)=>{
    let title = 'home';
    await ctx.render('home',{
        title
    });
});

module.exports = router;

layout.jade:

doctype html
html(lang="zh-cn")
  head
    title= title
    meta(charset="utf-8")
    //IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
    meta(http-equiv="X-UA-Compatible",content="IE=Edge")
    //- link(rel='stylesheet', href='/stylesheets/style.css')
    //- script(src="/js/angular.min.js")
  body
    //利用block划分区域，便于被继承
    block header
    block content
    block footer

home.jade

// 使用jade模板
extends layout

block header
  h1 这是header

block content
  p 这是content

block footer
  p footer

部分资料参考地址：http://cnodejs.org/topic/58ac640e7872ea0864fedf90

项目地址：https://github.com/MisterZhouZhou/Koa2-learnDayByDay/tree/day1/koa2-learnday1

小溪彼岸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Koa2入坑(四)

使用引擎模版1、使用html目录结构:| html | views index.html todo.html 404.html app.jsapp.js:const Koa = require('koa');const fs = require('fs')const app = new Koa();/** * 用Promise封装异步读取文件方法 * @par
复制链接

扫一扫