Web前端105天-day32-Node.js

于 2022-12-03 17:56:11 发布
阅读量317 收藏
点赞数
分类专栏： Node.js 文章标签： node.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52810836/article/details/128164141
版权

node.jsday04

目录

前言

一、复习

二、http模块

三、express框架

3.1创建WEB服务器

3.2路由

3.3使用插件将post传参转为对象

总结

前言

node.jsday04学习开始

一、复习

二、http模块

  •  请求的对象

    • req.url--获取请求的资源，格式   '/xxx'

    • req.method--获取请求的方法

  •  练习：编写文件2_http.js，使用http模块创建WEB服务器，设置端口，添加事件监听客户端的请求，根据请求的资源来做出响应

    • /index-- 响应   '<h1>这是首页</h1>'

    • /1.html--响应 1.html文件(先同步读取文件内容，然后把读取的内容作为响应内容 )

    • /study--跳转到    https://www.tmooc.cn

    • 其它-- 响应   404  Not  Found

目录结构

 


<!--1.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品列表</title>
	</head>
	<body>
		<h1>这是一组商品列表</h1>
	</body>
</html>
// 引入http模块                       
const http = require('http')
// 引入fs模块
const fs = require('fs')
// 创建WEB服务器
const app = http.createServer()
// 设置端口
app.listen(3000,()=>{
	console.log('服务器启动成功')
})
// 添加事件，监听客户端请求
app.on('request',(req,res)=>{
	// 判断请求的资源 req.url
	if(req.url === '/index'){
		res.setHeader('Content-Type','text/html;charset=utf-8')
		res.write('<h1>这是首页</h1>')
	}else if(req.url === '/1.html'){
		// 同步读取文件
		var data = fs.readFileSync('1.html')
		// 把读取的内容作为要响应的内容,会自动将buffer转为字符串
		res.write(data)
	}else if(req.url === '/study') {
		// 设置响应的状态码
		res.statusCode = 302
		// 设置响应头信息中跳转的网址
		res.setHeader('Location','https://www.tmooc.cn')
	}else{
		// 设置响应状态码为404
		res.statusCode = 404
		// 设置响应内容为 Not Found
		res.write('Not Found')
	}
	
	// 无论响应任何内容，最后都要结束
	res.end()
})

  • 框架：是一整套解决方案，简化了已有的功能，增加了新的功能，框架为项目开发准备的。

三、express框架

3.1创建WEB服务器

//1.引入express模块
//2.创建WEB服务器
const app=express()
//3.设置端口
app.listen(3000)

3.2路由

  • 监听特定的请求，路由的组成部分：请求的URL、请求的方法、回调函数
  • res--响应的对象
  • res.send()--设置响应内容并发送
  • res.redirect()--设置响应的重定向，跳转到另一个URL
  • res.sendFile()--响应一个文件，路径必须使用绝对路径， __dirname
// 引入express模块 
const express = require('express')
// console.log( express )
// 创建WEB服务器
const app = express()
// 设置端口
app.listen(3000,()=>{
	console.log('服务器启动成功')
})

// 添加路由，监听对首页的请求
// 请求的URL:/index  请求的方法:get
app.get('/index',(req,res)=>{
	// req 请求的对象
	// res 响应的对象
	// 设置响应的内容并发送
	res.send('<h1>这是首页</h1>')
})
// 练习：添加路由，监听对用户登录的请求
// 请求的URL:/login   请求的方法：get
// 响应 '<h1>登录成功</h1>'
app.get('/login',(req,res)=>{
	res.send('<h1>登录成功，欢迎</h1>')
})

// 添加路由 请求的URL：/study  请求的方法：get
// 跳转到 tmooc
app.get('/study',(req,res)=>{
	res.redirect('https://www.tmooc.cn')
})
// 添加路由 请求的URL：/  请求的方法：get
// 跳转到  
app.get('/',(req,res)=>{
	res.redirect('/index')
})

// 添加路由 请求的URL: /1.html 请求的方法：get
// 响应文件1.html
app.get('/1.html',(req,res)=>{
	// 文件必须是绝对路径
	res.sendFile(__dirname + '/1.html')
})

// 获取当前模块的绝对路径
console.log( __dirname )

3.3使用插件将post传参转为对象

(1)使用插件
app.use( express.urlencoded({
  extended: true    //内部是如何转为对象，是否使用第三方模块
}) )
(2)路由中获取参数
req.body

  • post传递的参数出现在请求体中

  • 练习：编写文件04_express.js，引入express模块，创建WEB服务器，设置端口；添加路由(get  /search)，响应搜索的网页search.html

  •  练习：添加路由(get  /login)，响应登录网页login.html，点击提交向服务器发请求(get  /mylogin)，响应‘登录成功！欢迎：xxx’

  • 练习：添加路由(get  /reg)，响应注册的网页reg.html，点击提交向服务器发请求(post  /myreg)，响应‘注册成功！’


<!-- search.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户搜索</title>
	</head>
	<body>
		<!--
			form 用于提交按钮向后端发请求
				method 设置请求的方法
				action 设置请求的URL
			name 设置参数名，接收用户输入的值
		 -->
		<form method="get" action="/mysearch">
			<input type="text" name="wd">
			<button>搜索</button>
		</form>
		
	</body>
</html>
<!-- login.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户登录</title>
	</head>
	<body>
		<h1>用户登录</h1>
		<form action="/mylogin" method="get">
			用户<input type="text" name="user"><br>
			密码<input type="text" name="pwd"><br>
			<button>登录</button>
		</form>
	</body>
</html>
<!-- reg.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
	</head>
	<body>
		<h1>用户注册</h1>
		<form action="/myreg" method="post">
			用户<input type="text" name="user"><br>
			密码<input type="text" name="pwd"><br>
			邮箱<input type="text" name="email"><br>
			手机<input type="text" name="phone"><br>
			<button>注册</button>
		</form>
	</body>
</html>
// 04_express.js

// 引入express模块
const express = require('express')
// 创建WEB服务器
const app = express()
// 设置端口
app.listen(3000)
// 添加路由（get  /search）
// 响应文件search.html
app.get('/search',(req,res)=>{
	res.sendFile(__dirname + '/search.html')
})
// 添加路由(get /mysearch)，监听按钮提交的请求 ，响应'搜索成功！搜索的关键字：'
app.get('/mysearch',(req,res)=>{
	// 获取请求的URL ，请求的方法
	// console.log( req.url, req.method )
	// 获取get传递的参数
	console.log( req.query )
	res.send('搜索成功！搜索的关键字：'+req.query.wd)
})

// 添加路由(get /login)，响应登录的网页login.html
app.get('/login',(req,res)=>{
	res.sendFile(__dirname + '/login.html')
})
// 添加路由(get /mylogin)，监听按钮提交的请求
app.get('/mylogin',(req,res)=>{
	// 获取get传递的参数
	var obj = req.query
	console.log(obj)
	res.send('登录成功！欢迎：'+obj.user)
})

// 添加路由(get /reg)，响应注册文件reg.html
app.get('/reg',(req,res)=>{
	res.sendFile(__dirname + '/reg.html')
})

// （1）添加插件，将post传参转为对象
app.use( express.urlencoded({
	// 内部是否会使用一个第三方模块转为对象
	// true->使用   false->不使用
	extended:true
}) )
// 添加路由(post /myreg)，监听按钮提交的请求
app.post('/myreg',(req,res)=>{
	// （2）获取post传递的参数
	var obj = req.body
	console.log(obj)
	res.send('注册成功')
})

传参方式

格式

路由中获取

get传递

http://127.0.0.1:3000/mysearch?wd=北京

req.query

{wd: '北京'}

post传递

http://127.0.0.1:3000/mysearch

①使用插件转为对象

②req.body

{wd: '北京'}

params传递

http://127.0.0.1:3000/mysearch/北京

①在路由中设置参数名

②req.params

{wd: '北京'}

总结

node.jsday04学习结束

smile陌辰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值