Solutions techniques pour créer une plateforme de gestion de bibliothèque avec vue.js-js tutoriel-php.cn

Cette fois, je vais vous apporter les solutions techniques pour construire une plateforme de gestion de bibliothèque avec vue.js. Quelles sont les précautions pour construire une plateforme de gestion de bibliothèque avec vue.js. Voici des cas pratiques, voyons. jetez un oeil.

Vue.js est une bibliothèque JavaScript MVVM (Model-View-ViewModel) très populaire. Elle est construite avec des idées basées sur les données et les composants. Par rapport à Angular.js, Vue.js fournit une API plus simple et plus facile à comprendre, nous permettant de démarrer et d'utiliser rapidement Vue.js.

Le dernier numéro expliquait brièvement la syntaxe de base de Vue. Cette fois, nous allons réaliser un petit projet et construire une plateforme simple de gestion de bibliothèque, ce qui nous permettra d'avoir une compréhension plus approfondie des merveilleuses utilisations de ce langage.

1. Style DÉMO

Tout d'abord, nous devons créer un style de démonstration simple. Il est recommandé d'utiliser bootstrap, qui peut rapidement créer une page claire et concise.

Permettez-moi de partager avec vous un morceau de mon code.

<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>

Copier après la connexion

En utilisant le système de grille de bootstrap et quelques composants simples, il est non seulement simple et rapide, mais aussi automatiquement réactif.

Et l’effet n’est pas moche, il est plutôt soigné.

Si vous ne comprenez pas ce framework CSS, peu importe si vous écrivez le style vous-même.

2. Créez une instance de vue

Ensuite, nous importons notre propre fichier JS et créons une instance de vue.

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
 }]
 }
 });

Copier après la connexion

data contient des données initiales, qui peuvent être renseignées à volonté.

3. Ajouter diverses instructions au HTML

Nous avons dit que le cœur de Vue se concentre sur la couche de vue, les instructions sont donc l'étape la plus importante. Parlons-en étape par étape.

Mais comme les instructions sont distribuées de manière désordonnée, je joins directement tous les codes, puis je les explique un par un.

<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>

Copier après la connexion

Tout d'abord, montez l'instance vue avec l'application ID sur le nœud DOM Si vous ne comprenez pas ces contenus de base, vous pouvez lire mon dernier blog, qui présente les bases de vue en détail.

Dans le tableau ci-dessous, une boucle v-for est utilisée dans tr pour charger toutes les données des données de l'instance vue dans le tableau.

Les lecteurs attentifs auraient dû remarquer que j'ai écrit un v-cloak avant v-for.

Ceux qui ont utilisé des frameworks tels que Angular et Vue devraient tous savoir que lorsque nous utilisons {{}} pour lier des données, lorsque la page est actualisée, le code d'origine clignote.

Lorsque la quantité d'informations est relativement importante, cette expérience est sans doute très mauvaise. A ce moment, l'instruction v-cloak reste sur l'élément jusqu'à ce que l'instance associée soit compilée.

Lorsqu'elle est utilisée avec des règles CSS telles que [v-cloak] { display: none }, cette directive masque les balises Moustache non compilées jusqu'à ce que l'instance soit prête.

Cela résout le problème d'un grand nombre de caractères tronqués apparaissant sur la page au moment de l'actualisation.

Les v-if et v-else suivants servent uniquement à pratiquer diverses instructions, de sorte que lorsque notre bouton est généré, nous puissions générer deux couleurs à tour de rôle ~

Et le modèle v consiste à obtenir dynamiquement le contenu d'entrée lors de la saisie du contenu dans l'entrée.

La même chose est dite, si vous ne connaissez pas ces instructions de base, vous pouvez consulter mon dernier blog.

Pas mal~ Ensuite, commençons à parler de chaque fonction.

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

Copier après la connexion

Il s'agit d'ajouter une fonction. Vous pouvez aller ci-dessus pour jeter un œil au code dans les données de l'instance vue.

En fait, avec seulement quelques lignes de code, la puissance de Vue a été pleinement démontrée.

Parce que nous avons lié le modèle V dans la zone de saisie, le contenu que nous saisissons sera synchronisé dynamiquement avec l'objet livre.

Le principe de cette fonction est d'attribuer une valeur à l'identifiant de l'objet livre, puis de pousser les données liées dynamiquement à la zone de saisie via le modèle v, c'est-à-dire les données que nous saisissons, dans le tableau livres.

最后将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;
  }
  } 
 }

Copier après la connexion

删除的原理是取到当前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 = {};

Copier après la connexion

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

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

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

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

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