从零开始，搭建一个简单的购物平台（十八）前端商城部分

╰半夏微凉° 2022-12-11 16:23 137阅读 0赞

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

**上篇文章对购物车进行了简单的介绍，商城的所有基础功能已经全部实现，这篇文章开始将介绍一下用户信息和订单相关的功能实现，用户信息登录在后端管理中已经实现，我们需要实现一个注册功能，和邮箱验证功能，具体实现可参照[之前的一篇博客][Link 1]或是[这篇文章][Link 2]**

**实现效果如下,分别是用户名密码登录，邮箱验证登录，注册功能**

![2020100417004540.gif][]![20201004171207952.gif][]![20201004171958223.gif][]

**登录部分**

**账号密码登录与后台管理系统的登录一样，若用户输入用户名密码登录成功，则将用户部分信息加密成token传至前端并保存至本地，每次通过将token值发送后端进行继续操作**

**邮箱验证**

**在服务端的config文件中新建EmailTransporter静态变量，用来配置发送邮箱使用到的nodemailer模块**

EmailTransporter: {
        // service: "qq", // 运营商  qq邮箱 网易  若使用QQ邮箱，则只需配置service：qq
        host: "smtp.163.com",// 若使用网易邮箱，则只需配置host：smtp.163.com
        port: 465, //端口
        auth: {
          user: "132*****516@163.com", //发送方的邮箱
          pass: "WAQM******WQEFKB", // pop3 授权码
        },
      },

**然后新建邮箱验证码配置EmailConfig**

EmailConfig: {
        time: 5,//验证码有效期，单位分钟
        codeLength: 4,//验证码长度
        sendTime: 1 * 60 * 1000,//后端验证码允许再次发送时间间隔，单位毫秒
        targetTime: 5 * 60 * 1000,//验证码有效期，单位毫秒
        title: "零食商贩",//验证码标题
      },

**接着在Utils中写一个生成随机验证码函数**

/* 生成随机
       * @method    codeLength   函数名
       * @for    Utils     附属于哪个类
       * @param {number/string} len  随机数长度
       * @return {string}  _count   生成len个随机数
       */
      static codeLength(len) {
        let _count = "";
        for (let i = 0; i < len; i++) {
          _count += Math.floor(Math.random() * 10); //生成len个随机数
        }
        return _count;
      }

**在Utils生成时间戳函数，记录验证码及验证码发送时间和有效时间**

/* 生成时间戳
       * @method    randomCode
       * @for    Utils
       * @param
       * @return {object}  _count   生成len个随机数
       */
      static randomCode() {
        return {
          code: this.codeLength(EmailConfig.codeLength), //生成的随机数
          sendTime: new Date().getTime() + EmailConfig.sendTime, //发送时间
          targetTime: new Date().getTime() + EmailConfig.targetTime, //截止时间
        };
      }

**在Utils文件夹下新建SendMail.js并新建发送邮件模块，在utils中调用**

**在utils中新建生成邮件内容的函数**

/* 生成邮件内容
       * @method    sendEmailCode
       * @for    Utils
       * @param   {String} code  验证码内容
       * @param   {String} email   用户邮箱
       */
      static async sendEmailCode(code, email) {
        return await SendMail.sendEmail(
          email,
          EmailConfig.title,
          `您的验证码为:${code},${EmailConfig.time}分钟内有效`
        );
      }

**最后在utils编写一个异步发送邮箱的函数**

/* 异步发送邮箱验证
       * @method    createEmailCode
       * @for    Utils
       * @param   {Object} codeList  邮箱验证码列表
       * @param   {String} email   用户邮箱
       * @param   {Object} findRes  数据库搜寻到的用户信息
       * @return {Boolean}  isSuccess   是否发送成功
       */
      static async createEmailCode(codeList, email, findRes) {
        if (!codeList[email] || new Date().getTime() > codeList[email].sendTime) {
          //已过1分钟,防止多次请求邮箱
          codeList[email] = this.randomCode();
          codeList[email].info = findRes;
          return await this.sendEmailCode(codeList[email].code, email);
        } else {
          //未过1分钟
          return false;
        }
      }

**一个发送邮件的完整模块就实现完成，下一步要做的是验证码的验证功能**

/* 核对验证码
       * @method    checkEmailCode
       * @for    Utils
       * @param   {Object} codeList  用户验证码列表
       * @param   {String} key   用户邮箱
       * @param   {Object} _data   用户提交的表单信息
       * @return   {Object} res   请求响应返回值
       */
      static checkEmailCode(codeList, key, _data) {
        if (!codeList[key]) {
          //未发送验证码
          return {
            result: 0,
            msg: "验证码错误",
          };
        } else if (
          new Date().getTime() < codeList[key].targetTime &&
          _data.mailcode == codeList[key].code
        ) {
          //验证码校对成功
          let _obj = {
            result: 1,
            token: Utils.createToken(
              codeList[key].info.userType || "",
              codeList[key].info.username || "",
              _data.remember || ""
            ),
            msg: "操作成功",
          };
          codeList[key] = null;
          return _obj;
        } else if (new Date().getTime() > codeList[key].targetTime) {
          //验证码超时
          return {
            result: 0,
            msg: "验证码超时",
          };
        } else {
          return {
            result: 0,
            msg: "验证失败",
          };
        }
      }

**到这一步，关于验证码的所有准备工作已全部实现，下一步将实现注册登录功能，其中登录有两个途径，注册时邮箱为必填值，所以可以使用邮箱验证的方式进行登录**

**服务端获取验证码接口，通过一个codeType区分用户登录获取验证码和注册获取验证码**

router.get(Config.ServerApi.getMailCode, async (_req, res) => {
      //用户邮箱验证
      let _data = Util.getCrypto(Util.parseUrl(_req, res).crypto);//解密参数
      //查询用户是否存在，若未找到用户，则返回错误响应值，否则异步发送邮件验证码
      let findRes = await findData(Mod, {
        mailaddress: _data.username.split('@')[0],
        mailurl: '@' + _data.username.split('@')[1],
      });
      if ((!findRes.length || !findRes) && _data.codeType !== 'reg') {//过滤区分用户注册登录
        res.send({
          result: 0,
          msg: "用户未注册"
        });
        return;
      }
      await Util.createEmailCode(userCodeList, _data.username, findRes[0] || {}) ? res.send({
        result: 1,
        msg: "发送成功",
      }) : res.send({
        result: 0,
        msg: "发送失败"
      });
    });

**在实现注册部分之前，我们要写一个工具方法，用于验证码倒计时，在此期间用户无法再次点击发送请求**

import Vue from "vue";
    import Config from "../config/config";
    const { GetCodeTime, CodeText } = Config;
    class TimeTick {
      static timer = GetCodeTime / 1000;//倒计时时间
      static _timeTick = null;//定时器
      static timeTick(fn) {
        if (!TimeTick._timeTick) {
          TimeTick._timeTick = setInterval(() => {
            if (TimeTick.timer-- <= 1) {
              // 重置倒计时和发送邮箱验证开关
              TimeTick.clearTick();
              fn({ content: CodeText, res: 1 });//倒计时归零
            } else {
              fn({ content: TimeTick.timer + "S", res: 0 });//倒计时中，阻止用户重复点击
            }
          }, 1000);
        }
      }
      static clearTick() {
        //清除定时器
        clearInterval(TimeTick._timeTick);
        TimeTick._timeTick = null;
      }
    }
    Vue.prototype.$timeTick = TimeTick;

** 用户注册界面**

<template>
      <div class="login">
        <div>
          <mt-field
            placeholder="请输入用户名"
            :state="userInfo.username.length ? 'success' : 'error'"
            v-model="userInfo.username"
          ></mt-field>
          <mt-field
            placeholder="请输入密码"
            :state="userInfo.password.length ? 'success' : 'error'"
            v-model="userInfo.password"
            type="password"
          ></mt-field>
          <mt-field
            placeholder="请重复输入密码"
            :state="
              userInfo.repassword.length && userInfo.password == userInfo.repassword
                ? 'success'
                : 'error'
            "
            v-model="userInfo.repassword"
            type="password"
          ></mt-field>
          <mt-field
            placeholder="请输入邮箱"
            v-model="userInfo.mailaddress"
            :state="userInfo.mailaddress.length ? 'success' : 'error'"
          >
            <mt-button class="btn" @click="selectMail">{
       {
              userInfo.mailurl
            }}</mt-button>
          </mt-field>
          <mt-field
            placeholder="请输入验证码"
            :state="userInfo.mailcode.length == 4 ? 'success' : 'error'"
            v-model="userInfo.mailcode"
            type="number"
          >
            <mt-button class="btn" :disabled="canGetCode" @click="getCode">{
       {
              codeTime
            }}</mt-button>
          </mt-field>
          <mt-button class="btn" type="primary" @click="submit">注册</mt-button>
          <div class="shopPicker"></div>
          <ShopPicker :ShopMaxCount="address" pickerTitle="邮箱类型"></ShopPicker>
        </div>
      </div>
    </template>
    
    <script>
    import Config from "../../config/config";
    import Mail from "../../config/mail";
    import ShopPicker from "../shopPicker/shopPicker";
    import { Field, Button, Picker, Popup } from "mint-ui";
    import RegBussiness from "./bussiness";
    const { GetCodeTime, EventName, CodeText } = Config;
    const { address } = Mail;
    export default {
      components: {
        ShopPicker,
      },
      data() {
        return {
          codeTime: CodeText, //获取验证码按钮显示值
          address, //邮箱默认地址
          canGetCode: false, //防止重复点击开关
          userInfo: {
            //注册表单默认数据
            username: "",
            password: "",
            repassword: "",
            mailurl: address[0],
            mailaddress: "",
            mailcode: "",
          },
        };
      },
      created() {
        this.regBussiness = new RegBussiness(this);
        this.$events.onEvent(EventName.ChangeCount, (_count) => {
          this.userInfo.mailurl = _count; //切换邮箱地址
        });
      },
      destroyed() {
        this.$events.offEvent(EventName.ChangeCount);
      },
      methods: {
        selectMail() {
          this.$events.emitEvent(EventName.ShowPicker);
        },
        getCode() {
          if (this.canGetCode) {
            //是否允许发送邮箱验证
            return;
          }
          this.regBussiness.sendCode().then((res) => {
            this.canGetCode = true;//关闭点击开关
            this.$timeTick.timeTick((state) => {
              this.codeTime = state.content;
              switch (state.res) {
                case 0:
                  this.canGetCode = false;//允许用户点击
                  break;
              }
            });
          });
        },
        submit() {
          this.regBussiness.submitData();
        },
      },
    };
    </script>
    
    <style lang="less" scoped>
    @import "../../style/init.less";
    
    .login {
      .btn {
        .f_s(34);
        width: 100%;
        .h(100);
      }
    }
    </style>

**注册业务逻辑部分，bussiness.js**

import Vue from 'vue'
    import {
      Toast
    } from "mint-ui";
    import config from "../../config/config"
    const {
      ServerApi,
      StorageName,
      EventName
    } = config
    export default class LoginBussiness extends Vue {
      constructor(_vueComponent) {
        super()
        this.vueComponent = _vueComponent
      }
      sendCode() {
        return new Promise((resolve, reject) => {
          if (!this.vueComponent.userInfo.mailaddress.length) {//过滤邮箱长度为0
            Toast('请填写正确的邮箱');
            return
          }
          this.$axios
            .get(ServerApi.user.getMailCode, {
              params: {
                crypto: this.$crypto.setCrypto({
                  codeType: "reg",//区分注册登录类型
                  username: this.vueComponent.userInfo.mailaddress + this.vueComponent.userInfo.mailurl
                })
              },
            }).then(res => {
              switch (res.result) {
                case 1:
                  Toast(res.msg);
                  resolve(res)
                  break;
                default:
                  reject(res)
                  break;
              }
            }).catch(err => {
              reject(err)
            })
        })
    
      }
      submitData() {
        for (const key in this.vueComponent.userInfo) {
          if (this.vueComponent.userInfo.hasOwnProperty(key) && !this.vueComponent.userInfo[key].length) {//过滤表单项长度为0
            Toast('请填写完整的信息');
            return
          }
        }
        this.$axios
          .post(ServerApi.user.userReg, {
            crypto: this.$crypto.setCrypto({
              ...this.vueComponent.userInfo
            })
          }).then(res => {
            //成功后重置用户信息
            this.vueComponent.userInfo.password = "";
            this.vueComponent.userInfo.repassword = "";
            this.vueComponent.userInfo.mailcode = "";
            switch (res.result) {
              case 1:
                Toast(res.msg);
                history.go(-1)//返回登录页面
                break;
              default:
                break;
            }
          })
      }
    }

**注册部分完成，登录与注册功能类似，这里只介绍一下服务端token的生成**

**在服务端user.js中修改接口，和管理系统登录一样，新增邮箱验证登录，区分管理员和用户登录**

router.post(Config.ServerApi.userLogin, async (req, res) => {
      let _data = Util.getCrypto(Util.parseUrl(req, res).crypto); //解密前端入参
      switch (_data.loginType) {
        case "code"://验证码登录，验证邮箱验证码
          res.send(Util.checkEmailCode(userCodeList, _data.username, _data));
          break;
        case "psd"://密码登录
        default:
          let findRes = await findData(Mod, {
            $or: [
              {
                mailaddress: _data.username.split("@")[0],
                mailurl: "@" + _data.username.split("@")[1],
              },
              {
                username: _data.username,
              },
              {
                phoneNum: _data.username,
              },
            ],
          });
          if (findRes && findRes.length > 0) {
            Util.checkBcrypt(_data.password, findRes[0].password)
              ? res.send({
                  result: 1,
                  token: Util.createToken(//生成前端token
                    findRes[0].userType,
                    findRes[0].username,
                    _data.remember
                  ),
                  msg: "登录成功",
                })
              : res.send({
                  result: 0,
                  msg: "密码错误",
                });
            return;
          }
          res.send({
            result: 0,
            msg: "用户不存在",
          });
          break;
      }
    });

**总结  
本篇文章将用户的注册登录邮箱验证功能基本实现，主要功能参照之前的[邮箱验证登录注册的博客][Link 2]，文章中的重点是邮箱验证功能模块，与注册登录配合使用，注册则新增用户，登录则更新token值。下一篇将介绍用户信息修改，及后续将实现订单的生成及查看功能**

[https_blog.csdn.net_time_article_details_108893925]: https://blog.csdn.net/time_____/article/details/108893925
[https_gitee.com_DieHunter_myCode_tree_master_shopping]: https://gitee.com/DieHunter/myCode/tree/master/shopping
[Link 1]: https://blog.csdn.net/time_____/article/details/84774092
[Link 2]: https://blog.csdn.net/time_____/article/details/84714723
[2020100417004540.gif]: https://img-blog.csdnimg.cn/2020100417004540.gif
[20201004171207952.gif]: https://img-blog.csdnimg.cn/20201004171207952.gif
[20201004171958223.gif]: /images/20221123/c97a89a48fe640398b24dbb09dd747e2.png