2024.5.11
今天写了web的实验二 服务器端简单程序设计
1) 打开IntelliJ IDEA软件，新建一个名为Lab02的Web项目
2) 在Lab02中添加文件，编写代码。
3) check文件代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录验证</title>
</head>
<body>
<%
String username = request.getParameter("username");
String password = request.getParameter("password");
if(username.equals(password)) {
session.setAttribute("username", username);
out.println("<h1>登录成功！欢迎 " + username + "</h1>");
response.setHeader("refresh", "2;url=index.jsp");
} else {
out.println("<h1>登录失败！用户名和密码不匹配。</h1>");
response.setHeader("refresh", "2;url=login.jsp");
}
%>
</body>
</html>
4) index文件代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎访问这个网站</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-image: url('https://t10.baidu.com/it/u=1260489142,216589110&fm=30&app=106&f=JPEG?w=640&h=371&s=ED185A991D1178CC1CD808D70100C0B0'); /* 设置背景图片的路径 */
background-size: cover; /* 让背景图片铺满整个页面 */
margin: 0;
padding: 0;
}
h1 {
color: #333;
margin-top: 20px;
}
p {
color: #666;
}
a {
text-decoration: none;
color: #007bff;
}
ul {
list-style-type: none;
padding: 0;
display: inline-block;
text-align: left;
margin-top: 20px;
}
li {
margin: 5px 0;
}
</style>
</head>
<body>
<h1>欢迎访问这个网站</h1>
<%
String username = (String)session.getAttribute("username");
if(username != null) {
out.println("<p>当前用户：" + username + "</p>");
} else {
out.println("<p>当前用户：游客</p>");
}
%>
<ul>
<li><a href="item1.jsp">1.《静夜思》</a></li>
<li><a href="item2.jsp">2.《蜀道难》</a></li>
<li><a href="item3.jsp">3.《梦游天姥吟留别》</a></li>
</ul>
<p>还没有账户？您可以通过<a href="login.jsp">登录</a>来创建一个。</p>
</body>
</html>
5) item1文件代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>李白《静夜思》介绍</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-image: url('img.jpg');
background-size: cover;
background-position: center;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: rgba(255, 255, 255, 0.7); /* 添加透明度 */
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
.poem {
margin-top: 20px;
display: flex; /* 设置为flex容器 */
flex-direction: column; /* 垂直方向排列 */
justify-content: center; /* 水平方向居中 */
align-items: center; /* 垂直方向居中 */
}
.poem-title {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 10px; /* 添加一些底部间距 */
}
.poem-content {
font-size: 18px;
line-height: 1.6;
color: #555;
text-align: center; /* 文本居中 */
}
.translation {
margin-top: 20px;
font-size: 16px;
line-height: 1.6;
color: #777;
}
.translation-content {
text-align: center; /* 居中显示 */
}
.commentary {
margin-top: 20px;
font-size: 16px;
line-height: 1.6;
color: #777;
}
.background {
margin-top: 20px;
font-size: 16px;
line-height: 1.6;
color: #777;
}
.knowledge-nugget {
margin-top: 20px;
padding: 10px;
background-color: #f0f0f0;
border-radius: 8px;
}
.knowledge-nugget-title {
font-size: 18px;
font-weight: bold;
color: #333;
}
.knowledge-nugget-content {
margin-top: 10px;
font-size: 16px;
line-height: 1.6;
color: #555;
}
.back-to-home {
display: block;
text-align: center;
margin-top: 20px;
text-decoration: none;
color: #007bff;
}
</style>
</head>
<body>
<div class="container">
<div class="poem">
<div class="poem-title">念奴娇赤壁怀古</div>
<div class="poem-content">
大江东去，浪淘尽，千古风流人物。<br>
故垒西边，人道是，三国周郎赤壁。<br>
乱石穿空，惊涛拍岸，卷起千堆雪。<br>
江山如画，一时多少豪杰。<br>
<br>
遥想公瑾当年，小乔初嫁了，雄姿英发。<br>
羽扇纶巾，谈笑间，樯橹灰飞烟灭。<br>
故国神游，多情应笑我，早生华发。<br>
人生如梦，一尊还酹江月。<br>
</div>
<div class="background">
<div class="background-title">背景：</div>
<div class="background-content">
苏轼是北宋著名文学家、书法家、画家，历史治水名人。
</div>
</div>
<div class="knowledge-nugget">
<div class="knowledge-nugget-title">知识锦囊：</div>
<div class="knowledge-nugget-content">
苏轼文纵横恣肆；诗题材广阔，清新豪健，善用夸张比喻，独具风格，与黄庭坚并称“苏黄”；词开豪放一派，与辛弃疾同是豪放派代表，并称“苏辛”；散文著述宏富，豪放自如，与欧阳修并称“欧苏”，为“唐宋八大家”之一。
</div>
</div>
<a href="index.jsp" class="back-to-home">回到首页</a>
</div>
</div>
</body>
</html>
6) item2文件代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>梦游天姥吟留别</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-image: url('img.jpg');
background-size: cover;
background-position: center;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: rgba(255, 255, 255, 0.7); /* 添加透明度 */
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
.poem {
margin-top: 20px;
display: flex; /* 设置为flex容器 */
flex-direction: column; /* 垂直方向排列 */
justify-content: center; /* 水平方向居中 */
align-items: center; /* 垂直方向居中 */
}
.poem-title {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 10px; /* 添加一些底部间距 */
}
.poem-content {
font-size: 18px;
line-height: 1.6;
color: #555;
text-align: center; /* 文本居中 */
}
.background {
margin-top: 20px;
font-size: 16px;
line-height: 1.6;
color: #777;
}
.knowledge-nugget {
margin-top: 20px;
padding: 10px;
background-color: #f0f0f0;
border-radius: 8px;
}
.knowledge-nugget-title {
font-size: 18px;
font-weight: bold;
color: #333;
}
.knowledge-nugget-content {
margin-top: 10px;
font-size: 16px;
line-height: 1.6;
color: #555;
}
.back-to-home {
display: block;
text-align: center;
margin-top: 20px;
text-decoration: none;
color: #007bff;
}
</style>
</head>
<body>
<div class="container">
<div class="poem">
<div class="poem-title">梦游天姥吟留别</div>
<div class="poem-content">
海客谈瀛洲，烟涛微茫信难求。<br>
越人语天姥，云霓明灭或可睹。<br>
天姥连天向天横，势拔五岳掩赤城。<br>
天台四万八千丈，对此欲倒东南倾。<br>
我欲因之梦吴越，一夜飞度镜湖月。<br>
湖月照我影，送我至剡溪。<br>
谢公宿处今尚在，渌水荡漾清猿啼。<br>
脚著谢公屐，身登青云梯。<br>
半壁见海日，空中闻天鸡。<br>
千岩万转路不定，迷花倚石忽已暝。<br>
熊咆龙吟殷岩泉，栗深林兮惊层巅。<br>
云青青兮欲雨，水澹澹兮生烟。<br>
列缺霹雳，丘峦崩摧。洞天石扉，訇然中开。<br>
青冥浩荡不见底，日月照耀金银台。<br>
霓为衣兮风为马，云之君兮纷纷而来下。<br>
虎鼓瑟兮鸾回车，仙之人兮列如麻。<br>
忽魂悸以魄动，恍惊起而长嗟。<br>
惟觉时之枕席，失向来之烟霞。<br>
世间行乐亦如此，古来万事东流水。<br>
别君去时何时还，且放白鹿青崖间，<br>
须行即骑访名山。安能摧眉折腰事权贵，<br>
使我不得开心颜。<br>
</div>
</div>
<div class="background">
<div class="background-title">背景：</div>
<div class="background-content">
李白是中国唐代杰出的浪漫主义诗人，他的诗作以豪放奔放、豪情激昂而著称。《梦游天姥吟留别》是他的代表作之一，描写了诗人在梦中游览天姥山，感叹大自然的壮美和人生的短暂。
</div>
</div>
<div class="knowledge-nugget">
<div class="knowledge-nugget-title">知识锦囊：</div>
<div class="knowledge-nugget-content">
李白被誉为“诗仙”，他的诗歌充满了对自然、对生命、对人生的热爱和向往。
</div>
</div>
<a href="index.jsp" class="back-to-home">回到首页</a>
</div>
</body>
</html>
7) item3文件代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-image: url('img.jpg');
background-size: cover;
background-position: center;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: rgba(255, 255, 255, 0.7); /* 添加透明度 */
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
.poem {
margin-top: 20px;
display: flex; /* 设置为flex容器 */
flex-direction: column; /* 垂直方向排列 */
justify-content: center; /* 水平方向居中 */
align-items: center; /* 垂直方向居中 */
}
.poem-title {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 10px; /* 添加一些底部间距 */
}
.poem-content {
font-size: 18px;
line-height: 1.6;
color: #555;
text-align: center; /* 文本居中 */
}
.background {
margin-top: 20px;
font-size: 16px;
line-height: 1.6;
color: #777;
}
.knowledge-nugget {
margin-top: 20px;
padding: 10px;
background-color: #f0f0f0;
border-radius: 8px;
}
.knowledge-nugget-title {
font-size: 18px;
font-weight: bold;
color: #333;
}
.knowledge-nugget-content {
margin-top: 10px;
font-size: 16px;
line-height: 1.6;
color: #555;
}
.back-to-home {
display: block;
text-align: center;
margin-top: 20px;
text-decoration: none;
color: #007bff;
}
</style>
</head>
<body>
<div class="container">
<div class="poem">
<div class="poem-title">蜀道难</div>
<div class="poem-content">
蜀道之难，难于上青天。<br>
蠶叢及魚鳧，開國何茫然！<br>
今天下爲客，歸去來兮。<br>
豈敢與君言，蜀道之難，難於上青天！
</div>
</div>
<div class="background">
<div class="background-title">背景：</div>
<div class="background-content">
李白是中国唐代著名诗人，他的诗作以豪放激昂、写实、感情真挚而著称。《蜀道难》是他的代表作之一，描写了古代蜀道险峻的自然环境和人们艰难的生活境遇。
</div>
</div>
<div class="knowledge-nugget">
<div class="knowledge-nugget-title">知识锦囊：</div>
<div class="knowledge-nugget-content">
李白是中国古代文学史上杰出的浪漫主义诗人之一，他的诗歌多以抒发个人情感、抒发对自然景物的感悟为主题。
</div>
</div>
<a href="index.jsp" class="back-to-home">回到首页</a>
</div>
</body>
</html>
8) login文件代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<h1>登录</h1>
<form action="check.jsp" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="登录">
</form>
</body>
</html>
浙公网安备 33010602011771号