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实现 蓝桥杯 传纸条

    题目描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个mm行nn列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了.幸运 ...

  2. Java实现蓝桥杯VIP 算法训练 矩阵乘方

    import java.util.Scanner; public class 矩阵乘方 { public static void main(String[] args) { Scanner scann ...

  3. Java实现 蓝桥杯 算法训练 字符串合并

    试题 算法训练 字符串合并 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 输入两个字符串,将其合并为一个字符串后输出. 输入格式 输入两个字符串 输出格式 输出合并后的字符串 样例 ...

  4. java实现立方和等式

    考虑方程式:a^3 + b^3 = c^3 + d^3 其中:"^"表示乘方.a.b.c.d是互不相同的小于30的正整数. 这个方程有很多解.比如: a = 1,b=12,c=9, ...

  5. java实现第三届蓝桥杯排日程

    排日程 [编程题](满分34分) 某保密单位机要人员 A,B,C,D,E 每周需要工作5天,休息2天. 上级要求每个人每周的工作日和休息日安排必须是固定的,不能在周间变更. 此外,由于工作需要,还有如 ...

  6. Java实现第八届蓝桥杯9算数式

    9算数式 题目描述 观察如下的算式: 9213 x 85674 = 789314562 左边的乘数和被乘数正好用到了1~9的所有数字,每个1次. 而乘积恰好也是用到了1~9的所有数字,并且每个1次. ...

  7. java实现第四届蓝桥杯世纪末星期

    世纪末星期 题目描述 曾有邪教称1999年12月31日是世界末日.当然该谣言已经不攻自破. 还有人称今后的某个世纪末的12月31日,如果是星期一则会- 有趣的是,任何一个世纪末的年份的12月31日都不 ...

  8. 09 . Nginx配置LNMP和LNMT架构

    安装LNMP架构 环境清单 list CentOS7.3 proxysql-2.0.12-1-centos7.x86_64.rpm mysql-5.7.23-1.el7.x86_64.rpm-bund ...

  9. 一文读懂 Java 异常体系

    写程序的时候,编辑器会提示错误,关键字拼错了,语法不符合规则,不符合泛型:程序编译的时候,编译器会提示错误,检查是否符合 Java 的语法规范,没有通过编译器检查的程序就无法编译,也就无法运行.这些都 ...

  10. 测试必备工具之最强抓包神器 Charles,你会了么?

    前言 ​ 作为软件测试工程师,大家在工作中肯定经常会用到各种抓包工具来辅助测试,比如浏览器自带的抓包工具-F12,方便又快捷:比如时下特别流行的Fiddler工具,使用各种web和APP测试的各种场景 ...