利用Javaweb(jsp)做一个具有登录注册查询等功能的系统网页(二)

10 篇文章 5 订阅
6 篇文章 1 订阅

上篇文章展示了大体思路,这回就大概讲讲实现过程。
首先,先把数据给设计好。根据我的需要,我设计了两个表,一个是存学生信息的表,一个是学生成绩的表。根据自己的需求设计表格,如下:
表名
student_user

名称类型NULL注释
User_idvarchar(16)not null用户账号//主键
User_namevarchar(16)not null用户姓名
User_passwordvarchar(16)not null用户密码
User_sexvarchar(2)not null用户性别
User_phonevarchar(11)not null用户手机号

表名:
Grade

名称类型NULL注释
User_idvarchar(16)not null用户账号//主键
User_namevarchar(16)not null用户姓名
User_javavarchar(3)default nulljava成绩
User_Cvarchar(3)default nullC语言成绩
User_webvarchar(3)default nullweb成绩
User_pythonvarchar(3)default nullpython成绩
User_SQLvarchar(3)default nullSql成绩

这个是我所需要用到的表:
在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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" value="登录" style="font-size:18px;"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="重置" style="font-size:18px;"/>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</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;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</b>
<input type="radio" value="xy" name="sex" checked="checked"/><input type="radio" value="xx" name="sex" /></p>
<p>
<b style="font-size:25px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</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;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</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;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</b>
<input type="text" name="phone" size="25" class="fn" value="" onfocus="FocusItem(this)" onblur="CheckItem(this)" placeholder="请输入电话(6-11个字符)"/><span >请填写电话!</span>
</p>
</div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" value="提交" style="font-size:18px;"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="重置" style="font-size:18px;"/>
<br>
<a href="loginchoose.jsp">返回登录首页</a><br>
</form>
</div>
</body>
</html>

这些就是第一个页面里三个连接的内容,这是大概的框架,功能还没有完全弄完,后面还有很多Java类文件。

如有意见,请指出,本人虚心听教。
持续更新中~~~~

  • 4
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值