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

缺乏、安全感 2022-12-15 11:27 109阅读 0赞

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

**上篇文章后，前端商城部分基本功能已实现，包括商品列表，商品分类，首页商品展示，商品详情，购物车，用户登录注册，剩余内容：用户信息修改，提交订单，订单展示等，这篇文章将对剩余功能部分完结。**

**用户信息修改的后端接口已经在管理平台实现，这里直接进行验证调用即可**

**之前的修改用户信息功能在测试中体现出来了一个bug，因为生成Token的字段是用户名，当修改用户信息时，如果修改了用户名，就会导致token验证失败，于是我们需要修复token生成方式，将之前的用户名生成改成\_id生成,新版代码已经提交至码云**

**修复后效果：**

![20201016164711279.gif][]

**下面介绍一下实现流程 ，这里我们把info用户信息界面和登录界面放在单页面中，通过v-if条件渲染，条件是checkToken是否通过**

**bussiness.js，验证token是否有效**

import Vue from "vue";
    import config from "../../config/config";
    const { ServerApi, StorageName } = config;
    export default class UserInfoBussiness extends Vue {
      constructor(_vueComponent) {
        super();
        this.vueComponent = _vueComponent;
      }
      checkToken() {//验证Token函数，若token正确，则直接登录成功，若未成功，则切换至登录界面
        let token = this.$storage.getStorage(StorageName.Token);
        if (!token || !token.length) return;
        this.$axios
          .get(ServerApi.token, {
            params: {
              token
            }
          })
          .then(res => {
            switch (res.result) {
              case -999://token请求抛发错误，token过期或错误
                this.vueComponent.isLogin = false;//显示登录页面
                this.$storage.clearStorage(StorageName.Token);//清除之前的token
                break;
              case 1://验证token成功
                this.vueComponent.userInfo = res.data;
                this.vueComponent.isLogin = true;//显示个人信息页面
                break;
              default:
                this.vueComponent.isLogin = false;
                this.$storage.clearStorage(StorageName.Token);
                break;
            }
          })
          .catch(err => {});
      }
    }

** info.vue组件**

<template>
      <div>
        <Top :title="isLogin?'我的':'登录'"></Top>
        <div class="content">
          <UserInfo v-if="isLogin" :userInfo="userInfo"></UserInfo>
          <Login v-else></Login>
        </div>
        <TabBar></TabBar>
      </div>
    </template>
    
    <script>
    import UserInfoBussiness from "./bussiness";
    import TabBar from "../../components/tabBar/tabBar";
    import UserInfo from "../../components/userInfo/userInfo";
    import Login from "../../components/login/login";
    import Top from "../../components/top/top";
    import config from "../../config/config";
    const { EventName } = config;
    export default {
      components: {
        Top,
        UserInfo,
        Login,
        TabBar
      },
      data() {
        return {
          isLogin: false,
          userInfoBussiness: null,
          userInfo: null
        };
      },
      created() {
        this.userInfoBussiness = new UserInfoBussiness(this);
        this.$events.onEvent(EventName.IsLogin, () => {
          this.userInfoBussiness.checkToken();//退出登录响应事件，重重页面
        });
        this.userInfoBussiness.checkToken();//初始化先验证token
      },
      destroyed() {
        this.$events.offEvent(EventName.IsLogin);
      }
    };
    </script>
    
    <style lang="less" scoped>
    @import "../../style/init.less";
    </style>

**在用户登录成功后，我们需要一个组件显示用户信息，这个没有任何逻辑，纯渲染，所以暂不做介绍**

<template>
      <ul class="userInfo">
        <router-link to="/UpdateInfo">
          <li>
            <img :src="imgPath+userInfo.headPic" alt />
            <span>{
       {userInfo.username}}</span>
            <div class="iconfont icon-fanhui"></div>
          </li>
        </router-link>
        <li>
          <mt-cell :title="userInfo.phoneNum"></mt-cell>
          <mt-cell :title="userInfo.mailaddress+userInfo.mailurl"></mt-cell>
          <mt-cell :title="userInfo.alladdress.join('-')+'-'+userInfo.address"></mt-cell>
          <mt-cell :title="userInfo.descript"></mt-cell>
        </li>
      </ul>
    </template>
    
    <script>
    import Config from "../../config/config";
    const { RequestPath, StorageName } = Config;
    import { Cell } from "mint-ui";
    export default {
      name: "userinfotop",
      props: ["userInfo"],//父组件传递用户信息至当前组件，并渲染
      data() {
        return {
          imgPath: RequestPath
        };
      },
    
      created() {
        this.$storage.saveStorage(StorageName.UserInfo, this.userInfo);
      }
    };
    </script>
    
    
    <style lang="less" scoped>
    @import "../../style/init.less";
    .userInfo {
      li:nth-child(1) {
        .h(230);
        width: 100%;
        .mcolor();
        .l_h(230);
        margin-top: -1px;
        color: #fff;
        > img,
        > span {
          display: inline-block;
          vertical-align: middle;
          margin-left: unit(40 / @pxtorem, rem);
        }
        > img {
          .w(145);
          .h(145);
          border-radius: 100%;
        }
        > span {
          .f_s(40);
        }
        > div {
          height: 100%;
          float: right;
          padding-left: unit(40 / @pxtorem, rem);
          transform: rotateY(180deg);
        }
      }
    }
    </style>

**通过点击头像框路由跳转至UpdateInfo，用户信息修改页，我们将头像上传单独写成组件**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70][]

**这里有一个原生js上传文件的坑：  
axios上传post文件头文件需模拟 "multipart/form-data"请求，而这种请求格式与application/x-www-form-urlencoded有所不同，需要声明一个分隔符‘boundary’。**

headers: {
              "Content-Type": "multipart/form-data;boundary=ABC"//ABC内容自行填写
      },

**那么这时，坑人的地方来了，直接以ABC这种简单的分隔符内容上传文件可能会导致服务端对文件不识别，无法找到文件起始位置，所以我们需要一个复杂的字符，比如使用new Date().getTime()生成随机字符，修改后就有以下配置**

headers: {
              "Content-Type": "multipart/form-data;boundary=" + new Date().getTime()
            },

**上传头像组件中，我们要自己写一个控件替代官方的input元素，也就是点击图片使用JS执行input文件上传事件，并提交到服务端，服务端存好缓存后将图片文件地址发送到前端，前端读取文件并展示，以下是头像上传的所有过程  
uploadPic.vue**

<template>
      <div class="uploadPic">
        <img :src="picPath" @click="clickHandler" alt />
        <input class="picFile" id="picFile" type="file" @change="uploadPic" accept="image/*" />
      </div>
    </template>
    
    <script>
    import Config from "../../config/config";
    import UploadBussiness from "./bussiness";
    const { StorageName, RequestPath, UploadKey } = Config;
    export default {
      name: "uploadPic",
      props: ["picFile"],
      data() {
        return {
          imgPath: RequestPath,
          picPath: ""
        };
      },
      created() {
        this.picPath = this.imgPath + this.picFile;
        this._uploadBussiness = new UploadBussiness(this);
      },
      methods: {
        clickHandler() {//点击头像模拟至点击文件上传input-file标签
          document.querySelector("#picFile").click();
        },
        uploadPic(e) {
          let _picFile = new FormData();//新建FormData文件
          _picFile.append("token", this.$storage.getStorage(StorageName.Token));//将token添加至文件属性中
          _picFile.append(UploadKey.headKey, e.target.files[0]);//文件校验字段
          this._uploadBussiness.uploadPic(_picFile);//上传文件
        }
      }
    };
    </script>
    
    <style lang="less" scoped>
    @import "../../style/init.less";
    .uploadPic {
      img {
        width: 100%;
        height: 100%;
      }
      .picFile {
        display: none;
      }
    }
    </style>

**bussiness.js**

import Vue from 'vue'
    import config from "../../config/config"
    import {
      Toast
    } from "mint-ui";
    const {
      UploadName,
      EventName,
      UploadKey
    } = config
    export default class UploadBussiness extends Vue {
      constructor(_vueComponent) {
        super()
        this.vueComponent = _vueComponent
      }
      uploadPic(data) {
        this.$axios
          .post(UploadName.headPic, data, {
            headers: {
              "Content-Type": "multipart/form-data;boundary=" + new Date().getTime()//axios上传post文件头文件需模拟 "multipart/form-data"请求，而这种请求格式与application/x-www-form-urlencoded有所不同，需要声明一个分隔符‘boundary’。
            },
          }).then(res => {
            Toast(res.msg);
            switch (res.result) {
              case 1://上传成功后显示图片
                let fileRead = new FileReader();//新建文件读取实例
                fileRead.readAsDataURL(data.get(UploadKey.headKey));//readAsDataURL读取本地图片信息
                fileRead.onload = () => {
                  this.vueComponent.picPath = fileRead.result
                }
                this.$events.emitEvent(EventName.UploadPic, res.headPath)
                break;
              default:
                break;
            }
          })
      }
    }

**说完了上传头像组件后，来实现一下修改用户信息，之前上传的头像地址会通过组件传参传递到父组件中，伴随着其他信息一起提交到服务端，服务端将收到的头像缓存地址解析成文件并保存，修改用户信息组件中可以复用一个省市县选择器组件，即之前在商品详情中使用的商品数量选择，其他的表单元素都是基本的文本类型**

**updataForm.vue**

<template>
      <div class="update">
        
        <UploadPic class="uploadPic" :picFile="userInfo.headPic"></UploadPic>
        <mt-field
          placeholder="请输入用户名"
          :state="userInfo.username.length?'success':'error'"
          v-model="userInfo.username"
        ></mt-field>
        <mt-field
          placeholder="请输入手机号"
          :state="userInfo.phoneNum.length?'success':'error'"
          v-model="userInfo.phoneNum"
          type="number"
        ></mt-field>
        <mt-radio v-model="userInfo.sex" :options="sexOption"></mt-radio>
        <mt-button class="btn" @click="selectAddress">{
       {userInfo.alladdress.join('-')}}</mt-button>
        <mt-field
          placeholder="请输入详细地址"
          :state="userInfo.address.length?'success':'error'"
          v-model="userInfo.address"
        ></mt-field>
        <mt-field
          placeholder="请输入个性签名"
          :state="userInfo.descript.length?'success':'error'"
          v-model="userInfo.descript"
        ></mt-field>
        <mt-button class="submit" type="primary" @click="submit">修改信息</mt-button>
        <div class="shopPicker">
          <mt-popup v-model="popupVisible" position="bottom">
            <mt-picker
              :slots="myAddressSlots"
              value-key="name"
              :visibleItemCount="7"
              @change="changeAddress"
            ></mt-picker>
          </mt-popup>
        </div>
      </div>
    </template>
    
    <script>
    import UpdateBussiness from "./bussiness";
    import Config from "../../config/config";
    import { Field, Button, Picker, Popup, Radio } from "mint-ui";
    import address from "../../config/city";
    import UploadPic from "../uploadPic/uploadPic";
    const { StorageName, RequestPath, EventName } = Config;
    export default {
      name: "updateForm",
      data() {
        return {
          imgPath: RequestPath,
          updateBussiness: null,
          popupVisible: false,//控制picker显示
          selectArea: null,
          sexOption: [//性别配置
            {
              label: "男",
              value: "man"
            },
            {
              label: "女",
              value: "woman"
            }
          ],
          myAddressSlots: [//省市县联动配置
            {
              flex: 1,
              defaultIndex: 0,
              values: [],
              className: "slot1",
              textAlign: "center"
            },
            {
              divider: true,
              content: "-",
              className: "slot2"
            },
            {
              flex: 1,
              values: [],
              className: "slot3",
              textAlign: "center"
            },
            {
              divider: true,
              content: "-",
              className: "slot4"
            },
            {
              flex: 1,
              values: [],
              className: "slot5",
              textAlign: "center"
            }
          ],
          userInfo: this.$storage.getStorage(StorageName.UserInfo)//获取缓存的用户信息，用于显示默认项
        };
      },
      components: {
        UploadPic
      },
      created() {
        this.$events.onEvent(EventName.UploadPic, headPic => {//上传头像后将新地址保存至当前组件
          this.userInfo.headPic = headPic;
        });
        this.updateBussiness = new UpdateBussiness(this);
      },
      destroyed() {
        this.$events.offEvent(EventName.UploadPic);
      },
      methods: {
        selectAddress() {//显示picker
          this.myAddressSlots[0].values = address;
          this.popupVisible = true;
        },
        changeAddress(picker, values) {//三级联动
          if (values[0]) {
            this.userInfo.alladdress = [values[0].name];
            picker.setSlotValues(1, values[0].children);
            if (values[1]) {
              this.userInfo.alladdress.push(values[1].name);
              picker.setSlotValues(2, values[1].children);
              if (values[2]) {
                this.userInfo.alladdress.push(values[2].name);
              }
            }
          }
        },
        submit() {
          this.updateBussiness.submitData();//提交信息
        }
      }
    };
    </script>
    
    <style lang="less" scoped>
    @import "../../style/init.less";
    .update {
      .uploadPic {
        overflow: hidden;
        .w(200);
        .h(200);
        .mg(unit(30 / @pxtorem, rem) auto);
        border-radius: 100%;
      }
      .btn {
        width: 100%;
        .h(100);
        background: #fff;
      }
      .submit {
        margin-top: unit(30 / @pxtorem, rem);
        width: 100%;
        // z-index: 100;
      }
    }
    </style>

**bussiness.js**

import Vue from 'vue'
    import config from "../../config/config"
    import {
      Toast
    } from "mint-ui";
    const {
      ServerApi,
      StorageName,
      EventName
    } = config
    export default class UpdateBussiness extends Vue {
      constructor(_vueComponent) {
        super()
        this.vueComponent = _vueComponent
      }
      submitData() {
        for (const key in this.vueComponent.userInfo) {//表单非空判断
          let value = this.vueComponent.userInfo[key]
          if (!value.length && value != true && value != 0 && typeof value == 'string') {
            Toast('请填写完整的信息');
            return
          }
        }
        this.$axios
          .post(ServerApi.user.updateUser, {
            crypto: this.$crypto.setCrypto({
              token: this.$storage.getStorage(StorageName.Token),
              ...this.vueComponent.userInfo
            })
          }).then(res => {
            switch (res.result) {
              case 1:
                Toast(res.msg);
                history.go(-1)
                break;
              default:
                break;
            }
          })
      }
    }

**用户信息修改就介绍到这里，下一步将对项目的最后一步订单的前端部分进行分享**

**订单的后端逻辑与接口在管理系统中已经介绍完毕，前端部分就是很简单的数据渲染和状态修改**

![2020101621350963.gif][]![20201017113202183.gif][]  
**首先，订单是基于用户和商品绑定的，所以，我们在购物车中实现新增订单功能，添加成功后跳转至订单查询界面，除此之外，在用户信息界面，添加用户的所有订单列表可以查看和付款（由于只是一个项目案例，所以这里没有实现支付功能）**

**orderList.vue组件，几乎都是页面渲染，没有什么逻辑功能，就不做说明**

<template>
      <div class="content">
        <div class="orderTop">
          <div>
            <div>
              <p class="fontcl">
                下单时间：
                <span>{
       {new Date(orderList.orderTime).toLocaleString()}}</span>
              </p>
              <p class="fontcl">
                订单编号：
                <span>{
       {orderList.orderId}}</span>
              </p>
            </div>
            <div
              :class="orderList.orderState==0?'noPay':orderList.orderState==4?'isFinish':'isPay'"
            >{
       {orderState[orderList.orderState||0].name}}</div>
          </div>
          <div>
            <div>
              <span class="icon-yonghuming iconfont">{
       {orderList.username}}</span>
              <span class="icon-shoujihao iconfont">{
       {orderList.phoneNum}}</span>
            </div>
            <div class="fontcl">{
       {orderList.address}}</div>
          </div>
        </div>
        <ul class="orderList">
          <li v-for="(item,index) in orderList.shopList" :key="index">
            <img :src="imgPath+item.shopPic" alt />
            <div>
              {
       {item.shopName+item.shopScale}}
              <br />
              ￥{
       {item.shopPrice}}
            </div>
            <span>×{
       {item.shopCount}}</span>
          </li>
        </ul>
        <div class="submitOrder">
          <span>付款合计：￥{
       {orderList.orderPrice}}</span>
          <span @click="submitOrder" v-show="orderList.orderState==0">去付款</span>
        </div>
      </div>
    </template>
    
    <script>
    import OrderBussiness from "./bussiness";
    import Config from "../../config/config";
    import ShopType from "../../config/shopType";
    export default {
      name: "orderList",
      data() {
        return {
          orderState: ShopType.orderState,
          imgPath: Config.RequestPath,
          orderList: [],//订单详情
          orderBussiness: null,
        };
      },
      created() {
        this.orderBussiness = new OrderBussiness(this);
        this.orderBussiness.getOrderList();
      },
      methods: {
        submitOrder() {
          this.orderBussiness.sendOrderPay(this.orderList);//支付
        },
      },
    };
    </script>
    
    <style lang="less" scoped>
    @import "../../style/init.less";
    .content {
      font-size: unit(32 / @pxtorem, rem);
      .fontcl {
        .cl(#979797);
      }
      .orderTop {
        > div {
          padding-left: unit(35 / @pxtorem, rem);
          padding-right: unit(35 / @pxtorem, rem);
        }
        > div:nth-child(1) {
          .h(160);
          border-bottom: unit(3 / @pxtorem, rem) solid #e8e8e8;
          > div:nth-child(1) {
            float: left;
            p {
              .l_h(80);
              span {
                .cl(#000);
              }
            }
          }
          > div:nth-child(2) {
            float: right;
            .h(160);
            .l_h(160);
          }
          .isFinish {
            .cl(@mainColor);
          }
          .isPay {
            .cl(#000);
          }
          .noPay {
            .cl(#A71A2D);
          }
        }
        > div:nth-child(2) {
          .h(180);
          border-bottom: unit(30 / @pxtorem, rem) solid #f3f3f3;
          > div:nth-child(1) {
            overflow: hidden;
            .l_h(100);
            span:nth-child(1) {
              float: left;
            }
            span:nth-child(2) {
              float: right;
            }
          }
          > div:nth-child(2) {
            width: 100%;
          }
        }
      }
      .orderList {
        li {
          .h(250);
          padding-left: unit(20 / @pxtorem, rem);
          padding-right: unit(35 / @pxtorem, rem);
          > div,
          > span,
          img {
            display: inline-block;
            vertical-align: middle;
          }
          img {
            .w(220);
            .h(220);
            margin-right: unit(30 / @pxtorem, rem);
          }
          > div {
            .l_h(60);
          }
          > span {
            vertical-align: top;
            margin-top: unit(50 / @pxtorem, rem);
            float: right;
          }
        }
      }
      .submitOrder {
        .h(130);
        width: 100%;
        position: fixed;
        bottom: 0;
        background: #fff;
        border-top: unit(3 / @pxtorem, rem) solid #cdcdcd;
        span:nth-child(1) {
          float: left;
          .pd(unit(40 / @pxtorem, rem));
          .cl(#852332);
        }
        span:nth-child(2) {
          .mcolor();
          .pd(unit(45 / @pxtorem, rem) unit(110 / @pxtorem, rem));
          float: right;
          .cl(#fff);
        }
      }
    }
    </style>

**获取订单列表和提交订单支付状态的bussiness.js**

import Vue from "vue";
    import { MessageBox } from "mint-ui";
    import config from "../../config/config";
    import Clone from "../../utils/clone";
    const { ServerApi, StorageName, EventName, DefaultPageConfig } = config;
    export default class OrderBussiness extends Vue {
      constructor(_vueComponent) {
        super();
        this.vueComponent = _vueComponent;
        this._defaultPageConfig = Clone.shallowClone(DefaultPageConfig);
      }
      getOrderList() {//获取个人订单信息列表
        this._defaultPageConfig.token = this.$storage.getStorage(StorageName.Token);
        this._defaultPageConfig.orderId = this.vueComponent.$route.query.orderId;
        this.$axios
          .get(ServerApi.order.orderList, {
            params: {
              crypto: this.$crypto.setCrypto(this._defaultPageConfig)
            }
          })
          .then(res => {
            switch (res.result) {
              case 1:
                this.vueComponent.orderList = res.data.list[0];
                break;
              default:
                break;
            }
          });
      }
      sendOrderPay(data) {
        MessageBox("提示", "本案例仅为参考，未开通支付功能");
        data.orderState = 1;//修改订单状态为已支付
        data.token = this.$storage.getStorage(StorageName.Token);
        this.$axios
          .post(ServerApi.order.updateOrder, {
            crypto: this.$crypto.setCrypto(data)
          })
          .then(res => {
            switch (res.result) {
              case 1:
                break;
              default:
                break;
            }
          });
      }
    }

**订单功能完成**

**项目整体打包**

**通过运行   npm run build   进行webpack打包**

**生产环境部署可以参照我[之前的一篇文章][Link 1]**

**如果需要配置https环境可以参照[这篇文章][Link 2]**

**文件夹的命名规则以及模块组件的分配在[这篇文章][Link 3]有说到**

### **希望这个系列的文章对你有帮助，如果你阅读完了整个系列或者某篇文章，非常感谢你的支持** ###

**总结：到这篇博客为止，《从零开始，搭建一个简单的购物平台》系列的文章全部完结，以下是本人完成整个项目的一个小总结以及一些注意点：**

*  **搭建环境及配置文件：对自己的技术栈以及优势需要深入了解，并且选择最适合自己或者是产品需求所需要的技术，完成项目目录的搭建，比如前端最好养成模块化，组件化开发的习惯，尽量将文件夹以及文件细分到每个基本组件。**
 *  **以组件和框架的官方文档为核心，学会自己上网查找问题，自己动手解决问题非常有必要。**
 *  **学会造轮子，虽然网上有大量的框架，组件，别人写好的js库，但是自己动手写函数，封装功能以及组件是非常有必要的，并不是节省时间或者其他方面的原因，自己写能提升自己编程思路和实际应用能力，而且当自己写出了一个比较成功的类或者组件，甚至方法时，会有很大的成就感**
 *  **面向对象编程语言，减少代码耦合度，提高内聚性，使代码健壮性更加强大，这点我自己正在努力改善，这样写代码有利于把很多方法剥离，可以提升复用性，减少代码量，说白了，一个项目别人可能只需要3000行代码，而我可能需要5000行**
 *  **这个项目我是全栈完成的，采用的是前后端分离，但是实际开发中，前后端可能是两个或者多个人开发，这时需要自测接口及功能，前端搭建mock.js或使用easymock来进行模拟请求，后端可以使用postman，SoapUI等工具进行接口访问**
 *  **前端和后端需要防止多次重复请求，前端通过节流的方式，防止对后端重复请求，但是也要防止数据库的恶意攻击（这个项目中没有实现），通过参数附带时间戳，使一个ip或者一个用户只能在短时间内请求规定次数**
 *  **巧用前后端缓存，前端使用cookie和localstorage，后端生成temp缓存文件**
 *  **前后端加密处理，token，Crypto加密参数，Bcrypt加密密码**

[https_blog.csdn.net_time_article_details_108918489]: https://blog.csdn.net/time_____/article/details/108918489
[https_gitee.com_DieHunter_myCode_tree_master_shopping]: https://gitee.com/DieHunter/myCode/tree/master/shopping
[20201016164711279.gif]: /images/20221123/eee53e923319489d85d1296793d18cf7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70]: /images/20221123/00b74bbb04024164a63ac7443d2e5b80.png
[2020101621350963.gif]: https://img-blog.csdnimg.cn/2020101621350963.gif
[20201017113202183.gif]: /images/20221123/1e36e016aa2346c48634b10a7dcf1540.png
[Link 1]: https://blog.csdn.net/time_____/article/details/104439713
[Link 2]: https://blog.csdn.net/time_____/article/details/108050452
[Link 3]: https://blog.csdn.net/time_____/article/details/104676690