从零开始，搭建一个简单的购物平台（四）

谁借莪１个温暖的怀抱￠ 2023-07-24 05:38 5阅读 0赞

**从零开始，搭建一个简单的购物平台（三）：****[https://blog.csdn.net/time\_\_\_\_\_/article/details/105411636][https_blog.csdn.net_time_article_details_105411636]**  
**项目源码（持续更新）：**[**https://gitee.com/DieHunter/myCode/tree/master/shopping**][https_gitee.com_DieHunter_myCode_tree_master_shopping]

**本篇文章延续上篇的登录界面搭建完成后，进行用户管理后端的编写，主要功能包括：**

**添加用户，上传头像**

**目录结构如下：**  
![20200409170131809.png][]

**首先实现上传头像功能**

上传文件流程：用户选择文件上传，服务端读取文件并生成唯一命名的缓存文件（二进制文件），将文件信息回传到前端，前端提交表单时将文件信息和用户信息一同上传至服务端，服务端读取对应文件，保存至public的img文件夹（此时生成的是图片文件），最后将图片路径存至数据库中

**具体实现**

*  在controller文件夹下新建upload文件夹，在文件夹中新增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;
    
     
 *  在router中添加upload.js的路由地址   app.use("/upload", upload);  
    运行项目，做个测试，在postman中输入相对应地址和参数后点上传，服务端返回缓存文件信息并保存到缓存目录  
    ![20200409204528165.gif][]
 *  添加上传功能后，只是保证文件上传，还要把它转换成图片格式，**所以在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界面中调取之前写的command（数据库增，删，改，查操作）
 *  由于增加操作可能是移动端用户注册，所以暂时不加token验证，由于邮箱和用户名是唯一值，所以需要先进行查找用户
    
        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测试一下，后端提示添加成功，数据库也成功添加该用户  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 1][]

**文章到此，头像上传，用户添加就已经全部实现**

**总结**

前后端项目请求应进行节流处理（即限制用户多次快速单击提交按钮），前后端双重保险，即可提升用户体验，又减少服务端压力，由于此项目主要以功能为主，在细节方面没有十分注重，真实线上项目必须添加节流

[https_blog.csdn.net_time_article_details_105411636]: https://blog.csdn.net/time_____/article/details/105411636
[https_gitee.com_DieHunter_myCode_tree_master_shopping]: https://gitee.com/DieHunter/myCode/tree/master/shopping
[20200409170131809.png]: /images/20230528/02b0916f4a03489bab6490ba7317c910.png
[20200409204528165.gif]: /images/20230528/2693b1b675734cd0967d38b6930961aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200409213356560.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 1]: /images/20230528/87858428f3f448a5b0edb7c0b743c9bf.png