django+vue項目搭建實現前後端通信
django 環境搭建
1.創建django骨架項目
django-admin startproject yiyan_webauto
2.創建應用
python manage.py startapp myapp
3.試著啟動項目,驗證環境OK
python3 manage.py runserver
4.基礎配置
admin.py
把數據庫的具體表註冊到後臺來便於管理,改一次後再也不用動
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)
settings.py
項目全局配置,初始化配置
**ALLOWED_HOSTS = [‘*’] **
白名單,配置到這裡的主機可以訪問該服務,*代表所有主機都可以訪問我們的django服務
INSTALLED_APPS 應用列表增加自己創建的應用
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'myapp', ]
MIDDLEWARE 中間件列表,添加cors中間件,解決跨域問題
pip install django-cors-headers
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 #加上允許所有跨域
國際化Internationalization
LANGUAGE_CODE = 'zh-hans' TIME_ZONE = 'Asia/shanghai'
前端項目搭建
前後端分離,因為一個人開發,為瞭方便維護,前端項目直接放在django項目下
1.安裝vue-cli
npm install -g @vue/[email protected]
2.創建前端項目
cd django項目的根目錄,vue create 項目名
vue create front
以下報錯是因為當前目錄沒有找到package.json ,cd到前端項目根目錄front再執行即可
found 23 vulnerabilities (2 low, 16 moderate, 5 high)
run `npm audit fix` to fix them, or `npm audit` for details
D:\myproject\yiyan_webauto
$ npm audit fix
npm ERR! code EAUDITNOPJSON
npm ERR! audit No package.json found: Cannot audit a project without a package.jsonnpm ERR! A complete log of this run can be found in:
npm ERR! D:\Program Files\nodejs\node_cache\_logs\2022-03-01T04_21_12_141Z-debug.logD:\myproject\yiyan_webauto
$ npm audit
npm ERR! code EAUDITNOPJSON
npm ERR! audit No package.json found: Cannot audit a project without a package.jsonnpm ERR! A complete log of this run can be found in:
npm ERR! D:\Program Files\nodejs\node_cache\_logs\2022-03-01T04_21_18_162Z-debug.log
3.創建時候選什麼
– ? Please pick a preset: 選第二個:自定義生成vue項目。
default (babel, eslint)
❯ Manually select features
– ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) 選擇一些插件.
選擇bable和router
– Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) 選n。
– ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
選package.json
– Save this as a preset for future projects? (y/N) 保存成默認設置
選y,下次創建的時候在第一步會多出這個默認配置的選項,回車直接按照默認配置創建項目,選n,每次創建都會一步步選一遍
前端項目結構
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
main.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')
頁面上呈現的內容是怎麼來的?這裡隻說明vue部分
0 dist是從public復制來的,裡面的index有個id=app
1 main.js負責把App.vue掛載到index頁面id=app的div裡面
2 App.vue裡面有<router-view/>,路由/在router.js裡映射到Home.vue
3 假如Home裡面又加載瞭components的子組件,那再找到子組件
4 最終看到頁面上呈現的內容
曲線救國打通vue和django
vue適配django
public底下手動創建static ,用來存放js/css/圖片等資源,讓vue打包的時候會把靜態文件統一存到這裡,然後讓django的靜態文件從這裡取,怎麼實現說讓vue打包的時候在dist生成static文件夾,在front目錄下創建文件vue.config.js,內容為:
module.exports = { assetsDir:'static' }
這裡需要特別特別說明:舊版本會有vue.config.js,新版本已經沒有瞭
dist vue打包生成的包,django要從dist裡面拿到index.html和static的所有靜態資源,實際上django就是跟dist裡面的index.js交互,而不會管沒vue項目的其他內容,
vue項目就沒用瞭麼?
當然不是,vue在和後端聯調還是用的打包前的,而在django項目,隻用打包後的dist
django適配vue
django和vue前後端分離項目,交互流程就是這樣:
用戶-電腦瀏覽器-django-dist包 -> vue-cli前端開發用的
打通這個流程要做兩個事情
第一,想辦法把路由配置成從vue項目中的index.html進行關聯上
從前:urls -> views.py -> .html的
現在:urls -> .html
具體操作:
urls.py中:
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 ... }
第二,想辦法把vue項目內的static文件夾下的靜態資源關聯上。
settings.py中:
STATICFILES_DIRS=[ os.path.join(BASE_DIR,"front/dist/static"), ]
打包
進入前端項目根目錄front下,執行npm run build
打包完,可以啟動django服務,訪問看下是不是能訪問到vue的頁面index.html
通過django服務訪問vue的index.html
http://127.0.0.1:8000/index/#/about
左邊的是django的路由,右邊的是vue的路由,自動拼接
到此這篇關於django+vue項目搭建實現前後端通信的文章就介紹到這瞭,更多相關django vue項目搭建內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 利用Python創建第一個Django框架程序
- Django路由層如何獲取正確的url
- python框架django中結合vue進行前後端分離
- Django中引入bootstrap的詳細圖文詳解
- 手把手教你使用Django + Vue.js 快速構建項目