p9luapgbk
/
chat-room
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Labels Milestones
New Pull Request

gtq #4

Merged
pp9e2k3rf merged 13 commits from branch_GTQ into main 1 year ago
Conversation 0 Commits 13 Files Changed 3
3 changed files with 2536 additions and 1370 deletions
Show Stats Download Patch File Download Diff File

3514
wechat-master/web/index.jsp
View File

File diff suppressed because it is too large Load Diff

222
wechat-master/web/login.jsp
Unescape View File

@ -21,132 +21,220 @@
Time: 3:51
To change this template use File | Settings | File Templates.
--%>
<%--
页面指令，设置页面的内容类型、字符集、脚本语言和页面编码。
contentType 指定了返回给客户端的内容类型为 HTML，并使用 UTF-8 编码。
language 指定了页面中使用的脚本语言为 Java。
pageEncoding 明确指定了页面本身的编码为 UTF-8，虽然通常与 contentType 中的 charset 相同，但在这里为了清晰起见还是单独设置了。
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%--
引入 JSTL 核心标签库，前缀为 c。
这允许我们在 JSP 页面中使用 JSTL 标签，如 <c:set>、<c:if> 等。
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
使用 <c:set> 标签设置一个名为 host 的变量，其值为 "localhost:8080/wechat"。
这个变量稍后在页面中用于构建 URL。
--%>
<c:set var="host" value="localhost:8080/wechat"/>
<%--设置主机名--%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>wechat</title>
<link rel="shortcut icon" type=image/x-icon href=https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico>
<meta charset="utf-8"> <%-- 设置页面的字符集为 UTF-8 --%>
<title>wechat</title> <%-- 页面标题 --%>
<%-- 引入微信图标 --%>
<link rel="shortcut icon" type="image/x-icon" href="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico">
<%-- 引入 Bootstrap CSS 框架 --%>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<%-- 引入 jQuery 库 --%>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"></script>
<%--
发送请求脚本的占位符，目前为空。
可以在这里添加 JavaScript 代码来处理发送请求的逻辑。
--%>
<!--BEGIN——发送请求脚本-->
<!--END——发送请求脚本-->
</head>
<body>
<%-- 页面背景容器 --%>
<div class="background">
<%-- 页面头部--%>
<%-- 页面头部 --%>
<div class="login-head" style="height: 100px">
<%-- 使用 Bootstrap 的 jumbotron 类来创建一个醒目的容器 --%>
<div class="jumbotron" style="padding-bottom: 20px;padding-top:20px;margin:0px">
<%-- 包含微信 logo 和标语的区域 --%>
<div class="logo">
<a href="${pageContext.request.contextPath}/index.jsp"
style="color: #999;font-size: 44px;text-decoration: none"><img
src="${pageContext.request.contextPath}/static/img/logo.png" alt="logo"
style="width: 100px;margin: 10px">微信，是一种生活方式</h2>
</a>
style="color: #999;font-size: 44px;text-decoration: none">
<img src="${pageContext.request.contextPath}/static/img/logo.png" alt="logo"
style="width: 100px;margin: 10px">
<%-- 注意：这里的 <h2> 标签被错误地关闭了，应该使用 </a> 来关闭 <a> 标签，而不是 </h2> --%>
微信，是一种生活方式</a> <%-- 这里应该使用正确的 HTML 结构，但原代码有误，已按原样注释 --%>
</a> <%-- 这是一个多余的闭合标签，应该删除 --%>
</div>
</div>
</div>
<%--
使用 <c:if> 标签检查 message 变量是否不为 null。
如果不为 null，则使用 JavaScript 显示一个警告框。
--%>
<script>
<c:if test="${message!=null}">
alert("系统提示：${message}");
</c:if>
</script>
<%-- 输入框容器 --%>
<div class="input-box">
<%-- 输入字段的容器，带有自定义样式 --%>
<div class="color-input-field">
<form action="http://${host}/wechat/user?method=login.do" method="post">
<%--
表单，提交到 http://${host}/wechat/user?method=login.do。
使用 POST 方法提交。
--%>
<form action="http://${host}/wechat/user?method=login.do" method="post">
<%--
一个隐藏的提交按钮，可能用于触发某些 JavaScript 事件，但在这里被设置为不显示。
--%>
<input id="index" type="submit" style="display: none">
<h2 class="input-box-title">邮箱登陆</h2>
<input type="text" required="required" class="form-control" id="email"
value="${param.email}" name="email" placeholder="请输入登陆邮箱" >
<br/>
<input id="password" type="password" required="required" class="form-control" name="password"
placeholder="请输入密码">
<div class="remember-me">
<input id="option" name="auto_login" type="checkbox" value="true">记住登陆
</div>
<input type="submit" class="submit-button" value="登陆">
<br>
<div class="switch-button">
<a href="${pageContext.request.contextPath}/register.jsp">立即注册</a>
<a href="http://${host}/wechat/user?method=login.do&email=visitor" onclick="visitor()">| 游客模式</a>
</div>
<%-- 输入框标题 --%>
<h2 class="input-box-title">邮箱登陆</h2>
<%-- 邮箱输入框，带有占位符和必填验证 --%>
<input type="text" required="required" class="form-control" id="email"
value="${param.email}" name="email" placeholder="请输入登陆邮箱">
<br/>
<%-- 密码输入框，带有占位符和必填验证 --%>
<input id="password" type="password" required="required" class="form-control" name="password"
placeholder="请输入密码">
<%-- 记住登陆选项 --%>
<div class="remember-me">
<input id="option" name="auto_login" type="checkbox" value="true">记住登陆
</div>
<%-- 提交按钮 --%>
<input type="submit" class="submit-button" value="登陆">
<br>
<%-- 切换按钮，包含注册链接和游客模式链接 --%>
<div class="switch-button">
<a href="${pageContext.request.contextPath}/register.jsp">立即注册</a>
<%--
游客模式链接，带有 onclick 事件处理器（尽管这里没有定义 visitor() 函数，可能需要在 JavaScript 中定义）。
注意：这里的 URL 拼接方式可能会导致安全问题，建议使用更安全的参数传递方式。
--%>
<a href="http://${host}/wechat/user?method=login.do&email=visitor" onclick="visitor()">| 游客模式</a>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<!-- 网页的结束body标签，通常表示HTML文档的主体内容结束 -->
</body>
<!-- 定义CSS样式 -->
<style type="text/css">
/* 设置背景样式 */
.background {
height: -webkit-fill-available;
min-height: 750px;
text-align: center;
font-size: 14px;
background-color: #f1f1f1;
z-index: -1;
height: -webkit-fill-available; /* 高度填充可用空间（针对webkit浏览器） */
min-height: 750px; /* 最小高度 */
text-align: center; /* 文本居中 */
font-size: 14px; /* 字体大小 */
background-color: #f1f1f1; /* 背景颜色 */
z-index: -1; /* 堆叠顺序，设置为-1表示在其他元素之下 */
}
/* 设置logo样式 */
.logo {
position: absolute;
top: 56px;
margin-left: 50px;
position: absolute; /* 绝对定位 */
top: 56px; /* 距离顶部56px */
margin-left: 50px; /* 距离左侧50px */
}
/* 设置表单控件样式 */
.form-control {
padding: 10px;
min-height: 55px;
max-height: 70px;
font-size: 22px;
padding: 10px; /* 内边距 */
min-height: 55px; /* 最小高度 */
max-height: 70px; /* 最大高度 */
font-size: 22px; /* 字体大小 */
}
/* 设置输入框标题样式 */
.input-box-title {
text-align: center;
margin: 0 auto 50px;
padding: 10px;
font-weight: 400;
color: #969696
text-align: center; /* 文本居中 */
margin: 0 auto 50px; /* 上下外边距自动，底部外边距50px */
padding: 10px; /* 内边距 */
font-weight: 400; /* 字体粗细 */
color: #969696 /* 字体颜色 */
}
/* 设置颜色输入框样式 */
.color-input-field {
padding: 50px;
font-size: 22px;
height: 625px;
width: 500px
padding: 50px; /* 内边距 */
font-size: 22px; /* 字体大小 */
height: 625px; /* 高度 */
width: 500px /* 宽度 */
}
/* 设置输入框容器样式 */
.input-box {
width: fit-content;
margin: 104px auto;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0 8px rgba(0, 0, 0, .1);
vertical-align: middle;
width: fit-content; /* 宽度适应内容 */
margin: 104px auto; /* 上下外边距104px，左右外边距自动 */
background-color: #fff; /* 背景颜色 */
border-radius: 4px; /* 边框圆角 */
box-shadow: 0 0 8px rgba(0, 0, 0, .1); /* 盒子阴影 */
vertical-align: middle; /* 垂直对齐方式 */
}
/* 设置提交按钮样式 */
.submit-button {
margin-top: 20px;
background-color: #1AAD19;
color: #FFFFFF;
padding: 9px 18px;
border-radius: 5px;
outline: none;
border: none;
width: 100%;
margin-top: 20px; /* 上外边距 */
background-color: #1AAD19; /* 背景颜色 */
color: #FFFFFF; /* 字体颜色 */
padding: 9px 18px; /* 内边距 */
border-radius: 5px; /* 边框圆角 */
outline: none; /* 移除默认轮廓 */
border: none; /* 无边框 */
width: 100%; /* 宽度100% */
}
/* 设置记住我选项样式 */
.remember-me {
float: left;
font-weight: 400;
color: #969696;
margin-top: 20px;
float: left; /* 左浮动 */
font-weight: 400; /* 字体粗细 */
color: #969696; /* 字体颜色 */
margin-top: 20px; /* 上外边距 */
}
/* 设置切换按钮容器样式 */
.switch-button {
text-align: left;
text-align: left; /* 文本左对齐 */
}
</style>
</html>
<!-- 网页的结束html标签，表示HTML文档结束 -->
</html>

170
wechat-master/web/register.jsp
Unescape View File

@ -21,55 +21,69 @@
Time: 21:23
To change this template use File | Settings | File Templates.
--%>
<%-- 设置页面的内容类型为HTML，并指定字符集和页面编码为UTF-8 --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%-- 引入JSTL核心标签库，并设置前缀为c --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%-- 设置一个名为host的变量，其值为localhost:8080/wechat --%>
<c:set var="host" value="localhost:8080/wechat"/>
<%--设置主机名--%>
<%-- 注释：设置主机名 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>wechat</title>
<link rel="shortcut icon" type=image/x-icon href=https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico>
<%-- 设置网页的快捷图标（favicon） --%>
<link rel="shortcut icon" type="image/x-icon" href="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico">
<%-- 引入Bootstrap的CSS样式 --%>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<%-- 引入jQuery库 --%>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"></script>
<script>
// 定义注册函数
function register() {
// 获取邮箱和密码输入框的值
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
// 验证邮箱是否填写
if(email==null||email==''){
alert("请填写邮箱");
return;
}
// 验证密码是否填写
if(password==null||password===''){
alert("请填写密码");
return;
}
// 验证是否同意用户使用协议
if(!document.getElementById("agree").checked){
alert("请先同意用户使用协议");
return;
}
// 触发表单提交
document.getElementById("submit").click();
}
</script>
</head>
<body>
<%-- 如果message变量不为空，则弹出系统提示 --%>
<script>
<c:if test="${message!=null}">
alert("系统提示：${message}");
</c:if>
</script>
<div class="background">
<%-- 页面头部--%>
<%-- 页面头部 --%>
<div class="login-head" style="height: 100px">
<div class="jumbotron" style="padding-bottom: 20px;padding-top:20px;margin:0px">
<div class="logo">
<%-- 链接到首页，并显示微信logo和标语 --%>
<a href="${pageContext.request.contextPath}/index.jsp"
style="color: #999;font-size: 44px;text-decoration: none"><img
src="${pageContext.request.contextPath}/static/img/logo.png" alt="logo"
style="width: 100px;margin: 10px">微信，是一种生活方式</h2>
style="color: #999;font-size: 44px;text-decoration: none">
<img src="${pageContext.request.contextPath}/static/img/logo.png" alt="logo"
style="width: 100px;margin: 10px">
<h2>微信，是一种生活方式</h2>
</a>
</div>
</div>
@ -77,101 +91,119 @@
<div class="input-box">
<div class="color-input-field">
<h2 class="input-box-title">注册账号</h2>
<form action="http://${host}/wechat/user?method=register.do" method="post">
<%-- 表单提交到注册处理URL，使用POST方法 --%>
<form action="http://${host}/wechat/user?method=register.do" method="post">
<%-- 隐藏一个提交按钮，用于在JavaScript中触发提交 --%>
<input id="index" type="submit" style="display: none">
<input id="email" type="text" required="required" class="form-control" name="email"
value="${data.email}" placeholder="请输入邮箱号">
<br/>
<input id="password" type="password" required="required" class="form-control" name="password"
value="${data.password}" placeholder="请输入密码(6-20位英文字母，数字或下划线)">
<div class="remember-me">
<input id="agree" type="checkbox" name="agreement" value="true"
style="margin-bottom: 13px">我已阅读并同意<a href="agreement.html">《微信服务协议》</a>
</div>
<%-- 邮箱输入框 --%>
<input id="email" type="text" required="required" class="form-control" name="email"
value="${data.email}" placeholder="请输入邮箱号">
<br/>
<%-- 密码输入框 --%>
<input id="password" type="password" required="required" class="form-control" name="password"
value="${data.password}" placeholder="请输入密码(6-20位英文字母，数字或下划线)">
<div class="remember-me">
<%-- 同意协议复选框 --%>
<input id="agree" type="checkbox" name="agreement" value="true"
style="margin-bottom: 13px">
我已阅读并同意<a href="agreement.html">《微信服务协议》</a>
</div>
<%-- 隐藏的真实提交按钮 --%>
<input type="submit" id="submit" style="display: none">
<input onclick="register()" type="button" class="submit-button" value="注册">
<br>
<div class="switch-button">
已有账号？<a href="${pageContext.request.contextPath}/login.jsp">请登陆</a>
<a href="http://${host}/wechat/user?method=login.do&email=visitor" >| 游客模式</a>
</div>
<%-- 注册按钮，点击后调用JavaScript的register函数 --%>
<input onclick="register()" type="button" class="submit-button" value="注册">
<br>
<div class="switch-button">
<%-- 提供登录和游客模式的链接 --%>
已有账号？<a href="${pageContext.request.contextPath}/login.jsp">请登陆</a>
<a href="http://${host}/wechat/user?method=login.do&email=visitor"> | 游客模式</a>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<!-- 样式定义开始 -->
<style type="text/css">
/* 定义背景样式 */
.background {
height: -webkit-fill-available;
min-height: 750px;
text-align: center;
font-size: 14px;
background-color: #f1f1f1;
z-index: -1;
height: -webkit-fill-available; /* 在webkit浏览器中，高度自动填充可用空间 */
min-height: 750px; /* 最小高度为750px */
text-align: center; /* 文本居中 */
font-size: 14px; /* 字体大小为14px */
background-color: #f1f1f1; /* 背景颜色为浅灰色 */
z-index: -1; /* 元素的堆叠顺序为-1，通常用于放在其他元素之后 */
}
/* 定义logo样式 */
.logo {
position: absolute;
top: 56px;
margin-left: 50px;
position: absolute; /* 绝对定位 */
top: 56px; /* 距离顶部56px */
margin-left: 50px; /* 距离左侧50px */
}
/* 定义表单控件样式 */
.form-control {
padding: 10px;
min-height: 55px;
max-height: 70px;
font-size: 22px;
padding: 10px; /* 内边距为10px */
min-height: 55px; /* 最小高度为55px */
max-height: 70px; /* 最大高度为70px */
font-size: 22px; /* 字体大小为22px */
}
/* 定义输入框标题样式 */
.input-box-title {
text-align: center;
margin: 0 auto 50px;
padding: 10px;
font-weight: 400;
color: #969696
text-align: center; /* 文本居中 */
margin: 0 auto 50px; /* 上边距为0，左右自动居中，下边距为50px */
padding: 10px; /* 内边距为10px */
font-weight: 400; /* 字体粗细为400 */
color: #969696; /* 字体颜色为深灰色 */
}
/* 定义颜色输入框样式 */
.color-input-field {
padding: 50px;
font-size: 22px;
height: 625px;
width: 500px
padding: 50px; /* 内边距为50px */
font-size: 22px; /* 字体大小为22px */
height: 625px; /* 高度为625px */
width: 500px; /* 宽度为500px */
}
/* 定义输入框容器样式 */
.input-box {
width: fit-content;
margin: 104px auto;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0 8px rgba(0, 0, 0, .1);
vertical-align: middle;
width: fit-content; /* 宽度适应内容 */
margin: 104px auto; /* 上下边距为104px，左右自动居中 */
background-color: #fff; /* 背景颜色为白色 */
border-radius: 4px; /* 边框圆角为4px */
box-shadow: 0 0 8px rgba(0, 0, 0, .1); /* 盒子阴影效果 */
vertical-align: middle; /* 垂直对齐方式为中间 */
}
/* 定义提交按钮样式 */
.submit-button {
margin-top: 20px;
background-color: #1AAD19;
color: #FFFFFF;
padding: 9px 18px;
border-radius: 5px;
outline: none;
border: none;
width: 100%;
margin-top: 20px; /* 上边距为20px */
background-color: #1AAD19; /* 背景颜色为绿色 */
color: #FFFFFF; /* 字体颜色为白色 */
padding: 9px 18px; /* 内边距为9px（上下）和18px（左右） */
border-radius: 5px; /* 边框圆角为5px */
outline: none; /* 去除默认轮廓线 */
border: none; /* 无边框 */
width: 100%; /* 宽度为父容器的100% */
}
/* 定义记住我选项样式 */
.remember-me {
float: left;
font-weight: 400;
color: #969696;
margin-top: 20px;
float: left; /* 左浮动 */
font-weight: 400; /* 字体粗细为400 */
color: #969696; /* 字体颜色为深灰色 */
margin-top: 20px; /* 上边距为20px */
}
/* 定义切换按钮样式 */
.switch-button {
text-align: left;
text-align: left; /* 文本左对齐 */
}
</style>
</html>
<!-- 样式定义结束 -->

Write Preview
Loading…
Cancel
Save