1 发送请求的方式
1.1 post请求
- post请求的数据在请求体中，不在地址栏中，可以传输大数据
- 请求的数据为字符串类型，即query类型；如
key1=v1&key2=v2&key3=v3；
- 请求的数据为字符串类型，即query类型；如
- get请求的数据是通过地址栏，传递参数，只能传输小数据，
- 请求的数据：通过
req.url拿到的是端口号后面的部分；如/index.html?key1=v1&key2=v2&key3=v3; - 通过url模块，拿到URL对象，取对象中query属性；
- 请求的数据：通过
- post请求的大数据在请求时，会被拆分为多个小块数据，发送多次请求；
- 需要利用on绑定事件；
- 接收请求：绑定"data"事件；如：
req.on("data",(data)=>{})；通过字符串拼接拿到多次传输的完整数据； - 响应：绑定"end"事件；如：
req.on("end",()=>{});
- 接收请求：绑定"data"事件；如：
- 代码：
const http=require("http"); const querystring=require("querystring"); const url=require("url"); const server=http.createServer((req,res)=>{ if(req.url==="/favicon.ico") return; //post请求 //就相当于把接收的大块数据拆分成的多个小块数据； //data事件，会执行很多次； var str=""; req.on("data",(data)=>{ str+=data; }); //end事件只会触发一次；在数据被运输完成的时候； req.on("end",()=>{ var postData=querystring.parse(str); console.log(postData);//打印的是对象； res.end("ok");//结束浏览器的响应； }); }); server.listen(8080);
1.2 get请求和post请求的共存
- 服务器中get请求和post请求是共同存在的；
- 在服务器中get请求的代码要放在end事件中；因end事件只会触发一次；在数据被运输完成的时候；
- 代码：
const http=require("http"); const querystring=require("querystring"); const url=require("url"); const server=http.createServer((req,res)=>{ if(req.url==="/favicon.ico") return; //post请求 //就相当于把接收的大块数据拆分成的多个小块数据； //data事件，会执行很多次； var str=""; req.on("data",(data)=>{ str+=data; }); //end事件只会触发一次；在数据被运输完成的时候； req.on("end",()=>{ var postData=querystring.parse(str); //get请求和post请求同时存在的时候，要将get请求的代码写在end中； var getData=url.parse(req.url,true).query; console.log(postData);//打印的是对象； console.log(getData);//打印的是对象； res.end("ok");//结束浏览器的响应； }); }); server.listen(8080);
2 注册登录验证实例
- 思路：
- 登录注册页面的加载：通过地址栏中发送get请求，必须设置地址中的pathname为html文件名，且在服务器中通过拿到pathname值，然后通过
fs.readFile()来打开相对路径下的html文件，然后通过res.end(data)，将数据渲染会前端页面，即html文件加载呈现； - 通过给登录和注册按钮添加点击事件，来分别进行ajax发送请求；
- 通过获取地址中的pathname，来获取ajax中设置的url为
/user，在服务器中进行筛选，进而判断用户名和密码的对应，来进行不同的判断；因为已经在同一域名下，所以只需要设置pathname值即可； - ajax中success函数中，获取的data数据为服务器中end传出的数据，传出数据为json格式的字符串，在ajax中通过获取数据类型为json格式，来将响应的数据转化为json格式的对象；
- 登录注册页面的加载：通过地址栏中发送get请求，必须设置地址中的pathname为html文件名，且在服务器中通过拿到pathname值，然后通过
- 知识点及问题：
- 在使用jquery中的ajax发送请求时；需要通过script引入jquery，在渲染页面后，src会默认再发送一次get请求，请求的pathname为引入的相对路径，也通过fs.readFile()来渲染打开，此时页面才能引入jquery插件，才能使用；否则，不能使用；
- 代码：
- html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册实例</title> </head> <body> <form> <label for="user"> 用户名：<input id="user" type="text" name="user"> </label> <label for="pass"> 密码：<input id="pass" type="password" name="pass"> </label> <input type="button" value="注册" id="reg"> <input type="button" value="登录" id="login"> </form> <script src="ajax.js"></script> <script> var oUser=document.getElementById("user"); var oPass=document.getElementById("pass"); var oReg=document.getElementById("reg"); var oLogin=document.getElementById("login"); oLogin.onclick=function () { myAjax({ url:"/user", type:"get", dataType:"json", data:{act:"login",username:oUser.value,password:oPass.value}, success:function (data) { alert(data.msg); }, error:function () { console.log("通讯错误"); } }) }; oReg.onclick=function () { myAjax({ url:"/user", type:"get", dataType:"json", data:{act:"reg",username:oUser.value,password:oPass.value}, success:function (data) { alert(data.msg); }, error:function () { console.log("通讯错误"); } }) }; </script> </body> </html>- 服务器js代码：
const http=require("http"); const fs=require("fs"); const url=require("url"); var user={ guo:"123", bin:"456" }; const server=http.createServer((req,res)=>{ if(req.url==="/favicon.ico") return; var getData=url.parse(req.url,true); var pathname=getData.pathname; var queryData=getData.query; var path="./static"+pathname; if(pathname==="/user"){ switch(queryData.act){ case "login": if(user[queryData.username]){ if(user[queryData.username]===queryData.password){ res.end('{"bok":true,"msg":"欢迎你 '+queryData.username+'！！！"}') }else{ res.end('{"bok":false,"msg":"密码不正确！！！"}') } }else{//证明该用户不存在 //返回页面的内容为JSON格式的字符串 res.end('{"bok":false,"msg":"该用户不存在，请注册！！！"}') } break; case "reg": if(user[queryData.username]){ res.end('{"bok":false,"msg":"该用户已注册！！！"}') }else{ user[queryData.username]=queryData.password; console.log(user); res.end('{"bok":true,"msg":"注册成功，请登录！！！"}') } break; default: res.end('{"bok":false,"msg":"未知的act"}') } } //打开路径下的文件fs.readFile fs.readFile(path,(err,data)=>{ if(err){ res.end("4044"); } res.end(data); }); }); server.listen(1234);
3 node模块
- 模块可以分为三大类
- nodejs自带的模块：http,fs,event,path,querystring,url等;
- 引入第三方模块；nodejs天生自带一个包管理器npm
- 自定义模块；
- 每一个JS都是一个独立的模块；
- 通过require引入模块，可省略
.js后缀； - 自定义模块移入JS文件可省略JS后缀，不能省略相对路径；在同一个文件夹下也不能省略
./相对路径；省略之后就会出错； - 如果省略相对路径后，会默认先在系统中查找，如果找不到，再到node_modules文件夹中查找，所以，如果不写相对路径，也可以将需引入的文件放入到node_modules文件夹中，但是，为防止混乱，不建议用此方法；
- 在JS文件中引入JS模块后，获得的是一个对象；在被引入的模块中通过exports输出对象的属性；可通过
module.exports={}来输出一个对象；定义多个属性； - 代码：
- 被引入模块aa.js文件代码：
var a=1234; //1.通过exports来分别导出属性名； /*exports.a=a;//通过exports来定义对象中的属性名和属性值； exports.b="haha"; exports.c="xixi";*/ //2.通过module来输出多个； module.exports={ a,//es6对象中当属性名和属性值相同的时候，可省略属性值； b:"haha", c:"xixi" };- 获取引入模块bb.js文件代码：
var obj=require("./01aa");//导入的js文件为一个对象； console.log(obj);//输出结果为一个对象；即：{ a: 1234, b: 'haha', c: 'xixi' } console.log(obj.a);//输出属性值为1234； console.log(obj.b);//输出属性值为haha； console.log(obj.c);//输出属性值为xixi；
- node_modules文件
- 每一个模块中都存在一个package.json文件，文件中储存多个信息；
- dependencies：上线依赖的模块
- devdependencies:开发过程中依赖的模块；
- main:指的是默认引入的文件路径；
- 每一个模块中都存在一个package.json文件，文件中储存多个信息；
- 项目开发步骤：
- git init:文件夹初始化；
- npm init:项目初始化；按照顺序填写参数；会生成一个package.json文件；也可以通过
npm init --y快速设置当前项目初始化；所有参数均为默认参数； - ls/dir:查看当前文件夹中的文件；
- 安装第三方模块
- 安装到全局：
npm install xxx -g(global)，可简写为npm i xxx -g; -
--save指的是在当前目录安装，会在dependencies中会出现安装的文件；指的是在上线时的依赖；如：npm install jquery --save; -
--save-dev:指的是在当前目录下安装，但会在devdependencies中展现；即在开发过程中的依赖；如：npm install bootstrap --save-dev; - 卸载：
npm uninstall xxx;
- 安装到全局：
- 项目名称不能写express名称；
- 一般情况下，一个项目都需要用package.json文件，这个文件可以提供当前项目依赖的模块；如果把你的项目给别人的时候，不需要传输node_modules；当他拿到你的文件后，在控制台输入
npm install就会自动的按照项目中package.json文件中的dependencies文件中的依赖,下载对应的模块，项目才会正常运行； - 简书总结链接node学习大纲
网友评论