node.js之express

最新推荐文章于 2024-07-07 13:22:09 发布
最新推荐文章于 2024-07-07 13:22:09 发布
阅读量305 收藏
点赞数
分类专栏： node.js

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 类型的表单数据。

node.js学习之express
weixin_53317758的博客
08-05 414
res.send()发送给客户端，req.query()查询字符串的形式， app.use('/public', express.static('public') 挂载路径前缀，
使用node.js+express+bootstrap+mongodb做简易的博客系统.zip
08-03
在本项目中，我们利用了四个核心技术来构建一个简易的博客系统：Node.js、Express、Bootstrap和MongoDB。下面将详细解析这些技术及其在项目中的应用。 首先，Node.js是基于Chrome V8引擎的JavaScript运行环境，它...
Node.js之Express详解
热门推荐
WikY
11-11 1万+
Express Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架 使用 Express，我们可以方便、快速的创建 Web 网站的服务器或 API 接口的服务器。 express的基本使用 安装 npm install express npm i express@最新版本号 创建基本的web服务器 导入express模块 创建web服务器 调用app.listen()函数启动服务器 //1.导入express模块 const express = require('ex
Nodejs初阶之express(转载兼收藏)BY：聂微东
weixin_34290352的博客
01-10 186
Node和NPM的安装够便捷了，不细说...有几点基础顺手提一下： 安装命令中的 “-g” 表示全局(global) express的版本不是通常的 “-v” 来查看，而是 “-V” 安装express项目的命令如下express -e nodejs-product -e, --ejs add ejs engine support -J, --jshtml add jshtml e...
Node.js之Express
最新发布
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
07-07 990
Node.js之Express
node.js——express框架
weixin_64916164的博客
04-18 3029
Express 是一个流行的 Node.js 框架，为开发者提供了简洁的 API，用于处理 HTTP 请求、响应，以及管理中间件、路由和错误处理。Express 简化了构建 RESTful API、Web 应用程序和微服务的过程。快速开始Express 框架是构建 Node.js Web 应用程序的理想选择。它提供了强大且易于使用的工具，可以满足各种不同类型的 Web 开发需求。本期到此结束，关注我，我会继续写的!!
基于Node.js + Express + MongoDB实现的电商后台管理系统.zip
08-01
基于node.js、vue、mongodb等技术构建的web系统，界面美观，功能齐全，适合用作毕业设计、课程设计作业等，项目均经过测试，可快速部署运行！ 基于node.js、vue、mongodb等技术构建的web系统，界面美观，功能齐全，...
基于Vue + Node.js + Express + MongoDB + ES6制作的购物商城系统 (高仿小米商城)
08-01
基于node.js、vue、mongodb等技术构建的web系统，界面美观，功能齐全，适合用作毕业设计、课程设计作业等，项目均经过测试，可快速部署运行！ 基于node.js、vue、mongodb等技术构建的web系统，界面美观，功能齐全，...
complete-node-js-bootcamp:Node.js，Express，MongoDB等
04-12
Express.js是Node.js的一个Web应用框架，它简化了创建HTTP服务器的过程，提供了丰富的路由、中间件和模板引擎功能，便于快速构建Web应用。通过Express，你可以定义路由来处理HTTP请求，如GET、POST等，轻松地处理...
node.js + express + sqlserver构建简单的后台服务
12-14
node.js + express + sqlserver构建简单的后台服务项目整体结构express服务器入口文件sql server数据库部分数据库接口APi在server文件下运行index文件 （node index）前端页面部分 项目整体结构 。 express服务器...
Node.js Express框架
上庸者-不服周
06-12 3296
中间件Express
node.js总结（express篇）
ksx2333的博客
07-04 937
这部分主要是node使用express框架之后的简写版本。 Express是一个基于NodeJS的Web Server开发框架, 能够帮助我们快速的搭建Web服务器。
node.js中Express简介
weixin_44860226的博客
10-12 8882
官方给出的概念：Express是基于Node.js平台，快速、开放、极简的web开发框架。通俗理解：Express的作用和Node.js内置的http模块类似，是专门用来创建web服务器的Express的本质：就是一个npm上的第三方包，提供了快速创建Web服务器的便捷方法。
node.js中express框架的使用
weixin_54418006的博客
03-18 5313
1. Express express官网 Express是基于Node.js平台快速、开放、极简的web开发框架。 Express的作用和Node.js内置的http模块类似，是专门用来创建web服务器的。 Express本质就是一个npm上的第三方包，提供了快速创建web服务器的便捷方法。 最常见的两种服务器： Web网站服务器：专门对外提供Web网页资源的服务器 API接口服务器：专门对外提供API接口的服务器 使用Express可以方便、快速的创建Web网站的服务器或API接口的服务器 2. E
Node.js笔记-Express（基于Node.js的web开发框架）
maohe的博客
02-11 1107
基于Node.js的Express框架使用及说明，快速使用，express路由，express中间件等深入浅出的使用说明。
Node.js学习之Express框架(一)
道阻且长
05-04 531
Node.js学习之Express框架(一)
Express 基于node.js的web框架
Ya_Taylor的博客
01-25 672
Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。 使用 Express 可以快速地搭建一个完整功能的网站。 Express 框架核心特性： 可以设置中间件来响应 HTTP 请求。 定义了路由表用于执行不同的 HTTP 请求动作。 可以通过向模板传递参数来动态渲染 HTML 页面。 创建文件夹并进入 $...
node.js+express入门
★【World Of Moshow 郑锴】★
08-29 457
什么是express 一句话，基于 Node.js 平台，快速、开放、极简的 Web 开发框架。 安装express 因为新版express的命令和库是分开的，所以需要额外安装一个express-generator $ npm install -g express $ npm install -g express-generator $ express --v 创建一个express项目 cd到你的项目文件主目录，输入 express -e express-test 自动创建express-test
Nodejs Express初学
半路出家，立地为猿
09-30 798
刚好要在公司的一个数据展示项目（Nodejs开发）开发点东西，顺便学习一下nodejs 的express框架。假定我们安装好了nodejs 的环境（Windows下）. 安装express 全局安装 npm install --g express npm install -g express-generator安装完成可以express -V(大写的) 查看express版本 使用express
Node.js与Express.js打造实时Web聊天应用
总结来说，ntalk作为一个基于Node.js和Express.js构建的Web聊天应用程序，展示了如何使用JavaScript作为前后端的主要编程语言，利用Node.js强大的非阻塞I/O能力处理实时通信，以及如何借助Express.js框架快速开发Web...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值