web复习 - 技术栈

今天我们复习一下web的基础操作，为后续web安全打基础

WEB分为html、css、js

我这里一共五个文件，2个html、1个css、2个js

首先是Html:

注册页面

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>用户注册</title>
   <link rel="stylesheet" href="./css/styles.css">
</head>

<body>
   <div id="register-container">
   <h2>用户注册</h2>
   <form>
    <label for="name">姓名:</label>
    <input type="text" id="name" required>
    <label for="number">身份证号:</label>
    <input type="text" id="number" required>
    <label for="password">密码:</label>
    <input type="password" id="password" required>
    <button type="button" onclick="registry()">注册</button>
    </form>
	<p>已有账号？去<a href="login.html">登录</a></p >
    </div>
    <script src="js/register.js"></script>
</body>

登录页面：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户登录</title>
  <link rel="stylesheet" href="./css/styles.css">
</head>

<body>
  <div id="login-container">
    <h2>用户登录</h2>
    <form>
      <label for="loginNumber">编号:</label>
      <input type="text" id="loginNumber" required>
      <label for="loginPassword">密码:</label>
      <input type="password" id="loginPassword" required>
      <button type="button" onclick="login()">登录</button>
    </form>
    <p>没有账号？去<a href="register.html">注册</a></p >
  </div>
  <script src="js/login.js"></script>
</body>
</html>

接着是CSS：

css 复制代码

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-color: #000;
   background-image: url("../img/a.jpg");
   background-size: cover; 
   background-position: center; /* 背景深色，可自行调整 */
}
#register-container,
#login-container {
  background-color: rgba(255, 255, 255, 0.3); /* 白色半透明背景，可调整透明度 */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px); 
  width: 25%;/* 毛玻璃模糊效果，可调整模糊程度 */
}

h2 {
  text-align: center;
  color: white;
}

label {
  display: block;
  margin-bottom: 5px;
  color: white;
}

input {
  width: 95%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid rgba(255, 255, 255, 0.5); /* 半透明边框 */
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1); /* 输入框半透明背景 */
  color: white;
}

button {
  width: 100%;
  padding: 10px;
  background-color: white;
  color: black;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

button:hover {
  background-color: #f4f4f4;
}

p {
  margin-top: 10px;
  color: white;
  text-align: center;
}

最后是js：

登录的js

javascript 复制代码

function login() {
    // 获取用户输入的 ID 和密码
    const userIdInput = document.getElementById('loginNumber').value;
    const passwordInput = document.getElementById('loginPassword').value;

    // 检查是否输入完整
    if (!userIdInput || !passwordInput) {
        alert("请输入用户ID和密码");
        return;
    }

    // 验证用户ID是否为6位数字（字符串形式）
    const isValidId = /^\d{6}$/.test(userIdInput);
    if (!isValidId) {
        alert("用户ID必须是6位数字");
        return;
    }

    // 从本地存储中获取所有已注册用户
    const usersData = localStorage.getItem('users');
    const users = usersData ? JSON.parse(usersData) : [];

    // 查找是否存在这个用户（ID 和密码都匹配）
    let matchedUser = null;
    for (let i = 0; i < users.length; i++) {
        const user = users[i];
        if (user.userId === userIdInput && user.password === passwordInput) {
            matchedUser = user;
            break;
        }
    }

    // 查找是否存在这个ID（无论密码是否正确）
    const idExists = users.some(user => user.userId === userIdInput);

    if (matchedUser) {
        // 登录成功
        alert(`登录成功，欢迎回来 ${matchedUser.name}！\n用户ID: ${matchedUser.userId}`);
        window.location.href = 'main.html'; // 跳转到主页
    } else if (!idExists) {
        // 用户ID不存在
        const goToRegister = confirm('用户ID不存在，是否前往注册？');
        if (goToRegister) {
            window.location.href = 'register.html';
        }
    } else {
        // 用户ID存在，但密码错误
        alert('密码错误，请重试');

        // 清空密码框并重新聚焦（提升用户体验）
        const passwordInputElement = document.getElementById('loginPassword');
        passwordInputElement.value = '';
        passwordInputElement.focus();
    }
}

注册的js：

javascript 复制代码

function registry() {
    // 获取用户填写的姓名、身份证号和密码
    const nameInput = document.getElementById('name').value;
    const idNumberInput = document.getElementById('number').value; // 身份证号
    const passwordInput = document.getElementById('password').value;

    // 检查是否有空值
    if (!nameInput || !idNumberInput || !passwordInput) {
        alert("请填写完整信息");
        return;
    }

    // 检查身份证号格式：18位（前17位是数字，最后一位可以是数字或X/x）
    const isIdValid = /^\d{17}[\dXx]$/.test(idNumberInput);
    if (!isIdValid) {
        alert("身份证格式不正确");
        return;
    }

    // 从本地 localStorage 获取所有用户信息
    const storedUsers = localStorage.getItem('users');
    const usersList = storedUsers ? JSON.parse(storedUsers) : [];

    // 检查身份证号是否已经注册过
    const idAlreadyUsed = usersList.some(user => user.number === idNumberInput);
    if (idAlreadyUsed) {
        alert("该身份证号已注册，请直接登录");
        window.location.href = 'login.html'; // 跳转到登录页
        return;
    }

    // 创建一个新用户对象
    const newUser = {
        name: nameInput,
        number: idNumberInput,
        password: passwordInput
    };

    // 将新用户加入原有用户列表
    usersList.push(newUser);

    // 将更新后的用户列表保存回本地存储
    localStorage.setItem('users', JSON.stringify(usersList));

    // 提示注册成功
    alert("注册成功！");
    window.location.href = 'login.html'; // 跳转到登录页
}

最后为执行的效果：