RESTful规范,是目前一种比较流行的互联网软件设计规范。
这个规范约束的就是路由地址应该如何定义,返回的json接口数据应该如何规范。
什么是RESTful规范的API?
当我们使用RESTful规范来设计我们应用程序接口(API)时对于同一个资源(比如:班级、学生、成绩等)的路径使用同一个,然后通过不同的请求方式来区别具体的操作(比如:添加、修改、删除等)。
使开发者在进行独立开发或协作开发更能标准,以达到行业的统一。它结构清晰、符合标准、易于理解、扩展方便,越来越多的开发者遵守这种规范。
(1)GET:SELECT 获取资源
(2)POST:CREATE 创建资源
(3)PUT:UPDATE 更新资源
(4)DELETE:DELETE 删除资源
1.3.1路由如何定义
路径 | 请求方式 | 参数 | 备注 |
---|---|---|---|
/class | get | cla:班级名称、可选 | 查询班级信息 |
/class | post | cla:班级名称、teacher:班主任 , 必填 | 添加班级信息 |
/class | put | claid:班级id、必填,cla:班级名称、teacher:班主任 | 修改班级信息 |
/class | delete | claid:班级id、必填 | 删除班级信息 |
1.3.2返回的json数据如何规范
(1)使用express脚手架生成接口项目 express --view=ejs myapp
(2)进入myapp目录 安装依赖 npm install
(3)创建student.js到routes目录中
(4)定义模块化路由代码
(5)在入口文件app.js中引入路由
(6)启动项目
Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),它是利用客户端(浏览器的)XMLHttpRequest对象来发送http请求给服务端。
传统方式请求【同步】:
以同步方式发送请求给服务端,在没有收到服务端返回的响应之前什么事情都做不了,一直处于等待状态,用户体验不好。
ajax方式请求:
ajax的原理见下图:【重点】
只要是页面中局部更新内容都可以使用ajax进行处理。
2.1.5.1 表单验证:
2.1.5.2 数据分页显示:
2.2.1.1 XMLHttpRequest
创建ajax对象的语法:
let xhr =new XMLHttpRequest();
描述:创建 ajax对象
2.2.1.2 open
创建请求给ajax对象的语法:
xhr.open(method,url,async)
描述:规定请求的类型、URL 以及是否异步处理请求。
2.2.1.3 send
ajax对象将请求发送给服务器的语法:
xhr.send(string)
描述:将请求发送到服务器。string:仅用于 POST 请求
2.2.2.1 readyState
语法:
xhr.readyState
描述:在创建ajax对象,配置ajax对象,发送请求,以及接收完服务器端响应数据,这个过程中的每一个步骤都会对应一个数值,这个数值就是ajax状态值。
包含的状态值(请求在服务器处理的每一个步骤):
(1)0:请求未初始化,还没有调用open
(2)1:请求已经建立,但是还没有发送send
(3)2:请求已经发送
(4)3:请求正在处理中,通常响应中已经有部分数据可以用了
(5)4:响应已经完成,可以获取并使用服务器的响应
2.2.2.2 status
语法:
xhr.status //获取http协议的状态以判断这次交互是否正常
描述:无论AJAX访问是否成功,由HTTP协议根据所提交的信息,服务器所返回的HTTP头信息代码,该信息使用“ajax.status”所获得;(由数字1XX,2XX三位数字组成)
常见状态码:200,304,404,500
2.2.2.3 responseText
语法:
xhr.responseText //获取服务端返回的响应
描述:获得来自服务器的响应
语法:
xhr.onreadystatechange = callback //注册事件:处理服务端返回的响应
描述:当请求被发送到服务器时,每当 readyState 改变时,就会触发 onreadystatechange 事件
(1)创建Ajax对象
(2)Ajax请求的地址与请求方式
(3)发送请求
(4)获取服务器响应给客户端的数据
(5)处理服务器响应数据JSON.parse和JSON.stringify
语法:
xhr.open('get', 'http://www.api.com?username=ujiuye&password=123456')
描述:get传参只需要在url地址后按照?key=value格式进行传递
代码案例:
服务端的代码如下:
const express = require('express'); const path = require('path'); const app = express(); app.listen(3000, () => { console.log('3000端口'); }); app.use(express.urlencoded({ extended: false })); //设置ejs: app.set('view engine', 'ejs'); //设置模板引擎为ejs app.set('views', [`${path.join(__dirname,'views')}`]); //设置模板文件的存放位置 app.engine('html', require('ejs').__express); //将html文件作为ejs模板文件来解析 //显示注册界面: app.get('/zhuce', (req, res) => { res.render('zhuce.html'); }); //判断用户是否注册过: app.get('/checkuser', (req, res) => { //app.post('/checkuser', (req, res) => { let curuser = req.query.uname ? req.query.uname : ''; //let curuser = req.body.uname ? req.body.uname : ''; // console.log(curuser, req.body, 9999); if (curuser == 'zhangsan') { // res.send(`帐号已注册`); res.send({ status: 500, msg: '帐号已注册' }); } else { // res.send(`帐号可用`); res.send({ status: 200, msg: '帐号可用' }); } });
zhuce.html文件代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>帐号:<input type="text" name="usr" id="usr"><span id="umsg"></span></div> <div>密码:<input type="password" name="pwd" id="pwd"></div> <div>密码:<input type="password" name="repwd" id="repwd"></div> <div><input type="button" value="注册"></div> <script> //第一步:创建ajax对象: let xhr = new XMLHttpRequest(); let usrObj = document.getElementById('usr'); let spanObj = document.getElementById('umsg'); usrObj.onblur = function() { //第二步:创建请求给ajax对象:xhr.open('请求方式','请求资源',true/false[是否为异步]); xhr.open('get', `/checkuser?uname=${usrObj.value}`, true); //xhr.open('post', `/checkuser`, true); //设置请求头信息:设置表单编码格式为键值对格式 //xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //注册事件:处理服务端返回的响应 xhr.onreadystatechange = myfn; //第三步:ajax对象将请求发送到服务端:xhr.send() xhr.send(); //xhr.send(`uname=${usrObj.value}&age=20`) } function myfn() { // alert(xhr.readyState); //第四步:服务端处理完请求并返回响应给ajax对象 if (xhr.readyState == 4) { // alert(xhr.responseText); if (xhr.status == 200) { //判断http协议状态码:表示与服务端的交互是正常的 let resObj = JSON.parse(xhr.responseText); //转换成json对象 //第五步:ajax对象将响应填充到页面相关位置 spanObj.innerHTML = resObj.msg; if (resObj.status == 500) { //已注册 spanObj.style.color = 'red'; } else { //未注册 spanObj.style.color = 'green'; } } } } </script> </body> </html>
语法1:
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send('username=ujiuye&password=123456');
语法2:
xhr.setRequestHeader('Content-Type', 'application/json') let data = {username:'ujiuye',password:'123456'} xhr.send(JSON.stringify(data))
描述:使用setRequestHeader设置响应头,并传递对应的post参数
代码案例:
const express = require('express'); const path = require('path'); const app = express(); app.listen(3000, () => { console.log('3000端口'); }); app.use(express.urlencoded({ extended: false })); //设置ejs: app.set('view engine', 'ejs'); //设置模板引擎为ejs app.set('views', [`${path.join(__dirname,'views')}`]); //设置模板文件的存放位置 app.engine('html', require('ejs').__express); //将html文件作为ejs模板文件来解析 //显示注册界面: app.get('/zhuce', (req, res) => { res.render('zhuce.html'); }); //判断用户是否注册过: // app.get('/checkuser', (req, res) => { app.post('/checkuser', (req, res) => { // let curuser = req.query.uname ? req.query.uname : ''; let curuser = req.body.uname ? req.body.uname : ''; // console.log(curuser, req.body, 9999); if (curuser == 'zhangsan') { // res.send(`帐号已注册`); res.send({ status: 500, msg: '帐号已注册' }); } else { // res.send(`帐号可用`); res.send({ status: 200, msg: '帐号可用' }); } });
zhuce.html文件代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>帐号:<input type="text" name="usr" id="usr"><span id="umsg"></span></div> <div>密码:<input type="password" name="pwd" id="pwd"></div> <div>密码:<input type="password" name="repwd" id="repwd"></div> <div><input type="button" value="注册"></div> <script> //第一步:创建ajax对象: let xhr = new XMLHttpRequest(); let usrObj = document.getElementById('usr'); let spanObj = document.getElementById('umsg'); usrObj.onblur = function() { //第二步:创建请求给ajax对象:xhr.open('请求方式','请求资源',true/false[是否为异步]); // xhr.open('get', `/checkuser?uname=${usrObj.value}`, true); xhr.open('post', `/checkuser`, true); //设置请求头信息:设置表单编码格式为键值对格式 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //注册事件:处理服务端返回的响应 xhr.onreadystatechange = myfn; //第三步:ajax对象将请求发送到服务端:xhr.send() // xhr.send(); xhr.send(`uname=${usrObj.value}&age=20`) } function myfn() { // alert(xhr.readyState); //第四步:服务端处理完请求并返回响应给ajax对象 if (xhr.readyState == 4) { // alert(xhr.responseText); if (xhr.status == 200) { //判断http协议状态码:表示与服务端的交互是正常的 let resObj = JSON.parse(xhr.responseText); //转换成json对象 //第五步:ajax对象将响应填充到页面相关位置 spanObj.innerHTML = resObj.msg; if (resObj.status == 500) { //已注册 spanObj.style.color = 'red'; } else { //未注册 spanObj.style.color = 'green'; } } } } </script> </body> </html>
语法:
$.get(请求地址,{请求参数},回调方法,'json[期望服务端返回的数据类型]')
描述:发送get请求
代码案例:
语法:
$.post(请求地址,{请求参数},回调方法,'json[期望服务端返回的数据类型]')
描述:发送post请求,data为请求时传递的参数
代码案例:
语法:
$.ajax({ type: 'get/psot', //请求方式 url: '', //请求地址 data: { }, //请求的参数 success: function(res) { } , //成功时的回调方法 error:function(err){} //错误时的回调方法 })
描述:可以发送get和post请求
服务端的代码如下:
const express = require('express'); const path = require('path'); const app = express(); app.listen(3000, () => { console.log('3000端口'); }); app.use(express.urlencoded({ extended: false })); //设置ejs: app.set('view engine', 'ejs'); //设置模板引擎为ejs app.set('views', [`${path.join(__dirname,'views')}`]); //设置模板文件的存放位置 app.engine('html', require('ejs').__express); //将html文件作为ejs模板文件来解析 //显示注册界面: app.get('/zhuce', (req, res) => { res.render('zhuce.html'); }); //判断用户是否注册过: // app.get('/checkuser', (req, res) => { app.post('/checkuser', (req, res) => { // let curuser = req.query.uname ? req.query.uname : ''; let curuser = req.body.uname ? req.body.uname : ''; // console.log(curuser, req.body, 9999); if (curuser == 'zhangsan') { // res.send(`帐号已注册`); res.send({ status: 500, msg: '帐号已注册' }); } else { // res.send(`帐号可用`); res.send({ status: 200, msg: '帐号可用' }); } });
zhuce.html文件代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <div>帐号:<input type="text" name="usr" id="usr"><span id="umsg"></span></div> <div>密码:<input type="password" name="pwd" id="pwd"></div> <div>密码:<input type="password" name="repwd" id="repwd"></div> <div><input type="button" value="注册"></div> <script> $("#usr").blur(function() { //以post方式发送ajax请求: // $.post('/checkuser', { // "uname": $("#usr").val(), // "email": "lisi@qq.com" // }, function(data) { // $("#umsg").html(data.msg); // if (data.status == 200) { // $("#umsg").css('color', 'green'); // } else { // $("#umsg").css('color', 'red'); // } // }, 'json'); //以get方式发送ajax请求: // $.get('/checkuser', { // "uname": $("#usr").val(), // "email": "lisi@qq.com" // }, function(d) { // $("#umsg").html(d.msg); // if (d.status == 200) { // $("#umsg").css('color', 'green'); // } else { // $("#umsg").css('color', 'red'); // } // }, 'json'); $.ajax({ url: '/checkuser', //请求地址 type: 'post', //请求方式 // type: 'get', data: { "uname": $("#usr").val(), "age": 20 }, //请求的参数 dataType: 'json', //期望服务端返回的数据格式 //success:成功时的回调方法 success: function(d) { console.log(d, 7777); $("#umsg").html(d.msg); if (d.status == 200) { $("#umsg").css('color', 'green'); } else { $("#umsg").css('color', 'red'); } }, //error:错误时的回调方法 error: function(err) { console.log(err, 111111); } }); }); </script> </body> </html>