Order
The previous article has said that the approximate idea, this article is mainly for the first idea of the realization, to carry out a detailed description. About the user data integrity of the request process, here is no longer said, if not understand can go to see an article "Java User data integrity of the front-end display (thinking)."
Body
The front also said, I'm using the first scenario, the front end uses the Bootstrap progress bar component to display percentages, the background reads the weights and calculates the completeness of the information, and returns the calculated results to the front end for the page to display. The scenario is simple, and here's a look at the code.
Front-end 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 () {//load page, dynamic read profile integrity $.ajax ({async:false,url: ' Getinfodegree.do ', type: ' POST ', DataType: ' JSON ', data: {},error:function (XMLHttpRequest, Textstatus, Errorthrown) {A Lert ("Server error:" + xmlhttprequest.status+ "" + Xmlhttprequest.statustext + '! ');}, Success:function (data) {if (!data) Retu Rn;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;" > Completeness of personal data: <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= "aria-valuemin=" 0 "aria-valuemax=" ><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>
Background Java (partial code)
/** * Data integrity based on weights * @param map * @return */private String getinfodegree (list<tscacntprop> List) {int sum = 0;if (lis T.size () > 0) {//Traverse weight profile, get weights for (int i = 0; i < list.size (); i++) {int degree = Integer.parseint (COMMONUTIL.GETPR Operty (List.get (i). Getplabelname ())); sum + = degree;}} Returns the calculated weight of return sum + "%";}
In the profile configuration file, the weights are stored, and the images are truncated here.
Conclusion
Seemingly bluffing nouns, in fact, it is not much difficult, as long as the rationale for clear ideas, the scheme is on paper, of course, which will involve a number of technical issues, this according to different needs will have different solutions, technology after the implementation of the concrete will come. Finally, to thank a little Cui children's shoes, there is a problem in this function, I am very troubled, Xiao Cui children's shoes gave me a lot of help, I hereby express my thanks.
Java User Data integrity front-end display (Implementation)