Node - EJS模板應用(node+express+ejs)適合新手理解

時間 2019-11-19

標籤 node ejs 模板應用 node+express+ejs express 適合新手理解简体版

原文原文鏈接

準備工做:javascript

工具:Webstormcss

1. 新建一個文件夾爲blogs(隨意). 一個js文件app.js. 一個文件夾views,文件夾內一個index.ejs文件,文件夾asstes內style.csshtml

2.使用Termimal工具安裝所須要的插件(Node環境):java

　　2.1 初始化: npm init -ynode

　　2.2 安裝express: npm install express --saveweb

　　2.3 安裝ejs: npm install ejs --saveexpress

　　2.4 安裝自動工具:npm install nodemon -g --save (可選)npm

開始寫代碼嘍:json

ejs部分:api

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>EJS模板</title>
    <link rel="stylesheet" href="../assets/style.css">
</head>
<body>
    <h1>EJS模板引擎</h1>
    <p>這是很簡單的一個小流程就不在一一的標註流程了,註釋的很清楚了</p>
    <p>這裏是姓名: <span><%= name %></span></p><!--這裏顯示js文件傳過來的name值:webarn-->

 <p>這裏是性別: <span><%= sex %></span></p><!--這裏顯示js文件傳過來的sex值:'男'-->



 <p>這裏是性別: <span><%= content %></span></p><!--這裏顯示js文件傳過來的content值,能夠死是json,接受服務器所傳的東西,方便前段展現-->



 </body>

 </html>

css部分:

h1{
    text-align: center;
}
p{
    font-size:20px;
}
span{
    font-size:25px;
    color: red;
}

JavaScript部分:

//引入所須要的插件
var express = require('express');
var ejs = require('ejs');
//爲express設置接受參數
var app = express();
//識別ejs代碼
app.set('view engine','ejs');
//識別css樣式,不引入將不知道外部樣式表
app.use('/assets',express.static('assets'));
var data={
  name : 'webarn',
  sex : '男',
  content : '參數,能夠更改'
};
//交互方式
app.get('/',function (req, res) {
    res.render('index',data)
});

//另一種方式:
// app.get('/:id',function (req, res) {
//     res.render('parfile',{person:req.params.id});
// });

//監聽 app.listen(3000);

EJS能夠更易於維護,使網頁動態獲取.

註釋:JavaScript部分註釋部分解釋:

'/:id'和{person:req.params.id}關係爲:'/:id'=={person:req.params.id}

以上代碼很是簡單,只是模板的運用,沒有涉及較深的東西,很是適合初次接觸的人羣,若是有問題或錯誤,歡迎你們及時提問糾正,會隨時回覆你們

功能:

一、緩存功能，可以緩存已經解析好的html模版；

二、<% code %>用於執行其中javascript代碼。

三、<%= code %>會對code進行html轉義；

四、<%- code %>將不會進行轉義；，這一行代碼不會執行，像是被註釋了同樣，而後顯示原來的html。也不會影響整個頁面的執行

五、支持自定義標籤，好比'<%'可使用'{{'，'%>'用'}}'代替；

六、提供一些輔助函數，用於模版中使用
     1)、first，返回數組的第一個元素；
2)、last，返回數組的最後一個元素；
3)、capitalize，返回首字母大寫的字符串；
4)、downcase，返回字符串的小寫；
5)、upcase，返回字符串的大寫；
6)、sort，排序（Object.create(obj).sort()？）；
7)、sort_by:'prop'，按照指定的prop屬性進行升序排序；
8)、size，返回長度，即length屬性，不必定非是數組才行；
9)、plus:n，加上n，將轉化爲Number進行運算；
10)、minus:n，減去n，將轉化爲Number進行運算；
11)、times:n，乘以n，將轉化爲Number進行運算；
    12)、divided_by:n，除以n，將轉化爲Number進行運算；
    13)、join:'val'，將數組用'val'最爲分隔符，進行合併成一個字符串；
    14)、truncate:n，截取前n個字符，超過長度時，將返回一個副本
    15)、truncate_words:n，取得字符串中的前n個word，word以空格進行分割；
    16)、replace:pattern,substitution，字符串替換，substitution不提供將刪除匹配的子串；
    17)、prepend:val，若是操做數爲數組，則進行合併；爲字符串則添加val在前面；
    18)、append:val，若是操做數爲數組，則進行合併；爲字符串則添加val在後面；
    19)、map:'prop'，返回對象數組中屬性爲prop的值組成的數組；
    20)、reverse，翻轉數組或字符串；
    21)、get:'prop'，取得屬性爲'prop'的值；
    22)、json，轉化爲json格式字符串