Java 用户资料完整度的前端显示（实现）

2019独角兽企业重金招聘Python工程师标准>>>

正文

前边也说了，我这里采用的是第一种方案，前端使用 Bootstrap 的进度条组件显示百分比，后台读取权重并计算信息完整度，并将计算的结果返回给前端，供页面显示。方案很简单，下面具体来看代码。

前端

CSS

<link href="static/sc/css/bootstrap.min.css" rel="stylesheet">

JS

<script src="static/sc/js/jquery-1.9.1.js"></script>  
<script src="static/sc/js/bootstrap.min.js"></script>  
  
<script language="javascript">  
 $(function() {  
    // 加载页面时，动态读取个人资料完整度  
     $.ajax({  
            async: false,  
            url : 'getInfoDegree.do',  
            type : 'POST',  
            dataType : 'json',  
            data : {},  
            error : function(XmlHttpRequest, textStatus, errorThrown) {  
                alert("服务器错误:" + XmlHttpRequest.status  
                        + " " + XmlHttpRequest.statusText + '!');  
            },  
            success : function(data) {  
                if (!data)  
                    return;  
                if(data.flag == "true"){  
                    $("#showSpan").html(data.degree);  
                    $("#showBar").css("width", data.degree);  
                    $("#showPercent").html(data.degree);  
                }else if(data.flag == "false"){  
                    $("#infodegree").html(data.desc);  
                    return false;  
                }  
            }     
        });  
 });  
</script>

DOM

<p style="color:#666;">个人资料完整度：<span id="showSpan" style="color:#ff9933;font-size:20px;font-weight:bold;"></span></p>  
<div class="progress progress-striped" style="width:210px;height:15px;">  
<span style="white-space:pre">    </span><div id="showBar" class="progress-bar progress-bar-info" role="progressbar"aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >  
<span style="white-space:pre">        </span><span id="showPercent" class="sr-only"></span>  
<span style="white-space:pre">    </span></div>  
</div>  
<em id="infodegree"></em>

后台

Java（部分代码）

/** 
 * 根据权重计算资料完整度 
 * @param map 
 * @return 
 */  
private String getInfoDegree(List<TScAcntProp> list) {  
    int sum = 0;  
    if (list.size() > 0) {  
        // 遍历权重配置文件，获取权重  
        for (int i = 0; i < list.size(); i++) {  
            int degree = Integer.parseInt(CommonUtil.getProperty(list.get(i).getPLabelName()));  
            sum += degree;  
        }  
    }  
    // 返回计算后的权重  
    return sum + "%";

配置文件

配置文件中存放的是权重，这里就截成图片了。

效果图

结束语

看似唬人的名词，其实也并没有多难，只要理清楚思路，方案就跃然于纸上了，当然，其中会涉及到一些技术问题，这个根据不同的需求会有不同的解决方案，技术搞定后，具体的实现就会水到渠成。最后，要感谢一下小崔童鞋，在这个功能上有一个问题让我很困扰，小崔童鞋给了我很大的帮助，特此表示我的感谢。

转载于:https://my.oschina.net/yongqingfan/blog/540258