django+vue專案搭建實現前後端通訊

django-admin startproject yiyan_webauto

python manage.py startapp myapp

python3 manage.py runserver

from django.contrib import admin

# Register your models here.
import inspect,sys
from myapp.models import *

cls_members = inspect.getmembers(sys.modules[__name__],inspect.isclass)
for name,cls in cls_members:
    admin.site.register(cls)

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myapp',
]

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',
]
CORS_ORIGIN_ALLOW_ALL = True #加上允許所有跨域

LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/shanghai'

npm install -g @vue/cli@3.12.1

vue create front

front
  dist 打包生成目錄
      static    來自public/static，static是專案建立後手工建立的資料夾
          css    手工建立
              app.xxx.css    來自/src/App.vue裡面的style標籤的內容
        js
            about.xxx.js    /src/views/About.vue被webpack打包後的js檔案
                about.xxx.js.map    webpack打包資訊
            app.xxx.js        /src/views/Home.vue被webpack打包後的js檔案
                app.xxx.js.map        webpack打包資訊
            chunk-vendors.xxx.js
                chunk-vendors.xxx.js.map    
            
  node_modules  vue框架需要的依賴包
  public  靜態資源,這裡有一個index.html 模板,作為合成最終dist/index.html的骨架存在
  src
    assets 存放一些靜態檔案，現在我們不用這個,之後全部存到public/static下
    components 小型元件存放位置
        HelloWorld.vue    子元件
    views 大型元件，母體元件存放位置
        About.vue 母元件
        Home.vue 母元件，裡面引入了子元件HelloWorld.vue，所以在存取Home頁面的時候會看到HelloWorld頁面的內容
    App.vue 作為所有的.vue的一個主管存在，存放uri(/和/about),裡面的樣式會影響全域性（id=app的div）
    main.js : 作為打包過程必要的主指令碼，負責把id=app的div進行填充，裡面的程式碼會影響全域性
    router.js: 路由管理器，根據path(App.vue裡面的uri)對映具體頁面（component：Home），Home就是views資料夾裡面的vue母元件Home.vue
  vue.config.js

import Vue from 'vue'
import App from './App.vue'   # 引入App.vue，取名為App
import router from './router'

Vue.config.productionTip = false

# 把App.vue填充到public/index.html的id=app的div裡面
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

module.exports = {
assetsDir:'static'
}

from django.views.generic import TemplateView
path('index/',TemplateView.as_view(template_name='index.html'))    # 加了這一行，就是把django的index這個uri指向front/dist/index.html頁面，而不是再去django的views裡面  這一步只是專案搭建階段，驗證django和vue的打通，後續開發，前端直接請求後端域名介面就好了

settings.py中，修改TEMPLATES的DIRS,其他不變：
TEMPLATES = [
    {
        ...
        'DIRS': ['front/dist'], # 指定django模板路徑，讓django在讀取html時從前端專案front的打包目錄dist取index.html
        ...
    }

STATICFILES_DIRS=[
    os.path.join(BASE_DIR,"front/dist/static"),
]