DRF一---前后端分离的价绍 和 后端接口使用规范

了解前后端分离和不分离

drf是前后端分离的
在web开发模式中有前后端分离和前后端不分离,这两种开发模式。

什么是前后端不分离?

在这里插入图片描述
这种模式下,耦合度比较高,django就是前后端不分离的。
由于app的发展,他需要的只是一份单纯的数据,而不是一堆html的代码。有了这样一份数据之后,一份可以给app,一份呢,可以给pc端的前端使用,减少工作量。

什么是前后端分离?

后端主要是提供接口提供数据
前端和app就可以调用接口展示数据
注意,调用接口之后,返回的数据是json数据或者xml数据
前端想要什么样的页面,后端不管,只是给你展示数据。那这样的话,耦合度就比较低。

前后端分离

优势

耦合度比较低;
多端适用;(app、前端、公众号都可以共同使用这一份数据)
前后端开发职责模糊;
解决开发效率问题;
可以提高前端程序员的能力;
解决服务器压力;(前端的部署在前端服务器上,后端的部署在后端服务器上)

缺点

前端人员学习的东西增加(vue js 啊这些);
后端程序员需要给前端写文档,表示这些接口是干什么用的,以及返回的是什么样的数据等等;

前后端分离后,后端的使用规范

这个规范就叫RESTful API

一、域名

把域名变成一个接口
应该尽量将api (也就是接口)部署在专用域名之下,比如

https://api.example.com

如果确定API很简单,不会有进一步扩展,可以考虑放在主域名下。

https://example.com/api/
这样会解决跨域的问题

二、协议

推荐https

三、版本

app端需要更新,app不像网页,后台一更新,你访问的时候就是更新好的。
app端的更新,是需要兼容的。也许有的人就不想更新,那你也得保存不跟新的那部分人额数据4
也是通过接口来实现的,将API的版本号放入URL

http://www.example.com/app/1.0/ 这个就表示1.0的版本
http://www.example.com/app/1.1 这个表示1.1的版本
http://www.example.com/app/2.0/ 这个表示2.0的版本

四、路径

推荐使用名词加复数,什么意思呢,
就比如你想获取1.0版本下的所有的苹果,那么接口应该是

http://www.example.com/app/1.0/

五、http请求方法

利用的HTTP方法可以分离网址中的资源名称的操作。
这样会减少接口
GET-------获取资源
POST-------增加资源
DELETE------删除资源
PATCH-------部分更新资源
PUT------全部更新资源
比如:我们想删除资源

http://example.com/app/1.0/ students/1/
一般根据id进行唯一标识来删除,
我们在经行增删改查的时候,都可以使用这个接口,只是请求方法发生了改变

六、过滤信息

比如分页:
接口就可以写成

http://example.com/app/1.0/ students/1/?page=2

出来分页之外,还可以指定:

?limit=10:指定返回记录的数量
?offset=10:指定返回记录的开始位置。
?page=2&per_page=100:指定第几页,以及每页的记录数。
?sortby=name&order=asc:指定返回结果按照哪个属性排序,以及排序顺序。
?animal_type_id=1:指定筛选条件

七、状态码

200 OK - [GET]:服务器成功返回用户请求的数据
201 CREATED - [POST/PUT/PATCH]:用户新建或修改数据成功。
202 Accepted - []:表示一个请求已经进入后台排队(异步任务)
204 NO CONTENT - [DELETE]:用户删除数据成功。
400 INVALID REQUEST - [POST/PUT/PATCH]:用户发出的请求有错误,服务器没有进行新建或修改数据的操作
401 Unauthorized - []:表示用户没有权限(令牌、用户名、密码错误)。
403 Forbidden - [] 表示用户得到授权(与401错误相对),但是访问是被禁止的。
404 NOT FOUND - []:用户发出的请求针对的是不存在的记录,服务器没有进行操作,该操作是幂等的。
406 Not Acceptable - [GET]:用户请求的格式不可得(比如用户请求JSON格式,但是只有XML格式)。
410 Gone -[GET]:用户请求的资源被永久删除,且不会再得到的。
422 Unprocesable entity - [POST/PUT/PATCH] 当创建一个对象时,发生一个验证错误。
500 INTERNAL SERVER ERROR - [*]:服务器发生错误,用户将无法判断发出的请求是否成功。

八、错误处理:

{
error:“Invalid API key”
}

会返回这样一个字符串,但是对于移动端的返回错误格式一般是

在这里插入图片描述

九、返回结果

返回的数据都是json

GET /collection:返回资源对象的列表(数组)
GET /collection/resource:返回单个资源对象
POST /collection:返回新生成的资源对象
PUT /collection/resource:返回完整的资源对象
PATCH /collection/resource:返回完整的资源对象
DELETE /collection/resource:返回一个空文档

### 回答1: 在前面的文章中,我们已经介了如何使用DRF编写RESTful API如何进行身份验证。在本文中,我们将继续探讨如何使用DRF实现前后端分离。具体来说,我们将使用Vue.js作为前端框架,并使用axios实现与后端API的通信。 1. 安装Vue.jsaxios 首先,我们需要安装Vue.jsaxios。我们可以使用npm来进行安装: ``` npm install vue npm install axios ``` 2. 创建Vue.js应用程序 我们可以使用Vue CLI来创建Vue.js应用程序。在命令行中输入以下命令: ``` npm install -g vue-cli vue init webpack myapp ``` 其中,myapp是应用程序的名称。在创建应用程序时,我们需要回答些问题,例如选择使用哪种模板、是否安装vue-router等。我们可以根据自己的需要进行选择。 3. 编写Vue.js组件 接下来,我们需要编写Vue.js组件来与后端API进行通信。在本例中,我们将创建个名为“TaskList”的组件,用于显示任务列表并提供添加任务的功能。 在src/components目录下创建TaskList.vue文件,并编写以下代码: ```html <template> <div> <h2>Tasks</h2> <ul> <li v-for="task in tasks" :key="task.id"> {{ task.title }} </li> </ul> <input type="text" v-model="title"> <button @click="addTask">Add Task</button> </div> </template> <script> import axios from 'axios'; export default { data() { return { tasks: [], title: '' }; }, created() { this.getTasks(); }, methods: { getTasks() { axios.get('http://localhost:8000/api/tasks/') .then(response => { this.tasks = response.data; }); }, addTask() { axios.post('http://localhost:8000/api/tasks/', { title: this.title }) .then(response => { this.tasks.push(response.data); this.title = ''; }); } } }; </script> ``` 在这个组件中,我们首先导入axios库,然后定义了个名为“TaskList”的组件。在data函数中,我们定义了两个变量:tasks用于存储任务列表,title用于存储新任务的标题。在created函数中,我们调用getTasks函数来获取任务列表。在methods对象中,我们定义了两个方法:getTasks用于获取任务列表,addTask用于添加新任务。在getTasks函数中,我们使用axios库进行HTTP GET请求,并在响应中将tasks变量更新为获取的数据。在addTask函数中,我们使用axios库进行HTTP POST请求,并在响应中将新任务添加到tasks变量中。 4. 引入组件 最后,我们需要将TaskList组件引入Vue.js应用程序。在App.vue文件中,我们可以编写以下代码: ```html <template> <div id="app"> <TaskList /> </div> </template> <script> import TaskList from './components/TaskList.vue'; export default { name: 'App', components: { TaskList } }; </script> ``` 在这个文件中,我们首先导入TaskList组件,然后在components对象中注册它。最后,在模板中调用它。 5. 运行应用程序 现在,我们可以使用以下命令启动Vue.js应用程序: ``` npm run dev ``` 在浏览器中访问http://localhost:8080,您将看到个任务列表个添加任务的表单。当您添加新任务时,它将被添加到列表中并保存到后端API中。 总结 在本文中,我们介了如何使用Vue.jsaxios实现与DRF后端API的通信,并创建了个名为“TaskList”的组件来显示任务列表添加新任务。这是个简单的示例,但您可以使用类似的方法来创建更复杂的应用程序。 ### 回答2: Django前后端分离实践之DRF--09主要是关于Django Rest Framework(DRF)在前后端分离开发中的实践。DRF是基于Django的款强大的Web API框架,它提供了系列的功能工具,使得开发者能够轻松地构建管理API。 在这个实践中,首先我们需要将前端后端进行分离。前端可以使用任何JavaScript框架,如Vue.js或React来构建用户界面,并通过HTTP请求与后端进行通信。而后端则是使用DjangoDRF来构建API。 DRF提供了些类方法,能够帮助我们更方便地开发API。例如,通过使用DRF的序列化器,我们可以轻松地将数据库模型转化为JSON格式。此外,DRF还提供了视图路由器等组件,使得开发者能够更快速地构建API视图URL路由。 在实践过程中,我们还可以使用DRF的认证权限系统来保护API的安全性。DRF支持各种认证方式,如基于Token的认证基于Session的认证。同时,我们可以基于DRF的权限系统来限制用户对API的访问权限,确保只有经过授权的用户才能进行操作。 此外,DRF还提供了些其他的功能,如过滤器、分页搜索等,使得我们能够更精细地控制API的行为展示方式。 总之,Django前后端分离实践之DRF--09主要介了如何使用DRF来构建前后端分离的应用。通过DRF提供的强大功能工具,我们可以更便捷地开发高效、安全的API,并提供给前端进行交互展示。 ### 回答3: DRF即Django Rest Framework是种用于构建Web API的强大工具,它使得前后端分离开发成为可能。在实践中,Django的后端提供数据的存储处理功能,而前端使用DRF来访问API并展示数据。 首先,我们需要在Django中安装配置DRF。可以通过在settings.py中添加'django_rest_framework'到INSTALLED_APPS列表中来安装DRF。然后,在urls.py中配置API的路由。 在Django中,我们可以使用数据库模型来定义数据模型,在使用DRF时,我们需要创建个序列化器类来定义返回给前端的数据结构。序列化器由字段组成,可以定义字段的类型、验证规则等。我们可以使用DRF提供的ModelSerializer来快速创建序列化器类,它会自动根据模型的字段来生成对应的序列化器字段。 在视图中,我们可以使用基于类的视图来处理API请求。DRF提供了系列的视图类,如APIView、ViewSet等,可以根据实际需求选择使用。视图类中的方法对应不同的HTTP操作,如GET、POST、PUT、DELETE等。 DRF还提供了身份验证、权限控制、过滤、排序等功能,可以根据项目的需求进行配置。 使用DRF前后端分离实践中,前端可以通过发送GET、POST、PUT等请求来获取操作数据。后端则负责处理请求并返回响应。前端可以通过AJAX、fetch等方法来发送请求并获取数据,然后使用HTML、CSSJavaScript来展示数据。 在前后端分离开发中,前端后端可以并行开发,各自独立测试,并且可以轻松地修改API而不会影响到前端界面。这种开发模式使得团队协作更加高效,同时也方便进行项目的维护扩展。 总而言之,Django前后端分离实践之DRF可以极大地提升开发效率团队协作能力。通过合理配置使用DRF提供的功能,可以实现强大的API开发,使得前后端分离成为种高效可行的开发方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值