实训
最近大三下半学期刚刚结束，打算用实训记录类标题记录一下自己实训开发中遇到的一些问题。这次实训由京东互联网科技实践中心的老师授课并且给与我们开发小组达到毕设水平的评价，不知后续参加工作后看大学中开发的项目会有一些什么样的感受。项目后续上传到github上，个人负责建筑平台用户操作系统开发，管理员与评审专家由其他组员开发。
实训问题——thymeleaf传值给外联js文件
这次实训中后端业务逻辑、架构、数据库操作没有太大阻力，由于个人前端技术较差，主要问题集中于前端模板与后端的交互。这篇文介绍外联js传值问题。
当使用前端模板时想使用如下图的动态显示数据问题时需要解决如何后端向js文件传值，这次实训项目未前后端分离采用thymeleaf模板引擎。
解决方案
解决思路：后端传值给html页面，html页面设立全局变量赋值接收，js调用含有该变量的function()方法。
项目实例见下方代码：
html页面1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<script th:inline="javascript" type="text/javascript">
//<![CDATA[
var countUser = [[${userNumber}]];
var countExpert = [[${expertNumber}]];
var countProject = [[${projectNumber}]];
var countPrize = [[${prizeNumber}]];
//通过参数传递
countUp(countUser);
countUp2(countExpert);
countUp3(countProject);
countUp4(countPrize);
//]]>
</script>
<script src="/js/count.js" type="text/javascript" /></script></section>
js页面1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22function countUp(count)
{
var div_by = 100,
speed = Math.round(count / div_by),
$display = $('.count'),
run_count = 1,
int_speed = 24;
var int = setInterval(function() {
if(run_count < div_by){
$display.text(speed * run_count);
run_count++;
} else if(parseInt($display.text()) < count) {
var curr_count = parseInt($display.text()) + 1;
$display.text(curr_count);
} else {
clearInterval(int);
}
}, int_speed);
}
countUp(countUser);
...
...
This is copyright.