首页 > 代码库 > Java 用户资料完整度的前端显示(实现)

Java 用户资料完整度的前端显示(实现)




上一篇文章已经说了说大概的思路,这一篇文章主要就是对于第一种思路的实现,进行详细的说明。关于用户资料完整度的请求流程,这里就不再多说了,如果不了解的可以去看上一篇文章《Java 用户资料完整度的前端显示(思路)》。


正文


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

前端

CSS
<link href=http://www.mamicode.com/"static/sc/css/bootstrap.min.css" rel="stylesheet">

JS
<script src=http://www.mamicode.com/"static/sc/js/jquery-1.9.1.js"></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 + "%";
}

配置文件

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

技术分享

效果图

技术分享

结束语


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


Java 用户资料完整度的前端显示(实现)