Django + vue + mysql 搭建网站（步骤二：接口请求）

一、配置django

1. 在backend目录（first_django_project\backend）下新建子路由文件（urls.py）

from django.urls import re_path as url
from . import views
urlpatterns = [
    url('all/', views.get),#'all/'是前端get对应路由 views.get是views中对应函数
]

2. 目录（first_django_project\first_django_project）修改路由文件（urls.py），urlpatterns 新增数据。

from django.urls import path, include
from django.urls import re_path as url
​
urlpatterns = [
	......
    url(r'^', include('backend.urls'))
]

3. 目录（first_django_project\first_django_project）修改settings.py文件。

INSTALLED_APPS = [
	......
    'backend',#app的名字
    'corsheaders', # pip install django-cors-headers 这个是为了防止跨域，具体请另查资料，我这里就不赘述了。
    # 'rest_framework', # pip install djangorestframework 方便我们写后端接口
]
MIDDLEWARE = [
	......
    'corsheaders.middleware.CorsMiddleware'
]
​
# 没有就新增
CORS_ORIGIN_ALLOW_ALL = True 

4. 目录（first_django_project\backend）修改views.py文件。

from django.http import JsonResponse

def get(request):
  return JsonResponse({'name':'python'}) # 这里的值就是前端接口返回的值

二、安装cors-headers插件

1. 激活虚拟环境-venv，通过pip安装django-cors-headers插件，如果已激活可以忽略直接跳过这一步，指令：

> activate [绝对路径\虚拟环境的名字]
# 示例：
> activate E:\others\python\venv

2. 安装插件指令：

> pip install django-cors-headers

3. 运行django-查看是否有报错，如果没有报错就能通过 http://127.0.0.1:8000/ 访问页面。

> python manage.py runserver

三、前端页面新增请求

1. 在vscode中新建终端，用于执行前端页面相关指令(如果已经创建，可以不必再新创建一个)，首先需要在终端中通过cd指令进入frontend。

> cd frontend #进入的路径应该如下图

2. 安装axios请求工具，指令

> npm install axios --save

3. 目录(first_django_project\frontend\src) 在main.js中全局引入axios

import axios from 'axios'; // 引入模块
Vue.prototype.$axios = axios; // 将请求方法挂在原型链上，这样就能在页面上直接使用
axios.defaults.baseURL = 'http://127.0.0.1:8000' // 默认请求域名地址，前端调用$axios返回，请求url会加上该域名

4. 目录(first_django_project\frontend\src\components) HelloWorld.vue文件新增数据请求。

export default {
	......
	mounted(){ // 页面生命周期，进入页面后会自动执行
	    this.getData()
	  },
	  methods:{
	  	// 获取数据的方法
	    getData () {  
	      this.$axios
	        .get('all/') // 请求url, 即后端(views.py)定义的接口
	        .then(response=> { 
	          console.log(response.data) // 打印查看是否成功
	        })
	    }
	  }
}

5. 重新打包前端项目，在cmd终端中执行指令

> npm run build

四、运行django项目

1. 切换回运行了django项目的终端，没有运行django项目，则执行以下命令，若运行了直接刷新网页就能看到数据返回了

> python manage.py runserver

2. 成功后，刷新页面在控制台中，就能看到请求的数据了