java web是一门基于java的一个网页开发语言，在Java web里有jsp与java联合进行操作从而达到网页的实现，这种网页是有涉及到后端和数据库。
1.登陆界面代码：
点击查看代码
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8" import="java.util.*"%>
<!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>Insert title here</title>
<title>员工登录入口</title>
<meta http-equiv="pragma" content= "no-cache ">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0" >
<meta htp-equiv="keywords" content="keywordl,keyword2,keyword3">
<meta hup- equiv= "ecripipio" content= "This is my page">
<link rel="stylesheet" type="text/css" href="styles.css">
<style type="text/css">
body{
width: 1100px;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.div_01
{
background-color:LightSkyBlue;
border:2px solid #aaaaaa;
width: 1100px;
height: 100px;
font-size: 20pt;
line-height: 100%;
}
.div_02{
background-color:LightSkyBlue;
width: 1100px;
height:900px;
}
</style>
</head>
<body>
<div class="div_02">
<div class="div_01">
<h1>员工登录入口</h1>
</div>
<div class="div_02">
<form action="lmy-cl.jsp" method="post">
<br/><br/><br/>
账号:<input type="text" name="userName" placeholder="账号"><br/><br/>
密码:<input type="password" name="userPwd" placeholder="密码"><br/><br/>
<input type="submit" value="登录">
<input type="reset" value="重置"><br/>
</form>
</div>
</div>
</body>
</html>
2.账号和密码的判断：
点击查看代码
<%@ 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>Insert title here</title>
</head>
<body>
<%
String userName = request.getParameter("userName");
String userPwd = request.getParameter("userPwd");
if(userName==null || userPwd==null){
request.setAttribute(" message","账号或密码为空");
pageContext.forward("lmy-1.jsp");
}
else if( userName.equals("lmy") && userPwd.equals("123")){
session.setAttribute("userName",userName) ;
session.setAttribute("userPwd",userPwd);
pageContext.forward("user.jsp");
//response.sendRedirect(request.getContextPath()+"user.jsp");20和21两者都可以用;
}else{
//request.setAttribute(" message", "账号或密码错误");
pageContext.forward("lmy-1.jsp");
}
%>
</body>
</html>
3.主页面的代码：
点击查看代码
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8" import="java.util.*"%>
<!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>
<meta http-equiv="pragma" content="no-cache ">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0" >
<meta htp-equiv="keywords" content="keywordl,keyword2,keyword3">
<meta hup-equiv= "ecripipio" content= "This is my page">
<link rel="stylesheet" type="text/css" href="user-css.css">
</head>
<body>
<div class="quan">
<div class="div_01">
<h1 >员工之窗</h1>
</div>
<div class="div_02">
<span class="span_01">
<%= session.getAttribute("userName")%>
</span>,欢迎来到员工之窗。
<br/>
当前时间:<div id="span_02" onclick="time()"></div>
</div>
<div class="div_03">
<table border="1" cellspacing="0" align="center">
<tr>
<th id="th_01">文章编号</th>
<th id="th_01">文章类型</th>
<th id="th_01">标题</th>
<th id="th_01">作者</th>
<th id="th_01">发表日期</th>
</tr>
</table><br/>
<a href="${pageContext.request.contextPath}/lmy-tc.jsp">【发表文章】
</a>
<a href="${pageContext.request.contextPath}/lmy-1.jsp">【退出登录】
</a>
<a href="${pageContext.request.contextPath}/lmy-1.jsp">【返回首页】
</a>
</div>
</div>
<script type= "text/javascript" >
function time2(){
var date = new Date() ;
var time=(date.getFullYear()+"—"+(date.getMonth()+1)+"—"+date.getDate()+""+date.getHours()+":"+
date.getMinutes()+":"+date.getSeconds());
document.getElementById("span_02").innerHTML=time;
}
window.setInterval(time2(),1000);
</script>
</body>
</html>
3.1主页面的css样式：
点击查看代码
@charset "utf-8";
body{
width:1100px;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.div_01{
background-color:Aquamarine;
border:2px solid #aaaaaa;
width:1100px;
height:100px;
font-size:20pt;
line-height:100%;
}
.div_02{
text-align:left;
line-height:20pt;
padding-top:10px;
padding-bottom: 10px;
font-weight:bold;
border-bottom: solid #777777 2px;
}
.div_03{
padding-top:10px;
}
#th_01{
background-color:MediumTurquoise;
width:140px;
height:60px;
}
a{
font-family:宋体;
text-align:left;
text-decoration:underline;
TEXT-DECORATION:none;
}
.td_01{
text-align:center;
}
.span_01{
color:SkyBlue;
}
.td_02{
text-align:center;
}
#span_02{
width:200px;
height:20px;
background-color:Aquamarine;
}
.quan{
background-color:Cornsilk;
height:600px;
}
4.效果展示：
原创文章，作者：wure，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/274987.html