Experiment name
Running and debugging of simple jsp pages
Experiment content
1. Write a JSP web page that can print out the ninety-nine tables, requiring alignment and certain modifications.
2. Follow the example in the textbook and create a website counter on the login page and display it. Log in several times on different machines to experience the results.
Purpose
Master the basic syntax of jsp; master the use of page tags in JSP; master the use of forward action tags in JSP; master the use of include action tags in jsp.
Experimental requirements
1. The multiplication table is output and printed in the table
2. The page counter is implemented using include instructions and actions
Experimental steps (code , operation results)
experiment procedure
1. Ideation
2. Write code
3. See the results
4. Modify the areas you are not satisfied with
5. The final code and renderings are as follows:
counter
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>计数器</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%
int number =1;
//从session对象获取number
Object obj = session.getAttribute("number");
if(obj == null){
//设定session对象的变量的值
session.setAttribute("number",String.valueOf(number));
}
else {
//取得session对象中的number变量
number=Integer.parseInt(obj.toString());
//统计页面访问次数
number+=1;
//设定session对象的number变量值
session.setAttribute("number",String.valueOf(number));
}
%>
<br><br><br>
<br><br><br>
<div align="center">
您是第<%=number%>个用户访问本网站。
</div>
</body>
</html>
multiplication table
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>九九乘法表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
.top{
height: 50px;
margin: 1px auto;
position: relative;
}
.table{
line-height:40px; <%--单元格高--%>
top: 10px;
text-align: center;
}
div{
background-color: rgb(255, 192, 203); <%--头和底--%>
}
center{
background-color: pink;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="top">
<h2 align="center" class="biaoti">
九九乘法表
</h2>
</div>
<center class="center">
<%! int i,j,result; %>
<table align="center" class="table" >
<%
for(i=1;i<=9;i++){
%>
<tr>
<%
for(j=1;j<=i;j++){
result=i*j;
%>
<td bgcolor="rgb(248, 185, 195)">
<% out.println(j+"*"+i+"="+result+" "); %>
</td>
<%
}
%>
</tr>
<%
}
%>
</table>
</center>
<div class="bottom" align="right">
<table clsss="jsq">
<h3>
<jsp:include page="计数器.jsp"></jsp:include>
</h3>
</table>
</div>
</body>
</html>
Counter login interface
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>计数器登录界面</title>
<style type="text/css">
body{
background:pink;
}
.top{
margin:0;
padding:0px;
border: 0px;
}
.center{
margin:-260px;
padding:0px;
}
#login-box{
width:30%;
height:auto;
margin:0 auto ;
margin-top:13%;
text-align:center;
background:#00000060;
padding:20px 50px;
}
#login-box h1{
color:#fff;
}
#login-box .form .item{
margin-top:15px;
}
#login-box .form .item i{
font-size:18px;
color:#fff;
}
#login-box .form .item input{
width:180px; /* 首先将边界取消，方便下面修改下部边界宽度 */
font-size:18px;
border:0;
border-bottom:2px solid #fff;
padding:5px 10px;
}
button{
margin-top:20px;
width:190px;
height:30px;
font-size:20px;
font-weight:700;
color:#fff;
background-image: linear-gradient(tto right, #00dbde 0%, #fc00ff 100%); /* 为按钮增加渐变颜色 */
border:0;
border-radius:15px; /* 将按钮的左右边框设置为圆弧 */
}
</style>
</head>
<body bgcolor="pink">
<div>
<div class="top" align="center">
<jsp:include page="计数器.jsp"></jsp:include>
</div>
<h1 align="center">欢迎登录</h1>
<div class="center" style="background-color: rgb(248, 185, 195)">
<div id="login-box">
<h1>Login</h1>
<div class="form">
<div class="item">
<i class="Username" style="font-size:24px">Username</i>
<input type="text" placeholder="Username">
</div>
<div class="item">
<i class="Password" style="font-size:24px">Password</i>
<input type="password" placeholder="Password">
</div>
</div>
<a href="http://laptop-kfr338ff.mshome.net:8080/myFirstTest/jjcfb.jsp">
<button>
Login
</button>
</a>
</div>
</div>
</div>
</body>
</html>
renderings
initial state
Effect after refresh
The rest can be deduced like this
Experimental results
1. Implemented the simple design of the login interface;
2. Implemented the design of the counter [the counter is refreshed in< a i=3> or will be implemented every time when re-runningincrement by 1 effect, but when closesmyeclipsesoftware and opens it again, it will become < /span> 4. Implement the login interface to jump to the multiplication table when logging in. 3. Implemented the multiplication table using table tags and completed the layout; value];Initial
Experimental Note
It is best to use English for the jsp file names of the multiplication table and counter login interface. If you use Chinese, an error will be reported.