我们直接来升级一下前端吧，虽然不用深入学前端，但是如果你要增加比如传输加密功能，肯定是需要用到js功能的，so我们还是要升级一下前端。但前端我学的其实也是完全没学，css美化全靠我们的AI大人，看不懂没关系，直接CV解决一切烦恼。
从0.1开始升级前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aouos登陆系统</title>
</head>
<body>
<form method="get" action="/....">
用户名:<input type="text" name="username">
账号:<input type="password" name="password">
<input type="submit" value="登录按钮">
</form>
</body>
</html>
我们就用最开始的前端开始升级吧。
1.升级样式（不用深入）
首先这个界面太简陋了，让我么略微升级一下，关于<style>中的代码直接复制就好了，不用管了，不需要做深入的了解。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Aouos登陆系统</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: #333;
}
.container {
background-color: white;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
width: 90%;
max-width: 450px;
padding: 30px;
}
h2 {
text-align: center;
margin-bottom: 30px;
color: #2c3e50;
font-weight: 600;
}
/* 表单组基础样式 */
.form-group {
margin-bottom: 25px;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #34495e;
transition: color 0.3s;
}
.form-group input {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 6px;
font-size: 16px;
transition: all 0.3s;
box-sizing: border-box;
}
.form-group input:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}
/* 表单组状态样式 */
.form-group.error label {
color: #e74c3c;
}
.form-group.error input {
border-color: #e74c3c;
box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);
}
.form-group.success label {
color: #2ecc71;
}
.form-group.success input {
border-color: #2ecc71;
box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
}
/* 按钮样式 */
button {
width: 100%;
padding: 14px;
background: linear-gradient(to right, #3498db, #2c3e50);
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
margin-top: 10px;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* 状态消息 */
.status-message {
padding: 10px;
border-radius: 6px;
margin-top: 20px;
text-align: center;
display: none;
}
.status-message.error {
background-color: #fdf0ed;
color: #e74c3c;
display: block;
}
.status-message.success {
background-color: #f0f9f4;
color: #2ecc71;
display: block;
}
/* 响应式设计 */
@media (max-width: 480px) {
.container {
padding: 20px;
}
.form-group {
margin-bottom: 20px;
}
}
</style>
</head>
<body>
<form method="get" action="/....">
用户名:<input type="text" name="username">
账号:<input type="password" name="password">
<input type="submit" value="登录按钮">
</form>
</body>
</html>可以这样直接复制粘贴进去，接下来需要认真了解一下了。
2.更改form表单
保持在style中的代码不变，我们修改body中的代码如下。
<!-- 定义登录表单，使用POST方法提交到/login路径 -->
<form id="loginForm" method="post" action="/login">
<!-- 用户名输入组 -->
<div class="form-group">
<!-- 用户名标签，关联到username输入框 -->
<label for="username">用户名</label>
<!-- 用户名输入框 -->
<input
type="text" <!-- 输入类型为文本 -->
id="username" <!-- 唯一标识符，与label的for属性对应 -->
name="username" <!-- 表单字段名称，用于服务器接收数据 -->
placeholder="请输入用户名" <!-- 输入框内的提示文字 -->
required <!-- 必填字段验证 -->
>
</div>
<!-- 密码输入组 -->
<div class="form-group">
<!-- 密码标签，关联到password输入框 -->
<label for="password">密码</label>
<!-- 密码输入框 -->
<input
type="password" <!-- 输入类型为密码，输入内容会显示为圆点 -->
id="password" <!-- 唯一标识符 -->
name="password" <!-- 表单字段名称 -->
placeholder="请输入密码" <!-- 输入框内的提示文字 -->
minlength="6" <!-- 最小长度限制：6个字符 -->
maxlength="15" <!-- 最大长度限制：15个字符 -->
required <!-- 必填字段验证 -->
>
</div>
<!-- 提交按钮 -->
<button type="submit">登录</button> <!-- 表单提交按钮 -->
</form>这里先对提交框做一些基础的框架搭建，方便后续js功能的添加，我们主要了解一下其中id和name的区别。
- name最主要的上面注释写了，是你提交表单的字段名，要和服务器后端接收数据的名称对应。
- id是指在我们前端页面中需要用到的内容，比如你在js中需要调取用户的输入，就需要通过这个id去寻找获取用户输入的内容。
3.添加js修改提交方式（json）
那我们就直接开始添加js功能。
我们主要想来修改一下关于提交的功能。基于表单提交是非常不方便的，需要用户对整个页面刷新才能够显示新增的内容。比如选课系统，你点击选课以后，需要重新刷新整个界面才能看到你能不能选上这门课，是非常不方便的，所以我们一般都是基于Ajax异步提交这个概念来解决这个问题。Ajax的核基本思想是在不重新加载整个网页的情况下，与服务器交换数据并更新部分网页内容的技术。核心是通过浏览器内置的HMLHttpRequest对象，异步向服务器发送请求获取数据。
关于Ajax的实现，我们可以利用fetch api或者axios进行实现。那关于这两个实现方式我们用哪个比较好呢？
我们先使用fetch api来替代表单提交事件，将数据以json格式发送出去，虽然axios可能会更好用（但是我没用这个），下面是完整的代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aouos登陆系统</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: #333;
}
.container {
background-color: white;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
width: 90%;
max-width: 450px;
padding: 30px;
}
h2 {
text-align: center;
margin-bottom: 30px;
color: #2c3e50;
font-weight: 600;
}
/* 表单组基础样式 */
.form-group {
margin-bottom: 25px;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #34495e;
transition: color 0.3s;
}
.form-group input {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 6px;
font-size: 16px;
transition: all 0.3s;
box-sizing: border-box;
}
.form-group input:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}
/* 表单组状态样式 */
.form-group.error label {
color: #e74c3c;
}
.form-group.error input {
border-color: #e74c3c;
box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);
}
.form-group.success label {
color: #2ecc71;
}
.form-group.success input {
border-color: #2ecc71;
box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
}
/* 按钮样式 */
button {
width: 100%;
padding: 14px;
background: linear-gradient(to right, #3498db, #2c3e50);
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
margin-top: 10px;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* 状态消息 */
.status-message {
padding: 10px;
border-radius: 6px;
margin-top: 20px;
text-align: center;
display: none;
}
.status-message.error {
background-color: #fdf0ed;
color: #e74c3c;
display: block;
}
.status-message.success {
background-color: #f0f9f4;
color: #2ecc71;
display: block;
}
/* 响应式设计 */
@media (max-width: 480px) {
.container {
padding: 20px;
}
.form-group {
margin-bottom: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<h2>用户登录</h2>
<form id="loginForm">
<div class="form-group" id="usernameGroup">
<label for="username">用户名</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
</div>
<div class="form-group" id="passwordGroup">
<label for="password">密码</label>
<input type="password" id="password" name="password" placeholder="请输入密码">
</div>
<button type="submit">登录</button>
<div class="status-message" id="statusMessage"></div>
</form>
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', async function(e) {
e.preventDefault();
const username = document.getElementById('username');
const password = document.getElementById('password');
const usernameGroup = document.getElementById('usernameGroup');
const passwordGroup = document.getElementById('passwordGroup');
const statusMessage = document.getElementById('statusMessage');
// 重置状态
usernameGroup.classList.remove('error', 'success');
passwordGroup.classList.remove('error', 'success');
statusMessage.className = 'status-message';
try {
// 使用Fetch API发送请求
const response = await fetch('/Login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: username.value.trim(),
password: password.value,
})
});
const result = await response.json();
if (result.code) {
// 登录成功，跳转到选择页面
window.location.href = result.redirectUrl;
} else {
// 登录失败，显示错误信息
showError(result.message || '登录失败，请检查用户名和密码');
}
} catch (error) {
showError('网络错误，请稍后重试');
}
function showError(message) {
statusMessage.textContent = message;
statusMessage.className = 'status-message error';
usernameGroup.classList.add('error');
passwordGroup.classList.add('error');
}
});
// 输入时移除错误状态
document.getElementById('username').addEventListener('input', function() {
document.getElementById('usernameGroup').classList.remove('error');
document.getElementById('statusMessage').className = 'status-message';
});
document.getElementById('password').addEventListener('input', function() {
document.getElementById('passwordGroup').classList.remove('error');
document.getElementById('statusMessage').className = 'status-message';
});
</script>
</body>
</html>主要看<script>...</script>中的内容
- document.getElementById('loginForm').addEventListener('submit', function(e) 表示对于loginForm中，添加事件监听器，监听submit提交事件
- e.preventDefault(); 代表阻止表单提交事件
- const username = document.getElementById('username').value;
const password = document.getElementById('password').value; 代表了获取用户输入的username数据和password数据
然后跳过获取Group、message的内容，直接看try中的fetch api，跳过的那部分是用来做一些消息显示和美化的，可以不用管。然后是关于fetch api中的内容，现在应该能看懂其中的内容了。
const response = await fetch('/Login', #这里填你数据提交到后端的路由
{
method: 'POST',#提交数据方式
headers: { #提交数据类型，以json格式提交，后端要做相应的修改
'Content-Type': 'application/json',
},
body: JSON.stringify({ #定义json内的数据
username: username.value.trim(),
password: password.value,
})
});这样就可以完成前端以json格式提交了，关于前端验证是否成功登录我们之后在讲，现在先留着。 //输入时移除错误状态 后面的可以不看。
这样简单的前端升级（为之后的增加功能做准备）就做好了，之后是相应的后端修改升级，才能使用。
Comments NOTHING