nodejs学习笔记

时间 2019-12-24

标签 nodejs 学习笔记繁體版

原文原文链接

定制一个包而且引用此包.
css
目录结构:html

假定此包的做用是用来处理字符串转整型,整型车字符串的工具包.程序员
那么,须要先写2个js文件,这2个文件就是作类型转换工做的模块,而且将其放到utils/libs目录下.express
str2int.jsnpm
int2str.jsdjango
好了,功能写完了.咱们还须要写一个包的入口程序,那就是main.js,放在功能模块同目录下json
固然，这样还不行，由于咱们还须要一个package.json来指定此包的入口程序，这是由程序员本身定义,更加灵活，固然若是你不想写package.json.也能够将前面的包入口程序main.js改成index.js(小插曲,这里我采用的是本身定义).此文件须要放至到utils目录下,也就是与libs是兄弟级关系.
bootstrap

package.jsonapp

至此,咱们的包就定义好了,节下来咱们来看看怎么使用它吧.ide

test.js

　　输出结果:

2.Express模板引用之xTemplate模板引擎使用.

在当前项目目录下执行

cnpm install xtpl xtemplate --save

修改app.js

app.set('view engine','xtpl')
app.engine('html', require('xtpl').__express);
app.set('view engine', 'html');

这样，咱们的views目录里就能够使用x.html的扩展名了.并且还能够支持模板之间的引用.

base.html是基础模板，供其它继承.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
    <link rel="stylesheet" href="/stylesheets/bootstrap.css">
    {{{block('styles')}}}
</head>
<body>
<header>
    <div>
        <div>
            <h1>{{title}}</h1>
        </div>
    </div>
</header>
<section>
    <div>
        {{{block('body')}}}
    </div>
</section>
{{{block('scripts')}}}
</body>
</html>

index.html继承之base.html

{{extend('./layout/base')}}
{{#block('body')}}
<div class="body">
express xtpl解析引擎
</div>
{{/block}}

路由控制routes/index.js

var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express by jacky' });
});
module.exports = router;

使用supervisor bin/www启动后

访问http://127.0.0.1:3000/

3.Express模板引用之nunjucks模板引擎使用.

由于我习惯使用django默认模板引擎jinja，就从网上找到nunjucks,它能够知足个人需求，故在这里记录下.

　在当前项目目录下执行

cnpm install nunjucks --save

修改app.js

const nunjucks  = require('nunjucks');
app.set('view engine','njk');
nunjucks.configure('views',{autoescape:true,express:app});
app.set('view engine', 'html');

这样，咱们的views目录里就能够使用x.html的扩展名了.并且还能够支持模板之间的引用.

base.html是基础模板，供其它继承.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{% block title %} 首页 {% endblock %} - nunjucks演示</title>
    <link rel="stylesheet" href="/stylesheets/bootstrap.css">
    {% block custom_css %} {% endblock %}
</head>
<body>
<header style="text-align:center;">
    <p>Header</p>
    <hr>
    <header>
        {% block main %}  {% endblock %}
        {% block footer %}
        <footer>
        <hr/>
        <div style="text-align:center;">
            Footer  - by opdevos
        </div>
    </footer>
        {% endblock %}
        {% block custom_js %} {% endblock %}
</body>
</html>

default.html继承了这个base.html

{% extends './base.html' %}
{% block title %} 首页 {% endblock %}
{% block main %}
<h1>姓名：{{ name }}</h1>
<p>使用的模板引擎是：{{ title }}</p>
{% endblock %}
{% block footer %}
页尾
{% endblock %}

路由route/index.js须要作些调整

var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('default', { title: 'nunjucks' ,name:'opdevos'});
});
module.exports = router;

使用supervisor bin/www启动后

访问http://127.0.0.1:3000/

这样就舒服多了,俺也能够不用再花时间去学其它的引擎了,哈哈...