doc.html 6.7 KB
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>YOHO!BUY API DOC</title>

        <link href="{{cssFile}}" rel="stylesheet">
    </head>

    <body>
 
        <header>
            <div class="headerwrapper">
                <div class="header-left">
                    <h4 class="mt5" style="color:#fff">YOHO!BUY API DOC</h4>
                </div>
               
            </div>
        </header>
        
        <section style="padding:80px 50px;">
          <ul class="nav nav-tabs nav-line">
            {{# nav}}
              <li class="{{#active}}active{{/active}}"><a href="#{{name}}" data-toggle="tab"><strong>{{name}}</strong></a></li>
            {{/ nav}}
          </ul>
          <div class="tab-content nopadding noborder">
          {{# group}}
            <div class="tab-pane {{# active}}active{{/ active}}" id="{{name}}">
            {{# list}}
            <div class="panel panel-info">
                <div class="panel-heading">
                    <div class="panel-btns" style="display: none;">
                        <a href="" class="panel-minimize tooltips" data-toggle="tooltip" title="" data-original-title="Minimize Panel"><i class="fa fa-minus"></i></a>
                        <a href="" class="panel-close tooltips" data-toggle="tooltip" title="" data-original-title="Close Panel"><i class="fa fa-times"></i></a>
                    </div><!-- panel-btns -->
                    <h3 class="panel-title">接口地址:{{domain}}{{url}}</h3>
                </div>
                <div class="panel-body">
                    <div class="media">
                      <div class="media-body">
                        <h4 >页面路由:</h4>
                        <p class="media-desc">{{route}}</p>
                      </div>
                   </div>
                   <div class="media">
                      <div class="media-body">
                        <h4 >调用方式:</h4>
                        <p class="media-desc">{{method}}:{{#isJsonRaw}}json 文本提交{{/isJsonRaw}}</p>
                      </div>
                   </div>
                   <h4 class="mt5">输入参数:</h4>
                   <table class="table table-info mb30">
                    <thead>
                      <tr>
                        <th>属性名</th>
                        <th>属性类型</th>
                        <th>说明</th>
                        <th>测试入参</th>
                      </tr>
                    </thead>
                    
                    <tbody>
                    {{# params}}
                      <tr>
                        <td>{{name}}</td>
                        <td>{{type}}</td>
                        <td>{{message}}</td>
                        <td><input name="{{name}}" type="text" /></td>
                      </tr>
                    {{/ params}} 
                    </tbody>
                </table>
                <h4>接口返回:</h4>
                <pre style="display:none">

                </pre>
                <button class="btn btn-success getRes" method="{{method}}"  url="{{url}}" isjson="{{isJsonRaw}}">点击获取</button>
                </div>
            </div>
            {{/ list}}
          </div>
          {{/ group}}
          </div>
        </section>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>
<script type="text/javascript">
var formatJson = function(json, options) {
      var reg = null,
        formatted = '',
        pad = 0,
        PADDING = '    '; // one can also use '\t' or a different number of spaces

      // optional settings
      options = options || {};
      // remove newline where '{' or '[' follows ':'
      options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
      // use a space after a colon
      options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
      
      // begin formatting...

      // make sure we start with the JSON as a string
      if (typeof json !== 'string') {
        json = JSON.stringify(json);
      }
      // parse and stringify in order to remove extra whitespace
      json = JSON.parse(json);
      json = JSON.stringify(json);

      // add newline before and after curly braces
      reg = /([\{\}])/g;
      json = json.replace(reg, '\r\n$1\r\n');

      // add newline before and after square brackets
      reg = /([\[\]])/g;
      json = json.replace(reg, '\r\n$1\r\n');
      
      // add newline after comma
      reg = /(\,)/g;
      json = json.replace(reg, '$1\r\n');
      
      // remove multiple newlines
      reg = /(\r\n\r\n)/g;
      json = json.replace(reg, '\r\n');
      
      // remove newlines before commas
      reg = /\r\n\,/g;
      json = json.replace(reg, ',');

      // optional formatting...
      if (!options.newlineAfterColonIfBeforeBraceOrBracket) {     
        reg = /\:\r\n\{/g;
        json = json.replace(reg, ':{');
        reg = /\:\r\n\[/g;
        json = json.replace(reg, ':[');
      }
      if (options.spaceAfterColon) {      
        reg = /\:/g;
        json = json.replace(reg, ': ');
      }

      $.each(json.split('\r\n'), function(index, node) {
        var i = 0,
          indent = 0,
          padding = '';
        
        if (node.match(/\{$/) || node.match(/\[$/)) {
          indent = 1;
        } else if (node.match(/\}/) || node.match(/\]/)) {
          if (pad !== 0) {
            pad -= 1;
          }
        } else {
          indent = 0;
        }
      
        for (i = 0; i < pad; i++) {
          padding += PADDING;
        }
      
        formatted += padding + node + '\r\n';
        pad += indent;
      });
      
      return formatted;
};
$(function(){
    $('.panel-minimize').click();
    $('.getRes').click(function(){
        var panel = $(this).prev().show('fast');
        var isJson = $(this).attr('isjson');
        var option = {
            url:$(this).attr('url'),
            type:$(this).attr('method'),
        }
        var data = {};
        if(isJson!=='false') {
            option.url = '/proxy?url=' + $(this).attr('url');
        }
       
        $(this).parent().find('input').each(function(){
            data[$(this).attr('name')] = $(this).val();
        });
        
        option.data = data;
        
        $.ajax(option).done(function(data){
            var json = formatJson(data);
            panel.html(json);
        });
    });
});
</script>
</body>
</html>