1

我正在创建一个页面，该页面将显示集群中多台服务器的状态。我在我的 Web 服务上创建了一个状态路由，如果服务器正常启动并运行，则简单返回“ok”，如果不是，则返回一些错误。我想要几个按钮（也许是更好的选择？），如果 api 调用返回正常，则显示绿色，否则显示红色。一个问题是这些调用将是跨域的，尽管在我们的公司防火墙内。

很简单，但我是一名 Web 服务开发人员，在这方面几乎没有经验。我的想法是在页面加载时调用每个服务器状态路由并设置样式。我很尴尬地说，我真的不知道从哪里开始。我发现的每个教程似乎都缺少一些难题，因为它可以为我“点击”。

所以，我最终的问题是是否有满足以下标准的已知教程：

  • 启用 html5/CSS3（最好是移动显示的响应式设计）
  • jquery/angularjs 库（如有必要）
  • 支持跨域api调用
  • 基于api调用结果的按钮（绘图）。

如果这很容易在问题响应正文中直接显示 html 和 js，那也很好。我添加其他部分的唯一原因是这只是我正在构建的仪表板的一小部分，它将集成统计图表和管理功能。因此，与以后集成相比，从这些功能开始将是理想的。

提前致谢。如果这个问题不够具体，请告诉我。我会编辑。

4

4 回答 4

8

您不一定需要一个基于 jQuery 的解决方案，它很简单，但拥有纯 CSS / JS 解决方案也是一种选择。如果您只是使用 jQuery 来更改颜色或添加类，那么您很可能做错了。

获得您想要获得的最常见的方法是远程调用服务器，您可以为此使用 XHR，这取决于 XHR 的响应和状态，您可以随时更新您的视图。我提供了一个进度条的例子，为了达到你想要的，你可以遵循类似的方法。

例如，您正在创建一个进度条。使用 HTML 为：

  <div class="progress_bar">
      <div class="progress"></div>
  </div>

CSS 部分包含。

   .progress_bar{
      display:inline-block;
      position:relative;
      margin:20px;
      width:100%; 
      height:40px;
      max-width:100px; /* For Computers */
   }
   .progress_bar .progress{
      height:100%;
      position:absolute;
      left:0px;
      top:0px;
      width:0%;
   }
   @media(max-width:320px){
      max-width:100%;
      margin:10px;
   }
   .progress_bar::before{
        display:block; text-align:center;
        content:"Loading";
        color:black;
        font-size:16px;
    }
    .progress_bar.completed::before{
        content:"Finished";
    }
    .progress_bar.error::before{
        content:"Error Occured";
    }

现在您可以进行 JS API 调用（假设您正在下载文件）

你可以改变 .progress 元素的宽度。

function ProgressBar(elem){
   var bar = elem.getElementsByClassName('progress')[0];
   this.setProgress = function(x){
       bar.style.width = x + '%';
   }
   this.completed = function(){
       elem.classList.add("completed");
   }
   this.errored = function(){
       elem.classList.add("errored");
   }
}

现在您可以创建一个对象并使用新的 XHR2.0 API 来控制您的 JS 部分，但是通过添加类等，您可以获得响应式设计，因为 js 中的某些更改或某些逻辑会导致应用 CSS 类，此类可以使用媒体查询为其定义多个规则。希望这可以帮助。

有关 XHR2.0 的更多信息，您可以在此处阅读http://www.html5rocks.com/en/tutorials/file/xhr2/

于 2013-06-14T10:48:20.603 回答
1

这个链接足以理解响应式设计：http: //mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/

jquery/angularjs 库将帮助您加快开发速度，所以，拿一个吧。

支持跨域 api 调用 <-- 通常不是问题

基于 api 调用结果的按钮（绘图）。<-- 在结果更改时更改 css 类

于 2013-06-13T02:53:48.453 回答
0

我不确定你能找到满足你所有要求的教程，最简单的方法是，如果你只需要显示按钮是使用 jQuery Mobile，所以它会为浏览器和移动设备显示好看的按钮。你不需要为此使用像 BackboneJS/AngularJS 这样的 JavaScript 框架。

对于跨域请求，你可以使用http://easyxdm.net有一个很好的例子，所以你不会迷路。

于 2013-06-13T02:41:21.043 回答
0

这可以在 jQuery 中轻松完成。

有很多方法可以解决这个问题，但更改“按钮”颜色的示例可以是：$("#server1").css("background-color", "#0000AA");这将使用 server1 选择 html 中的元素，并添加/更改toid的 css 值。为了获得更大的灵活性，您可以使用 css 类，它有更多的逻辑，因为通常您将在&之间切换它。background-color#0000AA.addClassremoveClass

既然您知道了更改 html 元素上的 css 属性的最简单方法，那么您正在考虑进行 Web 服务调用。有 2 种方法，1 - 您的客户端和服务器支持 CORS，2 - 您使用 JSONP。JSONP 是一种更简单的方法，使用它您只需修改您的 Web 服务以callback在来自客户端的请求中查找参数。之后，您需要做的就是将来自服务器的响应包装在给定的任何值中。

EG：假设你callback=complete在请求中有，基本上你像这样包装它：complete( { status: ok });。JSONP 通过将来自 web 服务的结果解释为脚本来工作，该脚本将使用服务器的结果执行回调函数，从而使您可以在回调函数中使用它们。在您修改服务以执行此操作后，您可以使用 jQuery 的 Ajax 方法调用 Web 服务并获取数据。

$.ajax({
    type: "GET",
    url: "http://internalserver/myservice.svc/GetServerStatus",
    datatype: "jsonp",
    contentType: "application/json",
    success: function(data) { alert(data.status); }
});

调用完成后，定义的函数success将触发，让您可以访问结果。

JSFiddle展示它的实际示例。

于 2013-06-13T03:11:09.270 回答