springboot+mybatis+vue(三)，經過axios實現curd

springboot+mybatis+vue(一)，建立項目
springboot+mybatis+vue(二)，實現接口
springboot+mybatis+vue(三)，經過axios實現curd

生成vue項目,安裝axios

vue inti webpack vue05
cd vue05
cnpm install 
cnpm install axios --save

目錄結構

修改路由router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import Add from '@/components/add'
import Edit from '@/components/edit'

Vue.use(Router)

export default new Router({
    routes: [{
            path: '/',
            name: 'Index',
            component: Index
        },
        {
            path: '/add',
            name: 'Add',
            component: Add
        },
        {
            path: '/edit',
            name: 'Edit',
            component: Edit
        }
    ]
})

查詢和刪除index.vue

<template>
  <div>
    <h1>springBoot+mysql+vue</h1>
    <router-link to="/add">新增</router-link>
    <table>
      <tr>
        <th>id</th>
        <th>userName</th>
        <th>userAge</th>
        <th>userAddress</th>
        <th>編輯</th>
        <th>刪除</th>
      </tr>
      <tr v-for="item in userData" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.userName}}</td>
        <td>{{item.userAge}}</td>
        <td>{{item.userAddress}}</td>
        <td>
          <router-link :to="{ path: '/edit', query: {id: item.id} }">編輯</router-link>
        </td>
        <td @click="deleted(item.id)">刪除</td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from "axios";
export default {
    data() {
        return {
            userData: " "
        };
    },
    methods: {
        getData() {
            axios
                .get("http://localhost:8080/user/selectUserAll")
                .then(response => {
                    this.userData = response.data;
                    console.log(response);
                })
                .catch(error => {
                    console.log(errror);
                });
        },
        deleted(id) {
            var deleteConfirm = confirm("是否刪除");
            if (deleteConfirm) {
                axios({
                    method: "post",
                    url: "http://localhost:8080/user/deleteUser",
                    data: "&id=" + id
                })
                    .then(response => {
                        console.log(response);
                        this.getData();
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        }
    },
    created() {
        this.getData();
    }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
table {
    border-collapse: collapse;
}
td,
th {
    border: 1px solid #000;
}
</style>

增長add.vue

<template>
    <div>
        <h1>新增</h1>
        <hr>
        <label>
            <span>userName:</span>
            <input type="text" v-model="userName">
        </label>
        <br>
        <label>
            <span>userAge:</span>
            <input type="number" v-model="userAge">
        </label>
        <br>
        <label>
            <span>userAddress:</span>
            <input type="text" v-model="userAddress">
        </label>
        <br>
        <button @click="addData">肯定</button>
    </div>
</template>

<script>
import axios from "axios";
export default {
    data() {
        return {
            userName: '',
            userAge: '',
            userAddress: ''
        };
    },
    methods: {
        addData() {
            axios({
                method:'post',
                url: 'http://localhost:8080/user/addUser',
                data: "&userName=" + this.userName + "&userAge=" + this.userAge + "&userAddress=" + this.userAddress
            })
            .then(response => {
                console.log(response)
                this.$router.push({path : "/"})
            }).catch(error => {
                console.log(error)
            })
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
tr {
    border: 1px solid #000;
}
</style>

編輯edit.vue

<template>
    <div>
        <h1>編輯</h1>
        <hr>
        <label>
            <span>userName:</span>
            <input type="text" v-model="userName">
        </label>
        <br>
        <label>
            <span>userAge:</span>
            <input type="number" v-model="userAge">
        </label>
        <br>
        <label>
            <span>userAddress:</span>
            <input type="text" v-model="userAddress">
        </label>
        <br>
        <button @click="editData">肯定</button>
    </div>
</template>

<script>
import axios from "axios";
export default {
    data() {
        return {
            userName: "",
            userAge: "",
            userAddress: ""
        };
    },
    methods: {
        getData() {
            axios
                .get("http://localhost:8080/user/selectUserById", {
                    params: {
                        id: this.$route.query.id
                    }
                })
                .then(response => {
                    this.userName = response.data.userName;
                    this.userAge = response.data.userAge;
                    this.userAddress = response.data.userAddress;
                    console.log(response);
                })
                .catch(error => {
                    console.log(errror);
                });
        },
        editData(){
            axios({
                method:'post',
                url: 'http://localhost:8080/user/updateUser',
                data: "&id=" + this.$route.query.id + "&userName=" + this.userName + "&userAge=" + this.userAge + "&userAddress=" + this.userAddress
            })
            .then(response => {
                console.log(response)
                this.$router.push({path : "/"})
            }).catch(error => {
                console.log(error)
            })
        }
    },
    created() {
        this.getData();
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>