13、nodejs(國(guó)慶+中秋)(07--13)--模塊化(含模板jade)

01、模塊

模塊化——
1.系統(tǒng)模塊：http、querystring、url
2.自定義模塊
3.包管理器

系統(tǒng)模塊：

斷言：

www.baidu.com->
getServer
Crypto  加密
Events  事件
Net 網(wǎng)絡(luò)操作
OS  操作系統(tǒng)信息
Path    處理文件路徑
Stream  流操作
Timers  定時(shí)器
ZLIB    壓縮

02、沒(méi)有全局變量的
自動(dòng)會(huì)加上去一些代碼,外邊的兩個(gè)括號(hào)是系統(tǒng)自動(dòng)加上的

(function(){})()

03、

模塊化：
系統(tǒng)模塊
自定義模塊
1.模塊組成
2.npm
3.發(fā)布自己的模塊
引入自己的模塊——./     ?
對(duì)外輸出東西——必須加給exports
--------------------------------------------------------------------------------------
exports.xxx=??;
exports.xxx=??;
exports.xxx=??;
module.exports={
    xxx:    ??,
    xxx:    ??,
    xxx:    ??
};
----------------------------------------------------------------------------
require——引入其他模塊
exports——輸出
module——批量輸出
-----------------------------------------------------------------------------
1.自己的模塊
    require
    module
    exports
2.引入模塊  ./  ?
3.".js"可選
----------------------------------------------------------------------------
npm：NodeJS Package Manager(NodeJS包管理器)
1.統(tǒng)一下載途徑
2.自動(dòng)下載依賴
---------------------------安裝-----------------------------------------
npm install xxx
npm uninstall xxx
--------------------------------------------------------------------------
node_modules——放模塊
--------------------------------------------------------------------------
./
不加./        必須放在node_modules里面
---------------------------------------------------------------------------
require
1.如果有"./"
    從當(dāng)前目錄找
2.如果沒(méi)有"./"
    先從系統(tǒng)模塊
    再?gòu)膎ode_modules找
----------------------------------------------------------------------------
自定義模塊統(tǒng)一，都放到node_modules里面
----------------------------------------------------------------------------
1.模塊里面
    require——引入
    exports——輸出
    module.exports——批量輸出
2.npm
    幫咱們下載模塊
    自動(dòng)解決依賴
3.node_modules
    模塊放這里
—————————————————————————
npm login
npm whoami

npm init
npm publish
npm --force unpublish
-------------------------------------------------------------------------------

4.項(xiàng)目安裝--項(xiàng)目運(yùn)用

npm init
npm install express

運(yùn)用
const express = require('express')
var server = express()
server.use('/b.html', (req, res) => {
    res.send('abc')
    res.end()
})
// z這里需要指定localhost
server.listen(8090,'127.0.0.1');

05、

express框架
1.安裝
2.配置
3.接收請(qǐng)求
4.響應(yīng)
----------------
非侵入式
req
原生：
res.write();
res.end();
express：
*res.send();
res.write();
res.end();
-----------------------------------------------------------------------
express保留了原生的功能，添加了一些方法(send)，增強(qiáng)原有的功能
-------------------------------------------------------------------------------------
//1.創(chuàng)建服務(wù)
var server=express();
//2.監(jiān)聽(tīng)
server.listen(8080);
//3.處理請(qǐng)求
server.use('地址', function (req, res){
});
--------------------------------------------------------------------------
3種方法：
.get('/', function (req, res){});
.post('/', function (req, res){});
.use('/', function (req, res){});
----------------------------------------------------------------------
中間件
-------------------------------------------------------------
/login?user=xxx&pass=xxx
=>{ok: true/false, msg: '原因'}
------------------------------
express框架：
1.依賴中間件
2.接收請(qǐng)求
  get/post/use
  get('/地址', function (req, res){});
3.非破壞式的
  req.url
4.static用法
  const static=require('express-static');
  server.use(static('./www'));
-----------------------------------
注意：
 // z這里需要指定localhost
server.listen(8090,'127.0.0.1');

06、

Express：
1.數(shù)據(jù)：GET、POST
2.中間件：使用、寫、鏈?zhǔn)讲僮?----------------------------------------------------
GET-無(wú)需中間件
req.query
POST-需要"body-parser"
server.use(bodyParser.urlencoded({}));
server.use(function (){
    req.body
});
---------------------------------------------------------------------
鏈?zhǔn)讲僮鳎?------------------------------------------------------------------------------
1.GET、POST
  req.query
  server.use(bodyParser.urlencoded({limit: }));
  server.use(function (req, res, next){
    req.body
  });
2.鏈?zhǔn)讲僮?  server.use(function (req, res, next){});
  server.get('/', function (req, res, next){});
  server.post(function (req, res, next){});
  next——下一個(gè)步驟
  next();
  server.use('/login', function (){
    mysql.query(function (){
      if(有錯(cuò))
        res.emit('error');
      else
        next();
    });
  });
3.中間件(body-parser)、自己寫中間件
  next();
  server.use(function (req, res, next){
    var str='';
    req.on('data', function (data){
      str+=data;
    });
    req.on('end', function (){
      req.body=querystring.parse(str);
      next();
    });
  });

07、

express：
1.數(shù)據(jù)
2.中間件
--------------------------------------------------------------------------
http-無(wú)狀態(tài)的
cookie、session
cookie：在瀏覽器保存一些數(shù)據(jù)，每次請(qǐng)求都會(huì)帶過(guò)來(lái)
  *不安全、有限(4K)
session：保存數(shù)據(jù)，保存在服務(wù)端
  *安全、無(wú)限
-----------------------------------------------------------------------------
session：基于cookie實(shí)現(xiàn)的
  *cookie中會(huì)有一個(gè)session的ID，服務(wù)器利用sessionid找到session文件、讀取、寫入
  隱患：session劫持
------------------------------------------------------------------------------
cookie
1.讀取——cookie-parser
2.發(fā)送——
session
cookie-session
-------------------------------------------------------------------------
cookie：
1.cookie空間非常小——省著用
2.安全性非常差
1.精打細(xì)算
2.校驗(yàn)cookie是否被篡改過(guò)
a.發(fā)送cookie
res.secret='字符串';
res.cookie(名字, 值, {path: '/', maxAge: 毫秒, signed: true});

b.讀取cookie
cookie-parser

server.use(cookieParser('秘鑰'));

server.use(function (){
    req.cookies     未簽名版
    req.signedCookies   簽名版
});

c.刪除cookie
res.clearCookie(名字);
----------------------------------------------------------------------------------
cookie-parser
cookie-encrypter
--------------------------------------------------------------------------------------
session：
cookie-session
1.寫入
2.讀取
session劫持
-----------------------------------------------------------------------------------
cookie-session
server.use(cookieParser());
server.use(cookieSession({
    keys: [.., .., .., ..]
}));
server.use('/', function (){
    req.session
});
delete req.session
---------------------------------------------------------------------------------------
1.cookie-存在瀏覽器，4K，不安全
  簽名、加密
2.session-存在服務(wù)器
  不能獨(dú)立存在，基于cookie
-------------------------------------------------------------------------------------
server.use(cookieParser('簽名字符串'));
server.use(cookieSession({
}));

server.use(function (req, res){
    res.cookie(名字, 值, {signed: true});
    res.cookies['user']
    res.clearCookie('名字');

    res.session['xxx']
    delete res.session['xxx'];
});
--------------------------------------------------------------------------------

08、node后段想前端發(fā)送cookie，也就是設(shè)置cookie

const express = require('express')
var server = express()
server.use('/aaa/a.html', (req, res) => {
    /* 注意：這里是設(shè)置在/aaa的路徑下下邊的。 必須得訪問(wèn)到aaa路徑才行的 */ 
    res.cookie('name', 'heliang', {path: '/aaa', maxAge: 30*24*3600*1000})
    res.send('Ok')
})
server.listen(8090)

截圖：


image.png

9、cookie簽名

const express=require('express');
const cookieParser=require('cookie-parser');
var server=express();
//cookie
server.use(cookieParser('wesdfw4r34tf'));
server.use('/', function (req, res){
  res.clearCookie('user');
  res.send('ok');
});
server.listen(8080);

10、session加密，提高安全性

const express=require('express');
const cookieParser=require('cookie-parser');
const cookieSession=require('cookie-session');=
var server=express();
//cookie
server.use(cookieParser());
server.use(cookieSession({
  keys: ['aaa', 'bbb', 'ccc']
}));
server.use('/', function (req, res){
  console.log(req.session);
  res.send('ok');
});
server.listen(8080);

11、session加密

const express=require('express');
const cookieParser=require('cookie-parser');
const cookieSession=require('cookie-session');
var server=express();
//cookie
server.use(cookieParser());
server.use(cookieSession({
  name: 'sess',
  keys: ['aaa', 'bbb', 'ccc'],
  maxAge: 2*3600*1000
}));
server.use('/', function (req, res){
  if(req.session['count']==null){
    req.session['count']=1;
  }else{
    req.session['count']++;
  }
  console.log(req.session['count']);
  res.send('ok');
});
server.listen(8080);

12、session加密

const express=require('express');
const cookieParser=require('cookie-parser');
const cookieSession=require('cookie-session');
var server=express();
//cookie
var arr=[];
for(var i=0;i<100000;i++){
  arr.push('sig_'+Math.random());
}
server.use(cookieParser());
server.use(cookieSession({
  name: 'sess',
  keys: arr,
  maxAge: 2*3600*1000
}));
server.use('/', function (req, res){
  if(req.session['count']==null){
    req.session['count']=1;
  }else{
    req.session['count']++;
  }
  console.log(req.session['count']);
  res.send('ok');
});
server.listen(8080);

-------12章---
13、jade

要用的時(shí)候先安裝： npm install jade
模板引擎：
jade-破壞式、侵入式、強(qiáng)依賴
ejs-溫和、非侵入式、弱依賴
--------------------------------------------------------------------------------
html                <html></html>
html                <html>
    head                <head>
        style               <style></style>
                    </head>
    body                <body>
        div             <div></div>
        div             <div></div>
                    </body>
                </html>
--------------------------------------------------------------------------
1.根據(jù)縮進(jìn)，規(guī)定層級(jí)
2.屬性放在()里面，逗號(hào)分隔
3.內(nèi)容空個(gè)格，直接往后堆
--------------------------------------------------------------------------------
屬性
<script src="a.js"></script>
script(src="a.js")
--------------------------------------------------------------------
內(nèi)容
<a >官網(wǎng)</a>
a() 官網(wǎng)
-----------------------------------------------------------------------------
<div>
    xxxxx
    <div>
        aaaaa
        ...
    </div>
</div>
------------------------------------------------------------------------
style="width:200px;height:200px;background:red;"
1.普通屬性寫法
2.用json
class="aaa left-swrap active"
1.普通屬性寫法
2.用arr
-----------------------------------------------------------------------
簡(jiǎn)寫
----------------------------------------------------------------------
模板引擎：生成頁(yè)面
1.jade：破壞式
2.ejs：保留式
---------------------------------------------------------------------
jade
1.根據(jù)縮進(jìn)劃分層級(jí)
2.屬性用()表示，用逗號(hào)分隔
  *style={}
  *class=[]
3.內(nèi)容
  div xxx
    span xxx
      a(href="xxx") 鏈接
------------------------------------------------------------------------
jade.render('字符串');
jade.renderFile('模板文件名', 參數(shù))
-------------------------------------------------------------------------

render()用法

const jade = require('jade')
var str = jade.render('html')
// 加載jade文件
//var str = jade.renderFile('./views/1.jade', {pretty: true})
console.log(str)
輸出的結(jié)果：
image.png
html
  head
    style
  body
    div.box
    div#div1

html
  head
    style
  body
    div(title="aaa",id="div1")
    div&attributes({title: 'aaa', id: 'div1'})

html
  head
    style
  body
    div(style="width:200px;height:200px;background:red")
    div(style= {width: '200px', height: '200px', background: 'red'})

html
  head
    style
  body
    div(class="aaa left-warp active")
    div(class= ['aaa', 'left-warp', 'active'])

------------------13章---------------
14、jade

第一種轉(zhuǎn)譯，前面加‘|’， 如果不交jade默認(rèn) 是自定義標(biāo)簽（字母的情況下）
html
  head
    script
      |window.onload=function (){
      | var oBtn=document.getElementById('btn1');
      | oBtn.onclick=function (){
      |   alert('aaaa');
      | };
      |};
  body
    h1
      div 夜幕小草
        |bbb

第二種，標(biāo)簽后邊加 ‘ . '，表示標(biāo)簽后邊的都是轉(zhuǎn)譯的
html
  head
    script.
      window.onload=function (){
       var oBtn=document.getElementById('btn1');
       oBtn.onclick=function (){
         alert('aaaa');
       };
      };
  body
    h1
      div
        |bbb

格式：include 文件名
html
  head
    script
      include a.js
  body
    |abc
    |ddd
    |213

a.js文件
window.onload=function (){
  var oBtn=document.getElementById('btn1');
  oBtn.onclick=function (){
    alert('aaaa');
  };
};

變量的輸入
6.jade
html
  head
  body
    div 我的名字：#{name}
    div 求和：#{a+b}
    div(style=json)
    div(class=arr class="active")
    div(class=arr)

jade.js文件
const jade = require('jade')
let str = jade.renderFile('./views/9.jade', {pretty: true, name: '夜幕小草', a: 22, b: 33,
  json: {width: '200px', height: '200px', background: 'red'},
  arr: ['aaa', 'left-wrap', 'bbb'],
  content: "<h2>你好啊</h2><p>對(duì)方水電費(fèi)色弱威爾士地方</p>"
})
console.log(str)
注意：pretty: true表示美化代碼

7.jade文件 var前邊加 ‘-’
html
  head
  body
    -var a=12;
    -var b=5;
    div 結(jié)果是：#{a+b}
    span #{a}
    span=a
    -for(var i=0;i<arr.length;i++)
      div=arr[i]
    div!=content

8.jade文件 if else
html
  head
  body
    -var a=19;
    if(a%2==0)
      div(style={background:'red'}) 偶數(shù)
    else
      div(style={background:'green'}) 奇數(shù)

9.jade文件 switch
html
  head
  body
    -var a=1;
    case a
      when 0
        div aaa
      when 1
        div bbb
      when 2
        div ccc
      default
        |不靠譜
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容