[Day 18]

說明:
vue實作查詢/新增使用者頁面

一、vue組件畫面

<template>
  <div>
    <button @click="retrieveData">取回使用者資料</button>

    <ul>
      <li v-for="(user, index) in userList" :key="index">
        使用者名稱: {{user.name}}, 年齡: {{user.age}}
      </li>
    </ul>
    名稱<input type="text" v-model="user.name"/> 
    年齡<input type="number" v-model="user.age"/>
    <button @click="addUser">新增使用者</button>
  </div>
</template>

按鍵呼叫retrieveData方法，從資料庫取回使用者資料。
下面兩個input框直接雙向綁定user資料，點擊addUser時呼叫新增使用者api。

二、javascript

const baseUrl = 'http://localhost:8080/api'
export default {
  data() {
    return {
      userList: [],
      user: {
        name: "",
        age: "",
        id: "",
      },
      userDeleteButton: false
    };
  },
  methods: {
    retrieveData(){
      var url = baseUrl + '/user'
      request.get(url, (err, res, body) => {
        let json = JSON.parse(body)
        json.forEach(user => {
          this.userList.push(user)
        })
        console.log(this.userList)
      })
    },
    addUser() {
      var url = baseUrl + '/user'
      var user = {
        name: this.user.name,
        age: this.user.age,
      }
      request.post({
        url:url, 
        json: user,
        headers: {'content-type' : 'application/x-www-form-urlencoded'}}, 
        (err, res, body) => {
          user.id = body.userId[0]
        })
      this.userList.push(user);
      this.user = {}
    }
  }
}
</script>

retrieveData取得資料後，一個一個push進userList中。
add將新增完資料後，取得自增userId並且組入user物件，並push進userList。
記得要清空props中的user資料。

[Day 18結束]