超市管理系统的难点解析

一、源代码

github 源代码路径 https://github.com/zhangweiweiweiweiwei/superMarket.git

二、难点解析

难点一、页面对性别的显示

【数据库对男女存值为0/1操作，当然若定义为String类型’男’ ‘女’则可轻松解决，此处为int类型的0/1值】

例如用户管理列表显示功能 将显示出用户的性别

userList.html（核心代码 58行）

<span class="STYLE1" th:text="${users.gender}==1?'男':'女'"></span>

对返回数据进行条件表达式判断返回用户的性别

难点二、对年龄的生成

【数据库一般存入数据为生日 格式为xxxx-xx-xx】

例一：用户详情userView.html列表显示功能 将显示出用户的年龄

userView.html（核心代码 35行）

user/View.js（核心代码 20-27行） 获取前端产生的时间戳year1，以及用户生日时间year2，对时间戳差值转为Int型数据，返回输出到前端。

//得到年龄
$(function () {

	var time1=Date.parse($("#year1").text());
	var time2=Date.parse($("#year2").text());
	var days=Math.ceil(parseInt((time1-time2)/1000/3600/24/365));
	$("#old").text(days)
});

例二：用户详情userList.html列表显示功能 将显示出用户的年龄

userList.html（核心代码 71-73行）定义时间戳 获取用户生日 获取用户表的长度（循环遍历时根据id返回对应位置输出年龄） 注意前端隐藏这里代码 ，否则会输出【使用】

//最终打印输出年龄的地方
<td ><span class="STYLE1" th:id="${users.id}"></span></td>

<td hidden><span th:id="year1+${users.id}" class="STYLE1" th:text="${#dates.createNow()}"></span></td>
<td hidden><span th:id="year2+${users.id}" class="STYLE1" th:text="${users.birthday}"></span></td>
<td hidden><span id="length" th:text="${length}"></span></td>

user/List.js（核心代码 1-19行） 获取前端的用户表的长度（在usercontroller层存入user.size()为length），进行循环遍历，产生的时间戳year1，以及用户生日时间year2，对时间戳差值转为Int型数据，返回输出到前端。

$(function () {
    var length = $("#length").text();
    console.log(length)
    for (i = 1; i <= length; i++) {
        //此处为字符串拼接  为时间戳（加上id方便定位输出时定位到相应的id用户）  勋魂遍历所有用户，则每个id对应一个年龄
        var id1 ='#year1'+i;
        console.log(id1)
        var time1=Date.parse($(id1).text());
        console.log(time1)
        var id2 ='#year2'+i;
        var time2=Date.parse($(id2).text());
        // 时间戳由毫秒到年
        var days=Math.ceil(parseInt((time1-time2)/1000/3600/24/365));
        console.log(days)
        // 此处为关键理解，字符串拼接id3  意味着为$(#i),对应id值输出年龄
        var id3 = '#' + i
        $(id3).text(days)
    }
});

难点三、对用户的权限判断输出显示

【数据库一般存为多个权限，0/1/2等值。当然若定义为String类型’管理员’ ‘经理’等则可轻松解决，此处为int类型的0/1/2值】

例如用户管理列表显示功能 将显示出用户的权限

userList.html（核心代码 66-70行）

<td>
	<span th:if="${users.userType} == 1">管理员</span>
	<span th:if="${users.userType} == 2">普通人员</span>
	<span th:if="${users.userType} == 3">经理</span>
</td>

对返回数据进行if判断返回用户的权限