我正在构建一个 Javascript 交互性有限的 Django 应用程序，并且正在研究如何将 Vue 模板与 Django 模板合并以实现相同的内容。
想象一个无限滚动的页面，其中 SEO 非常重要。 Django 非常擅长解决这个问题，因为它根据定义是一个服务器端框架。但是，如果这两种技术都需要呈现相同的内容，那么如何丰富 Django 使用 Vue 呈现的页面呢？在这种情况下，Django 将为 SEO 爬虫进行渲染，在 Vue 接管之前，Vue “水合”这些组件并使它们具有交互性。发生这种情况后，后续使用 AJAX 异步获取的内容也将使用 Vue 进行模板化。
我做了一些研究，但没有找到足够的信息来解决这个问题:
- https://vsupalov.com/vue-js-in-django-template/下面的代码示例的某些部分是基于
- https://medium.com/quick-code/crud-app-using-vue-js-and-django-516edf4e4217其中概述了 django 和 vue 的结合似乎可以很好地协同工作
- https://medium.com/@rodrigosmaniotto/integrating-django-and-vuejs-with-vue-cli-3-and-webpack-loader-145c3b98501a
我没有感觉到这些来源正在谈论 SEO，或者更确切地说，如果它们是，他们仅在内容不属于 SEO 的情况下使用 Vue 模板(例如打开模式)。
下面是这两种技术以不同方式呈现相同内容的初步想法。由于 Vue 有 delimiter 选项，我觉得也许有一种方法可以将两者结合起来(以避免模板语法的冲突)。
{% 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>
我是否以错误的方式思考这个问题，或者你们中有人能给我任何指导吗？
非常感谢。
最佳答案
我就是这样做的:
View .py
def show_customers(request):
customers = Customer.objects.all()
context = {
'customers': customers,
}
return render(request, "app/customers.html", context)
模板:customers.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Customer list</title>
{% if DEBUG %}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
{% else %}
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
{% endif %}
</head>
<body>
<div>
{% for customer in customers|slice:":3" %}
<p>
{{ customer.id }} - {{ customer.user.username }}
</p>
{% endfor %}
{% verbatim %}
<script id="more-customers-template" type="text/template">
<p>
{{ customer.id }} - {{ customer.name }}
</p>
</script>
{% endverbatim %}
</div>
<div class="issue-more-posts" id="more-customers">
<customer
v-for="customer in customers"
v-bind:customer="customer"
v-bind:key="customer.id"
></customer>
<button @click="loadMorecustomer">
SHOW MORE customers
</button>
</div>
<script type="text/javascript">
Vue.component('customer', {
props: {
customer: Object,
nextPage: String
},
template: "#more-customers-template"
});
var customerMore = new Vue({
el: '#more-customers',
data: {
customers: []
},
methods: {
loadMorecustomer: function () {
this.customers = [{name: 'Some dynamic data', id: 1}]
}
}
});
</script>
</body>
</html>
此代码用于演示目的，您需要将 JS 代码和 Vue 模板代码分开。
编辑:我发现了一篇关于此的非常好的文章，甚至更清晰。 vuejs-and-django
关于javascript - 出于 SEO 原因，对相同内容使用 Django 模板 + Vue 模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58082170/