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="width: 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>

效果如图:

二.5vue服务器展示的更多相关文章

  1. electron教程(二): http服务器, ws服务器, 进程管理

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使 ...

  2. JavaWeb-SpringBoot(抖音)_二、服务器间通讯

    JavaWeb-SpringBoot(抖音)_一.抖音项目制作 传送门 JavaWeb-SpringBoot(抖音)_二.服务器间通讯 传送门 JavaWeb-SpringBoot(抖音)_三.抖音项 ...

  3. Redis教程(十二):服务器管理命令总结

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/140.html 一.概述: Redis在设计之初就被定义为长时间不间断运行 ...

  4. JavaWeb学习总结(二)——Tomcat服务器学习和使用(一)

    一.Tomcat服务器端口的配置 Tomcat的所有配置都放在conf文件夹之中,里面的server.xml文件是配置的核心文件. 如果想修改Tomcat服务器的启动端口,则可以在server.xml ...

  5. JSP学习笔记(二):Tomcat服务器的安装及配置

    一.Tomcat的下载及安装. 前往Tomcat官网下载安装包或者免安装压缩包.链接http://tomcat.apache.org/ 这里,我选择的是Tomcat8.0,而不是最新的Tomcat9. ...

  6. JavaWeb学习总结(二)——Tomcat服务器学习和使用(一)(转)

    转载自 http://www.cnblogs.com/xdp-gacl/p/3734395.html 一.Tomcat服务器端口的配置 Tomcat的所有配置都放在conf文件夹之中,里面的serve ...

  7. 前端通信:SSE设计方案(二)--- 服务器推送技术的实践以及一些应用场景的demo(包括在线及时聊天系统以及线上缓存更新,代码热修复案例)

    距离上一篇博客,这篇文章的发布大概过了整整三个月.我也从饿了么度过了试用期,成为了正式员工.刚进来恰好遇到项目底层改造和迁移,将项目从angular全部迁移到vue上,所以适应这边的节奏和业务的开发任 ...

  8. (二)Apache服务器的下载与安装

    PHP的运行必然少不了服务器的支持,何为服务器?通俗讲就是在一台计算机上,安装个服务器软件,这台计算机便可以称之为服务器,服务器软件和计算机本身的操作系统是两码事,计算机自身的操作系统可以为linux ...

  9. JavaWeb(二)——Tomcat服务器(一)

    一.Tomcat服务器端口的配置 Tomcat的所有配置都放在conf文件夹之中,里面的server.xml文件是配置的核心文件. 如果想修改Tomcat服务器的启动端口,则可以在server.xml ...

随机推荐

  1. Java实现蓝桥杯 历届试题 k倍区间

    历届试题 k倍区间 时间限制:2.0s 内存限制:256.0MB 问题描述 给定一个长度为N的数列,A1, A2, - AN,如果其中一段连续的子序列Ai, Ai+1, - Aj(i <= j) ...

  2. Java实现 LeetCode 122 买卖股票的最佳时机 II

    122. 买卖股票的最佳时机 II 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意: ...

  3. Java实现 LeetCode 121 买卖股票的最佳时机

    121. 买卖股票的最佳时机 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 如果你最多只允许完成一笔交易(即买入和卖出一支股票),设计一个算法来计算你所能获取的最大利润. 注意你不 ...

  4. Android中StateListDrawable的种类(状态的种类)

    <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="ht ...

  5. java实现土地测量

    ** 土地测量** 造成高房价的原因有许多,比如土地出让价格.既然地价高,土地的面积必须仔细计算.遗憾的是,有些地块的形状不规则,比如是如图[1.jpg]中所示的五边形. 一般需要把它划分为多个三角形 ...

  6. java实现第二届蓝桥杯连通问题(C++)

    连通问题. BMP是常见的图像存储格式. 如果用来存黑白图像(颜色深度=1),则其信息比较容易读取. 与之相关的数据: (以下偏移均是从文件头开始) 偏移:10字节, 长度4字节: 图像数据真正开始的 ...

  7. Pycharm添加Python文件模板

    #!/usr/bin/env python# -*- encoding: UTF-8 -*-'''=================================================@P ...

  8. CVE¬-2020-¬0796 漏洞复现(本地提权)

    CVE­-2020-­0796 漏洞复现(本地提权) 0X00漏洞简介 Microsoft Windows和Microsoft Windows Server都是美国微软(Microsoft)公司的产品 ...

  9. WSO2 - MI

    简介 WSO2MI(Micro Integrator)是一个事件驱动的企业服务总线(Enterprise Service Bus),支持消息路由.数据格式转换.通信协议转换,支持连接SAP.KAFKA ...

  10. 重学 Java 设计模式:实战桥接模式(多支付渠道「微信、支付宝」与多支付模式「刷脸、指纹」场景)

    作者:小傅哥 博客:https://bugstack.cn - 编写系列原创专题文章 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 为什么你的代码那么多ifelse 同类的业务.同样的功能, ...