接口开发规范(RESTful api)
简介
RESTful规范,是目前一种比较流行的互联网软件设计规范。
这个规范约束的就是路由地址应该如何定义,返回的json接口数据应该如何规范。
后端接口:返回的是一个json数据
{ "key":"value" }
优点:
使开发者在进行独立开发或协作开发更能标准,以达到行业的统一。它结构清晰、符合标准、易于理解、扩展方便,越来越多的开发者遵守这种规范。
常用方法规范
(1)GET:SELECT 获取资源
(2)POST:CREATE 创建资源
(3)PUT:UPDATE 更新资源
(4)DELETE:DELETE 删除资源
路由如何定义
返回的json数据如何规范
// 接口项目:是后端工程师做的,指的是后端给前端返回的json数据
// resultful 规范包含两个方法:
//1. 路由如何规范的定义
//2. 返回的json如何规范的定义
/*
{
一个消息属性比如:msg/message
一个对应消息的数字状态码 比如:status/code
如果有结果,则可以叫 result/data
}
*/
const express = require('express')
const app = express()
app.listen(3000, function () {
console.log('3000端口开启了,可以访问: http://localhost:3000')
})
app.use(express.urlencoded({ extended: false }))
/*
请求方法:
get:得到
post:添加、邮寄
delete:删除
put:更新,推送
*/
// 以学生数据定义路由
//查询学生:一组。后端数据列表接口复杂。
//只要是返回一组数据:列表数据
//那就一定是分页
app.get('/students', (req, res) => {
//还要额外的传递一些参数
let { page = 1, size = 5 } = req.query
//page:前端用户传递过来的要展示的页码
//size:每页展示几条
//start = (page-1)*size
//LIMIT start,size
let data = {
msg: 'OK',
status: 200,
result: {
data: [
{ username: 'zs', age: 20 },
{ username: 'ls', age: 10 },
{ username: 'ww', age: 30 }
],
rows: '总条数',
totalPage: '总页码',
page: '当前页'
}
}
res.send(data)
})
//查询学生:一个
app.get('/student', (req, res) => {
let { id = '' } = req.query
/*
我们使用的:id
表中都有一个唯一的id字段(属性)
SELECT * FROM student WHERE id =
*/
if (!id) {
let data = {
msg: '请传递必须参数id',
status: 10005
}
res.send(data)
return
}
let data = {
msg: 'OK',
status: 10001,
result: {
username: 'zs',
id: 'a0001',
age: 20
}
}
res.send(data)
})
//添加学生
app.post('/student', (req, res) => {
let { username = '', xuehao = '' } = req.body
if (username == '') {
let data = {
msg: '姓名不能为空',
status: 10003,//姓名不能为空
}
res.send(data)
return
}
if (xuehao.length != 5) {
let data = {
msg: '学号必须是5位',
status: 10002,//学号必须是5位
}
res.send(data)
return
}
// let data = {
// msg:'学号必须是5位',
// status:10002,//学号必须是5位
// }
// let data = {
// msg:'姓名不能为空',
// status:10003,//姓名不能为空
// }
//执行sql语句,sql语句也没有问题
let data = {
msg: 'OK',
status: 10001,//成功
}
res.send(data)
})
//删除学生
app.delete('/student', (req, res) => {
res.send('删除学生')
})
//编辑学生
app.put('/student', (req, res) => {
res.send('编辑学生')
})
接口说明书
是后端为前端提供的。没有说明书前端进行不下去 。
后端给前端只是提供一个接口地址(某个服务地址)+接口说明书。
前端要会看说明书:看人家说明书以后,你通过拼接url地址,能够拿到数据。
接口地址为:http://localhost:3000
- 获取一个学生
- 地址
/student - 参数说明
参数 | 说明 | 备注 |
id | 例如:id=3 | 必传 |
- 完整的示例为
http://localhost:3000/student?id=3 - 返回的数据
- 正确的
{
"msg": "OK",
"status": 10001,
"result": {
"username": "zs",
"id": "333",
"age": 20
}
}
- 可能失败的
{
"msg": "请传递必须参数id",
"status": 10005
}
{
"msg": "查无此人",
"status": 10006
}
原生ajax
★★★★★
学习原理:应付面试
在项目中用的:jquery中封装好的
作用:ajax能帮我们发送http请求。为前后端工程师服务 ,并且前后端工程都需要掌握的。
使用ajax发送的请求,服务器99.99%返回的是json。
介绍
定义
Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
本身js是阻塞的(同步的),但是有些是需要异步处理的,比如xml数据( 后端给前端的 ):前端要去后端发送请求拿数据 。
xml了解
它是表示数据的一种方式,和html标签语法特别像,但xml更加严谨 。缺点:笨重。
xml必须首尾必合,如果有属性,那属性的值必须是双引号。
https://www.w3school.com.cn/xml/xml_syntax.asp
例如:表示一个学生
<student address="北京">
<username>张三</username>
<age>20</age>
</student>
json
{
"username":"张三",
"age":20,
"address":"北京"
}
传统请求的问题
传统请求指的是:通过浏览器地址栏发的http请求。注意:这是同步(如果很忙,要等待,可能会白屏)。
Ajax优势和作用
解决同步,使用异步的方式发请求(不会阻塞),体验会更好 。无需刷新页面的局部更新 。速度更快
Ajax请求与传统请求的区别:
传统方式请求:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IFH7YMjp-1635505540323)(img/05-1传统请求.jpg)]
ajax方式请求:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5U6npoOT-1635505540325)(img/05-2ajax请求方式.jpg)]
应用场景:
只要是页面中局部更新内容都可以使用ajax进行处理。
表单验证:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V09Gucll-1635505540326)(img/05-3ajax应用表单验证.png)]
数据分页显示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wddoIqww-1635505540327)(img/05-4ajax应用数据分页显示.png)]
原理
方法
2.2.1.1 XMLHttpRequest
语法:
let xhr =new XMLHttpRequest(); 不支持ie6的。
new ActiveXObject() / IE6
描述:创建 ajax对象
open
语法:
xhr.open(method,url,async)
描述:规定请求的类型、URL 以及是否异步处理请求。
send
语法:
xhr.send(string)
描述:将请求发送到服务器。string:仅用于 POST 请求
属性
readyState
语法:
xhr.readyState
描述:在创建ajax对象,配置ajax对象,发送请求,以及接收完服务器端响应数据,这个过程中的每一个步骤都会对应一个数值,这个数值就是ajax状态值。
包含的状态值:
(1) 0:请求未初始化,还没有调用open
(2) 1:请求已经建立,但是还没有发送send
(3) 2:请求已经发送
(4) 3:请求正在处理中,通常响应中已经有部分数据可以用了
(5) 4:响应已经完成,可以获取并使用服务器的响应
status
语法:
xhr.status
描述:无论AJAX访问是否成功,由HTTP协议根据所提交的信息,服务器所返回的HTTP头信息代码,该信息使用“ajax.status”所获得;(由数字1XX,2XX三位数字组成)
常见状态码:200,304,404,500
responseText
语法:
xhr.responseText
描述:获得来自服务器的响应
事件
语法:
xhr.onreadystatechange = callback
描述:当请求被发送到服务器时,每当 readyState 改变时,就会触发 onreadystatechange 事件
实现步骤
(1)创建Ajax对象
(2)Ajax请求的地址与请求方式
(3)发送请求
(4)获取服务器响应给客户端的数据
(5)处理服务器响应数据JSON.parse和JSON.stringify
ajax的get和post传参
get
语法:
xhr.open('get', 'http://www.api.com?username=ujiuye&password=123456')
描述:get传参只需要在url地址后按照?key=value格式进行传递
代码案例:
let xhr = new XMLHttpRequest()
xhr.open( 'get',`http://localhost:3000/checkuser?username=${username}&age=20`,true )
xhr.send()
xhr.onreadystatechange = function(){
if( xhr.readyState == 4 && xhr.status == 200 ){
console.log( xhr.responseText,'我是结果' )
oTips.innerHTML = xhr.responseText
}
}
}
post
语法1:
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(querystring|jsonstring);//字符串
语法2:
xhr.setRequestHeader('Content-Type', 'application/json')
let data = {username:'ujiuye',password:'123456'}
xhr.send(JSON.stringify(data))
描述:使用setRequestHeader设置响应头,并传递对应的post参数
Jquery之Ajax
get
语法:
$.get(URL,callback)
描述:发送get请求
$.get( '/demo?username=ls',(res)=>{
console.log('执行了成功的回调',res)
} )
post
语法:
$.post(URL,{data},callback) //默认设置application/x-www-form-urlencoded请求头
描述:发送post请求,data为请求时传递的参数
$.post({
url:'/demo',
data:{ username:'qq',age:22 },
success:function(res){
console.log('请求了post',res)
},
error:function(err){
}
ajax
语法:
$.ajax({
method:'post/get/put/deldet',//不写默认get
url: '',
data: { },
success: function(res) { }
error: function(res) { }
})
描述:可以发送get和post请求
<button id="btn1">发送ajax-get请求</button>
<button id="btn2">发送ajax-post请求</button>
<button id="btn3">发送ajax-delete请求</button>
<button id="btn4">发送ajax-put请求</button>
<button id="btn5">发送ajax请求</button>
<script>
//1、$.get( url,successCB ) //使用ajax发送get请求
$('#btn1').on('click',function(){
// $.get( 'http://localhost:3000/demo?username=zs',(res)=>{
// console.log('执行了成功的回调',res)
// } )
//关于地址的补充说明: http://localhost:3000可以省略
$.get( '/demo?username=ls',(res)=>{
console.log('执行了成功的回调',res)
} )
})
//2、$.post( url[,{}],successCB ) //使用ajax发送get请求 //第2个参数为对象
$('#btn2').on('click',function(){
// $.post('/demo',{ username:'ww',age:30 },(res)=>{
// console.log('执行了成功的回调',res)
// })
$.ajax({
url:'/demo',
method:'put',
data:{ username:'qq',age:22 },
success:function(res){
console.log('请求了post',res)
},
error:function(err){
console.log(err,'失败的回调')
}
})
})
})
</script>
个参数为对象
$(’#btn2’).on(‘click’,function(){
// $.post(’/demo’,{ username:‘ww’,age:30 },(res)=>{
// console.log(‘执行了成功的回调’,res)
// })
$.ajax({
url:'/demo',
method:'put',
data:{ username:'qq',age:22 },
success:function(res){
console.log('请求了post',res)
},
error:function(err){
console.log(err,'失败的回调')
}
})
})
})