Express,Node第一代框架!
特点:入门简单,做不了大型项目。常用插件如下:
- nodemon
npm i nodemon -D
,热更新- cors 插件
npm i cors -S
,解决跨域问题- body-parser插件
npm i body-parser -S
,解析普通post请求体- multer插件
npm i multer -S
,处理multipart/form-data数据格式的POST请求
1. 搭建web server
const express = require('express')
const app = express();
app.get("/",(req,res) =>{
res.send("hello express")
})
app.listen(3000,()=> {
console.log("server is running");
})
2.访问静态资源express.static()
const express = require("express");
const path = require("path");
const app = express();
app.listen(3000);
// 访问www目录之下的banner.jpg -- > http://localhost:3000/banner.jpg
app.use(express.static(path.join(__dirname, "./www")));
3. 常用响应apisendFile()与express.static()的区别
- res.send(),例如:
res.send('hello world')
- res.sendStatus(),例如:
res.sendStatus(300);
- res.redirect(),重定向
- res.sendFile([绝对路径]),返回资源文件,类似于express.static()
- res.sendFile()与express.static()用法对比,代码如下:
const express = require("express");
const path = require("path");
const app = express();
app.listen(3000);
app.get("/", (req, res) => {
res.sendFile(path.resolve("./www/banner.jpg"));
res.send();
});
4.解析请求数据get请求
、application/x-www-form-urlencoded格式
、body-parser插件
-
对于get请求,直接处理请求参数:
操作符?、:
Route path: /:name-:age
Request URL: http://localhost:3000/zhangsan-18?author='student'
req.params: { name: 'zhangsan', age: '18' }
req.query: { author: "'student'" }
- 对于application/x-www-form-urlencoded格式的post请求:借助body-parser插件,解析请求体:
// Html Form
<form action="http://localhost:3000/" method="POST" enctype="application/x-www-form-urlencoded">
<input type="text" name="name" />
<input type="password" name="pwd" />
<input type="submit" value="提交" />
</form>
// Node
const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");
const app = express();
app.listen(3000);
// parse application/x-www-form-urlencoded,其中extended表示扩展模式
app.use(bodyParser.urlencoded({ extended: false }));
app.get("/", (req, res) => {
res.sendFile(path.resolve("./www/1.html"));
});
app.post("/", (req, res) => {
console.log(req.body);
res.send();
});
5. 处理文件上传multipart/form-data数据格式
、multer插件
multer插件的用法:
- dest属性,规定上传文件的存储路径,例如:
multer({dest: './upload'}).any()
- single(fieldname),接收单文件
- array(fieldname[, maxCount最大传输数量]),接收多文件
- any(),接受一切上传的文件
- res.body,包含非文件数据信息
- res.files,包含文件数据信息
// Html
<form action="http://localhost:3000/" method="POST" enctype="multipart/form-data">
<input type="text" name="name"> <br> <br>
<input type="password" name="password"> <br> <br>
<input type="file" name="fl"> <br> <br>
<input type="submit" value="提交" />
</form>
// Node
const express = require('express');
const path = require('path');
const app = express();
const multer = require('multer');
// 配置文件地址
// any(),同时支持单文件、多文件上传
app.use(multer({dest: './upload'}).any());
app.get('/',(req,res)=> {
res.sendFile(path.resolve('./www/demo.html'));
})
app.post('/',(req,res) => {
console.log(req.body); // 普通字段
console.log(req.files); // 文件数据
res.send();
})
app.listen(3000);
6. 如何使用cookie-parser解析cookie值?cookie
、cookie-parser
什么是cookie?
cookie就是浏览器与服务器通信的一种手段。 特点: cookie值存在于浏览器当中,容量很小,只有4K。服务器如何发送cookie?——express自带发送cookie,
例如:res.cookie("test", 123);
服务器如何接收cookie?——使用cookie-parser,例如:req.cookies、req.signedCookies
;
其中,req.cookie
解析普通cookies值;req.signedCookies
解析签名过的cookies值。如何防止cookie被篡改?
如何对cookie进行加密?
……
- cookie-parser插件的基本使用以及如何防篡改?
const express = require("express");
const app = express();
// 解析cookie
const cookieParser = require("cookie-parser");
app.use(cookieParser("签名字段:dfldanfgopdhguipohpoqghpifgpaiufhdap"));
app.get("/", (req, res) => {
console.log(req.cookies); // 打印结果是:{ test: '123'}
console.log(req.signedCookies); // 打印结果是:{ secret: '123'},若是secret值在浏览器被强行篡改了,那么,打印结果是:{ secret: false }
// 发送cookie
// 未进行签名的cookie
res.cookie("test", 123);
// 进行了签名的cookie
res.cookie("secret", 123, { signed: true });
res.send();
});
app.listen(3000);
- 每一个cookie值都需要进行解密吗?
decodeURIComponent('s%3A123.G8ZTmKtZ2QyERwOKWrJG5GsEGUqUeyUVbS6N5agj%2BQQ')
上述cookie值,解码结果如下:
"s:123.G8ZTmKtZ2QyERwOKWrJG5GsEGUqUeyUVbS6N5agj+QQ"
,其中,s:表示签过名了;123表示cookie值;.的后面就是签名,这段字符是cookie和密钥字符通过哈希算法生成而来。尽管,使用cookie-parser插件进行过签名的cookie值,能够实现防止篡改。但是,浏览器分配给cookie的容量只有4K而已。所以,如果不是特别重要的数据,就要不要签名了。
7. cookie和sessioncookie-session插件
:
什么是session?
session就是浏览器与服务器通信的一种手段。 特点:session值存在于服务器当中,容量在理论上无限,常常与cookie配合使用。cookie-session插件使用:
- name,设置的Cookie的名称,默认为express:sess
- keys,用于签名和验证Cookie值的键列表
- 实现网页访问次数:
const express = require('express')
const app = express();
app.listen(3000);
const cookieSession = require("cookie-session");
// 配置session
// name,设置的Cookie的名称,默认为express:sess
// keys,用于签名和验证Cookie值的键列表
app.use(cookieSession({
name: 'session',
keys:['keys1','key2']
}))
app.use(function(req,res) {
req.session.count = ( req.session.count || 0 ) + 1;
req.session.name = "测试汪";
res.send(`欢迎${ req.session.name },第${ req.session.count }登录网站`);
})
8. express内置路由的使用
路由的本质:根据url地址的不同,调用不同的代码。
路由的原理:switch语句
|-- main.js 根文件
|-- /router 路由文件夹
|--login.js 登录模块
|-- login.js
|--index.js 路由导出文件
main.js根文件
,代码如下:
const express = require("express");
const app = express();
// Router路由
require("./router/index.js")(app);
app.listen(3000, () => console.log("server is running"));
./router/index.js
路由导出文件,代码如下:
/**
* @flie 路由导出文件
*/
module.exports = function (app) {
app.use("/login", require("./login/login.js"));
};
./router/login/login.js
登录模块文件,代码如下:
/**
* @flie 登录模块
*/
const express = require("express");
const router = express.Router();
router.get("/", (req, res) => res.send("welcome to login."));
module.exports = router;
9. ejs模板引擎使用 ejs
模块渲染
模板引擎(Template Engine)是一个将页面模板和后台数据结合起来生成 html 的工具。最后,返回浏览器一个HTML页面。
ejs使用流程:
1.根文件设置引擎和存放目录
、2.路由文件设置渲染路径
、3.写ejs模块内容
require('express')().set():设置模板引擎为 ejs 和存放模板的目录。
res.render()函数渲染 ejs 模板:第一个参数模板的名称,例如 users 则会匹配 views/users.ejs;第二个参数传给模板的数据)ejs语法: 更多ejs语法
<% code %>:
运行 JavaScript 代码,不输出<%= code %>:
显示转义后的 HTML内容,转成字符串。<%- code %>:
显示原始 HTML 内容,常常和include
一起使用
|-- index.js 根文件,通过 app.set 设置模板引擎为 ejs 和存放模板的目录。
| -- routers 路由(调用res.render() 函数渲染 ejs 模板)
|-- users.js
|-- views 存放模板的目录
|-- header.ejs
|-- footer.ejs
|-- users.ejs
- index.js
const express = require('express')
const app = express();
const path = require('path')
// ejs
app.set('views', path.join(__dirname, 'views'))// 设置存放模板文件的目录
app.set('view engine', 'ejs')// 设置模板引擎为 ejs
// Router
app.use('/',require('./router/index'))
app.use('/users',require('./router/users'))
app.listen(3000,()=> {
console.log("server is running");
})
- router/user.js
const express = require("express");
const router = express.Router();
router.get('/:name',(req,res) => {
res.render('users', {
name: req.params.name,
types: ['html','css','js','es6','node']
})
})
module.exports = router;
- views/users.ejs
<%- include('header.ejs') %>
<h1><%= name.toUpperCase() %></h1>
<ul>
<% for(var i = 0; i < types.length; i++) { %>
<li><%= types[i] %></li>
<% } %>
</ul>
<%- include('footer.ejs') %>
网友评论