python+django+vue搭建先後端分離項目

之前一直是作基於PHP或JAVA的先後端分離開發，最近跟着python風搭建了一個基於django的先後端分享項目html

準備工做：IDE，【JetBrains PyCharm2018】【webpack 3.3.0】【python3.7.0】【npm5.8.0】【vue-cli2.9.6】，這是我當前的版本，基本python不低於2.0，本例子均可以運行成功前端

1，打開PyCharm建立一個建立Django項目vue

django-admin startproject pc_admin

建立成功後目錄以下python

. ├── manage.py └── pc_admin    ├── __init__.py    ├── settings.py    ├── urls.py    └── wsgi.py

2，進入項目根目錄，建立一個 App 做爲項目後端webpack

cd pc_admin python manage.py startapp backend 　　　　　　//backend就是app名稱

建立成功後目錄以下web

. ├── 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-cli

vue-init webpack frontend

建立成功後目錄以下npm

. ├── 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等，再隨便添加倆個例子django

frontend/src/HelloWorld.vue文件element-ui

<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文件，都不能刷新查看更改，留待下次更新此功能