You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Node.js中点击按钮切换User模型isActive布尔值的实现问询

实现Node.js中用户状态切换功能

这里帮你梳理完整的实现方案,同时优化代码细节,让功能更稳定直观:

功能说明

我们要实现的核心逻辑是:点击按钮提交PUT请求,通过用户ID查询目标用户,切换其isActive字段的布尔状态(true↔false),操作完成后跳转回用户列表页。

1. 表单模板(EJS示例)

你原有的表单代码已经实现了PUT请求的提交,这里可以优化按钮的显示逻辑,让用户能直观看到当前状态:

<form action="/admin/user/<%= user._id %>/status?_method=PUT" method="POST">
  <button type="submit" class="btn <%= user.isActive ? 'btn-success' : 'btn-danger' %> btn-group-sm">
    <i class="fas <%= user.isActive ? 'fa-check-circle' : 'fa-times-circle' %>"></i>
  </button>
</form>

这样用户活跃时按钮显示绿色对勾,禁用时显示红色叉号,体验更友好。

2. User模型代码

你的Mongoose模型定义完全没问题,isActive字段的默认值设置正确,这里直接保留:

const mongoose = require("mongoose");
const passportLocalMongoose = require("passport-local-mongoose");

const UserSchema = mongoose.Schema({
  name: String,
  mobile: String,
  gender: String,
  username: String,
  password: String,
  isActive: { type: Boolean, default: true },
  created: { type: Date, default: Date.now() }
});

UserSchema.plugin(passportLocalMongoose);
const User = new mongoose.model("user", UserSchema);

module.exports = User;

3. 路由代码优化

原路由逻辑是可行的,但可以优化数据库操作效率和异步处理逻辑,避免未完成更新就跳转的问题:

方案一:使用async/await(推荐)

const router = require("express").Router();
const User = require("../models/User"); // 替换为你的模型实际路径

router.put("/admin/user/:id/status", async (req, res) => {
  try {
    // 查询目标用户
    const foundUser = await User.findById(req.params.id);
    if (!foundUser) {
      console.log("目标用户不存在");
      return res.redirect("/admin/users-details");
    }
    // 切换状态并更新
    await User.findByIdAndUpdate(
      req.params.id,
      { isActive: !foundUser.isActive },
      { new: true } // 返回更新后的文档(可选)
    );
    // 等待更新完成后再跳转
    res.redirect("/admin/users-details");
  } catch (err) {
    console.error("状态切换失败:", err);
    res.redirect("/admin/users-details");
  }
});

module.exports = router;

方案二:回调版本

如果你还习惯使用回调函数,也可以这样写:

router.put("/admin/user/:id/status", (req, res) => {
  User.findById(req.params.id, (err, foundUser) => {
    if (err) {
      console.error("查询用户出错:", err);
      return res.redirect("/admin/users-details");
    }
    if (!foundUser) {
      console.log目标用户不存在");
      return res.redirect("/admin/users-details");
    }
    // 执行状态更新
    User.findByIdAndUpdate(
      req.params.id,
      { isActive: !foundUser.isActive },
      (updateErr) => {
        if (updateErr) {
          console.error("更新状态出错:", updateErr);
        }
        res.redirect("/admin/users-details");
      }
    );
  });
});

关键注意事项

  • 确保你的Express应用已经配置了method-override中间件,否则_method=PUT的请求覆盖不会生效,配置代码如下:
const methodOverride = require('method-override');
app.use(methodOverride('_method'));
  • 建议给该路由添加权限验证中间件,确保只有管理员能执行状态切换操作,避免未授权访问。

内容的提问来源于stack exchange,提问作者Jimit Raval

火山引擎 最新活动