DRF
接口:接口的概念、书写接口文档(Linux搭建YAPI)、接口规范(restful)、postman接口测试工具
-
什么是接口:规定了提交请求参数的请求方式的url链接,访问其可以获取响应的反馈数据的url链接
-
组成的四部分:url链接+请求方式+请求参数+响应数据
-
接口规范:
- 接口都是操作前后台数据的交互,所以需要保证数据的安全性,用HTTPS协议
- 接口用来操作数据,与网址(操作页面)有区别,所以用特定的关键字api表示接口
- 接口操作的数据称之为资源,在url中只体现资源名词(名词),不体现操作资源的方式动词
- 常规资源接口
- 非常规资源接口-和某资源不是特别密切或是不止一种资源
- 如果一个资源存在多版本结果,在url链接中要用特定符号来兼容多版本共存
- 群资源操作,一般还有额外的限制条件,如排序、限制条数、分页等,用?限制
-
五大请求方式:
- get:获取单个或多个资源
- -https://api.baidu.com/books/ 群查,返回多个结果对象
- -https://api.baidu.com/books/(pk)/ 单查,返回单个结果对象
- post:新增单个或多个资源
- -https://api.baidu.com/books/
- 单增,提交单个数据字典,完成单增,返回单个结果对象
- 群增,提供多个数据字典的数组,完成群增,返回多个结果对象
- -https://api.baidu.com/books/
- put:整体修改单个或多个资源
- --https://api.baidu.com/books/
- 整体修改多个,提供多个数据字典的数组(数据字典中要包含主键),完成群改,返回多个结果对象
- -https://api.baidu.com/books/(pk)/
- 整体修改单个,提供单个数据字典(主键在url中体现)完成单改,返回单个结果对象
- --https://api.baidu.com/books/
- patch:局部修改单个或多个资源
- 方式与put完全相同,不同的是:操作的资源如果有5个key-value键值对,put请求提供的字典必须全包含,但是patch提供的字典包含的键值对0~5个都可以
- delete:删除单个或多个资源
- -https://api.baidu.com/books/
- 多 删,提供多个资源主键数据,完成群删,不做任何资源返回(一般我们会返回结果信息:成功|失败)
- -https://api.baidu.com/books/(pk)/
- 单删,不需要提供额外数据,完成单删,不做任何资源返回(一般我们会返回结果信息:成功|失败)
- -https://api.baidu.com/books/
- get:获取单个或多个资源
-
响应结果:响应对象中要包含网络状态码(网络状态信息和网络状态码捆绑出现,不要额外设置)
- 1xx:基本信息
- 2xx:成功-200基本 201新增成功
- 3xx:重定向
- 4xx:客户端错误-400错误请求;403请求无权限;404请求资源不存在
- 5xx:服务端错误-500服务器错误
-
数据状态码(一般都是前后台约定规则):
- 0:成功
- 1:失败 -1xx:具体失败信息(要在接口文档中明确写出)
- 2:无数据-2xx:具体无数据信息(要在接口文档中明确写出)
-
数据状态信息(一般不仅仅是对数据状态码的解释,更多是对结果的描述,给前台开发者阅读的)
-
数据结果(常量、数组、字典),如果有子资源(图片、音频、视频),返回资源的url链接)
data:响应数据
status:响应的网络状态码
template_name:drf完成前后台不分离返回页面,但是就不可以返回data(不许用了解)
headers:响应头,一般不规定,走默认
exception:一般异常响应,会将其设置成True,默认False(不设置也没事)
content_type:默认就是 application/json,不需要处理
{
"status": 0,
"msg": 'ok',
"results": [{
"name": "西游记",
"img": "https://api.baidu.com/media/book/xyj.png"
}]
}
-
vue项目生命周期:
npm run serve => 运行的是 node_modules 依赖(webpack) => 加载主脚本文件(main.js) => 添加各种环境,渲染根组件(Vue、router、store、自定义、new Vue()) => 项目启动了,之后的任务交给router进行管理 -
router生命周期
浏览器/user(直接输入,也可以router-link跳转,也可以this.$router.push跳转) => router的index.js映射出User组件,加载到内存(页面User组件可以使用n个子组件) => 替换根组件的router-view -
组件的生命周期(生命周期钩子):
created、mounted -
前后台分离交互:
ajax:axios插件 - npm install|uninstall axios
后台:处理跨域问题 - CORS
this.$axios({
url: '接口路径',
method: 'get|post|delete|patch|put',
params: {拼接参数},
data: {数据包参数},
headers: {请求头(认证信息)}
}).then(response => {
response.data
}).catch(error => {
error.response.data
})
浙公网安备 33010602011771号