从零开始,搭建一个简单的购物平台(四)

简介: 从零开始,搭建一个简单的购物平台(四)

从零开始,搭建一个简单的购物平台(三):https://blog.csdn.net/time_____/article/details/105411636

项目源码(持续更新):https://gitee.com/DieHunter/myCode/tree/master/shopping


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


添加用户,上传头像


目录结构如下:

2.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中输入相对应地址和参数后点上传,服务端返回缓存文件信息并保存到缓存目录

1.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测试一下,后端提示添加成功,数据库也成功添加该用户

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

2.png

2.png

总结


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


相关文章
|
运维 前端开发 NoSQL
从零开始,手把手教你实现一个高效的OA会议系统
从零开始,手把手教你实现一个高效的OA会议系统
167 0
|
前端开发 数据库连接 数据库
从零开始,搭建一个简单的购物平台(二)
从零开始,搭建一个简单的购物平台(二)
187 1
从零开始,搭建一个简单的购物平台(二)
|
前端开发 数据管理
从零开始,搭建一个简单的购物平台(五)
从零开始,搭建一个简单的购物平台(五)
318 1
从零开始,搭建一个简单的购物平台(五)
|
前端开发 测试技术 数据库
从零开始,搭建一个简单的购物平台(三)
从零开始,搭建一个简单的购物平台(三)
102 1
从零开始,搭建一个简单的购物平台(三)
|
前端开发 JavaScript 数据库
从零开始,搭建一个简单的购物平台(十五)前端商城部分
从零开始,搭建一个简单的购物平台(十五)前端商城部分
218 1
从零开始,搭建一个简单的购物平台(十五)前端商城部分
|
前端开发
从零开始,搭建一个简单的购物平台(十六)前端商城部分
从零开始,搭建一个简单的购物平台(十六)前端商城部分
236 1
从零开始,搭建一个简单的购物平台(十六)前端商城部分
|
JavaScript 前端开发
从零开始,搭建一个简单的购物平台(六)
从零开始,搭建一个简单的购物平台(六)
158 0
从零开始,搭建一个简单的购物平台(六)
|
前端开发 数据库
从零开始,搭建一个简单的购物平台(十)
从零开始,搭建一个简单的购物平台(十)
238 0
从零开始,搭建一个简单的购物平台(十)
|
前端开发
从零开始,搭建一个简单的购物平台(九)
从零开始,搭建一个简单的购物平台(九)
229 0
从零开始,搭建一个简单的购物平台(九)
|
前端开发 JavaScript NoSQL
从零开始,搭建一个简单的购物平台(一)
从零开始,搭建一个简单的购物平台(一)
447 0
从零开始,搭建一个简单的购物平台(一)