js怎么将登录人显示在页面

要在网页上显示登录用户的信息，可以通过以下几个关键步骤实现：利用表单获取用户输入、验证用户信息、存储用户状态、在页面显示用户信息。 下面会详细讨论如何在JavaScript和后端技术的配合下实现这一功能。

一、创建登录表单

首先，我们需要一个前端页面来获取用户的登录信息。可以使用HTML创建一个简单的登录表单：

<!DOCTYPE html>
<html>
<head>
  <title>登录页面</title>
</head>
<body>
  <h2>登录</h2>
  <form id="loginForm">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" required>
    <br>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>
    <br>
    <button type="submit">登录</button>
  </form>
  <div id="welcomeMessage"></div>
  <script src="login.js"></script>
</body>
</html>

二、验证用户信息

在用户提交表单后，我们需要验证用户提供的信息。这通常需要与后端通信，后端会验证用户的用户名和密码是否正确。这里假设你已经有一个后端API来验证用户信息。

document.getElementById('loginForm').addEventListener('submit', function(event) {
  event.preventDefault();
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  // 发送POST请求到后端API
  fetch('/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username, password })
  })
  .then(response => response.json())
  .then(data => {
    if (data.success) {
      localStorage.setItem('username', username); // 储存用户名
      displayWelcomeMessage(username); // 显示欢迎信息
    } else {
      alert('登录失败，请检查用户名和密码。');
    }
  })
  .catch(error => console.error('Error:', error));
});

三、存储用户状态

为了让用户在刷新页面后仍能看到自己的登录信息，可以利用localStorage或sessionStorage来存储用户名。localStorage存储的信息即使在关闭浏览器后也会保留，而sessionStorage则在会话结束后清除。

function displayWelcomeMessage(username) {
  document.getElementById('welcomeMessage').innerText = `欢迎, ${username}`;
}
// 检查localStorage中是否有用户名
window.onload = function() {
  const savedUsername = localStorage.getItem('username');
  if (savedUsername) {
    displayWelcomeMessage(savedUsername);
  }
};

四、前端显示用户信息

在用户成功登录后，我们可以在页面上显示他们的用户名。可以通过修改DOM元素的内容来实现。

<div id="welcomeMessage"></div>

function displayWelcomeMessage(username) {
  document.getElementById('welcomeMessage').innerText = `欢迎, ${username}`;
}

五、登出功能

为了完整性，还需要提供一个登出功能，用户点击登出按钮后可以清除存储的用户名信息，并刷新页面。

<button id="logoutButton">登出</button>

document.getElementById('logoutButton').addEventListener('click', function() {
  localStorage.removeItem('username');
  location.reload();
});

六、后端验证（示例）

假设你使用的是Node.js和Express，后端验证用户信息的代码可能如下：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
const users = {
  'user1': 'password1',
  'user2': 'password2'
};
app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  if (users[username] && users[username] === password) {
    res.json({ success: true });
  } else {
    res.json({ success: false });
  }
});
app.listen(3000, () => {
  console.log('Server running on port 3000');
});

七、总结

通过以上步骤，可以实现一个简单的登录系统，并在网页上显示登录用户的信息。实际开发中，考虑到安全性和用户体验，还需要进行更多的优化和处理。

创建登录表单：使用HTML创建用户登录表单。
验证用户信息：通过JavaScript与后端API通信验证用户信息。
存储用户状态：使用localStorage或sessionStorage存储用户登录状态。
前端显示用户信息：修改DOM元素内容显示用户信息。
登出功能：提供用户登出功能，清除存储信息并刷新页面。

通过这些步骤，可以实现一个基本的用户登录功能，并在页面上显示登录用户的信息。