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/

這樣就舒服多了,俺也能夠不用再花時間去學其它的引擎了,哈哈...