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>

前进时，请别遗忘了身后的脚印。