Vue.js 入門

標籤：實現   tac   簡單   ogg   efault   pack   err   官網   mount   

背景

為了學習spring，準備寫一個通訊錄demo，實現增刪改查功能。

前端頁面同事推薦用vue.js，因為簡單快速，當然前提是基於你對前端的html,css,js有一定的瞭解

 

資料

 

vue.js 官網： https://cn.vuejs.org/

axios： https://www.npmjs.com/package/axios

 

執行個體說明整體思路

items用於頁面展示，contact用於新增資料的儲存，editContact用於修改資料的儲存和展示

建立資料，頁面form跟data綁定，儲存在data中，axios擷取data中的資料，向後端發起請求插入資料庫，插入資料成功後，將前端form的資料存在items中用於頁面展示；

修改資料，通過頁面item.id通過axio向後端擷取資料，展示在快顯視窗上，然後快顯視窗綁定了click時間觸發後端editContact方法；

刪除資料，頁面資料通過直接擷取item.id直接調用後端的刪除介面，然後前端items也刪除資料；

查詢資料，直接介面

 

執行個體Vue，data來儲存資料

var vm = new Vue({        el: ‘#contacts‘,        data: {            contact: {                id:‘‘,                                name: ‘‘,                wechat: ‘‘,                phone: ‘‘,                address: ‘‘,                industry: ‘‘            },            editContact:{                 id:‘‘,                 name: ‘‘,                 wechat: ‘‘,                 phone: ‘‘,                 address: ‘‘,                 industry: ‘‘            },            items: []        }

 

資料繫結，將form表單裡面的內容跟data中的contact雙向繫結，頁面填寫的資料會儲存在data.contact中，可以修改data.contact的資料來控制頁面的資料展示

<form role="form" class="form-horizontal" id="contactForm">    <label for="name">Name</label><input type="text" class="form-control" id="name" v-model="contact.name" />     <label for="wechat">Wechat</label><input type="text" class="form-control" id="wechat" v-model="contact.wechat" />    <label for="phone">Phone</label><input type="text" class="form-control" id="phone" v-model="contact.phone" />    <label for="address">Address</label><input type="text" class="form-control" id="address" v-model="contact.address" />    <label for="industry">Industry</label><input type="text" class="form-control" id="industry" v-model="contact.industry" />        <div class="modal-footer">            <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>            <button type="button" class="btn btn-primary" v-on:click="insertContact" aria-hidden="true" data-dismiss="modal">儲存</button>        </div></form>

 

v-for 遍曆資料，列表展示資料，index為列表下標，遍曆items裡面的資料

<tr v-for="(item,index) in items">    <td>{{item.name}}</td>    <td>{{item.wechat}}</td>    <td>{{item.phone}}</td>    <td>{{item.address}}</td>    <td>{{item.industry}}</td>    <td>        <a class="btn btn-default" v-on:click="getEditContactId(item.id)" href="#modal-container-edit" data-toggle="modal">Edit</a>        <a class="btn btn-default" v-on:click="deleteContact(item.id,index)">Delete</a>    </td></tr>

 

 mounted調用methods裡面的方法，如mounted調用methods裡面的getAllContact方法

mounted: function () {            this.getAllContact();        }

 

跟後端的互動請求，使用axios，如下get請求

getAllContact: function(){            axios.get(‘/contact/all‘)            .then(function (response) {                console.log(response.data);                vm.items=response.data            })                .catch(function (error) {                    console.log(error)                });        }

 

methods裡面方法的相互調用，edit完去調用getAllContact方法

 editContactInfo: function(){                                var editInfo = JSON.stringify(vm.editContact);                                var instance = axios.create({                    timeout: 1000,                    headers: { ‘Content-Type‘: ‘application/json‘ }                });                                             instance.post(‘/contact/edit/‘+vm.editContact.id,editInfo)                   .then(function (response){                       console.log(response.data);                       vm.getAllContact();                   })                   .catch(function (error){                       console.log(error);                   })            }

 

動作觸發，v-on:click="方法名"，點擊edit觸發getEditContactId方法

<a class="btn btn-default" v-on:click="getEditContactId(item.id)" href="#modal-container-edit" data-toggle="modal">Edit</a> <a class="btn btn-default" v-on:click="deleteContact(item.id,index)">Delete</a>

 

Vue.js 入門