文章目录
一、介绍开发所用技术、平台、框架等;二、介绍并演示系统主要功能;三、关键代码或算法实现原理说明==登录页面代码====[源码下载](/download/ALLENHuu/7556)==一、介绍开发所用技术、平台、框架等;
本次综合课程设计Ⅲ选题为基于JSP和jQuery的宾馆后台管理中心,
前端开发使用了html、css和javascript语言来进行web页面的设计,
后端开发使用了java和MySQL8.0.24来储存数据以及对数据进行增删改查;
使用了Tomcat来作为Web 应用服务器;使用的平台为IDEA;
框架使用了jQuery来进行一些网络时间的获取,以及网络验证码图片的获取并且验证的功能。
对于图像处理方面使用了PS来进行了一些图片的制作,以及图像方面的调整和图片比例的调
整。
二、介绍并演示系统主要功能;
1.基于jQuery的验证码图片下载以及验证功能
2.基于jQuery的北京时间获取功能
3.管理员登录页面以及验证功能
4.对于所有客房的信息查询和指定类型的信息查询
5.对于用户的添加和用户住房的调整和退房
6.对于所有订单信息的查看
7.宾馆房间的预定功能
8.酒店员工的管理功能
9.酒店经理的信息查询功能
三、关键代码或算法实现原理说明
登陆界面的验证码和时间显示功能使用了jQuery 框架去实现,通过document.getElementById(“canvas”)获取到JSP页面的canvas标签将随机生成的验证码图片放在canvas上面,同时获得了验证码图片所代表的值,与用户输入的值进行验证,验证步骤放在账号密码验证的前面;时间显示功能通过jQuery里的函数获取时间,然后对当前的时间段进行判断,不同的时间段JSP页面会显示不同的文字,去体现作为一个系统的人文关怀内容。
系统的一些相应的数据增删改查功能是通过设置一个工具类(util)实现JDBC功能,然后通过JSP界面的form表单去接收用户的值,然后传递到DAO层,通过impl接口实现类去实现数据库增删改查的功能,并且将值传回JSP页面,通过
显示给用户去查看。
数据库E-R图
登录页面截图
主页面截图
登录页面代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>登录</title><link type="text/css" rel="stylesheet" href="css/login.css" /><script src="/jquery/2.1.4/jquery.min.js"></script><script src="js/login.js"></script></head><body><%//声明java代码块进行注册提示语的逻辑校验Object index= session.getAttribute("index");if (index!=null){%><script>alert("用户名或密码错误")</script><%session.removeAttribute("index");}%><div class="box"><h2>后台登录</h2><form action="manage" method="post" class="form-box" onsubmit="return check()"><div class="inputBox"><input name="manageId" type="text" required=""/><label> 用户名</label></div><div class="inputBox"><input name="password" type="password" required=""/><label> 密码</label></div><div class="inputBox"><input name="" type="text"class="input-val" required="" style="width:50%;"/><label> 验证码</label><canvas id="canvas" width="100px" height="43"></canvas></div><button type="submit" class="button button-border button-glow button-primary button-rounded">登录</button></form></div>y<div style="color: #ffffff; font-family: '方正经黑简体';font-size:28px ; text-align: center;"><span id="bj_time"></span></div></body></html>