主机页面开发记录

「 项目开发记录 」 August 20, 2018

主机页面开发记录

Words count 34k Reading time 31 mins. Read count 0

说明

说明：需要在后台发送http请求rest api接口，得到json数据，格式如下：

然后对json数据做处理，拿到经过base64编码的数据Value对应的值进行解码，拼接成datatable指定的格式。

用到的知识点：

后端：

  • java 利用httpclient进行http请求
  • json字符串转jsonArray、jsonObjects、map、list，利用gson或者json-lib对数据进行处理
  • list分页读取（subList方法）
  • base64编、解码
  • 利用contains方法来判断字符串是否包含

前台：

  • datatable后端分页
  • 显示序号

java http请求api

调用已经写好的http请求实体类

package com.inspur.bigdata.manage.cluster.host.util;

import com.inspur.bigdata.manage.common.utils.PropertiesUtil;
import net.sf.json.JSONObject;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.apache.http.HttpEntity;
import org.apache.http.ParseException;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.methods.*;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import org.loushang.framework.exception.BusinessCodeException;
import org.springframework.http.HttpMethod;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.net.URI;

/**
 * rest请求工具类，封装HttpClient。
 */
public class HttpRequestUtil {
    private static Log LOG = LogFactory.getLog(HttpRequestUtil.class);
    private static HttpRequestUtil host = new HttpRequestUtil();
    
    private HttpRequestUtil(){}
    
    public static HttpRequestUtil host(){
        return host;
    }
    
    /**
     * 获取应用地址
     * 
     * @param appName [应用名称]
     * @return
     */
    public static String getContext(String appName) {
        LOG.debug("-->获取应用地址，appName=" + appName + "。");
        // 获取集群配置中心地址
        String context;
        String envKey = appName.replace(".", "_");
        String appNameFromSystem = System.getenv(envKey);
        if (appNameFromSystem == null || "".equals(appNameFromSystem)) {
            context = PropertiesUtil.getValue("conf.properties", appName);
            if (context == null || "".equals(context)) {
                context = appName.replace(".", "-");
                LOG.debug("Use default context["+ context + "].");
            } else {
                LOG.debug("Get context from conf.properties, key=" + appName + ", value=" + appNameFromSystem);
            }
        } else {
            LOG.debug("Get context from environment, environment key=" + envKey + ", value=" + appNameFromSystem);
            context = appNameFromSystem;
        }

        // 若AppName以http开头，则直接返回，主要用于开发测试环境
        if (!context.startsWith("http")) {
            // 获取平台域名，用于生产环境
            // 先从环境变量里获取，如果没有再从配置文件里获取。
            String domainName = System.getenv("BIGDATA_DOMAIN");
            if (domainName == null || "".endsWith(domainName)) {
                domainName = PropertiesUtil.getValue("conf.properties", "bigdata.domain");
                LOG.debug("Get domain from conf.properties, key=bigdata.domain, value=" + domainName);
            } else {
                LOG.debug("Get domain from environment, environment key=BIGDATA_DOMAIN, value=" + domainName);
            }
            if (domainName != null && !"".equals(domainName)) {
                
                // 组装默认集群配置地址。
                while(domainName.endsWith("/"))
                    domainName = domainName.substring(0, domainName.lastIndexOf("/"));
                if(domainName.startsWith("http://"))
                    domainName = domainName.replaceAll("http://", "").trim();
                context = "http://" + domainName + "/" + context;
            } else {
                new BusinessCodeException("manage-util-00002", "平台域名未配置！");
            }
        }
        
        // 去掉结尾的“/”。
        if (context.endsWith("/")) {
            context = context.substring(0, context.length() - 1);
        }
        
        LOG.debug("<-Get context, context=" + context);
        return context;
    }
    
    /**
     * post请求
     * @param restUrl
     * @param appName data
     * @return
     */
    public String doPost(String appName, String restUrl) {
        String context = getContext(appName);
        String url = context + "/service" + restUrl;
        if(restUrl.startsWith("/service"))
            url = context + restUrl;
        
        HttpPost httpPost = new HttpPost(url);
        return executeRequest(httpPost, HttpMethod.POST);
    }
    
    public String doPut(String restUrl, String data) {
        String url = restUrl;
        HttpPut httpPut = new HttpPut(url);
        
        try {
            StringEntity se = new StringEntity(data);
            se.setContentType("text/json");
            httpPut.setEntity(se);
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        return executeRequest(httpPut, HttpMethod.PUT);
    }
    
    public String doGet(String restUrl) {
        String url = restUrl;
        HttpGet httpGet = new HttpGet(url);
        return executeRequest(httpGet, HttpMethod.GET);
    }
    
    public void doDelete(String appName, String restUrl, String data) {
        String context = getContext(appName);
        
        String url = context + "/service" + restUrl;
        if(restUrl.startsWith("/service"))
            url = context + restUrl;
        
        HttpEntityEnclosingRequestBase httpDelete = new HttpEntityEnclosingRequestBase() {
            @Override
            public String getMethod() {
                return "DELETE";
            }
        };
        httpDelete.setURI(URI.create(url));
        
        if(data != null && !"".equals(data)) {
            try {
                StringEntity se = new StringEntity(data);
                se.setContentType("text/json");
                httpDelete.setEntity(se);
            } catch (UnsupportedEncodingException e) {
                e.printStackTrace();
            }
        }
        executeRequest(httpDelete, HttpMethod.DELETE);
    }
    
    /**
     * 执行http请求。
     * @param httpRequest
     * @param method
     * @return
     */
    public String executeRequest(HttpUriRequest httpRequest, HttpMethod method) {
        httpRequest.setHeader("Content-Type", "application/json");
        httpRequest.setHeader("Accept", "application/json");
        CloseableHttpClient httpclient = HttpClients.createDefault();
        
        String result = new JSONObject().toString();
        CloseableHttpResponse response = null;
        try {
            response = httpclient.execute(httpRequest);
            HttpEntity entity = response.getEntity();
            if(entity != null && !"".equals(entity)) {
                result =  EntityUtils.toString(entity);
                if(result == null || "".equals(result)) {
                    result = new JSONObject().toString();
                }
            }
        } catch (ClientProtocolException e) {
            LOG.error("Request error! request=" + httpRequest + ", message=" + e.getMessage());
            e.printStackTrace();
        } catch (ParseException e) {
            LOG.error("Request error! request=" + httpRequest + ", message=" + e.getMessage());
            e.printStackTrace();
        } catch (IOException e) {
            LOG.error("Request error! request=" + httpRequest + ", message=" + e.getMessage());
            e.printStackTrace();
        }
        
        if(response != null && response.getStatusLine().getStatusCode()/100 == 2 ) {
            LOG.debug("Request success, request=" + httpRequest + ", result=" + result);
            return result;
        }else{
            LOG.error("Request error! request=" + httpRequest + ", result=" + result);
            return result;
        }
    }
}

Service接口

package com.inspur.bigdata.manage.cluster.host.service;

import java.util.List;
import java.util.Map;

/**
 *
 * Created by shirukai on 2017/12/4.
 */
public interface HostView {
     /**
      * 获取api数据并树立后放入持久层
      */
     void setDataToDto();

     /**
      * 获取主机信息
      * @param limit 每页显示条数
      * @param start 从哪一条开始
      * @return 主机信息 list
      */
     Map<String,Object> getHostInfo(int limit, int start);

     /**
      * 模糊查询
      * @param limit 每页显示条数
      * @param start 从哪一条开始
      * @param param 查询参数
      * @return 主机信息 list
      */
     Map<String,Object> queryHostInfo(int limit,int start,String param);
}

Service层

package com.inspur.bigdata.manage.cluster.host.service.impl;

import com.inspur.bigdata.manage.cluster.host.dao.HostList;
import com.inspur.bigdata.manage.cluster.host.util.HttpRequestUtil;
import com.inspur.bigdata.manage.cluster.host.service.HostView;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.apache.commons.codec.binary.Base64;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.stereotype.Service;

import java.util.*;

/**
 *
 * Created by shirukai on 2017/12/4.
 */
@Service
public class HostViewImpl implements HostView {
    private static Log LOG = LogFactory.getLog(HostViewImpl.class);
    private HostList dtoList = new HostList();
    @Override
    public void setDataToDto() {
        final Base64 base64 = new Base64();
        String requestUrl = "http://10.110.13.216:8500/v1/kv/hosts?recurse";
        //获取主机信息
        String hostInfo = HttpRequestUtil.host().doGet(requestUrl);
        JSONArray jsonArray = JSONArray.fromObject(hostInfo);
        List<Map<String, String>> list = new ArrayList<>();
        try {
            //base64解码
            for (int i = 0; i < jsonArray.size(); i++) {
                Map<String, String> map = new HashMap<>();
                JSONObject jsonObject = jsonArray.getJSONObject(i);
                String info = jsonObject.get("Value").toString();
                String jsonInfo = new String(base64.decode(info), "UTF-8");
                JSONObject job = JSONObject.fromObject(jsonInfo);
                //遍历解码后数据并存入map封装
                Iterator iterator = job.keys();
                while (iterator.hasNext()) {
                    String key = (String) iterator.next();
                    String value = job.getString(key);
                    map.put(key, value);
                }
                list.add(map);
            }
        } catch (Exception e) {
            LOG.error(e.getMessage(), e);
        }
        dtoList.setList(list);
    }

    @Override
    public Map<String, Object> getHostInfo(int limit, int start) {
        List<Map<String, String>> dataList = dtoList.getList();
        Map<String, Object> resultMap = new HashMap<>();
        List<Map<String, String>> resultList;
        //分页显示主机信息
        int end = start + limit;
        //判断end是否超出list长度
        if (end > dataList.size()) {
            resultList = dataList.subList(start, dataList.size());
        } else {
            resultList = dataList.subList(start, end);
        }
        resultMap.put("data", resultList);
        resultMap.put("total", dataList.size());
        return resultMap;
    }

    @Override
    public Map<String, Object> queryHostInfo(int limit, int start, String param) {
        List<Map<String, String>> dataList = dtoList.getList();
        Map<String, Object> resultMap = new HashMap<>();
        List<Map<String, String>> resultList = new ArrayList<>();
        for (Map<String, String> map : dataList
                ) {
            //模糊搜索排除 monitor_url里的数据
            String monitor_url = map.get("monitor_url");
            map.remove("monitor_url");
            if ((map.toString()).contains(param)) {
                map.put("monitor_url",monitor_url);
                resultList.add(map);
            }
        }
        //对查询结果进行分页
        List<Map<String, String>> list;
        int end = limit+start;
        if (end > resultList.size()){
            list = resultList.subList(start,resultList.size());
        }else {
            list = resultList.subList(start,end);
        }
        resultMap.put("data", list);
        resultMap.put("total", resultList.size());
        return resultMap;
    }
}

DTO层

package com.inspur.bigdata.manage.cluster.host.dao;

import net.sf.json.JSONObject;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

/**
 * list 数据持久化
 * Created by shirukai on 2017/12/4.
 */
public class HostList {
    public List<Map<String,String>> list = new ArrayList<>();

    public List<Map<String,String>> getList() {
        return list;
    }

    public void setList(List<Map<String,String>> list) {
        this.list = list;
    }
}

Controller层

package com.inspur.bigdata.manage.cluster.host.controller;

import com.inspur.bigdata.manage.cluster.host.service.HostView;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.Map;

/**
 * host主机信息显示controller
 * Created by shirukai on 2017/12/5.
 */
@Controller
@RequestMapping(value = "/host")
public class HostController {

    @Autowired
    private HostView hostView;

    /**
     * 访问
     * @return 返回jsp页面
     */
    @RequestMapping(value = "/index")
    public String hostInfo() {
        hostView.setDataToDto();
        return "manage/host/hostInfo";
    }

    /**
     * 获取主机数据
     * @param tableValue 请求参数 {start: 0, limit: 2, dataTotal: true}
     * @return 主机信息 list
     */
    @RequestMapping("/getData")
    @ResponseBody
    public Map<String, Object> getData(
            @RequestBody Map tableValue
    ) {
        int limit = (int) tableValue.get("limit");
        int start = (int) tableValue.get("start");
        return hostView.getHostInfo(limit, start);
    }

    /**
     * 模糊查询
     * @param tableValue 请求参数 {start: 0, limit: 2, dataTotal: true}
     * @param queryParam 查询参数
     * @return 主机信息 list
     */
    @RequestMapping("/query")
    @ResponseBody
    public Map<String, Object> queryData(
            @RequestBody Map tableValue,
            @RequestParam("queryParam") String queryParam
    ) {
        int limit = (int) tableValue.get("limit");
        int start = (int) tableValue.get("start");
        return hostView.queryHostInfo(limit,start,queryParam);
    }
}

知识点补充

将json字符串转为JsonArray

这里提供两种方法，将json字符串，一个是引入net.sf.json这个jar包，另一个是引入com.google.gson这个jar包

1. net.sf.json

maven引入依赖jar包

    <!--net.sf.json所需jar包-->
    <dependency>
      <groupId>net.sf.json-lib</groupId>
      <artifactId>json-lib</artifactId>
      <version>2.4</version>
      <classifier>jdk15</classifier>
    </dependency>

发送http请求之后得到的是json字符串。

将json字符串转成json数组，然后遍历json数组

String result = HttpRequestUtil.http().doGet("http://10.110.13.216:8500/v1/kv/hosts?recurse");
JSONArray jsonArray = JSONArray.fromObject(result);
for (Object obj: jsonArray
        ) {
    System.out.println(obj.toString());
}

输出：

{"LockIndex":0,"Key":"hosts/10.110.13.216","Flags":0,"Value":"eydpcCc6JzEwLjExMC4xMy4yMTYnLCdob3N0bmFtZSc6J2lkYXAtMTAtMTEwLTEzLTIxNi5pZGFwLmNvbScsJ2NwdSc6JzQnLCdtZW1vcnknOicyR0InLCdtb25pdG9yX3VybCc6J2h0dHA6Ly8xMC4xMTAuMTMuMjE2OjMwMDAvZGFzaGJvYXJkL2RiL25vZGUtZXhwb3J0ZXItc2VydmVyLW1ldHJpY3M/b3JnSWQ9MSZ2YXItbm9kZT0xMC4xMTAuMTMuMjE2OjkxMDAnfQ==","CreateIndex":310542,"ModifyIndex":345959}
{"LockIndex":0,"Key":"hosts/10.110.13.217","Flags":0,"Value":"eydpcCc6JzEwLjExMC4xMy4yMTcnLCdob3N0bmFtZSc6J2lkYXAtMTAtMTEwLTEzLTIxNy5pZGFwLmNvbScsJ2NwdSc6JzgnLCdtZW1vcnknOicxNkdCJywnbW9uaXRvcl91cmwnOidodHRwOi8vMTAuMTEwLjEzLjIxNjozMDAwL2Rhc2hib2FyZC9kYi9ub2RlLWV4cG9ydGVyLXNlcnZlci1tZXRyaWNzP29yZ0lkPTEmdmFyLW5vZGU9MTAuMTEwLjEzLjIxNzo5MTAwJ30=","CreateIndex":310544,"ModifyIndex":345947}
{"LockIndex":0,"Key":"hosts/10.110.13.219","Flags":0,"Value":"eydpcCc6JzEwLjExMC4xMy4yMTknLCdob3N0bmFtZSc6J2lkYXAtMTAtMTEwLTEzLTIxOS5pZGFwLmNvbScsJ2NwdSc6JzE2JywnbWVtb3J5JzonNjRHQicsJ21vbml0b3JfdXJsJzonaHR0cDovLzEwLjExMC4xMy4yMTY6MzAwMC9kYXNoYm9hcmQvZGIvbm9kZS1leHBvcnRlci1zZXJ2ZXItbWV0cmljcz9vcmdJZD0xJnZhci1ub2RlPTEwLjExMC4xMy4yMTk6OTEwMCd9","CreateIndex":310547,"ModifyIndex":345948}

2. com.google.gson

maven 引入jar包依赖

    <dependency>
      <groupId>com.google.code.gson</groupId>
      <artifactId>gson</artifactId>
      <version>2.6.2</version>
      <scope>compile</scope>
    </dependency>

将json字符串转json数组

        String result = HttpRequestUtil.http().doGet("http://10.110.13.216:8500/v1/kv/hosts?recurse");
        JsonParser parser = new JsonParser();
        JsonArray jsonArray = parser.parse(result).getAsJsonArray();
        for (JsonElement obj: jsonArray
             ) {
            System.out.println(obj.toString());
        }

输出：

{"LockIndex":0,"Key":"hosts/10.110.13.216","Flags":0,"Value":"eydpcCc6JzEwLjExMC4xMy4yMTYnLCdob3N0bmFtZSc6J2lkYXAtMTAtMTEwLTEzLTIxNi5pZGFwLmNvbScsJ2NwdSc6JzQnLCdtZW1vcnknOicyR0InLCdtb25pdG9yX3VybCc6J2h0dHA6Ly8xMC4xMTAuMTMuMjE2OjMwMDAvZGFzaGJvYXJkL2RiL25vZGUtZXhwb3J0ZXItc2VydmVyLW1ldHJpY3M/b3JnSWQ9MSZ2YXItbm9kZT0xMC4xMTAuMTMuMjE2OjkxMDAnfQ==","CreateIndex":310542,"ModifyIndex":345959}
{"LockIndex":0,"Key":"hosts/10.110.13.217","Flags":0,"Value":"eydpcCc6JzEwLjExMC4xMy4yMTcnLCdob3N0bmFtZSc6J2lkYXAtMTAtMTEwLTEzLTIxNy5pZGFwLmNvbScsJ2NwdSc6JzgnLCdtZW1vcnknOicxNkdCJywnbW9uaXRvcl91cmwnOidodHRwOi8vMTAuMTEwLjEzLjIxNjozMDAwL2Rhc2hib2FyZC9kYi9ub2RlLWV4cG9ydGVyLXNlcnZlci1tZXRyaWNzP29yZ0lkPTEmdmFyLW5vZGU9MTAuMTEwLjEzLjIxNzo5MTAwJ30=","CreateIndex":310544,"ModifyIndex":345947}
{"LockIndex":0,"Key":"hosts/10.110.13.219","Flags":0,"Value":"eydpcCc6JzEwLjExMC4xMy4yMTknLCdob3N0bmFtZSc6J2lkYXAtMTAtMTEwLTEzLTIxOS5pZGFwLmNvbScsJ2NwdSc6JzE2JywnbWVtb3J5JzonNjRHQicsJ21vbml0b3JfdXJsJzonaHR0cDovLzEwLjExMC4xMy4yMTY6MzAwMC9kYXNoYm9hcmQvZGIvbm9kZS1leHBvcnRlci1zZXJ2ZXItbWV0cmljcz9vcmdJZD0xJnZhci1ub2RlPTEwLjExMC4xMy4yMTk6OTEwMCd9","CreateIndex":310547,"ModifyIndex":345948}

将json字符串转JSONObject

同样介绍两种方法

1.net.sf.json

JSONObject jsonObject = jsonArray.getJSONObject(i);

遍历jsonobject获取key和value

            Iterator iterator = jsonObject.keys();
            while (iterator.hasNext()){
                String key = (String) iterator.next();
                String value = jsonObject.getString(key);
                System.out.println(key+value);
            }

2.com.google.gson

遍历jsonobject获取键值

for (JsonElement obj: jsonArray
     ) {
   JsonObject jsonObject = new JsonParser().parse(jsonElement.toString()).getAsJsonObject();
    Iterator iterator = jsonObject.entrySet().iterator();
    while (iterator.hasNext()){
        Map.Entry entry = (Map.Entry)iterator.next();
        System.out.println(entry.getKey());
        System.out.println(entry.getValue());
    }
}

根据指定key获取值

JsonObject jsonObject = parser.parse(obj.toString()).getAsJsonObject();
System.out.println(jsonObject.get("Key"));

将json字符串转map

//json转map obj.toString是一个json字符串
Gson gson = new Gson();
Type type = new TypeToken<Map<String, String>>(){}.getType();
Map<String, String> map = gson.fromJson(obj.toString(), type);
System.out.println(map.get("Key")

总代码

  /**
     * 使用 谷歌json工具
     */
    @Test
    public void useGson(){
        //get json String
        String jsonString = HttpRequestUtil.http().doGet("http://10.110.13.216:8500/v1/kv/hosts?recurse");
        // transition jsonString to jsonArray
        JsonArray jsonArray = new JsonParser().parse(jsonString).getAsJsonArray();
        //traversal jsonArray
        for (JsonElement jsonElement:jsonArray){
            System.out.println(jsonElement.toString());
            //transition jsonString to jsonObject
            JsonObject jsonObject = new JsonParser().parse(jsonElement.toString()).getAsJsonObject();
            //traversal jsonObject
            //method 1:use Iterator
            Iterator iterator = jsonObject.entrySet().iterator();
            while (iterator.hasNext()){
                Map.Entry entry = (Map.Entry)iterator.next();
                System.out.println(entry.getKey());
                System.out.println(entry.getValue());
            }
            //method 2: traversal map,first transition jsonString to map then traversal map
            Gson gson = new Gson();
            Type type = new TypeToken<Map<String, String>>(){}.getType();
            Map<String, String> map = gson.fromJson(jsonElement.toString(), type);
            //遍历map
            // TODO
        }
    }

base64编解码

public void base64EncodeAndDecode()throws Exception{
    Base64 base64 = new Base64();
    String text = "快点用base64来把我编码";
    byte[] textByte = text.getBytes("UTF-8");
    //编码
    String encodeText = base64.encodeToString(textByte);
    System.out.println(encodeText);
    //解码
    String decodeText = new String(base64.decode(encodeText),"UTF-8");
    System.out.println(decodeText);
}

base64工具类

/**
 * base工具类
 * Created by shirukai on 2017/12/11.
 */
public class Base64Util {
    static String encode(String text) {
        Base64 base64 = new Base64();
        try {
            byte[] textBytes = text.getBytes("UTF-8");
            return base64.encodeToString(textBytes);
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }
        return null;
    }
    static String decode(String encodeText){
        Base64 base64 = new Base64();
        try {
            return new String(base64.decode(encodeText),"UTF-8");
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }
        return null;
    }
}

list分页读取

public Map<String, Object> getHostInfo(int limit, int start) {
    List<Map<String, String>> dataList = dtoList.getList();
    Map<String, Object> resultMap = new HashMap<>();
    List<Map<String, String>> resultList;
    //分页显示主机信息
    int end = start + limit;
    //判断end是否超出list长度
    if (end > dataList.size()) {
        resultList = dataList.subList(start, dataList.size());
    } else {
        resultList = dataList.subList(start, end);
    }
    resultMap.put("data", resultList);
    resultMap.put("total", dataList.size());
    return resultMap;
}

对list进行模糊搜索、排除指定内容

    public Map<String, Object> queryHostInfo(int limit, int start, String param) {
        List<Map<String, String>> dataList = dtoList.getList();
        Map<String, Object> resultMap = new HashMap<>();
        List<Map<String, String>> resultList = new ArrayList<>();
        for (Map<String, String> map : dataList
                ) {
            //模糊搜索排除 monitor_url里的数据
            String monitor_url = map.get("monitor_url");
            map.remove("monitor_url");
            if ((map.toString()).contains(param)) {
                map.put("monitor_url",monitor_url);
                resultList.add(map);
            }
        }
        //对查询结果进行分页
        List<Map<String, String>> list;
        int end = limit+start;
        if (end > resultList.size()){
            list = resultList.subList(start,resultList.size());
        }else {
            list = resultList.subList(start,end);
        }
        resultMap.put("data", list);
        resultMap.put("total", resultList.size());
        return resultMap;
    }

jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib uri="/tags/loushang-web" prefix="l" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="<l:asset path='css/bootstrap.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<l:asset path='css/font-awesome.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<l:asset path='css/ui.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<l:asset path='css/form.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<l:asset path='css/datatables.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<l:asset path='css/slickgrid.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<l:asset path='manage/cluster/config/css/insertcluster.css'/>"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="<l:asset path='html5shiv.js'/>"></script>
    <script src="<l:asset path='respond.js'/>"></script>
    <![endif]-->

    <script type="text/javascript" src="<l:asset path='jquery.js'/>"></script>
    <script type="text/javascript" src="<l:asset path='bootstrap.js'/>"></script>
    <script type="text/javascript" src="<l:asset path='form.js'/>"></script>
    <script type="text/javascript" src="<l:asset path='ui.js'/>"></script>
    <script type="text/javascript" src="<l:asset path='loushang-framework.js'/>"></script>
    <script type="text/javascript" src="<l:asset path='datatables.js'/>"></script>
</head>
<style type="text/css">
    body {
        background: #FFFFFF;
    }
    .hostContainer{
        width: 98%;
        margin: 0 auto;
    }
</style>
<body>
<br>
<div class="hostContainer">
    <div class="col-xs-12 col-md-12">
        <div class="row">
            <form class="form-inline">
                <div class="input-group">
                    <input class="form-control ue-form" type="text" id="queryParam" placeholder="请输入要搜索的内容">
                    <div class="input-group-addon ue-form-btn" id="query">
                        <span class="fa fa-search"></span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div style="height: 34px"></div>
<div class="hostContainer">
    <table id="hostList" class="table table-bordered table-hover">
        <thead>
        <tr>
            <th width="10%" data-field="hostname" data-render="rendernumber">序号</th>
            <th width="18%" data-field="hostname">主机名</th>
            <th width="18%" data-field="ip">主机ip</th>
            <th width="18%" data-field="cpu">cpu</th>
            <th width="18%" data-field="memory">内存</th>
            <th width="18%" data-field="monitor_url" data-render="renderoptions">操作</th>
        </tr>
        </thead>
    </table>
</div>
<script type="text/javascript">
    var context = "<%=request.getContextPath()%>";
    $(document).ready(function () {
        //初始化datatable
        var options = {
            ordering: false,
            iDisplayLength: 10
        };
        var url = context + "/service/host/getData";
        grid = new L.FlexGrid("hostList", url);
        grid.init(options);

        //条件查询
        $("#query").bind("click", function () {
            var queryParam = $("#queryParam").val();
            var url = context + "/service/host/query?queryParam=" + queryParam;
            grid.reload(url);
        });
    });

    //重新渲染序号
    function rendernumber(data, type, row, meta) {
        return meta.row + meta.settings._iDisplayStart + 1;
    }

    //重新渲染操作
    function renderoptions(data, type, full) {
        return '<div class="btn-group pull-center"><a href="' + data + '" target="_blank">监控</a></div>'
    }
</script>
</body>
</html>

shirukai

Alway believe that something wonderful is about to happen
0%