13、nodejs(国庆+中秋)(07--13)--模块化(含模
2017-10-08 本文已影响21人
夜幕小草
01、模块
模块化——
1.系统模块：http、querystring、url
2.自定义模块
3.包管理器
系统模块：
断言：
www.baidu.com->
getServer
Crypto 加密
Events 事件
Net 网络操作
OS 操作系统信息
Path 处理文件路径
Stream 流操作
Timers 定时器
ZLIB 压缩
02、没有全局变量的
自动会加上去一些代码,外边的两个括号是系统自动加上的
(function(){})()
03、
模块化：
系统模块
自定义模块
1.模块组成
2.npm
3.发布自己的模块
引入自己的模块——./ ?
对外输出东西——必须加给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.统一下载途径
2.自动下载依赖
---------------------------安装-----------------------------------------
npm install xxx
npm uninstall xxx
--------------------------------------------------------------------------
node_modules——放模块
--------------------------------------------------------------------------
./
不加./ 必须放在node_modules里面
---------------------------------------------------------------------------
require
1.如果有"./"
从当前目录找
2.如果没有"./"
先从系统模块
再从node_modules找
----------------------------------------------------------------------------
自定义模块统一，都放到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.响应
----------------
非侵入式
req
原生：
res.write();
res.end();
express：
*res.send();
res.write();
res.end();
-----------------------------------------------------------------------
express保留了原生的功能，添加了一些方法(send)，增强原有的功能
-------------------------------------------------------------------------------------
//1.创建服务
var server=express();
//2.监听
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.数据：GET、POST
2.中间件：使用、写、链式操作
----------------------------------------------------
GET-无需中间件
req.query
POST-需要"body-parser"
server.use(bodyParser.urlencoded({}));
server.use(function (){
req.body
});
---------------------------------------------------------------------
链式操作：
------------------------------------------------------------------------------
1.GET、POST
req.query
server.use(bodyParser.urlencoded({limit: }));
server.use(function (req, res, next){
req.body
});
2.链式操作
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.数据
2.中间件
--------------------------------------------------------------------------
http-无状态的
cookie、session
cookie：在浏览器保存一些数据，每次请求都会带过来
*不安全、有限(4K)
session：保存数据，保存在服务端
*安全、无限
-----------------------------------------------------------------------------
session：基于cookie实现的
*cookie中会有一个session的ID，服务器利用sessionid找到session文件、读取、写入
隐患：session劫持
------------------------------------------------------------------------------
cookie
1.读取——cookie-parser
2.发送——
session
cookie-session
-------------------------------------------------------------------------
cookie：
1.cookie空间非常小——省着用
2.安全性非常差
1.精打细算
2.校验cookie是否被篡改过
a.发送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-存在服务器
不能独立存在，基于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后段想前端发送cookie，也就是设置cookie
const express = require('express')
var server = express()
server.use('/aaa/a.html', (req, res) => {
/* 注意：这里是设置在/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.根据缩进，规定层级
2.属性放在()里面，逗号分隔
3.内容空个格，直接往后堆
--------------------------------------------------------------------------------
属性
<script src="a.js"></script>
script(src="a.js")
--------------------------------------------------------------------
内容
<a href="http://www.zhinengshe.com/">官网</a>
a(href="http://www.zhinengshe.com/") 官网
-----------------------------------------------------------------------------
<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.根据缩进划分层级
2.属性用()表示，用逗号分隔
*style={}
*class=[]
3.内容
div xxx
span xxx
a(href="xxx") 链接
------------------------------------------------------------------------
jade.render('字符串');
jade.renderFile('模板文件名', 参数)
-------------------------------------------------------------------------
render()用法
const jade = require('jade')
var str = jade.render('html')
// 加载jade文件
//var str = jade.renderFile('./views/1.jade', {pretty: true})
console.log(str)
输出的结果：
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
第一种转译，前面加‘|’， 如果不交jade默认 是自定义标签（字母的情况下）
html
head
script
|window.onload=function (){
| var oBtn=document.getElementById('btn1');
| oBtn.onclick=function (){
| alert('aaaa');
| };
|};
body
h1
div 夜幕小草
|bbb
第二种，标签后边加 ‘ . '，表示标签后边的都是转译的
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 结果是：#{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'}) 偶数
else
div(style={background:'green'}) 奇数
9.jade文件 switch
html
head
body
-var a=1;
case a
when 0
div aaa
when 1
div bbb
when 2
div ccc
default
|不靠谱
