Vue का उपयोग मल्टी पेज / सर्वर गाया / क्लासिक वेब एप्लिकेशन मौजूदा बढ़ाने के लिए

वोट
0

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

  • मैं एक क्लासिक / मल्टी पेज / सर्वर प्रदान की गई ई-कॉमर्स जावा के साथ किया जाता है webstie
  • मैं एक पृष्ठ जहाँ सर्वर एक पृष्ठांकन के साथ उत्पादों की एक सूची बना देता है
  • आज, मैं jQuery का उपयोग पृष्ठांकन करने के लिए उपयोगकर्ता के लिए एक बेहतर अनुभव देने के लिए लोड हो रहा है
  • अपने सर्वर पर, यदि अनुरोध AJAX के एक भेजें एक json प्रतिक्रिया है, और मैं एक सामान्य HTML दृश्य प्रस्तुत करना
  • jQuery और वेनिला के साथ यह वास्तव में आसान है, Vue साथ यह क्योंकि Vue के वी-के लिए और अन्य बाध्यकारी टेम्पलेट सीधे सर्वर प्रदान की गई टेम्पलेट की जगह काम करने के लिए प्रतीत नहीं होता ...
  • सर्वर इस प्रस्तुत करना होगा:

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 सिर्फ एक एसपीए कर कहां के साथ एसएसआर के बारे में बात करती है, यहाँ है क्यों मैं नहीं कर सकते:

  • यह ई-कॉमर्स वेबसाइट पूरी तरह से एक एकल पृष्ठ App के साथ नहीं की फिर से किया जा सकता है, यह लाभ यह हमारे लिए लाना होगा के लिए बहुत अधिक समय और पैसा खर्च होंगे
  • यह ई-कॉमर्स एसईओ यातायात ड्राइव करने के लिए जारी रखने के लिए, btw की जरूरत है तो बस किसी भी ई-कॉमर्स की तरह
  • Vue वास्तव में (यह कारण है कि हम Vue पर दांव लगाया है) jQuery की तरह इस्तेमाल किया जा सकता है, तो हम एक पूर्ण पुनर्लेखन कर के बिना यह करने के लिए सक्षम होना चाहिए
  • घटना अगर हम एक एसपीए को फिर से लिखने के लिए समय था, हम एसएसआर उपयोग नहीं कर सकते क्योंकि हमारे बैकएंड जावा साथ किया जाता है और एसएसआर केवल नोड और PHP v8js मॉड्यूल के साथ साथ उपलब्ध हो रहा है
30/03/2018 को 11:59
उपयोगकर्ता
अन्य भाषाओं में...                            


3 जवाब

वोट
1

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

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

30/03/2018 को 13:29
का स्रोत उपयोगकर्ता

वोट
0

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

मैं के लिए में jQuery छोड़ दिया getJSON। उसके अलावा, यह 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/[email protected]/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 -->

30/03/2018 को 15:36
का स्रोत उपयोगकर्ता

वोट
-1

Vue मंच पर किसी ने क्या यहां तैनात किया गया था के करीब लेकिन अनुकूल एक अच्छा दृष्टिकोण पाया बेहतर मेरी जरूरत: https://forum.vuejs.org/t/using-vue-to-enhance-existing-multi-page-server-rendered -classic-वेब-एप्लीकेशन / 30934/20

29/04/2018 को 16:27
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more