【Python】+Django+Vue+Element UI 實現前后端分離的web項目開發

本文轉載自查看原文 2020-12-07 22:20 2203 前后端分離/ python/ Django/ Vue/ Element UI/ web開發/ Python

前端布局：https://www.cnblogs.com/danhuai/p/14483489.html

一、概述

二、前端頁面開發

2.1、在html文件的頭中引入相關模塊

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <!-- 【step1】 引入官方模塊 -->
    <!-- 導入vue模塊 （***必須要先引入vue模塊 然后再引入element ui的樣式與組件***）-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <!-- 引入element ui樣式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入element ui組件庫 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 導入Axios模塊 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- 【step2】 引入自定義文件 -->
    <!-- 導入外部CSS樣式文件 -->
    <link rel="stylesheet" href="./css/index.css">
</head>

2.2、在html文件中body后面引入自定義的JS文件（即導入Vue代碼）

<!-- 導入vue代碼 -->
<script src="./js/index.js"></script>

備注：

備注1、關聯關系

備注2、布局相關

html,body,#app,.el-container {
    margin: 0px;
    padding: 0px;
    height: 100%;
}

三、后端接口開發

3.1、在新建的應用APP中的views.py文件中新建接口

3.2、路由配置

把新建的方法與路由進行關聯（請求路由地址就直接請求到新建的方法了）

3.3、測試接口路由

運行后端服務：python manage.py runserver

報錯

把地址添加到 settings文件中的 ALLOWED_HOSTS 中

再次在瀏覽器中請求接口地址已成功（顯示接口返回的數據）

四、前端通過Axios調用后端接口

4.1、安裝django-cors-headers

pip install django-cors-headers

4.2、配置settings文件

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',
]