मैं अब घंटों खोज रहा हूं और मुझे अपने उपयोग के मामले के करीब कुछ भी नहीं मिला।

  • मेरे पास जावा के साथ बनाया गया एक क्लासिक/बहु पृष्ठ/सर्वर प्रदान किया गया ई-कॉमर्स वेबस्टी है
  • मेरे पास एक पृष्ठ है जहां सर्वर पेजिनेशन वाले उत्पादों की एक सूची प्रस्तुत करता है
  • आज, मैं उपयोगकर्ता को बेहतर लोडिंग अनुभव देने के लिए पेजिनेशन करने के लिए jQuery का उपयोग करता हूं
  • मेरे सर्वर पर, अगर अनुरोध AJAX है तो एक जेसन प्रतिक्रिया भेजें, अन्यथा मैं एक सामान्य HTML दृश्य प्रस्तुत करता हूं
  • JQuery और वेनिला के साथ यह वास्तव में आसान है, 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/ : समस्या, यह समस्या को दूर नहीं करती है पुराना डोम

पुनश्च: इससे पहले कि कोई भी Vue के साथ SSR के बारे में बात करे, बस एक SPA कर रहा है, यहाँ मैं क्यों नहीं कर सकता:

  • इस ई-कॉमर्स वेबसाइट को सिंगल पेज ऐप के साथ पूरी तरह से नहीं बनाया जा सकता है, इससे हमें जो लाभ होगा, उसके लिए इसमें बहुत अधिक समय और पैसा खर्च होगा।
  • किसी भी ई-कॉमर्स बीटीडब्ल्यू की तरह, इस ई-कॉमर्स को ट्रैफ़िक को जारी रखने के लिए SEO की आवश्यकता है
  • यदि Vue का वास्तव में jQuery की तरह उपयोग किया जा सकता है (यही कारण है कि हम Vue पर दांव लगाते हैं), तो हमें पूर्ण पुनर्लेखन किए बिना ऐसा करने में सक्षम होना चाहिए
  • घटना अगर हमारे पास एसपीए को फिर से लिखने का समय है, तो हम एसएसआर का उपयोग नहीं कर सकते क्योंकि हमारा बैकएंड जावा के साथ बना है और एसएसआर केवल नोड और पीएचपी के साथ v8js मॉड्यूल के साथ उपलब्ध है।
0
darkylmnx 30 मार्च 2018, 15:59

3 जवाब

सबसे बढ़िया उत्तर

Vue फ़ोरम पर किसी ने यहाँ जो पोस्ट किया गया था उसके करीब एक अच्छा दृष्टिकोण पाया लेकिन मेरी ज़रूरत के अनुकूल बेहतर: https://forum.vuejs.org/t/using-vue-to-enhance- मौजूदा-मल्टी-पेज-सर्वर -रेंडरेड-क्लासिक-वेब-ऐप/30934/20

-1
darkylmnx 29 अप्रैल 2018, 17:27

हाइड्रेशन का एक उदाहरण। मैं मुझे चेतावनी देना बंद करने के लिए Vue प्राप्त करने में सक्षम नहीं था कि मेरा जेनरेट किया गया HTML मूल से मेल नहीं खाता; यह आलोचनात्मक नहीं है। विकास में, Vue "जमानत देगा और एक पूर्ण रेंडर करेगा", लेकिन उत्पादन में यह पूर्व-रेंडर को छोड़ देगा। आप बस यह सुनिश्चित करना चाहते हैं कि वे मेल खाते हैं, ताकि जब यह अपडेट हो, तो आप यही उम्मीद करते हैं।

मैंने getJSON के लिए jQuery को छोड़ दिया। इसके अलावा, यह jQuery मुफ़्त है।

// 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 -->
1
Roy J 30 मार्च 2018, 16:36

आप सर्वर द्वारा प्रदान की गई सामग्री के लिए एक डोम रेफरी संलग्न कर सकते हैं और फिर जैसे ही jQuery में, सामग्री को डीओएम तत्व में साफ़ करें।

आपको यह क्रिया केवल एक बार करने की आवश्यकता है, ताकि आप यह देखने के लिए चेक जोड़ सकें कि क्या आपका 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 का उपयोग सत्य के स्रोत के रूप में कर सके। डोम में हेरफेर।

1
Agney 30 मार्च 2018, 14:29