javascript - 使用 Vue 增强现有的多页面/服务器渲染/经典 Web 应用程序

Question

我已经搜索了几个小时，但没有找到任何接近我的用例的内容。

• 我有一个用 JAVA 制作的经典/多页面/服务器渲染的电子商务网站
• 我有一个页面，服务器在其中呈现带有分页的产品列表
• 今天，我使用 jQuery 进行分页，为用户提供更好的加载体验
• 在我的服务器上，如果请求是 AJAX，则发送 json 响应，否则我渲染普通的 html View
• 使用 jQuery 和 vanilla 真的很容易，使用 Vue 似乎不起作用，因为 Vue 的 v-for 和其他模板绑定(bind)直接替换了服务器渲染的模板......
• 服务器将呈现此内容:

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 中使用

Answer 1

您可以将 DOM 引用附加到服务器呈现的内容，然后就像在 jQuery 中一样，只需清除 DOM 元素的内容即可。

您只需执行此操作一次，因此您可以添加检查以查看 DOM 引用是否为空，如果 page === 1

new Vue({
  el: "#app",
  data: {
    users: null,
    page: 1
  },
  methods: {
    loadData: function(prev) {
      var page = this.page

      if (prev) {
        page--
      } else {
        page++
      }

      fetch('https://randomuser.me/api/?seed=abc&results=3&page=' + page)
        .then(res => res.json())
        .then(data => {
          this.$refs.serverContent.innerHTML = '';
          this.users = data.results
          this.page = page
          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://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <h2>Freelance list</h2>
  <div ref="serverContent">
    <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>

  <!-- Vue part -->
  <!-- how to plug Vue to handle the pagination ? -->
  <article v-for="user in users">
    <h3>{{ user.name.first }}</h3>
    <p>
      City : <strong>{{ user.location.city }}</strong>
      <br> Phone : <strong>{{ user.phone }}</strong>
    </p>
  </article>
  <!-- Vue part -->

  <button v-show="page > 1" @click="loadData(true)">prev</button>
  <button @click="loadData()">next</button>
</div>
<!-- server rendered -->

但是如果要采用 Vue 风格，建议您从服务器中删除第一页的渲染，并让 Vue 自行处理数据获取，以便 Vue 可以使用它存储的 data事实来源而不是操纵 DOM。