Node.js前后端交互实现用户登陆的实践

我会提供一个Node.js实现前后端交互实现用户登录的攻略，包含以下部分内容：

前置知识
搭建后端Node.js服务器
实现前端页面
实现用户注册和登录功能
示例演示

1. 前置知识

在学习Node.js实现前后端交互，需要掌握以下基本知识：

HTML、CSS、JavaScript基础知识
Ajax异步请求和响应
Node.js后台知识

2. 搭建后端Node.js服务器

首先，安装Node.js，打开命令行，运行下面的代码安装Express和body-parser：

npm install express body-parser --save

然后，创建一个app.js文件，编写如下代码：

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

// 使用body-parser中间件，解析表单提交的数据
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// 设置静态文件目录，使得服务器能够访问到public目录下的静态文件
app.use(express.static('public'));

// GET请求，返回主页
app.get('/', function (req, res) {
  res.sendFile(__dirname + '/public/index.html');
});

// 监听8000端口
app.listen(8000, function () {
  console.log('服务已启动，访问地址为 http://localhost:8000');
});

这段代码使用了Express和body-parser中间件，设置了静态文件目录，GET请求返回主页，监听8000端口。

3. 实现前端页面

我们需要实现一个用户登录的前端页面。创建一个public目录，创建index.html文件，编写以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>用户登录</title>
</head>
<body>
  <h1>用户登录</h1>
  <form>
    <div>
      <label for="username">用户名：</label>
      <input type="text" id="username">
    </div>
    <div>
      <label for="password">密码：</label>
      <input type="password" id="password">
    </div>
    <button type="button" onclick="login()">登录</button>
  </form>
  <script>
    function login() {
      var username = document.getElementById('username').value;
      var password = document.getElementById('password').value;

      if (!username || !password) {
        alert('用户名或密码不能为空！');
      } else {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4) {
            var data = JSON.parse(xhr.responseText);
            if (data.code == 200) {
              alert('登录成功');
            } else {
              alert('用户名或密码错误！');
            }
          }
        }
        xhr.open('POST', '/login', true);
        xhr.setRequestHeader('Content-type', 'application/json');
        xhr.send(JSON.stringify({username: username, password: password}));
      }
    }
  </script>
</body>
</html>

这段代码是一个用户登录页面，通过Ajax异步请求POST到/login路由，向服务器提交用户信息。

4. 实现用户注册和登录功能

继续编辑app.js文件，添加以下代码实现用户注册和登录功能：

// 模拟用户数据
const userList = [
  { username: 'admin', password: 'admin' }
];

// POST请求，用户登录
app.post('/login', function (req, res) {
  const username = req.body.username;
  const password = req.body.password;

  const user = userList.find(item => item.username === username && item.password === password);
  if (user) {
    res.json({ code: 200, message: '登录成功' });
  } else {
    res.json({ code: 400, message: '用户名或密码错误' });
  }
});

// POST请求，用户注册
app.post('/register', function (req, res) {
  const username = req.body.username;
  const password = req.body.password;

  const user = userList.find(item => item.username === username);
  if (user) {
    res.json({ code: 400, message: '用户名已被占用，请重新输入' });
  } else {
    userList.push({ username: username, password: password });
    res.json({ code: 200, message: '注册成功' });
  }
});

这段代码使用POST请求，用户登录和注册功能，先模拟了一个用户数据列表，通过POST请求将用户信息提交到/login和/register路由。

5. 示例演示

在命令行中运行app.js文件，打开网页浏览器，在地址栏输入 http://localhost:8000 ，回车进入用户登录页面，在页面上输入用户名admin和密码admin，单击登录按钮，可以看到页面上会弹出一个窗口，显示“登录成功”，表示前后端交互实现用户登录功能。同样地，在相同的页面上可以实现用户注册功能。

另外，我们可以使用Postman模拟POST请求提交用户信息，来验证接口是否正常。可以看到，服务器正常返回正确的数据。

以上是一个基本的Node.js实现前后端交互实现用户登录的攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Node.js前后端交互实现用户登陆的实践 - Python技术站