シンプルなショッピングプラットフォームをゼロから構築する（9）

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

この記事では、フロントエンドとバックエンドの管理機能、つまりユーザー情報機能の最終的な変更を完了し（商品管理はユーザー管理に類似しているため、説明しません）、発生した落とし穴について説明します。

ユーザーデータのバックエンドを変更すると、実際には、フロントエンドから渡されたフィールドの対応する値がユーザーIDに従って更新されます。アバターが変更された場合は、前のユーザーのアバターを削除します。フロントエンドはサーバーよりも煩雑です。ユーザーがクリックしてユーザー情報を変更すると、ボタンの後、ユーザー情報をフォームフォームに初期化します（アバターもロードする必要があります）。ユーザー情報の初期化を実現すると、フォーム内のデータを直接取得できるため、1つのリクエストを減らすことができますが、ユーザーがクリックして変更すると、小さな穴があります。、Drawerコンポーネントのフォームの初期化は非同期であり、2つの解決策が必要です。1。Drawerのサブコンポーネントをプリロードします（DrawerのforceRenderプロパティを開きます）。2.フォーム更新のレンダリングが完了した後にフォーム初期化操作を配置します（componentDidUpdate ）。これをcomponentDidMountに配置すると、コンポーネントの初期化は初めて実行され、次のステップでバックエンド全体を直接開始します。

サーバーはコマンドに更新メソッドを追加します

 /* 更新数据
   * @param {object} mod       数据库model
   * @param {string} _id       数据唯一标识
   * @param {object} data      更新字段及值
   */
  static updateData(mod, _id, data) {
    //改
    return mod
      .updateOne(
        {
          _id,
        },
        data
      )
      .then((res) => {
        return res;
      })
      .catch((err) => {
        return false;
      });
  }

user.jsファイルにインターフェースを追加して、ユーザー情報を更新します

router.post(Config.ServerApi.updateUser, Util.checkToken, async (req, res) => {
  if (!res._data.headPic.length) {//这里判断是否是修改头像，若是新增，则是上传相关的头像信息，是个object类型，length属性不存在
    let findRes = await findData(Mod, {
      _id: res._data._id,
    });
    if (findRes[0].headPic != "public/assets/img/default.gif") {
      Util.delPicFile(findRes[0].headPic);
    }
    res._data.headPic = Util.readPicFile(res._data.headPic || "") || "";
  }
  res._data.password = Util.createBcrypt(res._data.password);//密码盐加密
  let updateRes = await updateData(Mod, res._data._id, res._data);
  if (updateRes) {
    res.send({
      result: 1,
      msg: "修改成功",
    });
    return;
  }
  Util.delPicFile(res._data.headPic);
  res.send({
    result: 0,
    msg: "修改失败",
  });
});

次に、フロントエンド関数の実装を見ていきます

関連する目的を達成するには、以前に実装された新しいユーザーでフロントエンドを変更する必要があります

表示画像を初期化する関数をupload.jsコンポーネントに追加します。つまり、コンポーネントをレンダリングするときにsrcを指定し、メソッドを親コンポーネントに渡して呼び出し（componentDidMountに配置）、子コンポーネントのcomponentプロパティを介して親コンポーネントに設定します。プロパティが呼び出しに到達します。もちろん、グローバルイベントを使用してパラメータを渡すこともできます

this.props.onUpdateRef(this);//放在子组件中，使父组件调用当前组件

onUpdateRef={(child) => {//放在父组件的子组件的属性里，通过this.updateChild调用子组件的this
    this.updateChild = child;
 }}

 updatePic(url) {
    if (url && url.length > 0) {
      this.setState({
        fileList: [
          {
            uid: "-1",
            name: url,
            status: "done",
            url,
          },
        ],
      });
    }
  }

すべてが実装された後、カスタムdrawer.jsコンポーネントで新しいユーザーと変更されたユーザーを区別できます

showDrawer = (record) => {
    if (record) {//传递了参数说明是更新信息，否则是新增用户
      this.setState({
        formType: "updata",
        visible: true,
        record,
      });
      this.updateChild.updatePic(FilePath + record.headPic);//调用上传头像组件，显示图片
    } else {
      this.setState({
        formType: "add",
        visible: true,
        record: {//新增用户的初始值
          sex: "man",
          userType: "user",
          mailurl: "@qq.com",
        },
      });
    }
  };

componentDidUpdataにフォームの更新メソッドを追加して、状態のレコードをフォームに初期化します

componentDidUpdate() {
    this.formRef.current.setFieldsValue(this.state.record);
}

Drawer hideメソッドで、フォームを初期化し、状態のレコードをクリアします

onClose = () => {
    this.formRef.current.resetFields();
    this.setState({
      visible: false,
      record: null,
    });
 };

効果は以下の通りです

最後に、データをバックエンドに送信しようとします

総括する：

これまで、プロジェクトのユーザー管理フロントエンド+サーバー機能はすべて実装されています。商品管理機能はユーザーと同じ方法で実装されますが、フィールド名が異なります。説明はありません。次の記事では、モールのフロントエンド機能とバックエンド機能の構築を直接開始します。

シンプルなショッピングプラットフォームをゼロから構築する（9）

おすすめ