1. 程式人生 > 實用技巧 >【Python】+Django+Vue+Element UI 實現前後端分離的web專案開發

【Python】+Django+Vue+Element UI 實現前後端分離的web專案開發

一、概述

二、前端頁面開發

2.1、在html檔案的頭中引入相關模組

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <!-- 【step1】 引入官方模組 -->
    <!-- 匯入vue模組 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"
></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、佈局相關

三、後端介面開發

四、前端通過Axios呼叫後端介面