vue.js搭建使用者管理系統練手（六）----使用者詳情

在components下新建CustomerDetails.vue:

<template>
  <div class="details container" >
    <h1 class="page-header">{{customer.name}}</h1>
    <ul>
        <li class="list-group-item"><span class="glyphicon glyphicon-star">{{customer.phone}}</span></li>
        <li class="list-group-item"><span class="glyphicon glyphicon-star">{{customer.email}}</span></li>

        <li class="list-group-item"><span class="glyphicon glyphicon-star">{{customer.education}}</span></li>
        <li class="list-group-item"><span class="glyphicon glyphicon-star">{{customer.graduationschool}}</span></li>

        <li class="list-group-item"><span class="glyphicon glyphicon-star">{{customer.profession}}</span></li>
        <li class="list-group-item"><span class="glyphicon glyphicon-star">{{customer.profile}}</span></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'customerdetails',
  data () {
    return {
        customer:""
    }
  },
  methods:{
        fetchCustomers(id){
        this.$http.get("http://localhost:3000/users/"+id)
            .then(function(response){
               console.log(response);
               this.customer = response.body;
            })
    }
  },
  created(){
    this.fetchCustomers(this.$route.params.id);//獲取使用者id用來查詢具體使用者資料返回
  }
}
</script>

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

</style>

思路和Customers.vue一樣，也是在例項被建立的時候通過http請求資料然後展示！

同樣需要在main.js中註冊路由：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import Customers from './components/Customers'
import About from './components/About'
import Add from './components/Add'
import CustomerDetails from './components/CustomerDetails'

Vue.config.productionTip = false

Vue.use(VueRouter)
Vue.use(VueResource)

//設定路由
const router = new VueRouter({
    mode:"history",
    base:__dirname,
    routes:[
       {path:"/",component:Customers},
       {path:"/about",component:About},
      {path:"/add",component:Add},
      {path:"/customerdetails/:id",component:CustomerDetails}//註冊詳情路由
    ]
})

/* eslint-disable no-new */
new Vue({
  router,
  template:`
    <div id="app">
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">使用者管理系統</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li ><router-link to="/">主頁</router-link></li>
            <li ><router-link to="/about">關於我們</router-link></li>
          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li ><router-link to="/add">新增使用者</router-link></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    <router-view></router-view>
    </div>
  `
}).$mount("#app")

當然在使用者主頁將詳情按鈕及路由跳轉需要加入進來：

        <tr v-for="customer in customers">
            <td>{{customer.name}}</td>
            <td>{{customer.phone}}</td>
            <td>{{customer.email}}</td>
            <td><router-link class="btn btn-default" v-bind:to="'/customerdetails/'+customer.id">詳情</router-link></td>
        </tr>

Customers.vue完整程式碼如下：

<template>
  <div class="customers container">
  <Alert v-if="alert" v-bind:message="alert"></Alert>
  <h1 class="page-header">使用者管理系統</h1>
  <table class="table table-striped">
    <thead>
        <tr>
            <th>姓名</th>
            <th>電話</th>
            <th>郵箱</th>
            <th></th>
        </tr>
    </thead>
     <tbody>
        <tr v-for="customer in customers">
            <td>{{customer.name}}</td>
            <td>{{customer.phone}}</td>
            <td>{{customer.email}}</td>
            <td><router-link class="btn btn-default" v-bind:to="'/customerdetails/'+customer.id">詳情</router-link></td>
        </tr>
     </tbody>
  </table>

  </div>
</template>

<script>
import Alert from "./Alert"
export default { 
  name: 'customers',
  data () {
    return {
        customers:[],
        alert:""
    }
  },
  methods:{
    fetchCustomers(){
        this.$http.get("http://localhost:3000/users")
            .then(function(response){
               //console.log(response);
               this.customers = response.body;
            })
    }
  },
    created(){
        if(this.$route.query.alert){
            this.alert = this.$route.query.alert;
        }
        this.fetchCustomers();
    },
    updated(){
        this.fetchCustomers();
    },
  components:{
    Alert
  }
}
</script>

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

</style>