二.5vue服务器展示

1.展示服务器列表前端页面

(1)写视图模版views/resources/servers.vue

<template>
  <div class="resources-servers-container">

  </div>
</template>

<script>
  export default {
    name: 'servers'
  }
</script>

<style scoped>

</style>

(2)写路由rsrc/router/index.js

......
  {
    path: '/resources',
    component: Layout,
    name: '资源管理',
    meta: { title: '资源管理', icon: 'example' },
    children: [{
      path: 'servers',
      name: '服务器',
      component: () => import('@/views/resources/servers'),
      meta: { title: '服务器' }
    },
    {
      path: 'idc',
      name: 'idc',
      component: () => import('@/views/resources/servers'),
      meta: { title: 'idc' }
    }
    ]
  },
......

效果如图:

 2.展示数据:

(1)写api接口src/api/servers.js

import request from '@/utils/request'

export function getServerList(params) {
  return request({
    url: '/Servers/',
    method: 'get',
    params
  })
}

(2)写模版views/resources/servers.vue

https://element.eleme.io/#/zh-CN/component/table  拿带边框的模版

<template>
  <div class="resources-servers-container">
    <el-table
      :data="serverList"
      border
      style=" 100%">
      <el-table-column
        prop="hostname"
        label="主机名">
      </el-table-column>
      <el-table-column
        prop="ip"
        label="ip">
      </el-table-column>
      <el-table-column
        prop="os"
        label="操作系统">
      </el-table-column><el-table-column
        prop="last_check"
        label="last check">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { getServerList } from '@/api/servers'
  export default {
    data() {
      return {
        serverList: [],
        totalNum: 0
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getServerList(this.params).then(res => {
          this.serverList = res.results
          this.totalNum = res.count
        })
      },
      handleCurrentChange(val) {
        this.params.page = val
        this.fetchData()
      }
    }
  }
</script>
<style scoped>

</style>

效果如图:

 但是时间格式last_check字段不是我想要的，所以我修改覆盖下

apps/servers/serilaizers.py中加入如下行即可:

 效果如下图：

 3.展示网卡设备

(1)src/views/resources/servers.vue

 效果如图:有3个undefined刚好是三条记录展示不出来.

 解决:因为它是对象所以直接展示不出来，得如下用template

      <el-table-column
        prop="device"
        label="网卡" type="scope">
        <template slot-scope="scope">
          <div v-for="d in scope.row.device">
            {{ d.name }}, {{ d.mac }}
            <span v-for="ifnet in d.ips">
              {{ ifnet.ip }}
            </span>
          </div>
        </template>
      </el-table-column>

效果如图：