django 環(huán)境搭建

1.創(chuàng)建django骨架項(xiàng)目

django-admin startproject yiyan_webauto

2.創(chuàng)建應(yīng)用

python manage.py startapp myapp

3.試著啟動(dòng)項(xiàng)目，驗(yàn)證環(huán)境OK

python3 manage.py runserver

4.基礎(chǔ)配置

admin.py

把數(shù)據(jù)庫(kù)的具體表注冊(cè)到后臺(tái)來(lái)便于管理，改一次后再也不用動(dòng)

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

項(xiàng)目全局配置，初始化配置

**ALLOWED_HOSTS = [‘*’] **

白名單，配置到這里的主機(jī)可以訪問(wèn)該服務(wù)，*代表所有主機(jī)都可以訪問(wèn)我們的django服務(wù)

INSTALLED_APPS 應(yīng)用列表增加自己創(chuàng)建的應(yīng)用

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

MIDDLEWARE 中間件列表，添加cors中間件，解決跨域問(wèn)題

pip install django-cors-headers

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware', #第三方解決跨域頭問(wèn)題的中間件
    '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 #加上允許所有跨域

國(guó)際化Internationalization

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

前端項(xiàng)目搭建

前后端分離，因?yàn)橐粋€(gè)人開(kāi)發(fā)，為了方便維護(hù)，前端項(xiàng)目直接放在django項(xiàng)目下

1.安裝vue-cli

npm install -g @vue/cli@3.12.1

2.創(chuàng)建前端項(xiàng)目

cd django項(xiàng)目的根目錄，vue create 項(xiàng)目名

vue create front

以下報(bào)錯(cuò)是因?yàn)楫?dāng)前目錄沒(méi)有找到package.json ，cd到前端項(xiàng)目根目錄front再執(zhí)行即可

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.json

npm 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.log

D:\myproject\yiyan_webauto
$ npm audit
npm ERR! code EAUDITNOPJSON
npm ERR! audit No package.json found: Cannot audit a project without a package.json

npm 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.創(chuàng)建時(shí)候選什么

- ? Please pick a preset:  選第二個(gè)：自定義生成vue項(xiàng)目。
  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)  保存成默認(rèn)設(shè)置
選y，下次創(chuàng)建的時(shí)候在第一步會(huì)多出這個(gè)默認(rèn)配置的選項(xiàng)，回車直接按照默認(rèn)配置創(chuàng)建項(xiàng)目，選n，每次創(chuàng)建都會(huì)一步步選一遍

前端項(xiàng)目結(jié)構(gòu)

front
  dist 打包生成目錄
      static    來(lái)自public/static，static是項(xiàng)目創(chuàng)建后手工創(chuàng)建的文件夾
          css    手工創(chuàng)建
              app.xxx.css    來(lái)自/src/App.vue里面的style標(biāo)簽的內(nèi)容
        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  靜態(tài)資源,這里有一個(gè)index.html 模板,作為合成最終dist/index.html的骨架存在
  src
    assets 存放一些靜態(tài)文件，現(xiàn)在我們不用這個(gè),之后全部存到public/static下
    components 小型組件存放位置
        HelloWorld.vue    子組件
    views 大型組件，母體組件存放位置
        About.vue 母組件
        Home.vue 母組件，里面引入了子組件HelloWorld.vue，所以在訪問(wèn)Home頁(yè)面的時(shí)候會(huì)看到HelloWorld頁(yè)面的內(nèi)容
    App.vue 作為所有的.vue的一個(gè)主管存在，存放uri(/和/about),里面的樣式會(huì)影響全局（id=app的div）
    main.js : 作為打包過(guò)程必要的主腳本，負(fù)責(zé)把id=app的div進(jìn)行填充，里面的代碼會(huì)影響全局
    router.js: 路由管理器，根據(jù)path(App.vue里面的uri)映射具體頁(yè)面（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')

頁(yè)面上呈現(xiàn)的內(nèi)容是怎么來(lái)的？這里只說(shuō)明vue部分

0 dist是從public復(fù)制來(lái)的，里面的index有個(gè)id=app

1 main.js負(fù)責(zé)把App.vue掛載到index頁(yè)面id=app的div里面

2 App.vue里面有<router-view/>，路由/在router.js里映射到Home.vue

3 假如Home里面又加載了components的子組件，那再找到子組件

4 最終看到頁(yè)面上呈現(xiàn)的內(nèi)容

曲線救國(guó)打通vue和django

vue適配django

public底下手動(dòng)創(chuàng)建static ，用來(lái)存放js/css/圖片等資源，讓vue打包的時(shí)候會(huì)把靜態(tài)文件統(tǒng)一存到這里，然后讓django的靜態(tài)文件從這里取，怎么實(shí)現(xiàn)說(shuō)讓vue打包的時(shí)候在dist生成static文件夾，在front目錄下創(chuàng)建文件vue.config.js，內(nèi)容為：

module.exports = {
assetsDir:'static'
}

這里需要特別特別說(shuō)明：舊版本會(huì)有vue.config.js，新版本已經(jīng)沒(méi)有了

dist vue打包生成的包，django要從dist里面拿到index.html和static的所有靜態(tài)資源，實(shí)際上django就是跟dist里面的index.js交互，而不會(huì)管沒(méi)vue項(xiàng)目的其他內(nèi)容，
vue項(xiàng)目就沒(méi)用了么？
當(dāng)然不是，vue在和后端聯(lián)調(diào)還是用的打包前的，而在django項(xiàng)目，只用打包后的dist

django適配vue

django和vue前后端分離項(xiàng)目，交互流程就是這樣：
用戶-電腦瀏覽器-django-dist包 -> vue-cli前端開(kāi)發(fā)用的

打通這個(gè)流程要做兩個(gè)事情

第一，想辦法把路由配置成從vue項(xiàng)目中的index.html進(jìn)行關(guān)聯(lián)上

從前：urls -> views.py -> .html的

現(xiàn)在：urls -> .html

具體操作：

urls.py中：

from django.views.generic import TemplateView
path('index/',TemplateView.as_view(template_name='index.html')) ? ?# 加了這一行，就是把django的index這個(gè)uri指向front/dist/index.html頁(yè)面，而不是再去django的views里面 ?這一步只是項(xiàng)目搭建階段，驗(yàn)證django和vue的打通，后續(xù)開(kāi)發(fā)，前端直接請(qǐng)求后端域名接口就好了

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

第二，想辦法把vue項(xiàng)目?jī)?nèi)的static文件夾下的靜態(tài)資源關(guān)聯(lián)上。

settings.py中：

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

打包

進(jìn)入前端項(xiàng)目根目錄front下，執(zhí)行npm run build

打包完，可以啟動(dòng)django服務(wù)，訪問(wèn)看下是不是能訪問(wèn)到vue的頁(yè)面index.html

通過(guò)django服務(wù)訪問(wèn)vue的index.html

http://127.0.0.1:8000/index/#/about

左邊的是django的路由，右邊的是vue的路由，自動(dòng)拼接

到此這篇關(guān)于django+vue項(xiàng)目搭建實(shí)現(xiàn)前后端通信的文章就介紹到這了,更多相關(guān)django vue項(xiàng)目搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論