学生信息管理系统的客户端编程

实训目的

了解一个网站静态资源的结构和组成部分

实训内容介绍

  • 创建项目
  • 项目结构
  • HTML 文件
  • CSS 文件
  • JavaScript 文件
  • 实训总结

创建项目

一个项目就是一个应用程序。 创建一个名为student 的动态Web项目（Dynamic Web Project）。

项目结构

按照教材第 39 页图2-7的要求，在 WebContent 下创建 css, images, js文件夹。

HTML 文件

按照教材第 39~45 页的讲解，创建下述 4 个 HTML 文件。

登录页面（login.html）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录页面</title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" href="css/login.css" type="text/css" />
</head>
<body>
  <div class="main">
    <div class="header">
      <h1>学生信息管理系统</h1>
    </div>
    <div class="loginMain">
      <form action="" method="post" onsubmit="return checkLogin()">
		<input type="text" name="username" placeholder="用户名" />
		<input type="password" name="password" placeholder="密码" />
		<input type="submit" value="登录" class="btn" />
      </form>
    </div>
  </div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
浏览学生信息页面（view.html）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>主页</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="css/view.css"/>
</head>
<body>
  <div class="main">
    <div class="header">
      <h1>学生信息管理系统</h1>
    </div>
    <div class="content">
      <p>用户：zhangsan&nbsp;&nbsp;&nbsp;<a href="#">注销</a></p>
      <form action="#" method="post" class="formclass">
		id: <input type="text" name="id" value="" class="information"/>
		name: <input type="text" name="name" value="" class="information"/>
		age: <input type="text" name="age" value="" class="information"/>
		<input type="submit" value="查询" class="btn"/>
      </form>

      <a href="#">添加</a>

      <h2>学生信息列表</h2>
      <table border="1">
		<tr>
		  <td>编号</td>
		  <td>名称</td>
		  <td>年龄</td>
		  <td>性别</td>
		  <td>账户</td>
		  <td>密码</td>
		  <td colspan="2">操作</td>
		</tr>

		<tr>
		  <td>1</td>
		  <td>张三</td>
		  <td>18</td>
		  <td>男</td>
		  <td>zhangsan</td>
		  <td>123456</td>
		  <td>删除</td>
		  <td>修改</td>
		</tr>

		<tr>
		  <td>2</td>
		  <td>李四</td>
		  <td>19</td>
		  <td>女</td>
		  <td>lisi</td>
		  <td>123456</td>
		  <td>删除</td>
		  <td>修改</td>
		</tr>
      </table>
    </div>
    <div class="footer"><p>《Java EE应用开发及实训》第2版（机械工业出版社）</p></div>
  </div>
  <script type="text/javascript" src="js/script.js"></script>
</body>
</html>
添加学生信息页面（add.html）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加学生信息</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
</head>
<body>
  <div class="main">
    <div class="header">
      <h1>学生信息管理系统</h1>
    </div>

    <div class="content">
      <h2>添加学生信息</h2>
      <form action="" method="post" onsubmit="return check()" class="contact_form" >
		<ul>
		  <li class="usually">
		    <span>用户名：</span>
		    <input type="text" name="name" value="" />
		  </li>

		  <li class="usually">
		    <span>年龄：</span>
		    <input type="text" name="age" value="" id="age"/>
		  </li>

		  <li class="usually">
		    <span>性别： </span>
		    <input type="radio" name="sex" value="m" id="male"/>
		    <label for="male">男</label>
		    <input type="radio" name="sex" value="f" id="female"/>
		    <label for="female">女</label>
		  </li>

		  <li class="usually">
		    <span>账号：</span>
		    <input type="text" name="account" value="" class="information"/>
		  </li>

		  <li class="usually">
		    <span>密码：</span>
		    <input type="text" name="password" value="" class="information"/>
		  </li>

		  <li class="usually">
		    <span>类型：</span>
		    <select name="typeId">
		      <option value="1">管理员</option>
		      <option value="2">用户</option>
		    </select>
		  </li>

		  <li>
		    <input type="submit" value="添加" class="submit" />
		  </li>
		</ul>
      </form>
    </div>

    <div class="footer"><p>《Java EE应用开发及实训》第2版（机械工业出版社）</p></div>
  </div>

  <script type="text/javascript" src="js/script.js"></script>
</body>
</html>
更新学生信息页面（update.html）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>更新学生信息</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
</head>
<body>
  <div class="main">
    <div class="header">
      <h1>学生信息管理系统</h1>
    </div>

    <div class="content">
      <h2>更新学生信息</h2>
      <form action="" method="post" onsubmit="return check()" class="contact_form">
		<input type="hidden" name="id" value="" />
		<ul>
		  <li class="usually">
		    <span>用户名：</span>
		    <input type="text" name="name" value="" />
		  </li>

		  <li class="usually">
		    <span>年龄：</span>
		    <input type="text" name="age" value="" />
		  </li>

		  <li class="usually">
		    <span>性别： </span>
		    <input type="radio" name="sex" value="m" id="male"/>
		    <label for="male">男</label>
		    <input type="radio" name="sex" value="f" id="female"/>
		    <label for="female">女</label>
		  </li>

		  <li class="usually">
		    <span>账号：</span>
		    <input type="text" name="account" value="" />
		  </li>

		  <li class="usually">
		    <span>密码：</span>
		    <input type="text" name="password" value="" />
		  </li>

		  <li class="usually">
		    <span>类型：</span>
		    <select name="typeId">
		      <option value="1">管理员</option>
		      <option value="2">用户</option>
		    </select>
		  </li>

		  <li>
		    <input type="submit" value="修改" class="submit" />
		  </li>
		</ul>
      </form>
    </div>

    <div class="footer"><p>《Java EE应用开发及实训》第2版（机械工业出版社）</p></div>
  </div>

  <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

CSS 文件

CSS 的作用是渲染页面外观的，下载图片 header.png文件到 images 目录，或者自行准备一张 800*450 大小的背景图片放到images目录。

![header](img/2-8 项目二 学生信息管理系统的客户端编程/header.png)

按照教材第 45~51 页的讲解，在 css 目录下创建下述 3 个 CSS 文件。

公共样式（common.css）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
@CHARSET "UTF-8";

*{
  margin:0;
  padding:0;
}

a{
  text-decoration:none;
}

body {
  font-family:'微软雅黑';
  font-size:16px;
  color:#000;
}

.main{
  width:1000px;
  height:100%;
  margin:0 auto;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 5px;
  background: rgba(57,136,239,0.55);
  box-shadow: 0 0 13px 3px rgba(0,0,0,0.5);
}

h1{
  text-align:center;
  color:#fff;
  font-size: 70px;
}

h2{
  width:100%;
  height:40px;
  margin:10px auto;
  text-align:center;
  font-size:30px;
  color:#fff;
}

.header{
  height:200px;
  color:#000;
  line-height:200px;
  background: url(../images/header.png) no-repeat center center;
  background-size:cover;
  overflow:hidden;
}

.content {
  padding:0px 50px;
}

.information {
  width:100px;
  height:30px;
  padding:0px 20px;
}

.contact_form {
  width:100%;
  border:1px solid rgba(255,255,255,0.4);
  border-radius:4px;
  display:block;
  font-family: 'Source Sans Pro', sans-serif;
  font-size:18px;
  padding:10px;
  background:rgba(255,255,255,0.4) no-repeat 16px 16px;
}

.contact_form ul {
  width:750px;
  list-style:none;
  margin:0px;
  padding:0px;
}

.contact_form li {
  padding:12px;
  border-bottom:1px solid #eee;
  position:relative;
}

.contact_form span {
  width:150px;
  margin-top:3px;
  display:inline-block;
  padding:3px;
}

.usually input, .usually select {
  height:30px;
  width:220px;
  padding:5px 8px;
}

.submit {
  background-color:#47b9ea;
  border:1px solid #46d5e0;
  color:white;
  font-weight:bold;
  padding:6px 20px;
  text-align:center;
}

.submit:hover {
  opacity:0.85;
  cursor:pointer;
}

.footer{
  width:100%;
  text-align:center;
}

.footer p{
  margin:10px auto;
}
登录页面样式（login.css）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
@CHARSET "UTF-8";

*{
  padding:0;
  margin:0;
}
body{
  background:url(../images/header.png) no-repeat center center fixed;
  background-size:cover;
  padding-top:20px;
}

.loginMain{
  width:343px;
  height:200px;
  position:relative;
  left:0;
  top:0;
  margin:150px auto;
  padding:30px;
  border:1px solid rgba(0,0,0,0.2);
  border-radius: 5px;
  background:rgba(208, 115, 115, 0.1);
  box-shadow: 0 0 13px 3px rgba(0,0,0,0.5);
  overflow:hidden;
}

.loginMain input {
  width:80%;
  height:48px;
  border:1px solid rgba(255,255,255,0.4);
  border-radius:4px;
  display:block;
  font-family: 'Source Sans Pro', sans-serif;
  font-size:18px;
  color:#fff;
  padding-left:45px;
  padding-right:20px;
  margin-bottom:20px;
  background:rgba(255,255,255,0.4) no-repeat 16px 16px;
}

.loginMain input[type=submit] {
  cursor:pointer;
  margin-left:134px;
}

.loginMain input:focus {
  background-color:rgba(0,0,0,0.2);
  box-shadow:0 0 5px 1px rgba(255,255,255,0.5);
}

.loginMain .btn {
  width:75px;
  height: 45px;
  background: #00b0dc;
  padding: 10px 20px;
  border-radius: 6px;
  color: #e1e1e1;
}

.loginMain .btn:hover {
  border:1px solid #253737;
  text-shadow:0 1px 0 #333333;
  background:#3f95de;
  color:#fff;
}

.loginMain .btn:active {
  margin-top:1px;
  text-shadow:0 -1px 0 #333333;
  border:1px solid #253737;
  background:#00b0dc;
  color:#fff;
}
主页面样式（view.css）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
@CHARSET "UTF-8";

.formclass {
  width:100%;
  height:40px;
  margin-top:10px;
  border:1px solid rgba(255,255,255,0.4);
  border-radius:4px;
  display:block;
  font-family: 'Source Sans Pro', sans-serif;
  font-size:18px;
  padding:10px;
  background:rgba(255,255,255,0.4) no-repeat 16px 16px;
}

.formclass .btn{
  width:65px;
  height: 33px;
  background-color:#47b9ea;
  border:1px solid #46d5e0;
  color:white;
  font-weight:bold;
  padding:6px 20px;
  text-align:center;
}

form{
  width:100%;
}

form + a{
  display:block;
  width:100px;
  height:30px;
  border:1px solid #fff;
  border-radius:5px;
  font-size:20px;
  color:black;
  text-align:center;
  line-height:30px;
  margin-top:20px;
  margin-bottom:5px;
  background-color:rgba(57,136,239,0.20);
}

table{
  width:100%;
}
table td{
  text-align:center;
}

完成后，再预览效果http://127.0.0.1:8080/student/index.html，这时可以看到预期的效果。因为缺少服务器端编程，所以是没有功能的。

JavaScript 文件

按照教材第 51~52 页的讲解，在 js 目录下创建下述 1 个 JavaScript 文件。

脚本文件（script.js）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/**
* 对登录表单进行校验
*/
function checkLogin(){
  var username = document.getElementsByName("username");  /*根据name属性值获得账户对应的对象*/
  var password = document.getElementsByName("password");  /*根据name属性值获得密码对应的对象*/

  if(username[0].value=="" || password[0].value==""){
    alert("用户名和账号不能为空");
    return false;
  }else{
    return true;
  }
}

function check(){
  var name = document.getElementsByName("name");  /*根据name属性值获得姓名对应的对象*/
  var age = document.getElementsByName("age");  /*获根据name属性值得年龄对应的对象*/
  var sex = document.getElementsByName("sex");  /*根据name属性值获得性别对应的对象*/
  var account = document.getElementsByName("account");  /*根据name属性值获得账户对应的对象*/
  var password = document.getElementsByName("password");  /*根据name属性值获得密码对应的对象*/

  //判断姓名是否为空
  if(name[0].value==""){
    alert("用户名不能为空");
    return false;
  }

  //判断年龄是否为数组，其范围是0-150
  var ageNumber = parseInt(age[0].value);
  if(isNaN(ageNumber)){
    alert("年龄必须是数字");
    return false;
  }else if(ageNumber<=15 || ageNumber>35){
    alert("年龄范围是15-35")
    return false;
  }

  //判断性别是否被选中
  var flag = false;
  for(var i = 0; i<sex.length; i++){
    s = sex[i];
    if(s.checked){
      flag = true;
    }
  }

  if(!flag){
    alert("性别还没选");
    return false;
  }

  //判断账号是否为空
  if(account[0].value==""){
    alert("账号不能为空");
    return false;
  }

  //判断密码是否为空
  if(password[0].value==""){
    alert("密码不能为空");
    return false;
  }

  return true;
}

完成后，访问添加页面http://127.0.0.1:8080/student/add.html或更新页面http://127.0.0.1:8080/student/update.html， 将会对表单进行校验，例如直接点击“添加”按钮时，会弹出提示信息“用户名不能为空”。

实训总结

本次实训体验了学生信息管理系统的客户端编程，更好地理解 html, css 和 JavaScript 的作用。