1. 程式人生 > 實用技巧 >Django + Vue

Django + Vue

Django + Vue

https://cloud.tencent.com/developer/article/1005607

跨域問題

模板標籤相互衝突

跨域問題

這時候我們須要在Django層注入header,用Django的第三方包django-cors-headers來解決跨域問題:

   pip install django-cors-headers

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
', ] CORS_ORIGIN_ALLOW_ALL = True

注意中介軟體的新增順序

模板標籤相互衝突

django模板中嵌入vue的插值表示式,並不顯示vue中資料,但是響應事件,解決方案:

<!DOCTYPE html>
{% load staticfiles  %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            height: 100px;
            background
-color: red; } </style> </head> <body> {% verbatim myblock %} <div id="apc"> <h1 @click="alet">{{ msg }}</h1> </div> {% endverbatim myblock %} <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>--> <script src="{% static 'js/vue-2.4.0.js' %}"></script> <script> new Vue({ el: '#apc', data: { msg: "app" }, methods: { alet() { alert(12); } } }); </script> </body> </html>