Javascript Django模板&x2B；基于SEO原因为相同内容制作Vue模板_Javascript_Python_Django_Vue.js_Server Side Rendering

Javascript Django模板&x2B；基于SEO原因为相同内容制作Vue模板

javascript python django vue.js

Javascript Django模板&x2B；基于SEO原因为相同内容制作Vue模板,javascript,python,django,vue.js,server-side-rendering,Javascript,Python,Django,Vue.js,Server Side Rendering,我正在构建一个具有有限Javascript交互性的Django应用程序，并且正在研究如何将Vue模板与Django模板结合起来，用于相同的内容想象一个无限滚动页面，其中SEO非常重要。Django非常擅长解决这个问题，因为根据定义，它是一个服务器端框架。但是，如果这两种技术都需要呈现相同的内容，那么如何使用Vue丰富Django呈现的页面？在这种情况下，Django将在Vue接管之前为SEO爬虫渲染，Vue将“水合物”这些组件并使它们具有交互性。在此之后，使用AJAX异步获取的后续内容也将使用

我正在构建一个具有有限Javascript交互性的Django应用程序，并且正在研究如何将Vue模板与Django模板结合起来，用于相同的内容

想象一个无限滚动页面，其中SEO非常重要。Django非常擅长解决这个问题，因为根据定义，它是一个服务器端框架。但是，如果这两种技术都需要呈现相同的内容，那么如何使用Vue丰富Django呈现的页面？在这种情况下，Django将在Vue接管之前为SEO爬虫渲染，Vue将“水合物”这些组件并使它们具有交互性。在此之后，使用AJAX异步获取的后续内容也将使用Vue进行模板化

我做了一些研究，但没有找到足够的信息来解决这个问题：

下面代码示例的某些部分是基于
这说明django和vue的结合似乎非常好

我感觉不到这些来源在谈论SEO，或者更确切地说，如果他们是，他们只在内容不太SEO的地方使用Vue模板（比如打开一个模式）

下面是这两种技术以不同方式呈现相同内容的初步想法。由于Vue有

分隔符

选项，我觉得可能有一种方法可以将两者结合起来（以避免模板语法的冲突）

{%load static%}
Django和Vue测试
{%if name%}
var names={{names_json | safe}}；
Django列表

{名称中的名称为%}

{{name}}@test.se

{%endfor%}

Vue列表


[[name]]@test.se


var app=新的Vue({
分隔符：['['，']]']，
el:“#应用程序”，
数据：{
姓名：姓名，
},
方法：{
问候语：功能（名称）{
console.log（'Vue从'+name+'！'打招呼）
}
}
});
{%endif%}

我是不是想错了，或者你们有没有人能给我一些指导

非常感谢。

我就是这样做的：

views.py

def show_客户（请求）：
customers=Customer.objects.all（）
上下文={
“客户”：客户，
}
返回呈现（请求“app/customers.html”，上下文）

模板：

customers.html


客户名单
{%if DEBUG%}
{%else%}
{%endif%}
{客户中客户的百分比|切片：“：3”}

{{customer.id}-{{customer.user.username}

{%endfor%}
{%verbatim%}

{{customer.id}-{{customer.name}

{%endverbatim%}
展示更多的客户
Vue.组件（“客户”{
道具：{
顾客：反对，
下一页：字符串
},
模板：“#更多客户模板”
});
var customerMore=新的Vue({
el:'更多客户'，
数据：{
顾客：[]
},
方法：{
loadMorecustomer:函数（）{
this.customers=[{name:'Some dynamic data'，id:1}]
}
}
});

此代码用于演示，您需要将JS代码和Vue模板代码分开

编辑：我发现了一篇关于这方面的非常好的文章，甚至更干净

我就是这样做的：

views.py

def show_客户（请求）：
customers=Customer.objects.all（）
上下文={
“客户”：客户，
}
返回呈现（请求“app/customers.html”，上下文）

模板：

customers.html


客户名单
{%if DEBUG%}
{%else%}
{%endif%}
{客户中客户的百分比|切片：“：3”}

{{customer.id}-{{customer.user.username}

{%endfor%}
{%verbatim%}

{{customer.id}-{{customer.name}

{%endverbatim%}
展示更多的客户
Vue.组件（“客户”{
道具：{
顾客：反对，
下一页：字符串
},
模板：“#更多客户模板”
});
var customerMore=新的Vue({
el:'更多客户'，
数据：{
顾客：[]
},
方法：{
loadMorecustomer:函数（）{
this.customers=[{name:'Some dynamic data'，id:1}]
}
}
});

此代码用于演示，您需要将JS代码和Vue模板代码分开

编辑：我发现了一篇关于这方面的非常好的文章，甚至更干净

您考虑过服务器端渲染吗？看看我有多少。问题是我对Django和

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Django and Vue test</title>
</head>
<body>

{% if names %}
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var names = {{ names_json|safe }};
    </script>

    <div id="app">

        <!-- This list is for SEO purposes, let's say 'above the fold' content contained in a responsive grid before an infinite scroll is triggered -->
        <h2>Django list</h2>
        <ul>
            {% for name in names %}
                <li>
                    <div>
                        <img src="avatar.jpg">
                        <div>
                            <div>{{ name }}@test.se</div>
                        </div>
                    </div>
                </li>
            {% endfor %}
        </ul>

        <!-- This list is supposed to somehow 'hydrate' the django template content, in order to enrich the template with interactive VueJS. When the client Vue instance is instantiated/mounted, the idea is that only these elements populate the page, and not the SSR ones -->
        <h2>Vue list</h2>
        <ul>
            <li v-for="name in names">
                <div v-on:click="greet(name)">
                    <img src="avatar.jpg">
                    <div>
                        <div>[[ name ]]@test.se</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <script>
        var app = new Vue({
            delimiters: ['[[', ']]'],
            el: '#app',
            data: {
                names: names,
            },
            methods: {
                greet: function (name) {
                    console.log('Vue says hello from ' + name + '!')
                }
            }
        });
    </script>
{% endif %}
</body>
</html>