【Node.js】②

1.post请求参数

先划分请求方式
如果是post请求 如何接收路径和参数

const http=require("http")
const querystring=require("querystring")
http.createServer((req,res)=>{
	//先判断本次的请求方式
	// console.log(req.method)  输出POST
	if(req.method=="GET"){
		
	}else if(req.method=="POST"){
		//获取api地址和参数
		//post请求地址就是req.url
		let url=req.url
		//post请求的参数
		//分段接收
		let arr=[]// post请求参数的容器 每接收一段放入arr
		//监听数据 事件监听
		//data事件 数据传过来自动触发
		req.on("data",data=>{
			arr.push(data)
		})
		//req.on("end") end事件 数据传递完成
		req.on("end",()=>{
			//arr里存放了所有的数据
			//Buffer对象 数据在计算机中传递的类型
			let buffer=Buffer.concat(arr)
			//字符串
			console.log(buffer.toString())// username=wangyi&upass=123
			//不能使用url模块解析 url解析带有路径和参数 /login?username=wangyi&upass=123
		    let result=querystring.parse(buffer.toString())
			console.log(result)
		})
	}
}).listen(8000)

然后创建个form表单直接打开

<form action="http://localhost:8000/reg" method="post">
        <p>
            <input type="text" name="username">
        </p>
        <p>
            <input type="text" name="upass">
        </p>
        <input type="submit">
    </form>

form表单不存在跨域问题所以 直接打开后
输入username：123456789
输入upass：123
点击登录
node会接收到;
username=123456789&upass=123
[Object: null prototype] { username: ‘123456789’, upass: ‘123’ }
和上面代码对照一下 就会明白
以上这个接收参数的问题就解决了

2.上传图片

node开发过程中 每一个特殊的需求 都有一个对应的模块
fs,http,path,url,querystring 都是node自带的
第三方模块都是别人写好传到npm上的
用什么模块就自己去百度， 比如node上传图片 模块是： multiparty
1.npm官网查看 2.查看文档怎么使用

我们先在同目录下创建一个文件夹用来放.html文件，然后在里面在创建一个images文件夹用来储存上传后的图片
那么下面先写个node.js

const http=require("http")
const multiparty=require("multiparty")
const url=require("url")
const fs=require("fs")
const server=http.createServer((req,res)=>{
	if(req.method=="POST"){
		let url=req.url
		if(url=='/reg'){
			//接收到对应的参数 以及图片
			//使用multiparty来接收
			//第一步：利用multiparty模块.Form()创建一个对象
			let form=new multiparty.Form({
				uploadDir:"./www/images"//上传图片保存的路径
			})
			//直接通过form对象 解析req 得到参数和图片信息
			//err 如果上传图片有错误 就会有err
			//data 参数
			//files 上传后的图片信息
			form.parse(req,(err,data,files)=>{
				console.log(err)
				console.log(data)
				console.log(files)
                res.write("注册成功")//响应的内容
                res.end()           //响应结束
			})
		}
	}else if(req.method=="GET"){
		let {pathname,query}=url.parse(req.url,true)//将解析的结果转化为对象
		if(pathname.endsWith(".html")){    //endsWith() 方法用来判断当前字符串是否是以指定的子字符串结尾的 区分大小写
			//在 Node.js 中读取文件最简单的方式是使用 fs.readFile() 方法，
			//向其传入文件路径、编码、以及会带上文件数据（以及错误）进行调用的回调函数
			fs.readFile(`./www${pathname}`,(err,data)=>{
				if(err){
					res.write("404")
					res.end()
					
				}else{
					res.write(data)
					res.end()
				}
			})
		}
	}
})
server.listen(8111,()=>{
	console.log("服务器启动成功")
})

然后在www文件夹下创建一个formData.html文件

<form action="http://localhost:8111/reg" method="post" enctype="multipart/form-data" id="form">
		<p>
			<input type="text" name="username" >
		</p>
		<p>
			<input type="text" name="puass" >
		</p>
		<p>
			<input type="file" name="f1" >
		</p>
		<p>
			<input type="submit"  >
		</p>
	</form>

下面得给个ajax请求

//Ajax2.0版本 formData用于ajax提交图片
		var form=document.getElementById('form')
		//提交
		form.onsubmit=function(){
			//使用ajax提交数据 数据都在form
			//1.创建一个formData对象
			let fd=new FormData(form)//将整体的表单 转化成formData数据
			let xml=new XMLHttpRequest()//创建ajax
			//2.创建连接
			xml.open(form.method,form.action,true)
			//3.发送数据
			xml.send(fd)
			//4.监听变化
			//当请求被发送到服务器时，我们需要执行一些基于响应的任务。
            //每当 readyState 改变时，就会触发 onreadystatechange 事件。        
            //readyState 属性存有 XMLHttpRequest 的状态信息。
			xml.onreadystatechange=function(){
				if(xml.readyState==4&&xml.status==200){
					console.log(xml.responseText)
				}
			}
			return false
		}

下面是 XMLHttpRequest 对象的三个重要的属性：

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪。
注意： onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。

上面的理解了之后让我们来启动服务器并打开网页：http://localhost:8111/formData.html
没什么问题之后 输入username：123，puass：456，点击选择文件 ：找个图片点击上传 注册看看会输出什么反应！

对！node接收到了！！图片！！
找到相应的储存图片的文件夹 看看是否 有图片，如果有就成功了！！！！

完活！！！