使用VUE增强现有的多页 /服务器渲染 /经典网络应用程序

我现在一直在搜索几个小时，但没有找到与我的用例附近的任何东西。

我有一个经典/多页/服务器渲染的电子商务网站用Java制造
我有一个页面，服务器呈现了分页的产品列表
今天，我使用jQuery进行分页，为用户提供更好的负载体验
在我的服务器上，如果请求是ajax a发送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 -->

关于如何做的任何IDEO？这是我的尝试：https://jsfiddle.net/7270zft3/2/：问题，它不会删除旧的dom

ps：在任何人与Vue Ou谈论SSR之前，我不能：

这个电子商务网站不能完全使用单页应用程序制作，它将花费太多时间和金钱，以便为我们带来的利益
这个电子商务需要SEO才能继续吸引流量，就像任何电子商务btw
如果Vue真的可以像JQuery一样使用(这就是为什么我们押注Vue(，我们应该能够在不进行完整重写的情况下执行此操作
事件如果我们有时间重写水疗中心，我们将无法使用SSR，因为我们的后端是使用Java和SSR制造的，似乎只能使用Node和PHP使用V8JS Module

您可以将DOM REF附加到服务器渲染的内容，然后就像在JQuery中一样，将内容清除到DOM元素中。

您只需要执行此操作一次，因此您可以添加检查以查看您的DOM Ref是否为空，如果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可以使用data它存储的真相来源，而不是操纵dom。

水合的示例。我无法让Vue停止警告我，我生成的HTML与原始作品不符。这不是关键。在开发中，Vue将"保释并进行全面渲染"，但在生产中，这将使预先渲染。您只想确定它们匹配，因此当它确实更新时，这就是您的期望。

我将jQuery留给了getJSON。除此之外，它是免费的。

// 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;
$.getJSON(url + page).done((res) => {
  const articles = res.results;
  new Vue({
    el: '#app',
    template: `
  <div id="app">
    <h2>Freelance list</h2>
    <div class="articles">
      <article v-for="article in articles">
        <h3>{{article.name.first}}</h3>
        <p>
          City : <strong>{{article.location.city}}</strong>
          <br> Phone : <strong>{{article.phone}}</strong>
        </p>
      </article>
    </div>
    <a href="/prev-link" class="prev" @click.prevent="--page">prev</a>
    <a href="/next-link" class="next" @click.prevent="++page">next</a>
  </div>
  `,
    data: {
      page,
      url,
      articles
    },
    methods: {
      getPage() {
        $.getJSON(this.url + this.page)
          .done((res) => {
            this.articles = res.results;
          });
      }
    },
    watch: {
      page() {
        this.getPage();
      }
    }
  });
});

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>
<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app" data-server-rendered="true">
  <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 -->

Vue论坛上的某人发现了一个很好的方法，靠近这里发布的内容，但适合我的需求：https：//forum.vuejs.s.org/t/using-vue-to-to-to-to-to-to-vue-to-to-增强现有的 - 默默页面式服务器 - 经典web-app/30934/20

相关内容

最新更新

热门标签：