Build a simple shopping platform from scratch (9)

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

This article completes the front-end and back-end management functions, that is, the final modification of the user information function (because commodity management is similar to user management, so it is not described), and tells about the pitfalls encountered

Modifying the user data back-end is actually updating the corresponding value of the field passed from the front-end according to the user id. If the avatar changes, delete the previous user’s avatar. The front-end is more cumbersome than the server. When the user clicks to modify user information After the button, initialize the user information into the form form (the avatar also needs to be loaded), considering that the realization of initializing user information can directly obtain the data in the form, which can reduce one request, but there is a small pit, when the user clicks to modify , The form initialization in the Drawer component is asynchronous, and two solutions are required: 1. Preload the child components in the Drawer (enable the forceRender property in the Drawer). 2. Put the form initialization operation after the form update rendering is completed (componentDidUpdate ), if it is placed in componentDidMount, the component initialization will only be performed for the first time, and in the next step, directly start the whole backend

• The server adds an update method to the command

 /* 更新数据
   * @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;
      });
  }

• Add an interface to the user.js file to update user information

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

Then we look at the front-end function implementation

The front end needs to be modified in the previously implemented new users to achieve related purposes

• Add the function of initializing the display picture to the upload.js component, that is, give a src when rendering the component, and pass the method to the parent component for calling (put it in componentDidMount), and set this in the parent component through the component property for the child component The properties reach the call. Of course, you can also use global events to pass parameters

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

• After all is implemented, you can distinguish between new users and modified users in the custom drawer.js component

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

• Add the update form method in componentDidUpdata to initialize the record in the state to the form

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

• Initialize the form in the Drawer hide method and clear the record in the state

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

The effect is as follows

Finally, we try to submit the data to the backend

to sum up:

Up to now, the user management front-end + server functions in the project have all been implemented. The commodity management functions are implemented in the same way as users, but the field names are different. No explanation. The next article will directly start building the mall front-end and back-end functions.