Home > Article > Web Front-end > Technical solutions to building a library management platform with vue.js
Technical solutions to building a library management platform with vue.js
- php中世界最好的语言Original
- 2018-04-16 11:08:471186browse
This time I will bring you the technical solutions for building a library management platform with vue.js. What are the precautions for building a library management platform with vue.js? Here are practical cases, let’s take a look.
Vue.js is a very popular JavaScript MVVM (Model-View-ViewModel) library. It is built with data-driven and componentized ideas. Compared with Angular.js, Vue.js provides a simpler and easier-to-understand API, allowing us to quickly get started and use Vue.js.
The last issue briefly explained the basic syntax of Vue. This time we will do a small project and build a simple library management platform, which will allow us to have a deeper understanding of the wonderful uses of this language.
1. DEMO style
First of all, we need to build a simple demo style. It is recommended that you use bootstrap, which can quickly build a clear and concise page.
Let me share with you a piece of my 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>
˜Using bootstrap’s grid system and some simple components, it is not only simple and fast, but also automatically responsive.
And the effect is not ugly, it is quite neat.
If you don’t understand this CSS framework, it doesn’t matter if you write the style yourself.
2. Create a vue instance
Next, we import our own JS file and create a vue instance.
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
}]
}
});
data contains some initial data, which can be filled in at will.
3. Add various instructions to HTML
We have said that the core of Vue focuses on the view layer, so instructions are the most important step. Let’s talk about it bit by bit.
But because the instructions are distributed in a messy manner, I attach all the codes directly, and then I explain them one by one.
<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>
First, mount the vue instance with the ID of app to the DOM node. If you don’t understand these basic contents, you can read my last blog, which introduces the basics of vue in detail. Knowledge.
In the table below, all the data in the vue instance data is loaded into the table through a v-for loop in tr.
Attentive readers should have noticed that I wrote a v-cloak before v-for. What is this for?
Those who have used frameworks such as Angular and Vue should know that when we use {{}} to bind data, when the page is refreshed, the original code will flash by.
When the amount of information is relatively large, this experience is undoubtedly very bad. At this time, the v-cloak instruction remains on the element until the associated instance is compiled.
When used together with CSS rules such as [v-cloak] { display: none }, this directive can hide uncompiled Mustache tags until the instance is ready.
This solves the problem of a large number of garbled characters appearing on the page at the moment of refreshing.
The v-if and v-else below are just for practicing various instructions, so that when our button is generated, we can generate two colors in turn~
And v-model is to dynamically obtain the input content when entering content in the input.
The same thing is said, if you don’t know these basic instructions, you can go to my last blog to check them out.
Not bad~ Next, let’s start talking about each function.
addBook: function() {
//计算书的id
this.book.id = this.books.length + 1;
this.books.push(this.book);
//将input中的数据重置
this.book = {};
}
This is to add a function. You can go above to take a look at the code in the data in the vue instance.
In fact, with just a few lines of code, the power of Vue has been fully demonstrated.
Because we have bound v-model in the input box, the content we input will be dynamically synchronized with the book object.
The principle of this function is to assign a value to the id of the book object, and then push the data dynamically bound to the input box through v-model, that is, the data we input, into the books array.
最后将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;
}
}
}
删除的原理是取到当前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 = {};
第一个函数就是将修改框弹出来，把添加的框隐藏掉，然后把需要修改的id绑定到一个全局的变量上~
然后第一个函数才是真正的修改命令。
将刚才绑定的全局变量，赋值给当前id，然后还是用splice方法，用输入的内容把原来的内容替换掉~
然后还是同样的，将book对象也就是输入框清空。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
The above is the detailed content of Technical solutions to building a library management platform with vue.js. For more information, please follow other related articles on the PHP Chinese website!