【发布时间】：2018-09-09 12:34:50
【问题描述】：
我已经搜索了好几个小时，但没有找到任何与我的用例相近的东西。
- 我有一个用 JAVA 制作的经典/多页面/服务器渲染的电子商务网站
- 我有一个页面，服务器在其中呈现带有分页的产品列表
- 今天我用jQuery做分页，给用户更好的加载体验
- 在我的服务器上，如果请求是 AJAX 发送一个 json 响应，否则我呈现一个普通的 html 视图
- 使用 jQuery 和 vanilla 真的很简单，使用 Vue 似乎不起作用，因为 Vue 的 v-for 和其他模板绑定直接替换了服务器呈现的模板……
- 服务器会渲染这个：
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
article {
margin: 8px 0;
background: #eee;
padding: 20px;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}<!-- server rendered -->
<div id="app">
<h2>Freelance list</h2>
<article>
<h3>louane</h3>
<p>
City : <strong>courbevoie</strong>
<br> Phone : <strong>05-36-23-51-89</strong>
</p>
</article>
<article>
<h3>indra</h3>
<p>
City : <strong>rheden</strong>
<br> Phone : <strong>(354)-415-2419</strong>
</p>
</article>
<article>
<h3>angelo</h3>
<p>
City : <strong>montpreveyres</strong>
<br> Phone : <strong>(883)-474-9314</strong>
</p>
</article>
<a href="/prev-link">prev</a>
<a href="/next-link">next</a>
</div>
<!-- server rendered -->- 我希望能够使用 Vue 做这样的事情：
// fake url link, normally this would be taken from the href or something
var url = 'https://randomuser.me/api/?seed=abc&results=3&page=';
var page = 1;
var $articles = $('.articles');
var tpl = $articles.children().eq(0).clone();
$('.prev').click(function(e) {
e.preventDefault();
if (page <= 1) {
return
}
page--;
$.getJSON(url + page)
.done(onReqDone);
});
$('.next').click(function(e) {
e.preventDefault();
page++;
$.getJSON(url + page)
.done(onReqDone);
});
function onReqDone(res) {
$articles.html('');
res.results.forEach(function(user) {
var $node = tpl.clone();
$node.find('h3').text(user.name.first);
$node.find('strong:eq(0)').text(user.location.city);
$node.find('strong:eq(1)').text(user.phone);
$articles.append($node);
window.scroll(0, 0);
});
}body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
article {
margin: 8px 0;
background: #eee;
padding: 20px;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- server rendered -->
<div id="app">
<h2>Freelance list</h2>
<div class="articles">
<article>
<h3>louane</h3>
<p>
City : <strong>courbevoie</strong>
<br> Phone : <strong>05-36-23-51-89</strong>
</p>
</article>
<article>
<h3>indra</h3>
<p>
City : <strong>rheden</strong>
<br> Phone : <strong>(354)-415-2419</strong>
</p>
</article>
<article>
<h3>angelo</h3>
<p>
City : <strong>montpreveyres</strong>
<br> Phone : <strong>(883)-474-9314</strong>
</p>
</article>
</div>
<a href="/prev-link" class="prev">prev</a>
<a href="/next-link" class="next">next</a>
</div>
<!-- server rendered -->关于如何做到这一点的任何想法？这是我的尝试： https://jsfiddle.net/7270zft3/2/ : 问题，它不会删除旧的 dom
PS： 在有人用 Vue 谈论 SSR 之前，你只是在做一个 SPA，这就是为什么我不能：
- 这个电子商务网站不能完全用单页应用程序重新制作，它会给我们带来的好处会花费太多的时间和金钱
- 这个电子商务需要 SEO 来继续推动流量，就像任何电子商务一样
- 如果 Vue 真的可以像 jQuery 一样使用（这就是我们押注 Vue 的原因），我们应该能够做到这一点而无需完全重写
- 如果我们有时间重写 SPA，我们将无法使用 SSR，因为我们的后端是用 JAVA 制作的，而 SSR 似乎只能用于 node 和带有 v8js 模块的 PHP
【问题讨论】：
-
它正在为我移除旧的 dom 元素。除了你硬编码的前三个。
-
“除了你硬编码的前三个” - 那是旧的 dom 哈哈，检查 jQuery 版本以了解我的期望。
-
我想你基本上是在找hydration
-
@RoyJ 你能详细说明一下吗？为了清楚起见，我需要的是服务器为 google-bot 呈现实际数据，以便让我的 SEO 继续运行，但是因为我不希望用户在每次分页时体验完全重新加载，我处理分页与ajax si 我看不出水合作用在哪里
-
Hydration 就是这样：您从一个包含数据的服务器渲染页面开始。 Vue 的初始状态匹配渲染的页面而不是替换它，但是所有的 Vue 动作都是实时的，因此它可以根据用户输入更新页面。在您的情况下，这只会使分页生效。
标签： javascript jquery vue.js vuejs2 server-rendering