如何用post请求得到url服务器内用户名和密码等数据和用户输入的用户名和密码比对的前端代码怎么写

前端代码无法直接获取服务器内的用户名和密码等数据，需要通过后台接口来获取。以下是一个简单的例子：

1. 在前端页面中创建一个登录表单，包含用户名和密码输入框，以及一个提交按钮。

<form id="login-form">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <br>
  <button type="submit">登录</button>
</form>

2. 在JavaScript代码中使用fetch函数发送POST请求到后台接口，并将用户输入的用户名和密码作为请求体发送给服务器。

const form = document.querySelector('#login-form');
form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const username = form.elements.username.value;
  const password = form.elements.password.value;

  const response = await fetch('/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ username, password }),
  });

  if (response.ok) {
    // 登录成功，跳转到主页
    window.location.href = '/home';
  } else {
    // 登录失败，显示错误信息
    const error = await response.json();
    alert(error.message);
  }
});

3. 后台接口接收到POST请求后，从请求体中获取用户名和密码，与数据库中保存的用户信息比对，返回登录成功或失败的结果。

const express = require('express');
const app = express();

// 假设用户数据保存在一个users数组中
const users = [
  { username: 'admin', password: '123456' },
  { username: 'guest', password: '654321' },
];

app.post('/api/login', (req, res) => {
  const { username, password } = req.body;

  const user = users.find(user => user.username === username && user.password === password);

  if (user) {
    res.status(200).json({ message: '登录成功' });
  } else {
    res.status(401).json({ message: '用户名或密码错误' });
  }
});

app.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});