ゼロから始めて、シンプルなショッピングプラットフォームを構築します（8）

ゼロから始めて、簡単なショッピングプラットフォームを構築します（7）：https：//blog.csdn.net/time_____/article/details/105448383
プロジェクトのソースコード（継続的な更新）：https：//gitee.com/DieHunter/myCode/ツリー/マスター/ショッピング

バックエンド管理のインターフェースはフロントエンドとは異なります。スタイルにきめ細かいフロントエンドはありません。結局のところ、これは内部管理者向けであるため、それほど慎重には行いません（実際、私は怠惰です）。この問題は主にフロントエンドとバックエンドについて説明します。フリーズ、ユーザーステータスのアクティブ化、ユーザー機能の削除

まず、前回の記事で実装したユーザーリストのページ検索機能で、フォーム設定ファイルにユーザーのフリーズ（アクティブ化）と削除の2つのボタンを追加しました。

{
        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>
          );
        },
      },

次に、ListTableコンポーネントにdeleteおよびfreezeユーザーメソッドを追加します。削除はより機密性の高い操作であるため、バッチ削除は必要ありません。

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

clickHandlerイベントリスナーをテーブルコンポーネントに追加します

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;
    }
  }

userListインターフェイスで2つの関数を要求し、user_idでユーザーを見つけて操作を
フリーズし、ユーザーステータスをfalse（true）に設定してデータベースを更新し、再レンダリングします。

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();//操作成功后刷新列表
      });
  };

削除、アバターソースファイルの削除、ユーザー情報の削除、ページの更新：

 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) => {});
  };

ユーザーをフリーズし、ユーザーを削除するために、サーバー側にそれぞれ2つの新しいインターフェイスが追加されました

ユーザーをフリーズする

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 ? "激活失败" : "冻结失败",
  });
});

終了後、効果をテストします

ユーザーを削除する

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: "删除失败",
  });
});

最後に、削除機能も試してみます

これまでのところ、プロジェクトのユーザー管理は90％を達成しており、残りのユーザー変更は次の記事に残します。製品管理はユーザー管理機能と同様なので、あまり説明しません。

ゼロから始めて、シンプルなショッピングプラットフォームを構築します（8）

おすすめ