Technische Lösungen zum Aufbau einer Bibliotheksverwaltungsplattform mit vue.js-js-Tutorial-php.cn

Dieses Mal werde ich Ihnen die technischen Lösungen zum Aufbau einer Bibliotheksverwaltungsplattform mit vue.js vorstellen. Was sind die Vorsichtsmaßnahmen für den Aufbau einer Bibliotheksverwaltungsplattform mit vue.js? Schauen Sie mal rein.

Vue.js ist eine sehr beliebte JavaScript MVVM-Bibliothek (Model-View-ViewModel). Sie basiert auf datengesteuerten und komponentenbasierten Ideen. Im Vergleich zu Angular.js bietet Vue.js eine einfachere und leichter verständliche API, die uns einen schnellen Einstieg und die Verwendung von Vue.js ermöglicht.

In der letzten Ausgabe wurde kurz die grundlegende Syntax von Vue erläutert. Dieses Mal werden wir ein kleines Projekt durchführen und eine einfache Bibliotheksverwaltungsplattform erstellen, die uns ein tieferes Verständnis der wunderbaren Verwendungsmöglichkeiten dieser Sprache ermöglicht.

1. DEMO-Stil

„Zuerst müssen wir einen einfachen Demo-Stil erstellen. Es wird empfohlen, Bootstrap zu verwenden, mit dem schnell eine klare und prägnante Seite erstellt werden kann.

„Lassen Sie mich einen Teil meines Codes mit Ihnen teilen.

<p class="container">
  <p class="col-md-6 col-md-offset-3">
  <h1>Vue demo</h1>
  <p id="app">
   <table class="table table-hover ">
    <caption></caption>
   <thead>
    <tr>
    <th>序号</th>
    <th>书名</th>
    <th>作者</th>
    <th>价格</th>
    <th>操作</th>
    </tr>
   </thead>
   </table>
   <p id="add-book">
   <legend>添加书籍</legend>
   <p class="form-group">
    <label for="group">书名</label>
    <input type="text" class="form-control" id="group">
   </p>
   <p class="form-group">
    <label for="author">作者</label>
    <input type="text" class="form-control" id="author">
   </p>
   <p class="form-group">
    <label for="price">价格</label>
    <input type="text" class="form-control" id="price">
   </p>
   <button class="btn btn-primary btn-block">添加</button>
   <button class="btn btn-primary btn-block">查询</button>
   </p>
   
   <p id="update-book">
   <legend>修改书籍</legend>
   <p class="form-group">
    <label for="group1">书名</label>
    <input type="text" class="form-control" id="group1">
   </p>
   <p class="form-group">
    <label for="author1">作者</label>
    <input type="text" class="form-control" id="author1">
   </p>
   <p class="form-group">
    <label for="price1">价格</label>
    <input type="text" class="form-control" id="price1">
   </p>
   <button class="btn btn-primary btn-block">完成</button>
   </p>
  </p>
  </p>
 </p>

Nach dem Login kopieren

Durch die Verwendung des Bootstrap-Grid-Systems und einiger einfacher Komponenten ist es nicht nur einfach und schnell, sondern reagiert auch automatisch.

Und der Effekt ist nicht hässlich, er ist ganz ordentlich.

Wenn Sie dieses CSS-Framework nicht verstehen, spielt es keine Rolle, ob Sie den Stil selbst schreiben.

2. Erstellen Sie eine Vue-Instanz

Als nächstes importieren wir unsere eigene JS-Datei und erstellen eine Vue-Instanz.

new Vue({
 el: '#app',
 data: {
 book: {
  id: 0,
  author: '',
  name: '',
  price: ''
 },
 books: [{
  id: 1,
  author: '曹雪芹',
  name: '红楼梦',
  price: 32.0
 }, {
  id: 2,
  author: '施耐庵',
  name: '水浒传',
  price: 30.0
 }, {
  id: '3',
  author: '罗贯中',
  name: '三国演义',
  price: 24.0
 }, {
  id: 4,
  author: '吴承恩',
  name: '西游记',
  price: 20.0
 }]
 }
 });

Nach dem Login kopieren

��data enthält einige Anfangsdaten, die nach Belieben ausgefüllt werden können.

3. Fügen Sie verschiedene Anweisungen zu HTML hinzu

Wir haben gesagt, dass der Kern von Vue auf der Ansichtsebene liegt, daher sind Anweisungen der wichtigste Schritt. Lassen Sie uns Schritt für Schritt darüber sprechen.

„Aber weil die Anweisungen unordentlich verteilt werden, hänge ich alle Codes direkt an und erkläre sie dann einzeln.

<p id="app">
   <table class="table table-hover ">
    <caption></caption>
   <thead>
    <tr>
    <th>序号</th>
    <th>书名</th>
    <th>作者</th>
    <th>价格</th>
    <th>操作</th>
    </tr>
   </thead>
   <tbody>
    <tr v-cloak v-for="book in books"> 
    <td>{{book.id}}</td>
    <td>{{book.name}}</td>
    <td>{{book.author}}</td>
    <td>{{book.price}}</td>
    <template v-if="book.id%2==0">
     <td class="text-left">
     <button type="button" class="btn btn-success" @click="delBook(book)" class="del">删除</button>
     <button type="button" class="btn btn-success" @click="updateBook(book)">修改</button>
     </td>
    </template>
    <template v-else>
     <td class="text-left">
     <button type="button" class="btn btn-danger" @click="delBook(book)" class="del">删除</button>
     <button type="button" class="btn btn-danger" @click="updateBook(book)">修改</button>
     </td>
    </template>
    </tr>
   </tbody>
   </table>
   
   <p id="add-book">
   <legend>添加书籍</legend>
   <p class="form-group">
    <label for="group">书名</label>
    <input type="text" class="form-control" id="group" v-model="book.name">
   </p>
   <p class="form-group">
    <label for="author">作者</label>
    <input type="text" class="form-control" id="author" v-model="book.author">
   </p>
   <p class="form-group">
    <label for="price">价格</label>
    <input type="text" class="form-control" id="price" v-model="book.price">
   </p>
   <button class="btn btn-primary btn-block" v-on:click="addBook()">添加</button>
   <button class="btn btn-primary btn-block" v-on:click="searchBook()">查询</button>
   </p>
   
   <p id="update-book">
   <legend>修改书籍</legend>
   <p class="form-group">
    <label for="group1">书名</label>
    <input type="text" class="form-control" id="group1" v-model="book.name">
   </p>
   <p class="form-group">
    <label for="author1">作者</label>
    <input type="text" class="form-control" id="author1" v-model="book.author">
   </p>
   <p class="form-group">
    <label for="price1">价格</label>
    <input type="text" class="form-control" id="price1" v-model="book.price">
   </p>
   <button class="btn btn-primary btn-block" v-on:click="updatesBook()">完成</button>
   </p>
  </p>

Nach dem Login kopieren

Mounten Sie zunächst die Vue-Instanz mit der ID-App auf dem DOM-Knoten . Wenn Sie diese grundlegenden Inhalte nicht verstehen, können Sie meinen letzten Blog lesen, der die Grundlagen von Vue ausführlich vorstellt.

In der folgenden Tabelle wird in tr eine v-for-Schleife verwendet, um alle Daten in den Vue-Instanzdaten in die Tabelle zu laden.

„Aufmerksamen Lesern dürfte aufgefallen sein, dass ich vor v-for einen V-Umhang geschrieben habe.

„Wer Frameworks wie Angular und Vue verwendet hat, sollte wissen, dass, wenn wir {{}} zum Binden von Daten verwenden, beim Aktualisieren der Seite der Originalcode vorbeifliegt.

„Wenn die Informationsmenge relativ groß ist, ist diese Erfahrung zweifellos sehr schlecht. Zu diesem Zeitpunkt bleibt die V-Cloak-Anweisung auf dem Element, bis die zugehörige Instanz kompiliert ist.

Bei Verwendung mit CSS-Regeln wie [v-cloak] { display: none } verbirgt diese Direktive nicht kompilierte Mustache-Tags, bis die Instanz bereit ist.

„Dadurch wird das Problem gelöst, dass beim Aktualisieren eine große Anzahl verstümmelter Zeichen auf der Seite erscheint.

Die folgenden v-if und v-else dienen nur zum Üben verschiedener Anweisungen, damit wir beim Generieren unserer Schaltfläche nacheinander zwei Farben generieren können~

Und das V-Modell dient dazu, den Eingabeinhalt dynamisch zu erhalten, wenn Inhalte in die Eingabe eingegeben werden.

„Das Gleiche gilt: Wenn Sie diese grundlegenden Anweisungen nicht kennen, können Sie sich meinen letzten Blog ansehen.

Nicht schlecht~ Als Nächstes beginnen wir, über die einzelnen Funktionen zu sprechen.

addBook: function() {
  //计算书的id
  this.book.id = this.books.length + 1;
  this.books.push(this.book);
  //将input中的数据重置
  this.book = {};
 }

Nach dem Login kopieren

Hiermit wird eine Funktion hinzugefügt. Sie können sich oben den Code in den Daten in der Vue-Instanz ansehen.

„Tatsächlich wurde die Leistungsfähigkeit von Vue mit nur wenigen Codezeilen vollständig demonstriert.“

„Da wir das V-Modell im Eingabefeld gebunden haben, wird der von uns eingegebene Inhalt dynamisch mit dem Buchobjekt synchronisiert.

Das Prinzip dieser Funktion besteht darin, der ID des Buchobjekts einen Wert zuzuweisen und dann die dynamisch an das Eingabefeld gebundenen Daten, d. h. die von uns eingegebenen Daten, über das V-Modell in das Bücherarray zu verschieben.

最后将book对象清空，也就是把我们的输入框清空了。

区区3行代码，信息的录入就完成了，是不是很神奇呢。

哦对了，在vue实例中，this指向的就是本身这个vue实例，对面向对象的概念没有了解的话，建议百度一下this指向问题。

下面看一下删除

delBook: function(book) {
  var blength = this.books.length;
  this.books.splice(book.id-1, 1);
  for( var i = 0; i < blength ; i++) {
  if(book.id < this.books[i].id) { 
   this.books[i].id -= 1;
  }
  } 
 }

Nach dem Login kopieren

删除的原理是取到当前books数组的长度，当前选中的那一条的下标是它的id-1，用splice方法将它删除。

然后通过循环，将id比被删除数据大的那些项的id都减去1，保持序号的连续。

然后是修改

updateBook: function(book) {
  $("#add-book").css("display","none");
  $("#update-book").css("display","block");
  id = book.id;
 },
 updatesBook:function(book) {
  this.book.id = id;
  this.books.splice(id-1,1,this.book);
  $("#add-book").css("display","block");
  $("#update-book").css("display","none");
  this.book = {};

Nach dem Login kopieren

第一个函数就是将修改框弹出来，把添加的框隐藏掉，然后把需要修改的id绑定到一个全局的变量上~

然后第一个函数才是真正的修改命令。

将刚才绑定的全局变量，赋值给当前id，然后还是用splice方法，用输入的内容把原来的内容替换掉~

然后还是同样的，将book对象也就是输入框清空。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！