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>