vue.js快速搭建圖書管理平臺

  前  言

上一期簡單講解了vue的基本語法，這一次咱們作一個小項目，搭建一個簡單的圖書管理平臺，可以讓咱們更深入的理解這門語言的妙用。

一、DEMO樣式

 

　　首先咱們須要搭建一個簡單的demo樣式，推薦你們使用bootstrap，能夠很快的搭建出一個清晰簡潔的頁面。

　　給你們分享一段個人代碼吧。

　　

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

　　運用了bootstrap的柵格系統，和一些簡單的組件，不光簡單快捷，還能自動實現響應式呢。

　　並且作出來的效果也不難看，挺整潔的。

　　給你們看下剛開始的效果圖。

　　若是對這個CSS框架沒有了解的話，本身寫一下樣式也不要緊。

 

二、建立vue實例

 　　

　　接下來，咱們導入本身的JS文件，建立一個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
        }]
    }
 });

 

　　data中是一些初始的數據，能夠隨意填寫。

 

3 、將各類指令添加到HTML

　　

　　咱們說過，vue的核心聚焦在視圖層，因此指令是最重要的一步，咱們一點一點說。

　　不過由於指令分佈的比較亂，因此直接附上所有代碼，而後我一個一個的解釋。

　　

                <div 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>
                 
                    <div id="add-book">
                        <legend>添加書籍</legend>
                        <div class="form-group">
                            <label for="group">書名</label>
                            <input type="text" class="form-control" id="group" v-model="book.name">
                        </div>
                        <div class="form-group">
                            <label for="author">做者</label>
                            <input type="text" class="form-control" id="author" v-model="book.author">
                        </div>
                        <div class="form-group">
                            <label for="price">價格</label>
                            <input type="text" class="form-control" id="price" v-model="book.price">
                        </div>
                        <button class="btn btn-primary btn-block" v-on:click="addBook()">添加</button>
                        <button class="btn btn-primary btn-block" v-on:click="searchBook()">查詢</button>
                    </div>
                    
                    <div id="update-book">
                        <legend>修改書籍</legend>
                        <div class="form-group">
                            <label for="group1">書名</label>
                            <input type="text" class="form-control" id="group1" v-model="book.name">
                        </div>
                        <div class="form-group">
                            <label for="author1">做者</label>
                            <input type="text" class="form-control" id="author1" v-model="book.author">
                        </div>
                        <div class="form-group">
                            <label for="price1">價格</label>
                            <input type="text" class="form-control" id="price1" v-model="book.price">
                        </div>
                        <button class="btn btn-primary btn-block" v-on:click="updatesBook()">完成</button>
                    </div>
                </div>

　　

　　首先，將id爲app的vue實例掛載到DOM節點上，若是對於這些基本內容還不瞭解的話，能夠去看個人上一篇博客，詳細的介紹了關於vue的基礎知識。

　　下面的表格，在tr中經過一個v-for循環，將vue實例data中的數據，所有載入到表格裏。

　　細心的讀者應該發現了，我在v-for前寫了一個v-cloak，這是幹什麼的呢？

　　用過angular，vue這種框架的人應該都知道，當咱們用{{}}綁定數據的時候，當頁面刷新的瞬間，會看到閃爍而過的原始代碼。

　　當信息量比較大的時候，這種體驗無疑是十分惡劣的，這個時候，v-cloak這個指令保持在元素上直到關聯實例結束編譯。

　　和 CSS 規則如 [v-cloak] { display: none } 一塊兒用時，這個指令能夠隱藏未編譯的 Mustache 標籤直到實例準備完畢。

　　這樣就解決了刷新的瞬間頁面出現大量亂碼的狀況。

　　下面的v-if和v-else就是爲了練習一下各類指令啦，讓咱們的按鈕生成的時候能夠輪流生成兩種顏色~

　　而v-model是爲了在input中輸入內容時，能夠動態的取到輸入的內容。

　　仍是那句話，這些基本指令不認識的話，能夠去個人上一篇博客查看。

　　那些v-on:click綁定的函數，一會一個一個詳細解釋，如今先來看一下效果。

　　

　　還不錯吧~接下來咱們就開始說一下各個函數。

　　

addBook: function() {
            //計算書的id
            this.book.id = this.books.length + 1;
            this.books.push(this.book);
            //將input中的數據重置
            this.book = {};
        }

　　這個是添加函數，你們能夠去上面看一下vue實例中data裏面的代碼。

　　其實就只是這麼幾行代碼，vue的強大就已經展示的淋漓盡致了。

　　由於咱們在輸入框中綁定了v-model，因此咱們輸入的內容就會動態的與book這個對象同步。

　　這個函數的原理就是給book那個對象的id賦值，而後將經過v-model動態綁定到輸入框上的數據，也就是咱們輸入的數據，push進books那個數組。

　　最後將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對象也就是輸入框清空。

 

 

  結尾

　這樣一個簡單的信息錄入平臺就完成了，雖然代碼很少，可是足以讓咱們深深感覺到vue的強大。

　將來頁面的發展趨勢，必定是繞不開這樣的設計思路的。

　下一期爲你們帶來一個拼圖遊戲，感興趣的能夠深刻了解一下vue的系統。