Start from scratch, build a simple shopping platform (8)

Start from scratch, build a simple shopping platform (7): https://blog.csdn.net/time_____/article/details/105448383
Project source code (continuous update): https://gitee.com/DieHunter/myCode/ tree/master/shopping

The interface of the back-end management is different from the front-end. There can be no fine-grained front-end in the style. After all, it is for internal administrators, so we don’t do it so carefully (in fact, I’m lazy). This issue mainly talks about the front-end and the back-end. Freeze, activate user status and delete user functions

First of all, on the page search function of the user list that has been implemented in the previous article, two buttons are added to the form configuration file, freeze (activate) and delete users

{
        align: "center",
        title: "操作",
        width: 230,
        fixed: "right",
        render: (record) => {
          return (
            <div>
              <Popconfirm
                title="是否删除？"
                onConfirm={_this.clickHandler.bind(_this, record, "delete")}
                okText="是"
                cancelText="否"
                disabled={record.userType == "admin" ? true : false}
              >
                <Button
                  type="danger"
                  disabled={record.userType == "admin" ? true : false}
                >
                  删除
                </Button>
              </Popconfirm>
              <Button
                disabled={record.userType == "admin" ? true : false}
                type={record.isactive ? "danger" : "primary"}
                onClick={_this.clickHandler.bind(_this, record, "allow")}
              >
                {record.isactive ? "禁止" : "允许"}
              </Button>
            </div>
          );
        },
      },

Next, add delete and freeze user methods on the ListTable component. Since deletion is a more sensitive operation, batch deletion is not required

    <ListTable
          tableType="user"
          onTableRef={(child) => {
            this.tableChild = child;
          }}
          showDrawer={this.showDrawer}
          deleteUser={this.deleteUser}
          freezeUser={this.freezeUser}
          changeInfo={this.changeInfo}
          changePage={this.changePage}
    ></ListTable>

Add clickHandler event listener to the table component

clickHandler(record, type) {
    switch (type) {
      case "change": //修改
        this.props.changeInfo(record);
        break;
      case "delete": //删除
        this.props.deleteUser(record);
        break;
      case "allow": //冻结
        this.props.freezeUser(record);
        break;
      default:
        break;
    }
  }

Request two functions in the userList interface, find the user through user_id and freeze the operation
, set the user status to false (true) to update the database and re-render:

freezeUser = (record) => {//record是用户在表格内的所有信息，主要获取数据库自动生成的_id就行
    let data = {
      token: this.$utils.getStorage(StorageName.token),
      _id: record._id,
      isactive: !record.isactive,
    };
    this.$axios
      .get(ServerApi.user.freezeUser, {
        params: { crypto: this.$crypto.setCrypto(data) },
      })
      .then((res) => {
        message.success(res.msg);
        this.getUserList();//操作成功后刷新列表
      });
  };

Delete, delete the avatar source file, delete user information, and update the page:

 deleteUser = (record) => {
    let data = {
      token: this.$utils.getStorage(StorageName.token),
      _id: record._id,
      headPic: record.headPic,//上传用户头像地址减少服务端二次查找数据库
    };
    this.$axios
      .get(ServerApi.user.delUser, {
        params: { crypto: this.$crypto.setCrypto(data) },
      })
      .then((res) => {
        message.success(res.msg);
        this.getUserList();
      })
      .catch((err) => {});
  };

Two new interfaces are added on the server side, respectively, to freeze users and delete users

Freeze users

router.get(Config.ServerApi.freezeUser, Util.checkToken, async (req, res) => {
  if (res._data.userTokenType != "admin") {
    //非管理员
    res.send({
      result: -999,
      msg: "请用管理员账号登录",
    });
    return;
  }
  let freezeRes = await updateData(Mod, res._data._id, {
    isactive: res._data.isactive,
  });
  if (freezeRes) {
    res.send({
      result: 1,
      msg: res._data.isactive ? "激活成功" : "冻结成功",
    });
    return;
  }
  res.send({
    result: 0,
    msg: res._data.isactive ? "激活失败" : "冻结失败",
  });
});

After finishing, we test the effect

delete users

router.get(Config.ServerApi.delUser, Util.checkToken, async (req, res) => {
  if (res._data.userTokenType != "admin") {
    //非管理员
    res.send({
      result: -999,
      msg: "请用管理员账号登录",
    });
    return;
  }
  if (
    res._data.headPic &&
    res._data.headPic.length > 0 &&
    res._data.headPic != "public/assets/img/default.gif"
  ) {//判断是否有图片，或者使用了默认图片，默认图片不删
    Util.delPicFile(res._data.headPic);
  }
  deleteRes = await delData(Mod, res._data._id);
  if (deleteRes) {
    res.send({
      result: 1,
      msg: "删除成功",
    });
    return;
  }
  res.send({
    result: 0,
    msg: "删除失败",
  });
});

Finally, we also try the delete function

So far, the user management of the project has been achieved 90%, and the remaining one to modify the user is left in the next article. The product management is similar to the user management function, so I will not give too much explanation.

Start from scratch, build a simple shopping platform (8)

Guess you like