node.js之express

其他 2021-02-27 20:41:35 阅读次数: 0

Express 简单介绍

Express 是一个基于 Node.js 平台，快速、开放、极简的 web 开发框架，它提供一系 列强大的特性，帮助你创建各种 Web 和移动设备应用。

Express 安装使用

npm install express --save

Express的使用

const express = require("express"); /*引入 express*/
var app = express(); /*实例化 express 赋值给 app*/
//配置路由 匹配 URl 地址实现不同的功能
app.get("/", (req, res) => {
    
    
    res.send("get方法");
})
app.post("/post", (req, res) => {
    
    
        res.send("post方法");
    })
    //动态路由配置：   配置路由时要注意顺序
app.get("/user/:id", (req, res) => {
    
    
    var id = req.params["id"]; //得到动态路由中的id值
    res.send(id);
})

//get传值      
//http://localhost:3000/news?id=2&sex=nan
app.get("/news", (req, res) => {
    
    
    let query = req.query; //获取get传值可以得到{"id":"2","sex":"nan"}
    res.send(query);
})
app.listen(3000); //监听的端口号

Express 框架中 ejs 的安装使用

ejs简介：
EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。

/*
    1.安装   npm install ejs --save
    2.配置   app.set("view engine","ejs")
    3.使用   (默认加载模板引擎的文件夹是views)
    res.render("index",{//加载index文件
    })
*/
const express = require("express"); /*引入 express*/
var app = express(); /*实例化 express 赋值给 app*/
//配置模板引擎
app.set('views', __dirname + '/views');//指定模板位置 ，默认模板位置在 views可写可不写
app.set("view engine", "ejs");
app.use(express.static("static")) //配置静态资源目录，加载css样式，使用static目录下的静态资源
app.get("/", (req, res) => {
    
    
    let title = "你好ejs" //传递参数
    var userinfo = {
    
     //传递方法
        username: "张三",
        age: 20
    }
    let article = "<h3>我是一个h3</h3>" //输出一个html
    let list = ["1111", "2222", "3333"]
    res.render("index.ejs", {
    
     //默认加载views文件夹   。加载index文件
        title, //从后台给前台传递数据
        userinfo,
        article,
        list,
        flag: true, //判断

    })
})

app.listen(3001); //监听的端口号

Ejs 后缀修改为 Html代码


//这是一个小技巧，看着.ejs 的后缀总觉得不爽，使用如下方法，可以将模板文件的后缀换成我们习惯的.html。 
//1.在 app.js 的头上定义 ejs:,代码如下: 
var ejs = require('ejs');
//2.注册 html 模板引擎代码如下： 
app.engine('html', ejs.__express);
//3.将模板引擎换成 html 代码如下: 
app.set('view engine', 'html');
// 4.修改模板文件的后缀为.html。

界面代码
在这里插入图片描述

express的中间件

通俗的讲： 中间件就是匹配路由之前或者匹配路由完成做的一系列的操作。中间件中如果想往下 匹配的话，那么需要写 next()

Express 应用可使用如下几种中间件：
应用级中间件, 路由级中间件, 错误处理中间件, 内置中间件 ,第三方中间件

  1. 应用级中间件(用于权限判断)
app.use((req, res, next) => {
    
     /*匹配任何路由*/
    console.log(new Date())
    next();/*表示匹配完成这个中间件以后程序继续向下执行*/
})
  1. 路由中间件
app.use("/news/:id",(req,res)=>{
    
    // 用的非常少
    res.send("动态路由");
})
  1. 错误处理中间件
app.use((req, res, next) => {
    
    
    res.status(404).send("404");//界面不匹配就会出现404
})
  1. 内置中间件
配置静态资源目录，加载css样式，使用static目录下的静态资源
 app.use(express.static("static"));//匹配路由之前，他首先会去这个static文件夹目录找是否匹配
  1. 第三方中间件
    例子：
    body-parser 中间件 第三方的 获取 post 提交的数据（最常见方法）
    用法

获取post传过来的数据
1.cnpm install body-parser --save
2.var bodyParser = require(‘body-parser’)
3.设置中间件
处理 form 表单的中间件：
app.use(bodyParser.urlencoded({ extended: false })); //form 表单提交的数据
app.use(bodyParser.json()); //提交的 json 数据的数据
4.req.body 获取数据

代码：


const express = require("express"); /*引入 express*/
var app = express(); /*实例化 express 赋值给 app*/
var ejs = require('ejs');
//2.注册 html 模板引擎代码如下： 
var bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({
    
     extended: false }));
app.use(bodyParser.json());
app.engine('html', ejs.__express);
//3.将模板引擎换成 html 代码如下: 
app.set('view engine', 'html');
// 4.修改模板文件的后缀为.html。
//配置模板引擎
app.use(express.static("static")) //配置静态资源目录，加载css样式，使用static目录下的静态资源
app.get("/", (req, res) => {
    
    
    res.send("首页");
})
app.get("/login", (req, res) => {
    
    
    //req.query;获取get传值
    res.render("login", {
    
    

    })
})
app.post("/doLogin", (req, res) => {
    
    
    //获取post传值
    var body = req.body;
    console.log(body);
    res.send("执行提交" + body.username); //发送一定要发送字符串，只发送body会报错，不能发送方法
})
app.listen(3001); //监听的端口号

Express Cookie 的基本使用

Cookie 简介

1.cookie 是存储于访问者的计算机中的变量。可以让我们用同一个浏览器访问同一个域 名的时候共享数据。
2.HTTP 是无状态协议。简单地说，当你浏览了一个页面，然后转到同一个网站的另一个页 面，服务器无法认识到这是同一个浏览器在访问同一个网站。每一次的访问，都是没有任何 关系的。
3.Cookie 是一个简单到爆的想法：当访问一个页面的时候，服务器在下行 HTTP 报文中， 命令浏览器存储一个字符串; 浏览器再访问同一个域的时候，将把这个字符串携带到上行 HTTP 请求中。第一次访问一个服务器，不可能携带 cookie。 必须是服务器得到这次请求， 在下行响应报头中，携带 cookie 信息，此后每一次浏览器往这个服务器发出的请求，都会 携带这个 cookie。

在这里插入图片描述

Cookie 的使用

1.安装 cnpm instlal cookie-parser --save
2.引入 var cookieParser = require(‘cookie-parser’);
3.设置中间件
app.use(cookieParser());
4.设置 cookie
res.cookie(“name”,‘zhangsan’,{maxAge: 900000, httpOnly: true});
5. 获取 cookie
req.cookies.name

实现不同页面之间的数据共享

const express = require("express");
const app = express();
//引入
var cookieParser = require('cookie-parser');
//设置中间件
app.use(cookieParser());
app.get("/", (req, res) => {
    
    
    //设置cookie，如果cookie没有过期的话，关闭浏览器后重新打开，cookie不会销毁
    res.cookie("username", 'zhangsan', {
    
     maxAge: 900000, httpOnly: true });
    res.send("你好啊");
})
app.get("/article", (req, res) => {
    
    
    //获取cookie
    let username = req.cookies.username;
    //console.log(req.signedCookies.username);   使用cookie加密厚获取cookie
    console.log(username)
    res.send("新闻页面" + username);
})
app.get("/user", (req, res) => {
    
    
    res.send("用户页面");
})
app.listen(3003);

由于这样使用cookie容易被客服端改动，所以后期需要给cookie加密

Cookie 属性说明

属性 描述
domain 域名 name=value：键值对，可以设置要保存的 Key/Value，注意这里的 name 不能和其他属性项的名字一样 （多个域名共享cookie）
Expires 过 期 时 间 （ 秒 ） ， 在 设 置 的 某 个 时 间 点 后 该 Cookie 就 会 失 效 ， 如 expires=Wednesday, 09-Nov-99 23:12:40 GMT
maxAge 最大失效时间（毫秒），设置在多少后失效
secure 当 secure 值为 true 时，cookie 在 HTTP 中是无效，在 HTTPS 中才有效
Path 表示 cookie 影响到的路路径，如 path=/。如果路径不能匹配时，浏览器则 不发送这个 Cookie
httpOnly 是微软对 COOKIE 做的扩展。如果在 COOKIE 中设置了“httpOnly”属性，则通 过程序（JS 脚本、applet 等）将无法读取到 COOKIE 信息，防止 XSS 攻击产生
singed 表示是否签名 cookie, 设为 true 会对这个 cookie 签名，这样就需要用 res.signedCookies 而不是 res.cookies 访问它。被篡改的签名 cookie 会被服务 器拒绝，并且 cookie 值会重置为它的原始值

设置 cookie 的几种方法

//设置cookie  ，有效时间为60分钟
    res.cookie("username", 'zhangsan', {
    
     maxAge: 1000*60*60,});
//多个域名共享cookie   aaa.itying.com  bbb.itying.com  能同时 共享cookie
    res.cookie("username", 'zhangsan', {
    
     maxAge: 900000, domain:".itying.com"});

cookie加密(一般使用cookie都会加密)

  1. 配置中间件的时候需要传参
var cookieParser = require('cookie-parser'); 
app.use(cookieParser('123456'));
  1. 设置 cookie 的时候配置 signed 属性
res.cookie('userinfo','hahaha',{
    
    domain:'.ccc.com',maxAge:900000,signed:true});
  1. signedCookies 调用设置的 cookie
console.log(req.signedCookies);

Express Session 的基本使用

  • Session 简单介绍

session 是另一种记录客户状态的机制，不同的是 Cookie 保存在客户端浏览器中，而 session 保存在服务器上。
Cookie 数据存放在客户的浏览器上，Session 数据放在服务器上。Session 相比 Cookie 要 更安全一些。由于 Session 保存到服务器上，所以当访问量增多的时候，会比较占用服务器 的性能。单个 cookie 保存的数据大小不能超过 4K，很多浏览器都限制一个站点最多保存 20 个 cookie。Session 没有这方面的限制。Session 是基于 Cookie 进行工作的。

  • express-session 的使用

1、安装 express-session
cnpm install express-session --save
2、引入 express-session
var session = require(“express-session”);
3. 设置官方文档提供的中间件
app.use(session({}))
4. 使用
设置值 req.session.username = “张三”;
获取值 req.session.username

  • express-session 的常用参数
参数 作用
secret 一个 String 类型的字符串，作为服务器端生成 session 的签名。
name 返回客户端的 key 的名称，默认为 connect.sid,也可以自己设置。
resave 强制保存 session 即使它并没有变化,。默认为 false。 don’t save session if unmodified
saveUninitialized 强制将未初始化的 session 存储。当新建了一个 session 且未设定属性或值时，它就 处于未初始化状态。在设定一个 cookie 前，这对于登陆验证，减轻服务端存储压力，权 限控制是有帮助的。（默认：true）。建议手动添加。
cookie 设置返回到前端 key 的属性，默认值为{ path: ‘/’, httpOnly: true, secure: false,maxAge: null }。
rolling 在每次请求时强行设置 cookie，这将重置 cookie 过期时间（默认：false）
  • 使用例子
const express = require("express");
const app = express();
var session = require("express-session");
//配置session的中间件
app.use(session({
    
    
    secret: 'keyboard cat', //服务器端生成session的签名   (可以随便写)
    name: "itying", //修改session对应的cookie的名称
    resave: false, //强制保存session即使他没有变化  默认
    saveUninitialized: true, //强制将未初始化的session存储
    cookie: {
    
     secure: false }, //配置cookie的信息   secure:true表示只有https协议才能访问cookie
    rolling: true, //在每次请求时强行设置cookie，这将重置cookie过期时间（默认：false）
}))
app.get("/login", (req, res) => {
    
    
    //设置session
    req.session.username = "张三"
    res.send("执行登录");
});
app.get("/", (req, res) => {
    
    
    //获取session
    if (req.session.username) {
    
    
        res.send("已经登录");
    } else {
    
    
        res.send("没有登录");
    }
});
app.get("/loginOut", (req, res) => {
    
    
    //1.设置session的过期时间为0  (他会把所有的session都销毁，)
    res.session.cookie.maxAge = 0;
    //2.销毁指定session（用的比较多）
    req.session.username = "";
    //3.销毁所有的session  
    req.session.destroy();
    res.send("退出登录");
})
app.listen(3000);
  • 负载均衡配置 Session，把 Session 保存到数据库里面
1.需要安装 express-session 和 connect-mongo 模块
2.引入模块 
var session = require("express-session");
const MongoStore = require('connect-mongo')(session);
3.配置中间件
app.use(session({
    
    
store: new MongoStore({
    
     
	url: 'mongodb://127.0.0.1:27017/student', //配置数据库地址
	touchAfter: 24 * 3600  //不管发出了多少请求，在24小时内值更新一次session，除非你改变了这个session
	}) 
}))
  • Express 路由模块化

Express 中允许我们通过 express.Router 创建模块化的、可挂载的路由处理程 序。

1.新建一个 login.js 配置如下代码

const express = require("express");
var router = express.Router();
//访问http://localhost:3000/login
router.get("/", (req, res) => {
    
    
    //req.query;获取get传值
    res.send("你好啊");
})

//访问http://localhost:3000/login/aa
router.get("/aa", (req, res) => {
    
    
    //req.query;获取get传值
    res.send("aa");
})

module.exports = router

2.在主js文件中挂载这个模块文件

const express = require("express"); /*引入 express*/
var app = express(); /*实例化 express 赋值给 app*/
//引入外部模块
const login = require("./routes/login");
//2.注册 html 模板引擎代码如下： 
//挂在login模块
app.use("/login", login);
app.get("/", (req, res) => {
    
    
    res.send("首页");
})
app.listen(3000); //监听的端口号

Express 结合 multer 上传图片

  • Multer 模块介绍

Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用 于上传文件。它是写在 busboy 之上非常高效。
注意: Multer 不会处理任何非 multipart/form-data 类型的表单数据。

猜你喜欢

转载自blog.csdn.net/weixin_44931166/article/details/109701248
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
周排行
自媒体文章如何提高原创度以及如何检测原创度
开启qq邮箱的smtp服务
Qt程序单次启动（QSingleApplication类）
国外的外包网站
更新IDEA主题——放飞代码风格
cocos2dx 实现搓牌效果（翻牌效果），包括铺平动画
dict和json之间的互相转换
angular的一些思考
. Fibonacci数列是这样定义的： F[0] = 0 F[1] = 1 for each i ≥ 2: F[i] = F[i-1] + F[i-2] 因此，Fibonacci数列就形如：0, 1
洛谷P1064 金明的预算方案
每日归档
更多
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022