47.实验室管理系统(基于SSM和html的Java项目)

目录

1.系统的受众说明

2.系统可行性分析

2.1 经济可行性

2.2 技术可行性

2.2.1 Java Web技术

2.2.2 Eclipse

2.2.3 Tomcat

2.2.4 数据库

2.2.5 Layui框架

2.2.6 SSM框架

3.系统需求分析

3.1 用户需求分析

3.2 功能需求分析

3.3 其他需求分析

4.系统设计

4.1 系统数据库设计

4.1.1 数据库逻辑结构设计

4.1.2 数据库表设计

4.2 系统功能设计

4.2.1 登陆功能模块

4.2.2 员工管理功能模块

4.2.3 设备管理功能模块

4.2.4 入库出库功能模块

4.2.5 报修报废功能模块

4.3 系统技术框架设计

5.系统实现

5.1 系统主页实现

5.2 系统功能实现

5.2.1 登录功能

5.2.2 修改密码功能

5.2.4 设备管理功能

5.2.5 入库管理功能

5.2.6 报废管理功能

---

 

1.系统的受众说明

     1 在校学习的学生，可用于日常学习使用或是毕业设计使用

     2 毕业一到两年的开发人员，用于锻炼自己的独立功能模块设计能力，增强代码编写能力。

     3 亦可以部署为商化项目使用。

     4 需要完整资料及源码，请在文末获取联系方式领取。

2.系统可行性分析

5.系统实现

5.1 系统主页实现

系统主页分为三个部分：左侧为系统的垂直导航菜单，可以选择相应的功能进行操作；右侧为系统的主体，在左侧选择相应的功能后由右侧进行展示，根据自己的需要进行操作即可；上面部分则主要是显示登录的用户名称以及退出登录选项，点击退出登录之后会返回到系统运行时的登录界面，重新登录即可重新进入主页。主页效果图如图5.1所示。

图5.1 系统主页效果图

5.2 系统功能实现

5.2.1 登录功能

用户登录时，在页面中输入自己的登录账号和密码，选择自己的登录身份，然后由前端通过表单的形式将数据传到后端，后端获取后与数据库数据进行比对，比对成功后登录成功进入主页，将登录用户的信息存入到session对象中，否则失败并给出提示信息提示用户。登录界面如图5.2所示。

图5.2 系统登录界面

此功能的主要代码如下。

@RequestMapping(value="/login")//处理请求地址映射的注解

public ModelAndView login(@RequestParam("loginname") String loginname,//账号

@RequestParam("password") String password,//密码

@RequestParam("tip") String tip,//用户类型

HttpSession session,//seession对象

ModelAndView mv){

if("1".equals(tip)) { //用户类型为管理员

Root user = rainservice.login(loginname, password);

User user = rainservice.login2(loginname, password);//员工登录换上句代码为本句

if(user!=null){

session.setAttribute(Constants.USER_SESSION, user); //将用户保存到Session

session.setAttribute("tip", "1");//员工登录为2

mv.setViewName("redirect:/indexroot/");//客户端跳转到main页面

}else{ mv.addObject("message", "登录名或密码错误!请重新输入");

mv.setViewName("forward:/loginForm");//跳转到登录页面

5.2.2 修改密码功能

本功能界面共有三个输入框，各输入框前面有输入提示。只有当原密码正确，并且后两次的密码相同时才会进行密码的修改，否则会弹出修改失败的相应原因。修改密码界面如图5.3所示。

图5.3 修改密码界面

系统对三次输入进行判断的代码如下。

var userPwReal="${user.password}";//正确的原密码

if(document.getElementById('dataForm1').password1.value !=userPwReal)

{ layer.msg('原密码不正确',{icon:5,time:1000}); }//比对原密码是否正确

else if(

document.getElementById('dataForm1').password2.value !=document.getElementById('dataForm').password.value){//比对两次新密码是否相同

layer.msg('两次密码输入不同',{icon:5,time:1000});

}else{

layer.alert("修改成功", {icon: 6},function () {

document.getElementById('dataForm').submit();});//提交修改数据

5.2.4 设备管理功能

设备管理功能的页面实现如图5.5所示。功能的表格部分代码与上面的代码相似。数据列表在控制器的代码如下。

@RequestMapping(value="/equipment/list",method=RequestMethod.GET)

public String index(Model model,String content){

List<Equipment> equipment_list = rainservice.findAllEquipment();

if (content!=null){//查询输入框为空时查询整个列表

//查询输入框不为空时需要通过设备名称来进行查询

equipment_list = rainservice.findAllEquipment(content);

}

model.addAttribute("list",equipment_list);

return "equipment/list";}

图5.5 设备管理功能界面

5.2.5 入库管理功能

员工将入库的信息进行录入，系统将录入的数据保存到数据库。管理员可以对其查看与修改。录入的信息包含了设备名称，时间，数量，负责人等信息，页面展示如图5.6所示。

图5.6 入库信息录入界面

输入的设备名称由设备管理中的设备来进行选择，不能自由输入。时间的录入使用的是layui的时间日期选择器，之后的信息由员工进行手动输入。设备名称的选择是由el和jstl实现的。

<c:forEach items="${equipment_list}" var="list"  varStatus="status">//循环打印设备的名称

<c:if test="${list.name != ruku.equipmentname}">

<option>${list.name}</option>//判断是录入还是修改，如果不加此语句，在进行修改时选择列表会出现两个相同的名称

</c:if>

</c:forEach>

时间选择器的代码如下所示。

layui.use('laydate',function(){

varlaydate=layui.laydate; 

laydate.render({ //执行一个laydate实例

elem:'#test'//指定元素

,type:'datetime'

});});

当表单提交之后，由controller接受请求并且把数据发给后端进行处理。过程的主要代码如下。

@RequestMapping(value="/kucun/rukuadd",method=RequestMethod.POST)

public ModelAndViewadd(ModelAndViewmv,@ModelAttributeRukuruku,Integerid){

if(id!=null){

rainservice.update_RukuInfo(ruku);//id不为空表示是修改操作

}else{

rainservice.addRuku(ruku);//id为空是增加，调用接口的不同方法

}

mv.setViewName("redirect:/kucun/rukulist");

return mv;//返回前端页面

}

@SelectProvider(type=RukuDynaSqlProvider.class,method="insertRuku")

void save(Rukuruku);

public StringinsertRuku(Rukuruku){//动态插入

return newSQL(){

{

INSERT_INTO(RUKUTABLE);

if(ruku.getEquipmentname()!=null&&!ruku.getEquipmentname().equals("")){

VALUES("equipmentname","#{equipmentname}");//对值进行修改

}

if(ruku.getTime()!=null&&!ruku.getTime().equals("")){

VALUES("time","#{time}");}}//后面的和此类似

}.toString();}

5.2.6 报废管理功能

报废管理功能是由管理填写申请，将申请报废的设备名称以及报废的原因进行填写提交。提交之后等待管理员审核，员工可以在报废管理功能的申请列表中查看自己申请的审核情况，如图5.7。 

图5.7 查看审核情况

对于申请成功的设备将会在设备列表中移除。管理员的审核通过直接点击即可，审核界面如图5.8。

图5.8 进行审核

审核状态主要是通过数据库的字段来判断，管理员审核后会对页面进行刷新，显示审核结果，以通过为例。下面是状态判断的部分代码。

<c:choose>

<c:when test="${baofei.zhuangtai==null}">

<td>审核中</td>

</c:when>

<c:when test="${baofei.zhuangtai==0}">

<td><fon tcolor="red">未通过</font></td>

</c:when>

<c:otherwise>

<td><font color="green">通过</font></td>

</c:otherwise>

</c:choose>

管理员的操作有通过和拒绝两个选项，代码如下。

//通过按钮

<a title="通过"  οnclick="member_yes(this,'${baofei.id }')" href="javascript:;">

<i class="layui-icon"></i></a>

//通过的js代码

function member_yes(obj,id){

layer.confirm('确认要同意吗？',function(index){

$.get("${ctx}/baofei/yes?id="+id); //发异步删除数据

layer.msg('已同意!',{icon:1,time:1000},

function(){window.location.replace("${ctx}/baofei/list")});//刷新页面，显示结果

});}

//拒绝按钮

<a title="拒绝"  οnclick="member_no(this,'${baofei.id }')" href="javascript:;">

<i class="layui-icon"></i></a>

//拒绝的js代码

function member_no(obj,id){

layer.confirm('确认要不同意吗？',function(index){

$.get("${ctx}/baofei/no?id="+id);

layer.msg('已拒绝!',{icon:1,time:1000},//发异步删除数据

function(){window.location.replace("${ctx}/baofei/list")});//刷新页面，显示结果

});}