亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue前端和django結合的方法

發布時間:2020-09-02 11:24:58 來源:億速云 閱讀:330 作者:小新 欄目:編程語言

vue前端和django結合的方法?這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容,讓我們一起來看看吧!

vue和django的結合嘗試

使用vue進行前端開發時,如今也是工程化開發,和django類似,也有一個工程目錄。開發過程中,會利用nodejs啟動一個服務器,默認訪問localhost:8080就可以打開頁面。

vue開發過程中會使用vue專有的文件后綴名.vue,這些內容瀏覽器是無法識別的,因此開發完成后需要對項目進行打包生成瀏覽器可以識別的js,css文件以及一個單頁面index.html。

django使用的就是最后生成的這幾個文件。

具體設置

vue項目由前端開發完成后,會通過命令npm run build 打包成一個dist目錄,其中包含一個index.html和static目錄

這兩項內容是django最終需要的頁面。

static目錄和django的static目錄是同一個目錄,可直接覆蓋django的,settings中的配置不變,仍舊是原本的static路徑

index.html可放在模板目錄內,在settings中指定模板路徑即可,最后配置路由,路由如下:

 path('', TemplateView.as_view(template_name='index.html')),
 path('index/', TemplateView.as_view(template_name='index.html'))

以上即可結合完成,其他的所有ajax請求,直接后臺返回數據即可

開發過程中跨域問題的解決

vue開發過程中,ajax請求,既可以通過設置前端來訪問,也可以通過django的設置來允許訪問

vue的設置

vue的設置方式是在項目的config目錄下,修改index.js文件中proxyTable項

// 'http://localhost:7890' 表示的是要跨域請求的地址,vue的開發地址可能是端口8080,7890就等于是django的端口
// 如果請求的地址是:'http://localhost:7890/index_data'
// 在請求時就可以寫成: '/apis/index_data'

'/apis': {
    target: 'http://localhost:7890',
    changeOrigin: true,
    pathRewrite: {
        '^/apis': ''
    }
}

django的設置

安裝第三方包 pip install django-cors-headers 這個包可以自動給響應頭中添加允許跨域的響應頭

具體配置分兩步:

1、settings.py修改

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',

2、settings.py添加

一般情況下,只添加一項:CORS_ORIGIN_ALLOW_ALL = False 即可

注意此為開發環境,生產環境需要關閉此項

感謝各位的閱讀!看完上述內容,你們對vue前端和django結合的方法大概了解了嗎?希望文章內容對大家有所幫助。如果想了解更多相關文章內容,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

时尚| 台州市| 邵阳县| 奈曼旗| 尼木县| 肇庆市| 东平县| 清流县| 客服| 大悟县| 阿瓦提县| 沂源县| 永靖县| 彭泽县| 湘乡市| 江安县| 惠州市| 北流市| 新化县| 仪陇县| 兰州市| 峨山| 蒙城县| 奉新县| 拜城县| 达拉特旗| 苍梧县| 花垣县| 花莲市| 新乡县| 长葛市| 米脂县| 乃东县| 耿马| 宜良县| 两当县| 栖霞市| 德保县| 龙江县| 滨海县| 贵定县|