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

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

この記事は前の記事の続きです。ログインインターフェイスが構築された後、ユーザー管理バックエンドが作成されます。主な機能は次のとおりです。

ユーザーを追加し、アバターをアップロードします

ディレクトリ構造は次のとおりです。

まず、アバターのアップロード機能を実現します

ファイルアップロードプロセス：ユーザーがファイルアップロードを選択すると、サーバーはファイルを読み取り、一意の名前のキャッシュファイル（バイナリファイル）を生成し、ファイル情報をフロントエンドに返し、フロントエンドがフォームを送信するとファイル情報とユーザー情報をサーバーにアップロードします。サーバーは対応するファイルを読み取り、それをpublic imgフォルダーに保存し（この時点でイメージファイルが生成されます）、最後にイメージパスをデータベースに保存します。

実装

コントローラフォルダの下に新しいアップロードフォルダを作成し、アバターをアップロードするためのフォルダにupload.jsを追加し、multerモジュールをインポートして、ファイルを一時的に保存します

const router = require("express").Router();
const Util = require("../../../utils/utils");
var multer = require("multer");
var upload = multer({
  dest: "./public/temp",//缓存目录
});
router.post(
  "/headPic",
  upload.single("headPic"),//单张图片，图片标识名
  Util.checkToken,//验证token
  (req, res) => {
    res.send({
      result: 1,
      msg: "上传成功",
      headPath: req.file,
    });
  }
);

module.exports = router;

ルーターapp.use（ "/ upload"、upload）;にupload.jsのルーティングアドレスを追加します。
プロジェクトを実行し、テストを実行し、対応するアドレスとパラメーターを郵便配達員に入力して[アップロード]をクリックすると、サーバーはキャッシュされたファイル情報を返し、保存します。キャッシュディレクトリへ

アップロード機能を追加した後、ファイルがアップロードされたことを確認するだけでなく、画像形式に変換するために、いくつかのメソッドがutils.jsファイルに追加されました（fsモジュールを導入するため）。つまり
、ファイルを読み取ります。

 static readPicFile(_file) {
    let { path, mimetype } = _file;//获取文件路径和文件类型
    let file = fs.readFileSync(path);//将文件转换成二进制
    let fileName =//用时间戳加随机数命名文件
      new Date().getTime() +
      parseInt(Math.random() * Math.random() * 1000000) +
      "." +
      mimetype.split("/")[1];
    this.delPicFile(path);//删除之前的缓存文件
    return this.writePicFile(file, fileName);//写文件
  }

ファイルの保存（書き込み）

  static writePicFile(_file, _fileName) {
    let fileName = "./public/assets/img/" + _fileName;//文件路径
    fs.writeFileSync(fileName, _file);
    return fileName.split("./")[1];
  }

ファイルの削除

static delPicFile(_path) {
    fs.unlink(_path, (err) => {
      if (err) {
        console.log("删除失败");
      }
    });
  }

すべてが完了すると、アップロードファイルも完了します

ユーザー機能の追加

users.jsインターフェイスで以前に記述したコマンド（データベースの追加、削除、変更、クエリ操作）を呼び出します。

増加操作はモバイルユーザー登録である可能性があるため、当面はトークン検証は追加されません。メールボックスとユーザー名は一意の値であるため、最初にユーザーを検索する必要があります。

let findRes = await findData(Mod, {
    $or: [
      {
        mailaddress: res._data.mailaddress,
        mailurl: res._data.mailurl,
      },
      {
        username: res._data.username,
      },
      {
        mailaddress: res._data.username,
      },
      {
        username: res._data.mailaddress + res._data.mailurl,
      },
    ],
  });
  if (findRes && findRes.length > 0) {
    res.send({
      result: 0,
      msg: "添加失败,用户已存在",
    });
    Util.delPicFile(res._data.headPic);
    return;
  }

そのようなユーザーがいないと判断されたら、データベースに追加します

  if (res._data.headPic) {
    res._data.headPic = Util.readPicFile(res._data.headPic || "") || "";//保存头像
  }
  res._data.time = Util.joinDate();//添加时间
  res._data.password = Util.createBcrypt(res._data.password);//盐加密
  res._data.isactive = true;
  let addRes = await addData(Mod, res._data);
  if (addRes) {
    res.send({
      result: 1,
      msg: "添加成功",
    });
    return;
  }
  Util.delPicFile(res._data.headPic);
  res.send({
    result: 0,
    msg: "添加失败",
  });

完了後にpostmanでテストすると、バックエンドは追加が成功したことを示すプロンプトを表示し、データベースはユーザーを正常に追加します

記事のこの時点で、アバターがアップロードされ、ユーザーの追加がすべて実現されます

総括する

フロントエンドとバックエンドのプロジェクトリクエストは調整する必要があります（つまり、ユーザーが送信ボタンを複数回すばやくクリックすることを制限します）。フロントエンドとバックエンドの二重保険により、ユーザーエクスペリエンスが向上し、サーバーの負荷が軽減されます。このプロジェクトは主に機能指向であるため、詳細に側面はあまり注意を払っていません、実際のオンラインプロジェクトはスロットルを追加する必要があります

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

おすすめ