上篇文章展示了大体思路,这回就大概讲讲实现过程。
首先,先把数据给设计好。根据我的需要,我设计了两个表,一个是存学生信息的表,一个是学生成绩的表。根据自己的需求设计表格,如下:
表名
student_user
名称 | 类型 | NULL | 注释 |
---|---|---|---|
User_id | varchar(16) | not null | 用户账号//主键 |
User_name | varchar(16) | not null | 用户姓名 |
User_password | varchar(16) | not null | 用户密码 |
User_sex | varchar(2) | not null | 用户性别 |
User_phone | varchar(11) | not null | 用户手机号 |
表名:
Grade
名称 | 类型 | NULL | 注释 |
---|---|---|---|
User_id | varchar(16) | not null | 用户账号//主键 |
User_name | varchar(16) | not null | 用户姓名 |
User_java | varchar(3) | default null | java成绩 |
User_C | varchar(3) | default null | C语言成绩 |
User_web | varchar(3) | default null | web成绩 |
User_python | varchar(3) | default null | python成绩 |
User_SQL | varchar(3) | default null | Sql成绩 |
这个是我所需要用到的表:
在mysql里的编写如下:
create table student_user(
User_id varchar(16) not null primary key,
User_name varchar(16) not null,
User_password varchar(16) not null,
User_sex varchar(2) not null,
User_phone varchar(11) not null
);
create table Grade(
User_id varchar(16) not null primary key,
User_name varchar(16) not null,
User_java varchar(3) default null ,
User_C varchar(3) default null ,
User_web varchar(3) default null ,
User_python varchar(3) default null ,
User_SQL varchar(3) default null
)
ENGINE=InnoDB default charset=utf8;
回到我们的jsp页面来,一步一步解决:
登陆选择页面(loginchoose.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>
</head>
<style>
body{
background: url('/Student_grade/imge/qiang.jpg');
}
</style>
<body>
<div style="font-family:verdana;padding:30px;border-radius:80px;border:15px solid #EE872A;">
<h1 style="font-size:60px;">成 绩 查 询 系 统</h1>
<div style="letter-spacing:15px;left:60px;font-size:30px;">XXX的考察作业</div>
<div style="color:#40B3DF;">欢迎
<span style="background-color:#B4009E;color:#ffffff;font-size:23px;">欢迎</span>
</div>
<div style="font-family:verdana;padding:30px;border-radius:15px;width:250px;border:5px solid #FF0000;">
<div style="color:#000000;font-size:35px">请选择登录类型</div><br>
<span style="background-color:#ADFF2F;color:#ffffff;font-size:30px;" ><a href ="student_login.jsp">学生登录</a></span>
<span style="background-color:#ADFF2F;color:#ffffff;font-size:30px;"><a href ="/Student_grade/admin/admin_login.jsp">管理登录</a></span>
</div>
<b style="font-size:20px">还没有账号?</b><div style="color:#000000;font-size:18px"><a href ="Student_register.jsp">点击注册账号</a></div>
</div>
</body>
</html>
跟据第一个页面的所提供的连接,把这三个jsp文件创好,为了方便管理,我把Student和admin的文件分开,在webcontent里建一个admin的文件夹,便于管理。所以后面用到这个文件夹的文件时,都与要把完整路径写下来,比如我的工程名是Student_grade,则admin_login.jsp的路径名为:/Student_grade/admin/admin_login.jsp 如果不写完整,就会造成错误,找不到该页面。
实现学生登录页面:(student_login.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>
<style>
.fn{
height:25px;
}
</style>
</head>
<body>
<form action="login" method="post">
<div style="opacity:0.5;position:absolute;width:100%;height:29%;font-size:150px;"align="center">
<marquee direction="left" behavior="scroll" scrollamount="50px" ><b>来 啦 老 弟</b></marquee>
</div>
<img src="/Student_grade/imge/gg.gif" alt="gg" width="100%";height="100%" >
<div style="font-family:verdana;padding:10px;border-radius:10px;width:330px;border:5px solid #4169E1;position:absolute;top:30%;left:40%;background-color:rgb(255,255,255,0.3)">
<h1 align="center" style="font-size:40px;">学生登录端口</h1>
<b style="font-size:25px;">账号:</b><input type="text" name="userid" placeholder="请输入账号" size="25" class="fn"/><br><br>
<b style="font-size:25px;">密码:</b><input type="password" name="password" placeholder="请输入密码" size="25" class="fn"/><br><br>
<input type="submit" value="登录" style="font-size:18px;"/>
<input type="reset" value="重置" style="font-size:18px;"/>
<br>
<a href="loginchoose.jsp">返回登录首页</a><br>
</div>
</form>
</body>
</html>
接下来是管理员登录窗口了(admin_login.jsp),这个页面的代码跟学生登录代码差不多,就是背景不一样,我就不放出来了。
最后是注册页面(Student_register.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; charsetutf-8">
<title>学生注册页面</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/function.js"></script>
<style>
.reg p .error{
display:inline-block;
border:1px solid #ff855a;
background-color:#ffe8e0;
height:18px;
line-height:20px;
padding:0px 15px;
margin-left:10px;
}
.fn{
height:25px;
}
</style>
<body >
<img src="/Student_grade/imge/gugong.gif" alt="gugong" width="120%";height="100%" >
<div style="font-family:verdana;padding:10px;border-radius:10px;width:520px;border:5px solid #FF0000;position:absolute;top:20%;left:35%;background-color:white;background-color:rgb(255,255,255,0.5)">
<div style="font-family:verdana;padding:10px;border-radius:10px;width:450px;border:5px solid #4169E1;">
<div style="opacity:0.5;position:absolute;left:35px;width:380px;height:70px;background-color:#FFD700"></div>
<h1 align="center">账号注册</h1>
</div>
<!-- onsubmit="return checkForm(this)" -->
<form action="register" method="post" onsubmit="return checkForm(this)" >
<div class="reg">
<br>
<p>
<b style="font-size:25px;">姓 名:</b>
<input type="text" name="username" size="25" class="fn" value="" onfocus="FocusItem(this)" onblur="CheckItem(this)"placeholder="请输入名字" /><span>请填写姓名!</span>
</p>
<p>
<b style="font-size:25px;">性 别:</b>
<input type="radio" value="xy" name="sex" checked="checked"/>男
<input type="radio" value="xx" name="sex" />女
</p>
<p>
<b style="font-size:25px;">账 号:</b>
<input type="text" name="userid" size="25" class="fn" value="" onfocus="FocusItem(this)" onblur="CheckItem(this)" placeholder="请输入账号(6-16个字符)"/><span>请填写账号!</span>
</p>
<p>
<b style="font-size:25px;">密 码:</b>
<input type="password" name="password" size="25" class="fn" value="" onfocus="FocusItem(this)" onblur="CheckItem(this)" placeholder="请输入密码(6-16个字符)"/><span>请填写密码!</span>
</p>
<p>
<b style="font-size:25px;">确认密码 :</b>
<input type="password" name="repassword" size="25" class="fn" value="" onfocus="FocusItem(this)" onblur="CheckItem(this)" placeholder="请确认密码"/><span>请确认密码!</span>
</p>
<p>
<b style="font-size:25px;">电 话:</b>
<input type="text" name="phone" size="25" class="fn" value="" onfocus="FocusItem(this)" onblur="CheckItem(this)" placeholder="请输入电话(6-11个字符)"/><span >请填写电话!</span>
</p>
</div>
<input type="submit" value="提交" style="font-size:18px;"/>
<input type="reset" value="重置" style="font-size:18px;"/>
<br>
<a href="loginchoose.jsp">返回登录首页</a><br>
</form>
</div>
</body>
</html>
这些就是第一个页面里三个连接的内容,这是大概的框架,功能还没有完全弄完,后面还有很多Java类文件。
如有意见,请指出,本人虚心听教。
持续更新中~~~~