个人简历管理系统- 登陆与注册界面
HTML + CSS + JAvascript
-
推荐几个学习网站
菜鸟教程
w3school 在线教程 -
前端采用Bootstrap框架 具体请查看菜鸟教程Bootstrap4
-
注意离线演示的时候，可以效果不好，把Bootstrap4的源代码下载到本地，并修改网页的链接。
-
文件结构
login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%@include file="link.html" %>
<script type="text/javascript" defer="defer" >
function mycheck(){
if(isNull(form1.user.value)){
alert("请输入账号");
return false;
}
if(isNull(form1.pwd.value)){
alert("请输入密码");
return false;
}
return true;
}
function isNull(str){
if ( str == "" ) return true;
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
}
</script>
</head>
<c:if test="${not empty requestScope.message}">
<script>
alert("<c:out value="${requestScope.message}"></c:out>");
</script>
</c:if>
<body>
<div class="jumbotron text-center" style="margin-bottom:0px;color: red;" >
<h1>个人简历管理系统</h1>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">导航</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="login.jsp">登陆</a>
</li>
<li class="nav-item">
<a class="nav-link" href="register.jsp">注册</a>
</li>
</ul>
</div>
</nav>
<form id="form1" name="form1" method="post" action="login" onsubmit="return mycheck()">
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td height="27"> </td>
<td height="27" colspan="2" align="center"> </td>
<td> </td>
</tr>
<tr>
<td width="30%" height="37"> </td>
<td width="5%">用户名：</td>
<td width="31%">
<input type="text" name="user" id="user" value="">
</td>
<td width="9%"> </td>
</tr>
<tr>
<td height="37"> </td>
<td>密码：</td>
<td><input type="password" name="pwd" id="pwd" value=""></td>
<td> </td>
</tr>
<tr>
<td height="37"> </td>
<td>
<input name="submit" type="submit" class="btn_grey" value="登陆"></td>
<td><input name="submit3" type="reset" class="btn_grey" value="重置"></td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
register.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%@include file="link.html" %>
</head>
<script type="text/javascript" defer="defer" >
function mycheck(){
if(isNull(form1.user.value)){
alert("请输入账号");
return false;
}
if(isNull(form1.pwd1.value)){
alert("请输入密码");
return false;
}
if(isNull(form1.pwd2.value)){
alert("请再一次输入密码");
return false;
}
if(form1.pwd1.value!=form1.pwd2.value){
alert("你两次的密码不相同，请重新输入");
return false;
}
return true;
}
function isNull(str){
if ( str == "" ) return true;
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
}
</script>
<c:if test="${not empty requestScope.message}">
<script>
alert("<c:out value="${requestScope.message}"></c:out>");
</script>
</c:if>
<body>
<div class="jumbotron text-center" style="margin-bottom:0px;color: red;" >
<h1>个人简历管理系统</h1>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">导航</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="login.jsp">登陆</a>
</li>
<li class="nav-item">
<a class="nav-link" href="register.jsp">注册</a>
</li>
</ul>
</div>
</nav>
<form id="form1" name="form1" method="post" action="register" onsubmit="return mycheck()">
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td height="27"> </td>
<td height="27" colspan="2" align="center"> </td>
<td> </td>
</tr>
<tr>
<td width="30%" height="37"> </td>
<td width="5%">用户名：</td>
<td width="31%">
<input type="text" name="user" id="user" value="">
</td>
<td width="9%"> </td>
</tr>
<tr>
<td height="37"> </td>
<td>密码：</td>
<td><input type="password" name="pwd1" id="pwd1" value=""></td>
<td> </td>
</tr>
<tr>
<td height="37"> </td>
<td>重复密码：</td>
<td><input type="password" name="pwd2" id="pwd2" value=""></td>
<td> </td>
</tr>
<tr>
<td height="37"> </td>
<td>
<input name="submit" type="submit" class="btn_grey" value="注册"></td>
<td><input name="submit3" type="reset" class="btn_grey" value="重置"></td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
link.html
<title>个人简历管理系统</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
web.xml
修改网页访问的默认路径
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>resume</display-name>
<!-- 在web.xml中通过配置来告诉web应用，所有html文件输出时都采用UTF-8的编码 -->
<jsp-config>
<jsp-property-group>
<url-pattern>*.html</url-pattern>
<page-encoding>UTF-8</page-encoding>
</jsp-property-group>
</jsp-config>
<!-- 在web.xml中通过配置来告诉web应用，默认访问起始页 -->
<welcome-file-list>
<welcome-file>login.jsp</welcome-file>
</welcome-file-list>
</web-app>
扫一扫
3046
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
