基础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);
}
}
}
}
}
}