基础web服务搭建express 3步 及第三方中间件
// 导入express模块
const express = require('express')
// 初始化一个app对象
const app = express()
// 端口号
const port = 3000
--------------------------
//服务器已经搭好了这中间写路由 例如
// req : request 由前端请求的数据
// res ：response 由后端响应的数据
app.get('/', (req, res) => {
// 响应结束
res.send('Hello World!')
})
app.get('/rsg',(req,res)=>{
// 接收前端请求的参数（如果是get方式，则获取参数使用 req.query）
console.log(us,ps);
let {
us,ps } = req.query;
res.send({
err : 0,msg : '注册成功'})
})
app.post('/rsg',(req,res)=>{
// post请求 后端测试用工具Postman（如果是post方式，则获取参数使用 req.body，这样的参数不能直接被解析，需要一个第三方的中间件 body—parser 在npmjs.com中找 指令npm install body-parser 建议安装刀父级目录）
let {
us,ps } = req.body;
console.log(us,ps)
res.send({
err : 0,msg : '注册成功'})
})
app.get('/log',(req,res)=>{
// post请求 后端测试用工具Postman（如果是post方式，则获取参数使用 req.body，这样的参数不能直接被解析，需要一个第三方的中间件 body—parser 在npmjs.com中找 指令npm install body-parser 建议安装刀父级目录）
res.send({
err : 0,msg : '登录成功'})
})
--------------------------
// 设置监听的端口号
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${
port}`)
})
api
作为后端就是给前端提供api我们来封装一个ajax作为了解
// HTTP请求有两种方式
// GET：用于获取数据，GET是在URL上传递数据（网址后面的东西），存储量较少，安全系数比较低。
// POST：用于上传数据，POST安全性一般比（GET好一些），容量几乎是无限（多用于表单）。
//
// Ajax的使用
// 使用ajax一共有4个步骤：1.创建ajax、2.连接服务器、3.发送请求、4.接受返回值。
// 封装
let ajax = {
// url : "a.php", // url---->地址
get : function(url,fn){
//兼容 IE6以上：new XMLHttpRequest()、IE6：new ActiveXObject("Microsoft.XMLHTTP"
let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
//请求方式 路径 同异步 当请求方式为GET的时候，使用xhr.open（"请求方式（GET/POST）"，url路径 + “？”请求数据 + ，“异步/同步”）。
xhr.open('get',url,true);
// // 发送请求
// 使用xhr.send（）发送请求
// 当请求方式为GET的时候，发送请求为xhr.send(null). null可以省略
xhr.send();
// 接收返回值
// status：返回请求的结果码：返回200（成功）、返回404（未找到）、返回5**（5开头）（服务器错误）
// 使用ajax会想用一个事件readystatechange事件：当请求被发送到服务器时，我们需要执行一些基于响应的操作。
// 当readystatechange改变的时候，就会触发这个事件执行。
xhr.onreadystatechange =function(){
// readyState：请求的状态，返回的是状态码（0 - 4）：0（未初始化）open还没有调用、1（载入）已经调用了send（）正在发送请求、2（载入完成）send方法已经完成 已经收到了全部的响应内容、3（解析）正在解析响应内容、4（完成）响应内容解析完成 可以在客户端用了。
if(xhr.readyState === 4){
// status：返回请求的结果码：返回200（成功）、返回404（未找到）、返回5**（5开头）（服务器错误）
if(xhr.status === 200){
//instanceof是Java的保留关键字。它的作用是测试它左边的对象是否是它右边的类的实例，返回boolean的数据类型。
if(fn instanceof Function){
// responseText：返回请求的内容。
fn(xhr.responseText);
}
}
}
}
},
// url : "a.php", // url---->地址
// data : { //传入信息
// name : "张三",
// age : 18
// }
// 回掉函数
post : function(url,data,fn){
// 创建ajax必须考虑兼容性处理，IE6以上：new XMLHttpRequest()、IE6：new ActiveXObject("Microsoft.XMLHTTP")
let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
//请求方式 路径 同异步 当请求方式为GET的时候，使用xhr.open（"请求方式（GET/POST）"，url路径 + “？”请求数据 + ，“异步/同步”）。
xhr.open('post',url,true);
// 当请求方式为POST的时候，发送请求为xhr.send(请求数据)。
// 此外使用POST的时候必须在xhr.send（请求数据）上面添加
// xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.setRequestHeader('Content-type','Application/x-www=form-urlencoded;charset=utf-8');
//使用xhr.send（）发送请求
// 当请求方式为POST的时候，发送请求为xhr.send(请求数据)。
// 此外使用POST的时候必须在xhr.send（请求数据）上面添加
xhr.onreadystatechange =function(){
// readyState：请求的状态，返回的是状态码（0 - 4）：0（未初始化）open还没有调用、1（载入）已经调用了send（）正在发送请求、2（载入完成）send方法已经完成 已经收到了全部的响应内容、3（解析）正在解析响应内容、4（完成）响应内容解析完成 可以在客户端用了。
if(xhr.readyState === 4){
// status：返回请求的结果码：返回200（成功）、返回404（未找到）、返回5**（5开头）（服务器错误）
if(xhr.status === 200){
if(fn instanceof Function){
// responseText：返回请求的内容。
fn(xhr.responseText);
}
}
}
}
}
}