Express框架的介绍和使用

最新推荐文章于 2023-07-18 07:00:00 发布

(￣o￣) . z Z

最新推荐文章于 2023-07-18 07:00:00 发布

阅读量549

点赞数 1

分类专栏： express 文章标签： node.js 前端 javascript es6 yarn

本文链接：https://blog.csdn.net/weixin_47594564/article/details/114690678

版权

express 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是Express？

Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。
简单的说就是可以利用Express快速，简单的搭建服务器。并且可以选择各种 HTTP 实用工具和中间件，快速方便地创建强大的 API。
链接：express使用文档

快速入门使用：

方法1：

1.在项目文件夹目录下安装 Express 并将其保存到依赖列表

npm install express --save
yarn add express

2.创建server.js文件并写入代码：

const express = require('express')；//引入express
const app = express()；//创建app服务对象
 
app.get('/', function (req, res) { // 配置路由
  res.send('Hello World')；给浏览器做出一个响应，页面返回Hello World
})；

app.listen(3000)；//绑定监听端口

命令行中执行： node server.js
参看网站： http://localhost:3000

方法2：

1.全局安装：express-generator脚手架

npm i -g express-generator
yarn global add xxxxxx

2.使用 express 命令来快速从创建一个项目目录

 express demo -e        // -e: 使用ejs模板

3.进入项目下载所需依赖：

npm install
yarn

4.运行

node bin/www

参看网站： http://localhost:3000

路由：

Router 是一个完整的中间件和路由系统，也可以看做是一个小型的app对象他可以更好的帮助我们分类管理route。

var express = require("express");
var router = express.Router();  // 创建router对象
// 配置路由-----对请求的url进行分类，服务器根据分类决定交给谁去处理
//get:  请求：
router.get('/text', function (request, response) {
  console.log('路由text收到get请求')
  response.send('这里是路由返回的信息，收到了get请求')
});
//在开启服务器后在浏览器地址输入http://localhost:3000/test 进行get请求 

//post：请求
router.post('/text', function (request, response) {
  console.log('路由text收到post请求')
  response.send('这里是路由返回的信息，收到了post请求')
})；
//可以使用form表单进行post请求

//跟路由
router.get("/", function(request, response) {
    response.send("跟路由");
});
//一级路由
router.get("/meishi", function(request, response) {
    response.send("一级路由");
});
//二级路由
router.get("/meishi/huoguo", function(request, response) {
    response.send("二级路由");
});
//参数路由
router.get("/test/:id", function(request, response) {
    // request.params:  获取get请求的参数路由的参数，拿到的是一个对象
    let { id } = request.params;
    response.send(`我是第${id}个子页面`);
});

Request：

Request对象是路由回调函数中的第一个参数，代表了客户端发送给服务器的请求信息。

// request.query:  获取查询字符串参数，拿到的是一个对象；
// request.get():  获取请求头中指定的key对应的value；
// request.params:  获取get请求的参数路由的参数，拿到的是一个对象；
// request body: 获取post请求体，拿到的是一个对象（但是需要借助中间件）；

Request：

Response对象是路由回调函数中的第二个参数，代表了服务器发送给客户端的响应信息。

//response.download("下载文件地址");告诉浏览器下载一个文件 ;
//response.sendFile("绝对路径");给浏览器发送一个文件 注意:路径必须写绝对路径;
//response.redirect("/test/demo");重定义到自己的地址栏;
// response.redirect("https://www.baidu.com");重定义到一个新的地址(url);
// response.send();给浏览器做出一个响应,包含响应头;
// response.sen();给浏览器做出一个响应,不包含响应头;
//response.set(key,value);自定义响应头内容;
//response.get();获取响应头指定key对应的value;

中间件：

中间件是一个用于处理客户端请求的函数。一个HTTP服务器中可能会使用到各种中间件。当接收到一个客户端请求时，首先将该请求提交给第一个中间件函数，每一个中间件函数内部封装一个next回调函数，在一个中间件函数内部可以判断是否调用next回调函数来处理该客户端请求。
书写方法：

function middleware(req,res,next){next()}

使用方法：

app.use([path],function)

1.在我们使用post请求得到客户端传给我们的对象的时候我们需要借助express自带的中间件：

const express = require("express");
const app = express();
app.use(express.urlencoded({ extended: false }));
app.post("/test", function(request, response) {
	let obj =  request.body; //得到post请求的参数
    console.log(obj );
    response.send("OK")
});
app.listen(3000);

2.使用内置中间件暴露静态资源可以把所指定的文件夹里的资源全部暴露出去，相当于给他们全部配置了一个路由

app.use(express.static('public'));

ejs模板：

什么是ejs模板？

“E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“优雅（Elegant）”或者是“简单（Easy）”。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。
如果大家了解过jsp的话相信可以轻松的学会ejs。

1.下载安装

npm install ejs --save
yarn add ejs

2.配置模板引擎

app.set("view engine" , "ejs");

3.配置模板存放的路径

app.set('views', path.join(__dirname, 'views'));

4.在views目录下创建 .ejs文件
5.渲染数据并返回html.index是我们定义的index.ejs文件

 res.render('index');

用法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        ejs语法：
            1.<%%> 里面可以写任意js代码，但是不会向浏览器输出任何东西
            2.<%- %> 能够将后端传递过来对象指定key所对应value渲染的页面（可以渲染html标签）
            3.《%= %> 能够将后端传递过来对象指定key所对应value渲染的页面（渲染不了html标签）
     -->
    <% for (var i = 0; i < 100; i++) { %>
        <h1>hello World</h1>
    <% } %>
    <!-- 遍历100次hello world -->

</body>

</html>

cookie：

为什么会出现cookie：

因为HTTP是无状态协议。简单地说，当你浏览了一个页面，然后转到同一个网站的另一个页面，服务器无法认识到这是同一个浏览器在访问同一个网站。每一次的访问，都是没有任何关系的。但是我们为了在登录一次账号后让下一次登录记住上一次登录的账号，让我们无需再次输入账号，所以我们需要一个东西把我的登录记录给记录下来。cookie 就达到了这个效果。
cookie可以使我访问页面的时候让服务器命令浏览器存储一个字符串，当浏览器再次访问同一个域的时候，把这个字符串携带到http请求中。这样可以使我们下次不用登录账号即可再次访问网站了

怎么使用cookie？

下载第三方包

npm install cookie-parser
yarn add cookie-parser

在服务端引入

let cookieParser = require("cookie-parser");
app.use(cookieParser()); 
//express中客户端写cookie不需要任何的库
//express中读取客户端携带过来的cookie要借助中间件：cookie-parser
app.get("/demo", function(request, response) {
    response.send("没有cookie对话");
});
app.get("/demo1", function(request, response) {
    let obj = { shools: '家里蹲', subject: '前端' }
    response.cookie("data", obj)
    response.send("改客户端种下一个【会话cookie】");
});
app.get("/demo2", function(request, response) {
    let obj = { shools: '家里蹲', subject: '前端' }
    response.cookie("data", obj, { maxAge: 1000 * 60 })
    response.send("改客户端种下一个【持久化cookie】");
});
app.get("/demo3", function(request, response) {
    let schools = request.cookies.data.shools;
    response.send("获取cookie传的对象" + schools);
});
//清除cookie
app.get("/demo4", function(request, response) {
	//方法1：
    response.cookie("data", "", { maxAge: 0 });
    //方法2：
    // response.clearCookie("data");
    response.send("清除cookie");
});

cookie的弊端：
cookie 中的所有数据在客户端就可以被修改，数据非常容易被伪造，那么一些重要的数据就不能存放在 cookie 中了，而且如果 cookie 中数据字段太多会影响传输效率。为了解决这些问题，就产生了 session，session 中的数据是保留在服务器端的。
这时我们又引出了seccion

seccion：

什么是session？

session是另一种记录客户状态的机制，与cookie保存在客户端浏览器不同，session保存在服务器当中,cookie是保存在客户端中的
当客户端访问服务器时，服务器会生成一个session对象，对象中保存的是key:value值，同时服务器会将key传回给客户端的cookie当中；当用户第二次访问服务器时，就会把cookie当中的key传回到服务器中，最后服务器会吧value值返回给客户端。
因此上面的key则是全局唯一的标识，客户端和服务端依靠这个全局唯一的标识来访问会话信息数据。
1.下载安装

npm install express-session
yarn add express-session

2.引入express-session

let session = require("express-session");

3.配置一个简单的session

app.use(session({
	name:'id', //设置cookie的name，默认是connect.sid
	secret: ' ',参与加密的字符串
	cookie: {
		maxAge: 1000*30, //设置cookie的过期时间 
	}
}))

4.向session中添加一个key，值为value：req.session.key= value
5.获取session上的key属性：const {key} = req.session

(￣o￣) . z Z

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录