express 非破坏性框架
const express=require('express');
let server=express();
server.listen(3000,function () {
console.log('server start')
})
server.get('/get',(req,res)=>{})
server.post('/post',()=>{})
server.use('/use',()=>{})
//通吃
server.get(()=>{})
server.post(()=>{})
server.use(()=>{})
//非破坏性
server.get('/get',(req,res)=>{
res.write('字符串');
res.send({a:12,b:14});
})
中间件-插件：
1.插件-补充框架功能
2.流水线 重用 分工 next 顺序
server.use(express.static('www/') //静态目录
server.use(next)=>{ next(); })
server.get('/get',(next)=>{ next(); })
server.get('/get',()=>{})
response
res.send(any);
res.sendFile(绝对路径) //灵活
path.resolve(www/aaa) //解析为绝对路径
res.sendStatus(404) //状态码
等价于=> res.writeHeader(404);
res.write('Not Found');
res.end();
res.redirect('http://www.baidu.com') //重定向
等价于=> res.setHeader('location','http://www.baidu.com');
res.writeHeader(401);
res.end();
数据交互
get：
req.query
普通post：
let bodyParser = require('body-parser')
server.use(bodyParser.urlencoded({extended:false}));
req.body;
文件post:
const multer=require('multer');
server.use(multer({dest:'upload/'}).any());
req.files;
cookie
1.存在浏览器里
2.容量有限---4K
3.不安全---用户、浏览器
1.防篡改
2.加密
const cookieParser = require('cookie-parser');
server.use(cookieParser('zzzzzzzzz'));
req.cookies //接受
res.cookie('name','value',options); //发送
//签名防篡改
req.signedCookies //接受带签名
res.cookie('test',555,{ signed:true }); //发送
session
存在服务器里
容量不用担心
安全---用户完全看不到
cookie-session 不能跨域
const cookieSession = require('cookie-session');
server.use(cookieSession({
keys:['zzzzz','xxxxxx','cccccc'], //循环密钥
secret:'xxx' //单个密钥
}));
//小例子
server.get('/get', (req,res)=> {
if(!req.session['count']){
req.session.count=1;
}else {
req.session.count++;
}
res.send(`欢迎你第${req.session.count}次访问页面`)
})
session劫持
sess_id拿走：
1.session定期更换ID---有效期
2.签名
路由:根据地址不同，调用不同代码
//index.js
server.use('/aritcle',require('./routes/article'));
server.use('/user',require('./routes/user'));
server.use((req,res)=>{
res.send('404你懂的！')
})
//router/aritcle.js
const express = require('express');
const router=express.Router();
router.get('/',()=>{});
router.get('/:id',(req,res)=>{
const {id}=req.params;
console.log(req.params);
res.send(`${id}文章内容`);
});
router.post('/:id/comment',()=>{});
router.use('/aaa',require('./aaa'));
module.exports= router;
//router/aaa.js
const express = require('express');
const router=express.Router();
router.get('/a',require('./aaa/a'));
module.exports= router;
//router/aaa/a.js
module.exports=(req,res)=>{
res.send('a!')
}
/user/123123 //对路由友好、利于SEO 、SPA
req.params
/user?id=123132
req.query
服务端渲染
后端渲染(组装)：html生产出来
稳定、安全、利于SEO
前端渲染(组装)：html生产出来
体积更小、灵活、体验好
浏览器渲染：
输入url =》加载 =》html，css，js，img... =>渲染
渲染和性能关系
pug 破坏式---破坏HTML
缩进规定层级
const pug=require('pug');
pug.renderFile('./template/pug/1.pug',{
pretty:true,
name:123,
a:1,
b:3,
arr:[1,2,3,4,5]
});
//template/pug/1.pug
doctype
html
head
meat(charset='utf-8')
link(rel='stylesheet',href='//www.greatytc.com/css/main.css')
script(src='main.js')
script.
window.onload=function (ev) {
let div=document.getElementById('div1');
div.onclick=function (ev1) { alert('a'); }
}
body
div.page.main#div1
ul.list
each a in arr
li= a
p.
sad
asd
span 用户:
= name
= a+b
ejs 非破坏式---保留HTML结构 <% %>
const ejs=require('ejs');
ejs.renderFile('./template/ejs/ejs.html',{
a:1,b:2,str:'我叫<span><span>',header_path:'component/header.html',
}).then(data=>{
console.log(data)
}).catch(err=>{
console.log(err)
})
//template/ejs/1.html
//输出<%= %>转义输出
//<%- %>非转义输出
<%=a+b %> //3
<%=str %> //我叫<span><span>
<%-str %> //我叫<span><span>
% for(let s in arr ){%>
<li><%=s %></li>
<% }%>
<%- include(header_path)%>
模块化
*所有的语言(除JS之外)都有模块系统
1.前端：
传统---requireJS-AMD、seaJS-CMD
CMD---公共模块定义
命名空间
AMD---异步模块定义
CMD+异步
现代---vue、angular、react
2.后端
Node模块系统
exports.a=1;
exports.b=2;
module.exports={ a:1,b:2 }
const mod=require('./mod') //自定义、相对路径
WebPack---模块打包工具
