python+django+vue搭建前後端分享專案
以前一直是做基於PHP或JAVA的前後端分離開發,最近跟著python風搭建了一個基於django的前後端分享專案
準備工作:IDE,【JetBrains PyCharm2018】【webpack 3.3.0】【python3.7.0】【npm5.8.0】【vue-cli2.9.6】,這是我當前的版本,基本python不低於2.0,本例子都可以執行成功
1,開啟PyCharm建立一個建立Django專案
django-admin startproject pc_admin
建立成功後目錄如下
. ├── manage.py └── pc_admin ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py
2,進入專案根目錄,建立一個 App 作為專案後端
cd pc_admin
python manage.py startapp backend //backend就是app名稱
建立成功後目錄如下
. ├── backend │ ├── __init__.py │ ├── admin.py │ ├── migrations │ │ └── __init__.py │ ├── models.py │ ├── tests.py │ └── views.py ├── manage.py └── pc_admin ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py
3, 使用vue-cli在根目錄建立一個名稱叫【frontend】的Vue.js專案作為專案前端
vue-init webpack frontend
建立成功後目錄如下
. ├── backend │ ├── __init__.py │ ├── admin.py │ ├── migrations │ │ └── __init__.py │ ├── models.py │ ├── tests.py │ └── views.py ├── frontend │ ├── README.md │ ├── build │ │ └── .... │ ├── config │ │ ├── dev.env.js │ │ ├── index.js │ │ ├── prod.env.js │ │ └── test.env.js │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── HelloWorld.vue │ │ └── main.js │ ├── static │ └── test │ └── ... ├── manage.py └── pc_admin ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py
我們可以在vue中加入一些常用元件,如element-ui等,再隨便新增倆個例子
frontend/src/HelloWorld.vue檔案
<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <el-select v-model="value" placeholder="請選擇"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <el-row> <el-button>預設按鈕</el-button> <el-button type="primary">主要按鈕</el-button> <el-button type="success">成功按鈕</el-button> <el-button type="info">資訊按鈕</el-button> <el-button type="warning">警告按鈕</el-button> <el-button type="danger">危險按鈕</el-button> </el-row> </div> </template> <script> export default { name: 'HelloWorld', data() { return { msg: 'Welcome to Your Vue.js App', options: [{ value: '選項1', label: '黃金糕' }, { value: '選項2', label: '雙皮奶' }, { value: '選項3', label: '蚵仔煎' }, { value: '選項4', label: '龍鬚麵' }, { value: '選項5', label: '北京烤鴨' }], value: '' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
4,使用 webpack 打包vue專案
cd frontend
npm install
npm run build
此時直接執行npm run dev也可以直接檢視前端 vue介面
構建完成會生成一個資料夾,名字叫dist,裡面有一個 index.html 和一個 資料夾static。
5, 使用Django的通用檢視 TemplateView修改靜態指向路徑(就是讓Django訪問目錄指向我們剛才打包的dist/index.html)
找到專案根 ulb_manager/urls.py檔案作出如下修改
from django.contrib import admin from django.urls import path from django.views.generic.base import TemplateView //注意加上這句 urlpatterns = [ # path('admin/', admin.site.urls), path('admin/', admin.site.urls), path(r'', TemplateView.as_view(template_name="index.html")), ]
6. 配置Django專案的模板搜尋路徑和靜態檔案搜尋路徑 找到根目錄下 ulb_manager/settings.py檔案並開啟,找到TEMPLATES配置項,修改如下:
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', # 'DIRS': [], 'DIRS':['frontend/dist'], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] # Add for vue.js STATICFILES_DIRS = [ os.path.join(BASE_DIR, "frontend/dist/static"), ]
7,到此基本就配置完成了,執行命令就可以直接檢視效果
python manage.py runserver
後續:前端vue到此還沒有實現修改檔案後動態打包更新,所以,以python命令執行起vue檔案,都不能重新整理檢視更改,留待下次更新此功能