• 浅谈express框架

    浅谈express框架

    介绍：express是基于Node.js平台，快速，开放，极简的WEB开发框架

    扩展阅读

    浅谈关于nodejs的HTTP模块

    前端HTTP协议

    安装

    npm install express

    • 1

    创建简单的服务器

    1.引入模块

    const exprsss=require('express')

    • 1

    express是一个第三方模块所以会自动去node_modules文件夹里面去找

    检查模块是否引入

    const express=require('express')
// 导入express模块
console.log(express)
// 打印显示

    • 1
    • 2
    • 3
    • 4

    如果结果为一串很长的对象就是成功的
    在这里插入图片描述

    2.配置并创建创建服务器

    const express=require('express')
// 导入express模块
const app = express();
// 创建web服务器
app.listen(3000,()=>{
  console.log('http://127.0.0.1:3000 and http://localhost:3000');
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    开启一个端口为3000的本地服务器

    app.listen(3000,()=>{
  console.log('http://127.0.0.1:3000 and http://localhost:3000');
  }

    • 1
    • 2
    • 3

    后面的括号第一个参数为端口第二个为创建成功返回字符

    路由器

    一个端口理论上只能一个接口或者页面使用，但是我们一般不止也个页面，所以我们为了多个页面和功能能正常使用所以我们可以使用路由

    路由的概念

    根据不同的请求来进行处理，格局不同的请求来挂载特定的页面，就像家里的网络一样的，原本一条网线就只能链接一台设备，我们要让更多设备同时上网就要外接路由器，路由给他们分配不同的IP地址，比如管理页面192.168.1.1，手机为192.168.1.32，这个道理

    总结：监听特定的请求

    创建一个路由

    实现hello world

    比如我们监听对首页的请求
    请求的网址：/index 请求的方式：get

    // 监听对首页的请求
// 请求的网址：/index 请求的方式：get
app.get('/', (req, res)=>{
	console.log('hello')
 	//当有请求之后执行的代码
 	// res响应的对象，和HTTP模块的有所不同
 	// 设置响应的内容并发送
  	res.send('hello world');
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    多个路由的使用

    添加/list和/home访问后分别是列表和主页

    实现效果

    浏览器

    在这里插入图片描述
    控制台
    在这里插入图片描述

    思路

    多写几个路由来实现两个，利用 res.send(‘{{text}}’);和app.get来实现

    上代码

    const express=require('express')
// 导入express模块
const app = express();
// 创建web服务器
app.listen(3000,()=>{
  console.log('http://127.0.0.1:3000 and http://localhost:3000');
});

// 监听对首页的请求
// 请求的网址：/index 请求的方式：get
app.get('/list', (req, res)=>{
  // res响应的对象，和之前的不一样
  // 设置响应的内容并发送
  console.log('list');
  res.send('列表');
})
app.get('/home', (req, res)=>{
  // res响应的对象，和之前的不一样
  // 设置响应的内容并发送
  console.log('home');
  res.send('主页');
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    重定向

    顾名思义就是跳转举个简单的例子，假如我创建好之后，我什么都不写就是很尴尬，但是我们利用重定向就能完美解决
    在这里插入图片描述
    为了解决这个尴尬我们就可以使用重定向

    res.redirect('重定向网址')

    • 1

    比如：
    我访问纯网站时直接跳到home页面

    app.get('/', (req, res)=>{
  // res响应的对象，和之前的不一样
  // 设置响应的内容并发送
  console.log('home');
  res.redirect('http://localhost:3000/home')
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这里插入图片描述
    如图当我访问http://127.0.0.1:3000 或者 http://localhost:3000就会自动跳转到http://localhost:3000/home

    响应其他文件

    如：我访问/code时间响应index.html

    这个时候就要用到res.sendFile

    res.sendFile('文件路径')

    • 1

    在这里插入图片描述
    在这里插入图片描述

    但是我们这样写了之后他是报错的

    大意是不能为相对路径，应该为绝对路径
    还有一个办法就是通过 '__dirname’来获得绝对路径
    在这里插入图片描述
    所以

    在这里插入图片描述在这里插入图片描述

    所以代码应该为：

    app.get('/code', function(req, res) {
  res.sendFile(__dirname + '/app.js');
  // 此处应该为绝对路径
})

    • 1
    • 2
    • 3
    • 4

    我们访问http://localhost:3000/code则为
    在这里插入图片描述

    完整代码

    const express=require('express')
// 导入express模块
const app = express();
// 创建web服务器
app.listen(3000,()=>{
  console.log('http://127.0.0.1:3000 and http://localhost:3000');
});

// 监听对首页的请求
// 请求的网址：/index 请求的方式：get
app.get('/list', (req, res)=>{
  // res响应的对象，和之前的不一样
  // 设置响应的内容并发送
  console.log('list');
  res.send('列表');
})
app.get('/home', (req, res)=>{
  // res响应的对象，和之前的不一样
  // 设置响应的内容并发送
  console.log('home');
  res.send('主页');
})

app.get('/', (req, res)=>{
  // res响应的对象，和之前的不一样
  // 设置响应的内容并发送
  console.log('home');
  res.redirect('http://localhost:3000/home')
})

app.get('/code', function(req, res) {
  res.sendFile(__dirname + '/app.js');
  // 此处应该为绝对路径
})

// 获取绝对路径
console.log(__dirname + '/app.js')


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    提交数据和搜索

    我们要实现一个搜索，首先我们先要得到一个搜索引擎的api请求地址这边我直接拿来一个360的接口

    https://www.so.com/s?ie=utf-8&src=hao_360so_suggest_b_cube&shb=1&hsid=ead9b5d97dc6b413&eci=undefined&nlpv=yc&ssid=4eb390e734b0444e96ed2bc57d151b7f&q=xxx

    • 1

    我后面标注的xxx就是参数

    原理

    然后原理就是本地提交数据，然后app.js接收数据然后跳转，接下来我们来试试

    实施

    html核心

    html页面使用for表单提交核心代码为

    <form method="get" action="http://localhost:3000/search">
				<input
					style="
						color: rgb(1, 78, 78);
						width: 30vw;
						height: 40px;
						border-radius: 10px;
						border: 1px solid rgb(194, 191, 191);
					"
					type="text"
					name="text"
					id="111"
				/>
				<input
					style="
						color: bisque;
						background-color: rgb(37, 83, 122);
						width: 10vw;
						height: 40px;
						border-radius: 10px;
						border: 1px solid rgba(194, 191, 191, 0);
					"
					type="submit"
					value="搜索"
				/>
			</form>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    提交地址为本地的"http://localhost:3000/search"

    html代码

    <!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 style="background-color: rgb(112, 112, 112)">
		<div>
			<h1
				style="
					user-select: none;
					text-align: center;
					font-size: 40px;
					color: rgb(21, 96, 146);
				"
			>
				达内搜索
			</h1>
		</div>

		<div
			style="
				margin-top: 15vh;
				text-align: center;
				font-size: 30px;
				color: rgb(21, 96, 146);
			"
		>
			<form method="get" action="http://localhost:3000/search">
				<input
					style="
						color: rgb(1, 78, 78);
						width: 30vw;
						height: 40px;
						border-radius: 10px;
						border: 1px solid rgb(194, 191, 191);
					"
					type="text"
					name="text"
					id="111"
				/>
				<input
					style="
						color: bisque;
						background-color: rgb(37, 83, 122);
						width: 10vw;
						height: 40px;
						border-radius: 10px;
						border: 1px solid rgba(194, 191, 191, 0);
					"
					type="submit"
					value="搜索"
				/>
			</form>
		</div>
	</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59

    JavaScript核心

    html页面使用for表单提交核心代码为

    app.get('/search', function(req, res) {
  //查看接收到的数据
  console.log(req.query.text)
  // 拼接跳转
  res.redirect(`https://www.so.com/s?ie=utf-8&src=hao_360so_suggest_b_cube&shb=1&hsid=ead9b5d97dc6b413&eci=undefined&nlpv=yc&ssid=4eb390e734b0444e96ed2bc57d151b7f&q=${req.query.text}`)
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    接受参数的接口为"/search"

    JavaScript代码

    const express=require('express')
// 导入express模块
const app = express();
// 创建web服务器
app.listen(3000,()=>{
  console.log('http://127.0.0.1:3000 and http://localhost:3000');
});

app.get('/search', function(req, res) {
  // console.log(req.query);
  // 此处应该为绝对路径
  res.redirect(`https://www.so.com/s?ie=utf-8&src=hao_360so_suggest_b_cube&shb=1&hsid=ead9b5d97dc6b413&eci=undefined&nlpv=yc&ssid=4eb390e734b0444e96ed2bc57d151b7f&q=${req.query.text}`)
})
// 获取绝对路径
console.log(__dirname + '/app.js')

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    总结

    主要使用的模块的{{req}}功能【接收的数据】
    参数总结
    okk

  • 相关阅读:
    Element的步骤条el-steps加入插槽内容
    详解linux多线程——互斥锁、条件变量、读写锁、自旋锁、信号量
    计算机毕业设计基于node.js的在线跑腿系统-计算机毕业设计
    【Android 屏幕适配】异形屏适配 ① ( 异形屏类型:刘海屏、水滴屏、挖孔屏 | 沉浸式布局刘海屏适配 | 华为手机异形屏适配注意点 )
    文件夹高效改名，批量设置文件夹仅显示编号无名称的方法“
    Vue3：响应式数据的基本使用（ref、reactive）
    接口和接口测试
    github配置ssh密钥
    【大数据分析毕设之基于python爬虫的疫情舆论情感分析可视化系统-哔哩哔哩】 https://b23.tv/uHQCSLK
    SkyWalking快速上手（五）——存放在内存、数据持久化
  • 原文地址：https://blog.csdn.net/weixin_50112395/article/details/125427646