JavaWeb应用系统开发实训任务(一)

时间 2020-05-10

标签 javaweb 应用系统开发任务栏目 Java 繁體版

原文原文链接

项目描述：css

随着家长对孩子教育的日渐重视，社区幼儿学校在国内逐渐兴起，对社区幼儿学校的信息化管理成为迫切需求。社区幼儿学校管理系统须要实现如下功能：html

1）教师管理：实现对教师信息的查询、删除、增长（姓名、所教课程）java

2）家长管理：实现对家长信息的查询、删除、增长（姓名、电话、地址）web

3）幼儿管理：实现对幼儿信息的查询、删除、增长（姓名、生日、照片）数据库

4）上课管理：实现对上课信息的查询、增长（上课时间、内容、效果）编程

请根据上述项目背景描述进行上机操做,完成Web应用系统的开发任务。浏览器

任务一 缓存

在数据库管理系统MySql中建立社区幼儿学校管理系统的数据库db_ks，并按照如下数据库设计建立出全部的数据库表。服务器

社区幼儿医院管理系统的数据库设计如表1-1至1-6所示：dom

表1-1 用户表t_user

列名	类型	是否主键	容许为空	是否自增加	描述
id	int	是	否	是	用户id
role	varchar(45)	否	否	否	角色（admin系统管理员、parents家长）
name	varchar(45)	否	否	否	用户名
pwd	varchar(45)	否	否	否	密码
tel	varchar(45)	否	是	否	电话
address	varchar(256)	否	是	否	地址

表1-2 教师表t_teacher

列名

类型

是否主键

容许

为空

是否

自增加

描述

int

是

否

是

教师id

name

varchar(45)

否

教师名

表1-3 课程表t_course

列名	类型	是否主键	容许为空	是否自增加	描述
id	int	是	否	是	课程id
name	varchar(45)	否	否	否	课程名
desc	varchar(256)	否	是	否	课程描述

表1-4 教师课程关系表t_teacher_course

列名

类型

是否主键

容许

为空

是否

自增加

描述

teacherId

int

是

否

教师id

courseId

int

是

否

课程id

表1-5 幼儿表t_kid

列名	类型	是否主键	容许为空	是否自增加	描述
id	int	是	否	是	幼儿id
name	varchar(45)	否	否	否	幼儿名
birthdate	varchar(45)	否	是	否	生日
photo	varchar(128)	否	是	否	照片
parentsId	int	否	否	否	家长id（t_user表主键）

表1-6 上课表t_teaching

列名	类型	是否主键	容许为空	是否自增加	描述
id	int	是	否	是	用户id
kidId	int	否	否	否	幼儿Id
teacherId	int	否	否	否	教师Id
teachDate	varchar(45)	否	否	否	上课时间
content	text	否	否	否	上课内容
effect	text	否	否	否	上课效果

任务一的功能是创建数据库表，只要按照表中的信息来创建就能够了。

任务二

项目结构

实现用户登陆功能的开发任务，在页面输入用户名、密码、验证码后，点击【登陆】按钮，能自动提交用户登陆验证请求，验证成功后自动跳转到教师管理页面

1 使用Eclipse新建一个Dynamic Web Project 项目，项目命名为KidSchool

操做说明:

2在项目源码web目录下的用户登陆页面index.jsp，实现用户登陆页面的jsp代码，在项目源码web目录下添加样式表文件styles.css，web目录下新建一个inc目录，并在inc目录下添加页头文件header.inc和页脚文件footer.inc

操做说明：

1）在右侧项目资源视图中，选择web目录的默认登陆页面index.jsp，编写实现该页面的JSP代码

2）在右侧项目资源视图中，选择web目录，选择右键菜单New，选择StyleSheet建立样式表文件styles.css，再选择File建立普通文件header.inc和footer.inc，编写以上新建立文件的代码

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>登陆页面</title> <link href="styles.css" rel="stylesheet"/> </head> <body> <div> <div id="header"> <h1>社区幼稚园管理系统</h1> </div> <div id="main"> <form action="LoginServlet" method="post"> <table> <tr> <td>姓名</td> <td><input name="username" /></td> </tr> <tr> <td>密码</td> <td><input type="password" name="pwd"/></td> </tr> <tr> <td>验证码</td> <td><input name="usercode" /></td> </tr> <tr> <td>点击刷新</td> <!-- 为了不IE的缓存bug 须要每次请求带上不同的参数 这个参数能够没有任何意义 关键是要不同 --> <td><img src="CheckCode" onclick="this.src='CheckCode?rand='+Math.random()"/></td><!-- /在html和转发Dispatcher里面的含义不一样 前者表示服务器根目录 8080:/ 后者表示当前应用根目录 8080/ph/ --> </tr> <tr> <td></td> <td><input type="submit" value="登陆" /> <input type="reset" value="重置"/></td> </tr> </table> </form> <h4 align="center" style="color:red"><%=request.getAttribute("msg")==null?"":request.getAttribute("msg") %> <%=request.getParameter("para")==null?"":request.getParameter("para") %></h4> </div> <div id="footer"> <%@ include file="inc/footer.inc"%> </div> </div> </body> </html>

style.css

/* CSS Document */ /* 对于CSS来讲 每个元素默认的margin和padding就是0px。可是不一样的浏览器会有一个默认的浏览器样式修改默认的margin padding。因此在使用自定义样式编程前加上 *{ }从新设置margin和padding为0px，覆盖浏览器样式使得各个浏览器下统一。 */ *{ margin:0px; padding:0px; font-weight: bold; } /*a {*/ /*color:black;*/ /*text-decoration: none;*/ /*}*/ a:link, a:visited { color:#FF0000; text-decoration:underline; } a:hover, a:active { color: #5cffeb; text-decoration:none; } /* ID选择器 以#开始 用来匹配元素的id值 */ #header{ height:160px; background-color:#0033FF; position:relative; } /*后代选择器 在多个选择器之间加入空格表示后代选择器 用来匹配元素的包含关系 标签选择器 直接使用标签自己来匹配元素 */ #header h1{ color:#FFFF00; font-size:48px; padding-top:40px; width:300px;/* 经过设置margin的左右为auto能够实现居中，前提是被居中元素指定宽度*/ margin:0px auto; } /* #header a:first-child #header 里面全部是一个子元素的连接 #header > a:first-child #header的直接子元素中的第一个a */ #header > a:first-child{ /*float:right;*/ position:absolute; right:15px; top:10px; } /* 全部元素默认的postion是static，其特色按照在文档中的前后顺序进行排列 position:absolute 绝对布局，其特色相对于最近一个已定位(absolute/relative )父元素进行定位,若是没有这样的父元素就相对于body。经过top bottom left right控制 position:relative 相对布局 其特色是相对于元素原本的位置进行位移 。经过top bottom left right控制，若是吗，没有位移量，其显示仍是在原来的位置，可是性质已经变成定位元素。 */ #header .menu{ position:absolute; bottom:5px; } #header .menu li{ float: left; margin-left:15px; list-style-type:none } #main{ min-height:500px; background-color:pink; } #main table ,#main h4{ width:360px; margin:0px auto; } .minWidth{ min-width:240px; } #main table{ padding-top:60px; } #main table .result{ background-color: white; text-align: center; } #main input,#main img[src='CheckCode']{ width:150px; height:24px; } #main textarea{ width: 150px; height: 96px; } /* 每一个id选择器算100 类 伪类算10 标签选择器算1 将全部的值相加就是优先级 */ #main tr:last-child input{ width:auto; padding:0 10px; } #footer{ background-color:#0033FF; height:80px; } #footer p{ color:red; font-size:20px; padding-top:40px; width:800px;/* 经过设置margin的左右为auto能够实现居中，前提是被居中元素指定宽度*/ margin:0px auto; }

inc目录下的header.inc和footer.inc

header.inc

<%@ page pageEncoding="UTF-8"%>
    <a href="QuitServlet">退出</a>
    <a href="">修改密码</a>
    <h1>社区幼稚园</h1>
    <ul class="menu">
    <li><a href="teacherSearch.jsp">教师管理</a></li>
    <li><a href="">家长管理</a></li>
    <li><a href="">幼儿管理</a></li>
    <li><a href="courseAdd">课程管理</a></li>
</ul>

footer.inc

<%@ page pageEncoding="UTF-8"%>
<p>做者:Black_YeJing 单位：XXXXXXX 邮箱：2147807609@qq.com</p>

.......

项目描述：

随着家长对孩子教育的日渐重视，社区幼儿学校在国内逐渐兴起，对社区幼儿学校的信息化管理成为迫切需求。社区幼儿学校管理系统须要实现如下功能：

1）教师管理：实现对教师信息的查询、删除、增长（姓名、所教课程）

2）家长管理：实现对家长信息的查询、删除、增长（姓名、电话、地址）

3）幼儿管理：实现对幼儿信息的查询、删除、增长（姓名、生日、照片）

4）上课管理：实现对上课信息的查询、增长（上课时间、内容、效果）

请根据上述项目背景描述进行上机操做,完成Web应用系统的开发任务。

任务一

在数据库管理系统MySql中建立社区幼儿学校管理系统的数据库db_ks，并按照如下数据库设计建立出全部的数据库表。

社区幼儿医院管理系统的数据库设计如表1-1至1-6所示：

表1-1 用户表t_user

列名	类型	是否主键	容许为空	是否自增加	描述
id	int	是	否	是	用户id
role	varchar(45)	否	否	否	角色（admin系统管理员、parents家长）
name	varchar(45)	否	否	否	用户名
pwd	varchar(45)	否	否	否	密码
tel	varchar(45)	否	是	否	电话
address	varchar(256)	否	是	否	地址

表1-2 教师表t_teacher

列名

类型

是否主键

容许

为空

是否

自增加

描述

int

是

否

是

教师id

name

varchar(45)

否

教师名

表1-3 课程表t_course

列名	类型	是否主键	容许为空	是否自增加	描述
id	int	是	否	是	课程id
name	varchar(45)	否	否	否	课程名
desc	varchar(256)	否	是	否	课程描述

表1-4 教师课程关系表t_teacher_course

列名

类型

是否主键

容许

为空

是否

自增加

描述

teacherId

int

是

否

教师id

courseId

int

是

否

课程id

表1-5 幼儿表t_kid

列名	类型	是否主键	容许为空	是否自增加	描述
id	int	是	否	是	幼儿id
name	varchar(45)	否	否	否	幼儿名
birthdate	varchar(45)	否	是	否	生日
photo	varchar(128)	否	是	否	照片
parentsId	int	否	否	否	家长id（t_user表主键）

表1-6 上课表t_teaching

列名	类型	是否主键	容许为空	是否自增加	描述
id	int	是	否	是	用户id
kidId	int	否	否	否	幼儿Id
teacherId	int	否	否	否	教师Id
teachDate	varchar(45)	否	否	否	上课时间
content	text	否	否	否	上课内容
effect	text	否	否	否	上课效果

任务一的功能是创建数据库表，只要按照表中的信息来创建就能够了。

任务二

项目结构

1 使用Eclipse新建一个Dynamic Web Project 项目，项目命名为KidSchool

操做说明:

操做说明：

1）在右侧项目资源视图中，选择web目录的默认登陆页面index.jsp，编写实现该页面的JSP代码

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>登陆页面</title> <link href="styles.css" rel="stylesheet"/> </head> <body> <div> <div id="header"> <h1>社区幼稚园管理系统</h1> </div> <div id="main"> <form action="LoginServlet" method="post"> <table> <tr> <td>姓名</td> <td><input name="username" /></td> </tr> <tr> <td>密码</td> <td><input type="password" name="pwd"/></td> </tr> <tr> <td>验证码</td> <td><input name="usercode" /></td> </tr> <tr> <td>点击刷新</td> <!-- 为了不IE的缓存bug 须要每次请求带上不同的参数 这个参数能够没有任何意义 关键是要不同 --> <td><img src="CheckCode" onclick="this.src='CheckCode?rand='+Math.random()"/></td><!-- /在html和转发Dispatcher里面的含义不一样 前者表示服务器根目录 8080:/ 后者表示当前应用根目录 8080/ph/ --> </tr> <tr> <td></td> <td><input type="submit" value="登陆" /> <input type="reset" value="重置"/></td> </tr> </table> </form> <h4 align="center" style="color:red"><%=request.getAttribute("msg")==null?"":request.getAttribute("msg") %> <%=request.getParameter("para")==null?"":request.getParameter("para") %></h4> </div> <div id="footer"> <%@ include file="inc/footer.inc"%> </div> </div> </body> </html>

style.css

/* CSS Document */ /* 对于CSS来讲 每个元素默认的margin和padding就是0px。可是不一样的浏览器会有一个默认的浏览器样式修改默认的margin padding。因此在使用自定义样式编程前加上 *{ }从新设置margin和padding为0px，覆盖浏览器样式使得各个浏览器下统一。 */ *{ margin:0px; padding:0px; font-weight: bold; } /*a {*/ /*color:black;*/ /*text-decoration: none;*/ /*}*/ a:link, a:visited { color:#FF0000; text-decoration:underline; } a:hover, a:active { color: #5cffeb; text-decoration:none; } /* ID选择器 以#开始 用来匹配元素的id值 */ #header{ height:160px; background-color:#0033FF; position:relative; } /*后代选择器 在多个选择器之间加入空格表示后代选择器 用来匹配元素的包含关系 标签选择器 直接使用标签自己来匹配元素 */ #header h1{ color:#FFFF00; font-size:48px; padding-top:40px; width:300px;/* 经过设置margin的左右为auto能够实现居中，前提是被居中元素指定宽度*/ margin:0px auto; } /* #header a:first-child #header 里面全部是一个子元素的连接 #header > a:first-child #header的直接子元素中的第一个a */ #header > a:first-child{ /*float:right;*/ position:absolute; right:15px; top:10px; } /* 全部元素默认的postion是static，其特色按照在文档中的前后顺序进行排列 position:absolute 绝对布局，其特色相对于最近一个已定位(absolute/relative )父元素进行定位,若是没有这样的父元素就相对于body。经过top bottom left right控制 position:relative 相对布局 其特色是相对于元素原本的位置进行位移 。经过top bottom left right控制，若是吗，没有位移量，其显示仍是在原来的位置，可是性质已经变成定位元素。 */ #header .menu{ position:absolute; bottom:5px; } #header .menu li{ float: left; margin-left:15px; list-style-type:none } #main{ min-height:500px; background-color:pink; } #main table ,#main h4{ width:360px; margin:0px auto; } .minWidth{ min-width:240px; } #main table{ padding-top:60px; } #main table .result{ background-color: white; text-align: center; } #main input,#main img[src='CheckCode']{ width:150px; height:24px; } #main textarea{ width: 150px; height: 96px; } /* 每一个id选择器算100 类 伪类算10 标签选择器算1 将全部的值相加就是优先级 */ #main tr:last-child input{ width:auto; padding:0 10px; } #footer{ background-color:#0033FF; height:80px; } #footer p{ color:red; font-size:20px; padding-top:40px; width:800px;/* 经过设置margin的左右为auto能够实现居中，前提是被居中元素指定宽度*/ margin:0px auto; }

inc目录下的header.inc和footer.inc

header.inc

<%@ page pageEncoding="UTF-8"%>
    <a href="QuitServlet">退出</a>
    <a href="">修改密码</a>
    <h1>社区幼稚园</h1>
    <ul class="menu">
    <li><a href="teacherSearch.jsp">教师管理</a></li>
    <li><a href="">家长管理</a></li>
    <li><a href="">幼儿管理</a></li>
    <li><a href="courseAdd">课程管理</a></li>
</ul>

footer.inc

<%@ page pageEncoding="UTF-8"%>
<p>做者:Black_YeJing 单位：XXXXXXX 邮箱：2147807609@qq.com</p>

.......