Question

我正在创建一个页面，该页面将显示群集中多个服务器的状态。我已经在我的Web服务上创建了一个状态路由，如果服务器正常运行，则返回'ok'，如果没有，则返回一些错误。我想要几个按钮（可能更好的选项？），如果api调用返回ok则显示绿色，否则显示红色。一个问题是这些调用将是跨域的，尽管我们的公司防火墙内部。

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

所以，我的最终问题是，是否有一个符合以下标准的已知教程：

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

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

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

Answer 1

您不一定非常需要基于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/

Answer 2

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

jquery / angularjs库可以帮助您加快开发速度，因此，请选择一个。

支持跨域api调用＆lt; - 通常不是问题

基于api调用结果的按钮（绘图）。＆lt; - 在您的结果发生变化时更改css类

Answer 3

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

对于跨域请求，您可以使用http://easyxdm.net这是一个很好的示例，因此您不会迷路。

Answer 4

这可以在jQuery中轻松完成。

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

既然您知道在html元素上更改css属性的最简单方法，那么您正在考虑进行Web服务调用。有两种方法，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以显示其实际效果的示例。

基于api调用的样式按钮

4 个答案: