django前后端分离开发（四）——前端请求后端数据

- 日理万妓 2022-09-11 15:17 205阅读 0赞

## django前后端分离开发（四）——前端请求后端数据 ##

**1、django后端创建一个app**

python manage.py startapp testapp

**2、新app的view.py添加视图函数**

import json
    import time
    
    from django.http import HttpResponse
    from django.shortcuts import render
    
    def testapp(request):
        Datetime = time.strftime('%Y-%m-%d %H:%M:%S', time.localtime())
        res = { 'now time': Datetime}
        return HttpResponse(json.dumps(res, ensure_ascii=False), content_type='application/json,charset=utf-8')

**3、新app添加urls.py文件并新增如下内容**

from django.urls import path
    
    from . import views
    
    urlpatterns = [
        path('index', views.testapp),
    ]

**4、新app的urls.py注册到项目urls里**

from django.contrib import admin
    from django.urls import path, include
    from django.views.generic import TemplateView
    
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('', TemplateView.as_view(template_name='index.html')),
        path('testapp/', include("testapp.urls")),
    ]

**5、后端访问http://127.0.0.1:8000/testapp/index，网页显示如下内容表示后端模拟数据成功**  
![在这里插入图片描述][d85f6f5e4b7d46c48b516c35ddb5a99f.png]  
**6、安装django-cors-headers**

pip install django-cors-headers

**7、配置setting文件**

ALLOWED_HOSTS = [
        '127.0.0.1'  # 添加这行
    ]
    
    CORS_ORIGIN_ALLOW_ALL = True  # 添加这行
    CORS_ALLOW_CREDENTIALS = True  # 添加这行
    
    MIDDLEWARE = [
        'django.middleware.security.SecurityMiddleware',
        'django.contrib.sessions.middleware.SessionMiddleware',
        'corsheaders.middleware.CorsMiddleware',  # 添加这行（注意顺序）
        'django.middleware.common.CommonMiddleware',
        'django.middleware.csrf.CsrfViewMiddleware',
        'django.contrib.auth.middleware.AuthenticationMiddleware',
        'django.contrib.messages.middleware.MessageMiddleware',
        'django.middleware.clickjacking.XFrameOptionsMiddleware',
    ]

**8、npm安装axios**

npm install axios vue-axios --save

**9、vue项目main.js添加如下内容**

import axios from 'axios'
    import VueAxios from "vue-axios";
    
    axios.defaults.baseURL='http://127.0.0.1:8000';
    Vue.use(VueAxios,axios)

**10、前端项目src/components添加test.vue**

<template>
      <div>
        <p>{ {  message }}</p>
        <p><input type="text" placeholder="请输入内容" v-model="params"></p>
        <p><button @click="test">确定</button></p>
      </div>
    </template>
    
    <script>
    export default { 
      name: 'test',
      data () { 
        return { 
          message: 'hello',
          params: '123456789123'
        }
      },
      methods:{ 
        test:function (){ 
          this.axios.get('/testapp/index').then((res)=>{ 
            this.message=res.data
          })
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

**11、在前端项目的src/Router的index.js里添加分路由**

import Test from '@/components/test'
    { 
          path: '/test',
          name: 'Test',
          component: Test
    }

**12、功能验证，点击图中的确定按钮，界面中的hello变成后端提供的数据，证明前端请求后端的数据成功。**  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASGFyb2xkXzk2X2x4dw_size_7_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASGFyb2xkXzk2X2x4dw_size_8_color_FFFFFF_t_70_g_se_x_16]

[d85f6f5e4b7d46c48b516c35ddb5a99f.png]: /images/20220828/bbfd36e8b8e44be3b1a5fd4481cde185.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASGFyb2xkXzk2X2x4dw_size_7_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/69209a0bf73942e1acef6c59d595fdcc.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASGFyb2xkXzk2X2x4dw_size_8_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/b241ce0c7e464e5286bfe1e0f22a4424.png