Node+Express+MySQL实现一个前后端分离的登录页面

点击”注册“按钮实现注册功能用户名为唯一标识，注册时将用户数据传递给数据库。成功注册账号后，显示注册的账号并跳转登录页面。输入账号密码，点击"注册"按钮，服务器端根据传递的数据匹配用户是否存在密码是否正确。成功登录，页面跳转。

m0_71873158

742人浏览 · 2024-01-18 15:48:36

m0_71873158 · 2024-01-18 15:48:36 发布

1）功能需求如下：

点击”注册“按钮实现注册功能
用户名为唯一标识，注册时将用户数据传递给数据库。
成功注册账号后，显示注册的账号并跳转登录页面。
输入账号密码，点击"注册"按钮，服务器端根据传递的数据匹配用户是否存在密码是否正确。
成功登录，页面跳转
效果图如下：

2）搭建项目

express login

cd login && cnpm i

3）创建数据库数据表

创建一个user数据库，并创建数据表user_info

将name设置为主键，避免用户名重复

4）连接数据库

cnpm i mysql -S

let mysql = require('mysql');

let conn = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'root',
  database: 'user'
})

conn.connect((err) => {
  if (err) {
    console.log('连接失败')
    return
  }
  console.log('连接成功')
})

module.exports = conn;

5）配置路由

①设置端口监听

app.listen(3000,()=>{
  console.log("Server started on port 3000")
})

②跨域处理

var conn = require("../public/javascripts/conn");

router.all("*", (req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  next();
});

③注册路由设置

将前端传递的用户注册信息，插入到数据库中。

router.post("/register", function (req, res, next) {
  // 获取前端传递的数据
  var username = String(req.body.username);
  var password = String(req.body.password);
  // 将前端传递的数据插入到数据表user_info中
  conn.query(
    `insert into user_info(name,password) value("${username}","${password}");`,
    function (err, result) { // err：插入异常返回的数据
      if (err) {
        res.send({
          code: 400,
          msg: "注册失败",
        });
      } else {
        res.send({
          code: 200,
          msg: "注册成功",
        });
      }
    }
  );
});

④登录路由

将前端传递的数据与数据库中的数据进行匹配。

router.post("/login", function (req, res, next) {
  // 获取前端传递的用户名和密码
  var username = String(req.body.username);
  var password = String(req.body.password);
  /*   var username = "bb";
  var password = "123456"; */
  // 查询数据库，判断用户名和密码是否正确
  conn.query(
    `select * from user_info where name="${username}" and password="${password}";`,
    function (err, result) {
      // 查询出错时err才会有值
      console.log(err, result); // result 会返回sql查询到的信息，没有查询到时返回[]
      console.log(result.length); // 查询到数据时result.length>0
      if (result.length == 0) {
        res.send({
          code: 400,
          msg: "登录失败",
        });
      } else {
        res.send({
          code: 200,
          msg: "登录成功",
        });
      }
    }
  );
});

6）前端处理

①表单结构：

<h1>XX管理系统登录</h1>
    <form action="javaScript:void(0)" method="post">
      <div>
        <h2>用户名：</h2>
        <input type="text" name="username" placeholder="请输入用户名" />
      </div>

      <div>
        <h2>密码：</h2>
        <input type="password" name="password" placeholder="请输入密码" />
      </div>

      <div class="passwordAgain hide">
        <h2>确认密码：</h2>
        <input type="password" name="password_again" placeholder="请确认密码" />
      </div>

      <p>
        <button id="login">登录</button>
        <button id="register">注册</button>
      </p>
    </form>

②CSS

<style>
      body {
        background-color: #f5f5f5;
        font-family: Arial, Helvetica, sans-serif;
      }
      h1 {
        text-align: center;
        color: #333;
      }
      form {
        width: 300px;
        margin: 20px auto;
        padding: 10px 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      }
      form h2 {
        font-size: 1.2em;
        margin-bottom: 10px;
      }
      form input {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        margin-bottom: 20px;
        box-sizing: border-box;
      }
      form button {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #007bff;
        color: #fff;
        cursor: pointer;
      }
      form button:hover {
        background-color: #0069d9;
      }
      .hide {
        display: none;
      }
    </style>

③获取DOM

let passwordAgain = $(".passwordAgain").eq(0);  // 确认登录部分
    let username = $("input[name='username']"); // 用户名框
    let password = $("input[name='password']"); // 密码框
    let password_again = $("input[name='password_again']");// 确认密码框
    let register = $("#register");  // 注册按钮
    let login = $("#login");  // 登录按钮

④注册

register.click(function () {
      // 单击注册显示确认密码框
      console.log(passwordAgain.hasClass("hide"));
      // 如果确认密码框不存在则显示 存在则进行数据获取和上传
      if (passwordAgain.hasClass("hide")) {
        passwordAgain.removeClass("hide");
      } else {
        // 判断用户名是否为空
        if (username.val() == "") {
          alert("用户名不能为空");
          username.focus();
          return;
        }
        // 判断密码是否为空
        if (password.val() == "") {
          alert("密码不能为空");
          password.focus();
          return;
        }
        // 判断密码是否一致
        if (password.val() != password_again.val()) {
          alert("两次输入的密码不一致");
          password_again.focus();
          return;
        }
        // 上传数据，并对返回的数据处理
        $.ajax({
          type: "post",
          url: "http://localhost:3000/register",
          data: {
            username: username.val(),
            password: password.val(),
          },
          success: function (res) {
            console.log(res);
            if (res.code == 200) {
              alert(`注册成功,您的账户名为${username.val()}`);
              passwordAgain.addClass("hide");
            } else if (res.code == 400) {
              alert("用户名已存在");
            }
          },
          error: function (err) {
            console.log(err);
          },
        });
      }
    });

⑤登录

login.click(function () {
      // 点击登录按钮隐藏确认密码框
      passwordAgain.addClass("hide");
      if (username.val() == "" || password.val() == "") {
        alert("用户名或密码不能为空");
        return;
      } else {
        // 上传数据,并对返回的数据处理
        $.ajax({
          type: "post",
          url: "http://localhost:3000/login",
          data: {
            username: username.val(),
            password: password.val(),
          },
          success: function (res) {
            console.log(res);
            if (res.code == 200) {
              alert("登录成功");
              window.location.href = "index.html";
            } else {
              alert("账号或密码错误");
            }
          },
        });
      }
    });

技术共进，成长同行——讯飞AI开发者社区

更多推荐

[论文阅读] 人工智能 + 软件工程 | 真实场景下GitHub Copilot生产力之谜：2年数据揭示客观提交无提升，开发者却直呼“好用”

讯飞AI开发者社区

上下文工程驱动智能体向通用人工智能

例如在文章开头，我们举的产品经理和工程师之间的那一段对话，一个高质量智能体，不再只是让大模型回答用户的问题，而是通过上下文工程，帮助大模型在回答前获得更加结构化的输入，包括项目状态、需求文档、任务历史、甚至团队氛围，实现大模型更好的理解当前的任务规划、团队过往的沟通隐患、对方的工作状态与担忧、文档/知识库的实时状态等等。这和我们维护我们手机上内存很像，一开始所有应用和历史信息都保留，但当手机出现运