Web应用技术第二次作业
一、复现上课的注册登录案例。
1.源代码：https://blog.csdn.net/wyhwust/article/details/160214781?fromshare=blogdetail&sharetype=blogdetail&sharerId=160214781&sharerefer=PC&sharesource=zaleya12&sharefrom=from_link
2.复现结果
二、设计自己的网站前端，并完成这个网站的注册登录功能。
1.首页
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!DOCTYPE html> <html> <head> <title>我的日记屋 - 记录生活 & 分享心情</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; } body { background-image:url(shouyebeijing.jpg); background-size: cover; background-attachment: fixed; padding: 30px 20px; text-align: center; } .title { font-size: 28px; color: #444; margin-bottom: 10px; } .desc { color: #777; margin-bottom: 30px; } .links { margin: 20px auto; padding: 15px 20px; background: white; display: inline-block; border-radius: 10px; box-shadow: 0 0 8px rgba(0,0,0,0.08); } .links a { margin: 0 10px; text-decoration: none; color: #409eff; font-size: 15px; } .links a:hover { color: #2b8dff; } .welcome { margin: 20px 0; font-size: 18px; color: #333; } </style> </head> <body> <h1 class="title">📔 我的日记屋</h1> <p class="desc">记录自己的生活 · 分享大家的心情</p> <%-- 登录判断 --%> <% String loginUser = (String) session.getAttribute("loginUser"); if (loginUser != null) { %> <div class="welcome"> 欢迎你，<%= loginUser %> ✨ </div> <% } %> <%-- 导航链接 --%> <div class="links"> <a href="index.jsp">首页</a> <a href="login.jsp">登录</a> <a href="zhuce.jsp">注册</a> <%-- 有权限：必须登录才能进 --%> <a href="myDiary.jsp">我的日记</a> <%-- 无权限：所有人都能看 --%> <a href="publicDiary.jsp">公开日志</a> <a href="logout.jsp">退出登录</a> </div> <br><br> <h2>网站介绍</h2> <br> <p>✅ 我的日记：只有登录后才能查看，属于你的私人空间</p> <p>✅ 公开日志：所有人都能浏览，分享心情、互相交流</p> <p>✅ 注册账号 → 登录 → 开始记录你的生活</p> </body> </html>2.注册页
zhuce.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>日记屋 - 账号注册</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft Yahei", Arial, sans-serif; } body { background-image: url("shouyebeijing.jpg"); background-size: cover; background-attachment: fixed; min-height: 100vh; display: flex; justify-content: center; align-items: center; } .register-box { width: 450px; padding: 35px; background: rgba(255, 255, 255, 0.88); border-radius: 12px; box-shadow: 0 0 15px rgba(0,0,0,0.1); } h2 { text-align: center; color: #333; margin-bottom: 25px; } .item { margin-bottom: 18px; } label { display: inline-block; width: 80px; color: #555; font-size: 15px; } input[type="text"], input[type="password"], input[type="number"] { width: 280px; height: 38px; padding: 0 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; } .radio-group, .checkbox-group { display: inline-block; } .btn-box { text-align: center; margin-top: 25px; } button { width: 160px; height: 40px; background-color: #67c23a; color: #fff; border: none; border-radius: 6px; font-size: 15px; cursor: pointer; } button:hover { background-color: #56b028; } .back-link { text-align: center; margin-top: 20px; } .back-link a { color: #409eff; text-decoration: none; } </style> </head> <body> <div class="register-box"> <h2>注册专属日记账号</h2> <%-- 注册表单，提交到注册处理页 --%> <form action="zhuceCkeck.jsp" method="post"> <div class="item"> <label>用户名：</label> <input type="text" name="nickname" placeholder="请输入用户名" required> </div> <div class="item"> <label>登录密码：</label> <input type="password" name="pwd" placeholder="请设置登录密码" required> </div> <div class="item"> <label>性别：</label> <div class="radio-group"> <input type="radio" name="gender" value="男"> 男 <input type="radio" name="gender" value="女"> 女 </div> </div> <div class="item"> <label>年龄：</label> <input type="number" name="age" placeholder="请输入年龄" min="1" max="120" required> </div> <div class="item"> <label>MBTI：</label> <div class="checkbox-group"> <input type="text" name="mbti" > </div> </div> <div class="btn-box"> <button type="submit">完成注册</button> </div> </form> <div class="back-link"> <a href="login.jsp">已有账号？前往登录</a> | <a href="index.jsp">返回首页</a> </div> </div> </body> </html>zhuceCkeck.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page import="java.util.Arrays" %> <% request.setCharacterEncoding("UTF-8"); %> <html> <head> <title>注册成功</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft Yahei", Arial, sans-serif; } body { background-image: url("shouyebeijing.jpg"); background-size: cover; background-attachment: fixed; min-height: 100vh; padding-top: 80px; text-align: center; } .content { background: rgba(255,255,255,0.88); display: inline-block; padding: 40px; border-radius: 10px; } p { margin: 12px 0; font-size: 16px; color: #333; } a { display: inline-block; margin-top: 20px; color: #409eff; text-decoration: none; } </style> </head> <body> <div class="content"> <h2>🎉 恭喜你，日记账号注册成功！</h2> <% // 获取表单提交数据 String nickname = request.getParameter("nickname"); String pwd = request.getParameter("pwd"); String gender = request.getParameter("gender"); String age = request.getParameter("age"); String mbti= request.getParameter("mbti"); %> <p>昵称：<%= nickname %></p> <p>登录密码：<%= pwd %></p> <p>性别：<%= gender %></p> <p>年龄：<%= age %></p> <p>MBTI:<%= mbti %></p> <a href="login.jsp">现在去登录写日记</a> <br> <a href="index.jsp">返回首页</a> </div> </body> </html>页面展示
3.登录页
login.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>日记屋 - 用户登录</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft Yahei", Arial, sans-serif; } body { background-image: url("shouyebeijing.jpg"); background-size: cover; background-attachment: fixed; min-height: 100vh; display: flex; justify-content: center; align-items: center; } .login-box { width: 400px; padding: 35px; background: rgba(255, 255, 255, 0.88); border-radius: 12px; box-shadow: 0 0 15px rgba(0,0,0,0.1); } h2 { text-align: center; color: #333; margin-bottom: 25px; } .item { margin-bottom: 18px; } label { display: inline-block; width: 80px; color: #555; font-size: 15px; } input[type="text"], input[type="password"] { width: 250px; height: 38px; padding: 0 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; } .btn-box { text-align: center; margin-top: 25px; } button { width: 140px; height: 40px; background-color: #409eff; color: #fff; border: none; border-radius: 6px; font-size: 15px; cursor: pointer; } button:hover { background-color: #337ecc; } .back-link { text-align: center; margin-top: 20px; } .back-link a { color: #409eff; text-decoration: none; font-size: 14px; } </style> </head> <body> <div class="login-box"> <h2>登录你的日记账号</h2> <form action="loginCheck.jsp" method="post"> <div class="item"> <label>用户名：</label> <input type="text" name="username" placeholder="请输入用户名" required> </div> <div class="item"> <label>密码：</label> <input type="password" name="pwd" placeholder="请输入密码" required> </div> <div class="btn-box"> <button type="submit">登录</button> </div> </form> <div class="back-link"> <a href="zhuce.jsp">没有账号？立即注册</a> | <a href="index.jsp">返回首页</a> </div> </div> </body> </html>loginCheck.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>登录结果</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft Yahei", Arial, sans-serif; } body { background-image: url("shouyebeijing.jpg"); background-size: cover; background-attachment: fixed; min-height: 100vh; padding-top: 80px; text-align: center; } .content { background: rgba(255,255,255,0.88); display: inline-block; padding: 40px; border-radius: 10px; } p { margin: 12px 0; font-size: 16px; color: #333; } a { display: inline-block; margin-top: 20px; color: #409eff; text-decoration: none; } </style> </head> <body> <div class="content"> <% String username = request.getParameter("username"); String pwd = request.getParameter("pwd"); if ("zaleya".equals(username)) { session.setAttribute("username", username); %> <h2>✅ 登录成功！</h2> <p>欢迎回来，<%= username %>！</p> <a href="index.jsp">返回首页</a> <br> <a href="myDiary.jsp">进入我的日记</a> <% } else { %> <h2>❌ 登录失败！</h2> <p>用户名错误，请重新输入。</p> <a href="login.jsp">返回登录页</a> <% } %> </div> </body> </html>页面展示