聊聊两个前端的问题

   这是学习笔记的第 1744 篇文章

  我对前端是一种比较模糊的态度，既不愿意投入太多，但又希望前端能好看炫酷，显然这是不可能的。我想大多数人都是这样的心态，所以整体前端水平都不咋样，另外一个角度来说，前端技术实在太庞大，很多时候不是后端的同学偷懒，而是技术繁杂到不好掌控。

    早些时候，我们学点html基本够用，想让页面好看点，不还得学点css，这样的一类情况基本都是静态页面，很早都用DW来做，偶尔加点js的内容，现在的时代大不同了，js大行其道，web框架层出不穷，别说专业的朋友，让我们这些半吊子的状态就更难抓住了。

    比如一个数据管理页面，看起来已经很简单了，一个表格或者表单即可搞定， 后端数据就是一个简单的查取，增删改呢。

    本质上这几类操作对于后端都是一类操作，API通通都可以解决，但是在前端看起来效果就差别大了。

    比如增加，你可以跳转到一个新的页面，即一个新的url，然后添加数据提交后，页面继续跳转。

    修改也是类似的，有时候要增加一个查询的额外操作，也是url的频繁跳转。

    删除呢，我们可能不需要跳转了，但是可能需要确认，你得确认是不是能删除，所以没办法，我们继续做页面跳转。

    所以一个简单的数据管理，增改删就可能需要跳转3个url,想想都头大，而且看起来一点都不炫酷，如果按照我们的这种思维，前端就完了。

    所以一个改进的思路就是页面是集中化管理，增删改查在一个页面中完成，这个需求看起来很简单，怎么连贯的衔接起来呢。

    我这里用的是比较经典古老的jquery,为了迭代功能我需要先满足当前的需求，搞好了后端之后再打算玩玩react.

    这里可以用一个比较好的插件modal,也就是类似对话框的方式完成数据管理，比如新增，是这样的一种形式，我们添加信息，然后提交。

这里的问题就来了，我们需要异步提交，就要用到ajax了。

各种框架都会封装，所以我们可以使用一些现成的模板即可，这种方式会有一种回调的结果，即ajax和后端交互之后就会返回一个状态码或者返回一些数据。

大多数时候我们是希望返回状态码，告诉我们成功，失败即可。这样的一类需求相对常规，如果我们需要得到返回的数据怎么办呢。 所以这里才开始是我要解决的两个前端问题。

 

还是说个场景，我们安装部署的时候，输入了一个IP地址，我需要从cmdb里面去查，是否这个实例的信息已经存在，我们也可以加一个检查功能，可以检测返回这些数据。

如果数据返回是一个对象该怎么处理，如果返回了大量的数据该怎么处理？

这个思路就是我们通过如下的按钮来触发modal

<div class="col-sm-7 pull-left" onclick="cmdbRegister(this)">
                                <input type="button" class="btn btn-sm btn-default pull-left"  data-toggle="modal"
                                       value="验证IP信息" data-target="#myAddCmdbModal"  >
                                    <span class="bigger-110"><strong></strong></span>
                                </input>
                            </div>

这个时候会调用函数cmdbRegister，这个时候就会在js里面调用ajax,来取得后台的数据。

function cmdbRegister(obj) {



。。。。


$.ajax({
                dataType: "JSON",
                url:'cmdb_server_test/', //请求地址
                type:"POST",  //提交类似
                data:server_data,  //提交参数
                success:function(response){
                   。。。

假设返回的是ip和hostname这个属性的json串。比如：data: {'ip': '192.168.10.209', 'name': 'server_host'}
怎么把结果渲染到前端呢，我们需要一个div,比如下面的一个表单。


    <div  class="modal fade" id="myAddCmdbModal"

    <form id="register" class="main form-horizontal" style="width: 800px">
                                <fieldset>
                                     <div class="form-group">
                                                 <label class="col-sm-2 control-label">主机名</label>
                                                 <div class="col-sm-6">
                                                     <input type="text" id="hostName" class="form-control" name="server_os_hostname" placeholder="192.168.1.1"  class="input-xlarge" required  title="请输入IP地址或者域名"  />
                                                 </div>
                                            </div>

假设我们要渲染的是id为hostName的文本框，我们可以使用如下的方式来渲染。

$.ajax({
                dataType: "JSON",
                url:'cmdb_server_test/', //请求地址
                type:"POST",  //提交类似
                data:server_data,  //提交参数
                success:function(response){
                    console.log(response);
                    var ip = response.data.ip;
                    var name = response.data.name;

                    $("#hostName").attr("value", ip);
                    $("#IP").attr("value", name);

这样一来渲染到的值就会放入指定id的DOM对象里面，也就是这个效果了。

如果返回的是一组数据怎么办呢。可能输出的是一个表格。

 

返回的json可能是这样的形式：

data: [{"fields": {"server_os_disk": null, "server_db_role": "SingleDB", "create_date": "2018-06-06T11:11:18", "update_date": "2018-06-06T11:11:18", "server_os_hostname": "", "memo": "1", "server_app_owner": "", "server_app_name": "", "server_status": 1, "server_app_code": "\u79ef\u5206\u6d4b\u8bd5_\u67b6\u6784\u8c03\u6574", "server_os_virtual": 1, "server_app_desc": "", "server_db_version": "Percona-MySQL5.7.16", "server_db_type": "MySQL", "server_os_cpu": null, "server_ip_addr": "192.168.10.202", "server_db_port": 4357, "server_os_mem": null, "server_os_version": "", "server_idc_name": ""}, "model": "OpsManage.cmdb_server", "pk": 2138},]

我们怎么把数据渲染到前端呢，同样我们还是需要一个div,比如这是一个表格，name表格的tbody内容是动态的，我们是没办法一个一个渲染的。


<div  class="modal fade" id="myCmdbListModal"


<table width="100%" class="table table-striped table-bordered table-hover" id="cmdb_serverTableList">
                                <thead>
                                    <tr>
                                         <td>ID</td>
                                         <td>机房</td>
                                         <td>IP地址</td>
                                         <td>端口)</td>
                                    </tr>
                                </thead>
                                <tbody id="cmdb_serverTbody">
xxxx --这里需要添加什么代码？
                                </tbody>

答案是什么都不用添加，我们只需要在ajax回调的部分这样调用，我们取到tbody的ID，然后循环得到td的值，拼装出一个tbody来，然后使用$tbody.html的方法来渲染即可。

$.ajax({
                dataType: "JSON",
                url:'test2_cmdb_server/', //请求地址
                type:"POST",  //提交类似
                data:server_data,  //提交参数
                success:function(response){
                    var data = JSON.parse(response.data);
                    var $tbody = $("#cmdb_serverTbody");
                    var str = "";
                    for (var i = 0; i < data.length; i ++){
                        var item = data[i];
                        var pk = item.pk;
                        var fields = item.fields;
                        str += "<tr>" +
                                    "<td>"+ pk +"</td>"  +
                                    "<td>"+ fields.server_idc_name +"</td>"  +
                                    "<td>"+ fields.server_ip_addr+"</td>"  +
                                    "<td>"+ fields.server_db_port +"</td>"    + "</tr>";
                    }

                    $tbody.html(str);
这样的需求看起来蛮复杂，实现起来也蛮复杂。

需要匹配和设置DOM对象，不断的做映射管理。在这种模式下react不失为一种更加轻巧的方式。