背景

為了學習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 入門