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 定時器
ZLIB 壓縮
02研叫、沒有全局變量的
自動會加上去一些代碼,外邊的兩個括號是系統(tǒng)自動加上的
(function(){})()
03、
模塊化：
系統(tǒng)模塊
自定義模塊
1.模塊組成
2.npm
3.發(fā)布自己的模塊
引入自己的模塊——./ ?
對外輸出東西——必須加給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.自動下載依賴
---------------------------安裝-----------------------------------------
npm install xxx
npm uninstall xxx
--------------------------------------------------------------------------
node_modules——放模塊
--------------------------------------------------------------------------
./
不加./ 必須放在node_modules里面
---------------------------------------------------------------------------
require
1.如果有"./"
從當(dāng)前目錄找
2.如果沒有"./"
先從系統(tǒng)模塊
再從node_modules找
----------------------------------------------------------------------------
自定義模塊統(tǒng)一阻塑，都放到node_modules里面
----------------------------------------------------------------------------
1.模塊里面
require——引入
exports——輸出
module.exports——批量輸出
2.npm
幫咱們下載模塊
自動解決依賴
3.node_modules
模塊放這里
—————————————————————————
npm login
npm whoami
npm init
npm publish
npm --force unpublish
-------------------------------------------------------------------------------
4.項目安裝--項目運用
npm init
npm install express
運用
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.接收請求
4.響應(yīng)
----------------
非侵入式
req
原生：
res.write();
res.end();
express：
*res.send();
res.write();
res.end();
-----------------------------------------------------------------------
express保留了原生的功能，添加了一些方法(send)陈莽，增強原有的功能
-------------------------------------------------------------------------------------
//1.創(chuàng)建服務(wù)
var server=express();
//2.監(jiān)聽
server.listen(8080);
//3.處理請求
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.接收請求
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-無需中間件
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——下一個步驟
next();
server.use('/login', function (){
mysql.query(function (){
if(有錯)
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-無狀態(tài)的
cookie车酣、session
cookie：在瀏覽器保存一些數(shù)據(jù)，每次請求都會帶過來
*不安全索绪、有限(4K)
session：保存數(shù)據(jù)湖员，保存在服務(wù)端
*安全、無限
-----------------------------------------------------------------------------
session：基于cookie實現(xiàn)的
*cookie中會有一個session的ID瑞驱，服務(wù)器利用sessionid找到session文件娘摔、讀取、寫入
隱患：session劫持
------------------------------------------------------------------------------
cookie
1.讀取——cookie-parser
2.發(fā)送——
session
cookie-session
-------------------------------------------------------------------------
cookie：
1.cookie空間非常小——省著用
2.安全性非常差
1.精打細(xì)算
2.校驗cookie是否被篡改過
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ù)器
不能獨立存在彤侍，基于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的路徑下下邊的盏阶。 必須得訪問到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
要用的時候先安裝： npm install jade
模板引擎：
jade-破壞式漾橙、侵入式、強依賴
ejs-溫和楞卡、非侵入式霜运、弱依賴
--------------------------------------------------------------------------------
html <html></html>
html <html>
head <head>
style <style></style>
</head>
body <body>
div <div></div>
div <div></div>
</body>
</html>
--------------------------------------------------------------------------
1.根據(jù)縮進，規(guī)定層級
2.屬性放在()里面蒋腮，逗號分隔
3.內(nèi)容空個格淘捡，直接往后堆
--------------------------------------------------------------------------------
屬性
<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
-----------------------------------------------------------------------
簡寫
----------------------------------------------------------------------
模板引擎：生成頁面
1.jade：破壞式
2.ejs：保留式
---------------------------------------------------------------------
jade
1.根據(jù)縮進劃分層級
2.屬性用()表示，用逗號分隔
*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>對方水電費色弱威爾士地方</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
|不靠譜
