vue.js与django-rest-framework进行数据的交互及Ajax和axios异步请求django后端API接口_django restframework vue

1. vue的引用源

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. django 和vue语法冲突处理需要增加一个标签{% verbatim %}

{% verbatim %} <div id="app"> { { text }} <br><br> <button v-on:click="create_server">插入一台服务器</button> {% endverbatim %} </body>

3. django的数据传递给vue

python中的列表或字典可以直接转换成json数据，然后在传递给vue即可

（1）django服务器端代码：

def index(request):
    list = [11, 22, 33]
    dict = {"name": "mayanan", "age": 29}
    json_info = {
        "list": json.dumps(list),
        "dict": json.dumps(dict)
    return render(request, "assets/index.html", json_info)

（2）vue前端代码

<script>
    var list = {{ list | safe }}
    var obj = {{ obj | safe }}
    console.log(list,obj)
</script>

4. vue的数据传递给django，ajax方法

（1）get请求，获取数据

使用全局对象方式 Vue.http 或者在一个 Vue 实例的内部使用 this.$http来发起 HTTP 请求

Vue 要实现异步加载需要使用到 vue-resource 库

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

vue代码方法1：

<script>
    Vue.http.get("/assets/servers/?page=8").
    then(function (response) {
        console.log(response.data);
</script>
vue代码方法2： 
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            text: "",
        mounted: function () {
            this.$http.get("/assets/servers/?page=8").then(function (response) {
                console.log(response.data);
</script>
因为我们的django后台已经通过django-rest-framework实现了该接口，所以console打印结果如下： 
（2）post请求，新增数据 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            text: "",
        mounted: function () {
            this.$http.post("/assets/servers/?page=8", {"server_name": "联想服务器", "status": "offline"}).
            then(function (response) {
                console.log(response.data);
</script> 
效果如图： 
注意：因为我们后台写的是restfulAPI接口，所以post请求没有csrf_token的问题，所以也post请求cookie也不需要携带csrftoken。 
5. vue的数据传递给django，axios方法 
（1）get请求，获取数据 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.get("/assets/servers/?page=8").then(function (response) {
        console.log(response.data);
</script> 
（2）post请求，新增数据 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.post("/assets/servers/?page=8", {"server_name": "惠普服务器", "status": "normal"}).then(function (response) {
        console.log(response.data);
</script> 
注意：因为我们后台写的是restfulAPI接口，所以post请求没有csrf_token的问题，所以也post请求cookie也不需要携带csrftoken。 
至于其它针对详情页的方法如：get、put、delete，只需要改写axios.后面的方法名即可实现，例如：删除id=18的记录，方法改成delete即可，字典中的参数可以删掉， 
但是如果是put更新方法，必须加字典中的参数。 
<script>
    axios.delete("/assets/servers/18/", {"id": 18, "server_name": "惠普服务器18", "status": "abnormal"}).then(function (response) {
        console.log(response.data);
</script> 
6. Ajax 与 axios的区别 
（1）Ajax 
   即“Asynchronous Javascript And XML”,是指一种创建交互式网页应用的网页开发技术 
Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)
Ajax是一种用于创建快速动态网页的技术
Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面 
（2）axios 
   用于浏览器和node.js的基于Promise的HTTP客户端 
从浏览器制作XMLHttpRequests
让HTTP从node.js的请求
支持Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换为JSON数据
客户端支持防止XSRF 
                    1. vue的引用源&lt;script src="https://cdn.jsdelivr.net/npm/vue"&gt;&lt;/script&gt;2.django 和vue语法冲突处理需要增加一个标签{% verbatim %}&lt;body&gt;{% verbatim %}&lt;div id="app"&gt;    {{ text }} &lt;br&gt;&lt;br&gt;    &lt;button v-on:click="create_server"&..
				第二版：Vue前台高仿+ Django3.1 + DjangoRestful Framework + Ant Design Pro V4开发的在线教育网站及后台管理
使用TyAdmin（现代化的Xadmin替代品）生成管理后台前逐步，并自动对接。  :sparkles:强烈推荐使用：
 :incoming_envelope: Tyadmin互动交流反馈QQ群：304094780
 v2版前台体验地址：  ：//imooc.funpython.cn
 v2版在线体验地址：  ：//imooc.funpython.cn/xadmin
账号：mtianyan密码：admin2020
前后台效果展示
 Vue前台代码地址：  :  Vue前台代码原作者及
pip install rest_framework
pip install rest_framework_simplejwt
2、项目根目录settings.py配置文件中写入以下配置项
//settings.py 
//INSTALLED_A
				一、认识DRF
1、restful简介
在前后端分离的应用模式中，我们通常将后端开发的每个视图都称为一个接口，或者API，前端通过访问接口来对数据进行增删改查。
restful是一种后端API接口规范
1.1 http动词
对于资源的具体操作类型，由HTTP动词表示。
常用的HTTP动词有下面四个（括号里是对应的SQL命令）：
GET（SELECT）：从服务器取出资源（一项或多项）。
POST（CREATE）：在服务器新建一个资源。
PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。
www.django-rest-framework.org第三方的插件
pip install djangorestframework
settings.py,添加app,rest_framework
导入django.restframework
首先创建一个serializers.py文件
需要导入rest_framework.serializers
class继承serializers.ModelSerializer
把查的模型数据传入序列化（Queryset,many=True）.
添加博客model，并添加一些原始数据
使用rest framework来添加serializer, viewset和urls
配置settings.py并使用cors headers解决跨域的问题
(二) 前端
安装node vue
vue-cli创建前端项目
修改index.html主页，添加bootstrap css框架和fontaweso
				有时候用 file_get_contents() 函数抓取网页会发生乱码现象。有两个原因会导致乱码，一个是编码问题，一个是目标页面开了Gzip。
编码问题好办，把抓取到的内容转下编码即可(content=iconv(“GBK”,“UTF−8//IGNORE”,content)????。
或者发送UA，在使用file_get_contents函数前加上这一句:
ini_set(‘user_agent’,‘Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .N
				### 回答1：
在 Django 中，您可以使用 Django REST framework 来编写接口并返回 JSON 数据。首先，您需要安装 Django REST framework：
pip install djangorestframework
然后，在 Django 项目的 `settings.py` 文件中添加 `'rest_framework'` 到 `INSTALLED_APPS` 列表中。
接下来，您需要在 Django 中创建一个视图，这个视图将返回 JSON 数据。您可以使用 Django REST framework 提供的 `APIView` 或 `GenericAPIView`：
```python
from rest_framework.views import APIView
from rest_framework.response import Response
class MyView(APIView):
    def get(self, request, format=None):
        data = {'message': 'Hello, World!'}
        return Response(data)
最后，您需要在 Django 的 URL 配置中为这个视图添加一个 URL 模式：
```python
from django.urls import path
from .views import MyView
urlpatterns = [
    path('api/hello/', MyView.as_view(), name='hello'),
在 Vue 中，您可以使用 Axios 库发送 AJAX 请求：
```javascript
import axios from 'axios';
axios.get('/api/hello/')
  .then(response => {
    console.log(response.data);
这样，您就可以使用 Django 编写接口并返回 JSON 数据，并使用 Vue 发送 AJAX 请求。  
### 回答2：
使用Django编写接口返回JSON数据非常简单。首先，在Django项目中创建一个视图函数，该函数处理来自前端请求的数据，并返回一个JSON格式的响应。以下是一个简单的示例：
```python
from django.http import JsonResponse
def my_view(request):
    data = {'message': 'Hello, world!'}
    return JsonResponse(data)
在这个例子中，`my_view`视图函数会返回一个包含"message"键和"Hello, world!"值的JSON响应。
在前端使用Vue发送Ajax的Promise请求也很简单。你可以使用Vue的axios库来发送HTTP请求，并返回一个Promise对象以处理异步操作。以下是一个简单的示例：
```javascript
import axios from 'axios';
axios.get('/api/my_view/')
  .then(response => {
    console.log(response.data.message);
  .catch(error => {
    console.error(error);
在这个例子中，我们使用axios的`get`方法发送一个GET请求到`/api/my_view/`接口。当Promise成功时，我们打印出接口返回的数据中的"message"键值对；当Promise失败时，我们打印出错误信息。
需要注意的是，你需要将前端的Vue项目与后端的Django项目连接起来，以确保请求能够正确地发送到后端接口。在Django项目的配置文件中，可以设置`CORS_ORIGIN_ALLOW_ALL = True`来允许来自任何域的请求。  
### 回答3：
使用Django编写接口返回JSON数据很简单。首先，在Django项目中创建一个视图函数，该函数将处理Ajax请求并返回JSON数据。然后，使用Django的内置JSONResponse类将数据转换为JSON格式，并返回给前端。下面是一个示例：
```python
from django.http import JsonResponse
def get_data(request):
    # 处理数据的逻辑
    data = {
        "name": "John",
        "age": 25,
        "city": "New York"
    return JsonResponse(data)
在上面的示例中，我们定义了一个`get_data`视图函数，它返回一个包含姓名、年龄和城市的JSON数据。使用Django的`JsonResponse`类将数据转换为JSON格式，并返回给前端。
现在，通过Vue发送Ajax的Promise请求，可以使用Axios库来简化操作。首先，确保在Vue项目中安装了Axios。然后在Vue组件中使用Axios发送请求，并使用Promise来处理响应数据。下面是一个示例：
```javascript
import axios from 'axios';
// 发送请求的函数
function getData() {
    return axios.get('/api/get_data/')
        .then(response => {
            return response.data;
        .catch(error => {
            console.log(error);
// 在Vue组件中调用函数
export default {
    data() {
        return {
            myData: {}
    methods: {
        fetchData() {
            getData()
                .then(data => {
                    this.myData = data;
    created() {
        this.fetchData();
在上面的示例中，我们首先导入Axios库并定义一个发送请求的函数`getData`。然后，在Vue组件中使用该函数来获取数据，并存储在组件的`myData`属性中。最后，在组件的`created`生命周期钩子中调用`fetchData`函数来获取数据。
这样，我们就可以使用Django编写一个返回JSON数据的接口，并使用Vue发送Ajax的Promise请求来获取和处理这些数据。
                in ObtainAuthToken coreapi.Field( AttributeError: ‘NoneType‘ object has no attribute ‘Field‘
                    weixin_57613377: 
                    是pip install djangorestframework==3.11.0
                Git中如何跟踪或取消跟踪文件或文件夹
                    圆圆的dl君: 
                    唉，果然是，不应该这样

1. vue的引用源

2. django 和vue语法冲突处理 需要增加一个标签{% verbatim %}

3. django的数据传递给vue

4. vue的数据传递给django，ajax方法

5. vue的数据传递给django，axios方法

6. Ajax 与 axios的区别

2. django 和vue语法冲突处理需要增加一个标签{% verbatim %}