海创软件组--电商项目的总结

最新推荐文章于 2022-06-20 21:59:42 发布

清新小伙子

最新推荐文章于 2022-06-20 21:59:42 发布

阅读量579

点赞数 1

分类专栏： vue 电商海创软件组文章标签： vue

本文链接：https://blog.csdn.net/m0_46627730/article/details/106163806

版权

vue 同时被 3 个专栏收录

51 篇文章 2 订阅

订阅专栏

海创软件组

18 篇文章 0 订阅

订阅专栏

电商

1 篇文章 0 订阅

订阅专栏

最近在做一个电商项目，
前台大致功能模块可分为:

用户模块：注册，登录，修改个人信息，重置密码
商品模块：可按名字查询商品，按商品分类获取商品列表，查看商品详情
购物车模块：商品加入购物车，可动态更改购物车的商品数量
订单模块：订单预览，创建订单，查询订单列表，未付款的订单可以取消

后台：

商品分类管理：可修改，新增，删除
订单管理：可按订单号进行查询，查看订单详情，已付款未发货可以进行发货操作
商品管理：新增商品，商品下架，删除商品，修改商品

用户模块：
注册：注册分步进行，
（1）填写账号和设置密码，技术点：账号不能重复
做法：每次光标离开输入框后，就发送一次请求到后台匹配：

<div class="inputRow"><span class="name">账号：</span><el-input v-model="username" autocomplete="off" placeholder="请输入您的用户名，最多12位" @blur="ruleUser" :suffix-icon="`${usernameOk?usernameOk=='yes'?'el-icon-circle-check':'el-icon-circle-close':''}`"></el-input></div>

 //检验用户名
      async ruleUser(){
        var {username} = this
        if(username.trim()){
          var result = await CHECKVALID({str:username,type:'username'})
          if(result.status == 0){
            this.usernameOk = 'yes'
          }else{
            this.usernameOk = 'no'
            this.userError = result.msg
            this.message(result.msg,1500,'error')
          }
        }else{
          this.usernameOk = ''
        }
      },

（2）输入一些个人信息：例如手机号，邮箱，这些都要进行匹配，不能重复！
做法，还是和之前一样，这里就给手机号和邮箱的正则表达式给你们用来检验是否格式正确吧：

//邮箱验证
      async ruleEmail(){
        var {email} = this
        var regEmail=/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
        if(!regEmail.test(email)){
          this.message('邮箱格式不正确',1500,'error')
          this.emailError = '邮箱格式不正确'
          this.emailOk = 'no'
        }else{
          var result = await CHECKVALID({str:email,type:'email'})
          if(result.status == 0){
            this.emailOk = 'yes'
          }else{
            this.emailOk = 'no'
            this.emailError = result.msg
            this.message(result.msg,1500,'error')
          }
        }
      },
      //手机验证
      rulePhone(){
        var {phone} = this
        var regPhone = /^1[34578]\d{9}$/ ;
        if(!regPhone.test(phone)){
          this.message('手机号码不正确',1500,'error')
          this.phoneError = '手机号码不正确'
          this.phoneOk = 'no'
        }else{
          this.phoneOk = 'yes'
        }
      },

修改个人信息：
（1）修改地址时，需要使用到省市区三级联动选择框，我自己尝试了很久都没做出来，通过上网搜索，发现了一个较为好看的组件，element的三级联动：
在做电商项目的时候需要添加修改收货地址，如何实现三级联动选取省市区地址困扰了我不少时间。
难点：需要通过爬虫获取省市区数据。

后来无意发现了element-china-area-data这个组件，哈哈，实现效果还可以呦。

效果图：

选取地址中：
在这里插入图片描述
选好地址后显示：

好了，各位肯定想知道如何获取数据吧？

这就贴上代码吧：

下载element-china-area-data：

npm install element-china-area-data -S

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>

<script>
  import {regionData,CodeToText} from 'element-china-area-data'
  export default {
    name: '',
    components: {},
    data () {
      return {
        options: regionData,
        selectedOptions: [],
        addtions:{},			//存储地址数据
      }
    },
    methods: {
      handleChange (value) {
      //我们选择地址后，selectedOptions 会保存对应的区域码，例如北京的区域码为'110000'
      //我们要取出区域码对应的汉字，就需要用CodeToText(区域码)进行输出
        this.addtions.selectedOptions = value
        var name = ''
        this.selectedOptions.map(item => name += CodeToText[item] + '/')
        this.addtions.names = name
        console.log(this.addtions.names)
        console.log(this.addtions)
      }
    },
    watch: {},
    computed: {},
    created () {

    },
    mounted () {

    },
    beforeDestrory () {

    },
    destroyed () {

    },
  }
</script>

<style lang="less">

</style>

对区域码和区域码转换成汉字觉得抽象的话，给张输出图你们看吧：
在这里插入图片描述

想了解更多这个组件的可以单击链接进行查阅

用户登录重置密码什么不难就不说了。

订单模块：
1：动态修改商品数量，每次修改都发送一次请求到后台，但有时我们想买多几个，一直点的话，不断变化的数量，我们就不断发送请求，有点浪费资源了，所以需要进行一定的封装，例如数量变化一秒后再发送请求去修改，这样既能防止抖动又能节省资源
实现：数量一旦改变就会触发这个函数，等待一秒若数据再也不变化后就发送请求修改商品数量。

//计数器，商品件数发生改变
 handleChange(productId,count) {
   clearTimeout(this.timer)
   this.timer = setTimeout(async()=>{
     var result = await UPDATECARTCOUNT({productId,count})
     if(result.status === 0){
       this.getCartCount()
       this.Carts = result.data
     }
   },1000)
 },

2：实现的功能：商品勾选变化时要判断是新勾中还是新取消，还要监听全选和全不选，及时发送请求获取最新数据。
我是使用element的那个带选择框的表格实现的，要判断新勾中还是新取消只需要用一个数据存储之前勾中的数据，每次变化时对比一下两数组的长度变化就知道是新勾中还是新取消。全选全不选就是判断是否点击这两个选项或者判断选中数据数组的长度是否为购物车数组长度或者为0即可：

<el-table
          ref="multipleTable"
          :data="carts"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <template slot="empty">
            <img src="../../../assets/imgs/shop/car.svg" alt="">
            <div class="noCart">
              购物车空空如也~~~
              <router-link :to="{name:'main'}">
                <span>前去购物</span>
              </router-link>
            </div>
          </template>
          <el-table-column
            type="selection"
            width="50"
          >
          </el-table-column>
          <el-table-column
            prop="productName"
            label="商品"
            width="350">
            <template slot-scope="scope">
              <router-link :to="{name:'detail',query:{id:JSON.stringify(scope.row.productId)}}" :title="scope.row.productName">
                <img v-lazy="scope.row.productMainImage" alt="" class="cartImage">
                <span>{{scope.row.productName}}</span>
              </router-link>
            </template>
          </el-table-column>
          <el-table-column
            prop="productSubtitle"
            min-width="220">
          </el-table-column>
          <el-table-column
            prop="productPrice"
            label="单价"
            min-width="130">
          </el-table-column>
          <el-table-column
            prop="quantity"
            label="数量"
            min-width="190">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.quantity" size="small" @change="handleChange(scope.row.id,scope.row.quantity)" :min="1" :max="scope.row.productStock" label="商品数量"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            prop="productTotalPrice"
            label="小计"
            min-width="130">
            <template slot-scope="scope">
              <p class="cartPrice"><span>￥</span>{{scope.row.productTotalPrice}}</p>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            min-width="100">
            <template slot-scope="scope">
              <el-button @click="toDetele(scope.row)" type="text" class="cartButton">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

//全选/全不选
      handleCheckAllChange() {
        this.$refs.multipleTable.toggleAllSelection()
      },
      //单选
      async handleSelectionChange(val) {
        this.saveSelection = val
        //获取变化的元素
        var newSelect = this.multipleSelection.concat(this.saveSelection).filter(function(v, i, arr) {
          return arr.indexOf(v) === arr.lastIndexOf(v);
        })
        console.log(newSelect)
        var result = ''
        if(newSelect.length ===1){      //单选
          if(this.multipleSelection.length<this.saveSelection.length)  //新勾中
            result = await SELECTCART({productId:newSelect[0].productId})
          else    //新取消
            result = await UNSELECTCART({productId:newSelect[0].productId})
        }else{
          if(val.length == this.carts.length){
            result = await SELECTCARTALL()
          }else{
            result = await UNSELECTALL()
          }
        }
        if(result.status ==0 ){
          this.Carts = result.data
          this.multipleSelection = val;
        }else{
          this.message(result.msg,1500,'error')
        }
      },

订单模块没什么好说的，就是要有一个预览订单，选中地址后提交订单，最后跳转支付界面，设置定时器隔一秒就监听一下订单状态，实时更新是否已经支付完成，记住，在组件销毁或者订单完成支付后要销毁定时器，以免它一直请求浪费资源。

后台的难点没什么，就是那个照片墙和树形懒加载表格数据变化时要刷新数据有点难，这就说说吧。

照片墙默认显示照片：下次我再说吧，这次有点忙。
树形懒加载表格数据变化时要刷新数据：

首先给表格一个ref作为标识：

<el-table
          :data="types"
          style="width: 100%"
          row-key="id"
          ref="myTable"

每次更新数据后，要刷新列表，就调用loop：

this.$set(表格，id，数据)

例如：

this.$set(this.$refs.myTable.store.states.lazyTreeNodeMap, parentId, result.data)

最后说一说，element表格数据为空是显示自定义内容，而不是它默认的没有数据！
先看一下默认无数据显示吧：
在这里插入图片描述

我后来自定义：
在这里插入图片描述

代码实现：
其实就是添加：

<template slot="empty">
	  <img src="../../../assets/imgs/shop/car.svg" alt="">
	  <div class="noCart">
	    购物车空空如也~~~
	    <router-link :to="{name:'main'}">
	      <span>前去购物</span>
	    </router-link>
	  </div>
	</template>

完整代码：

<el-table
	ref="multipleTable"
	:data="[]"
	tooltip-effect="dark"
	style="width: 100%"
	@selection-change="handleSelectionChange"
	>
	<template slot="empty">
	  <img src="../../../assets/imgs/shop/car.svg" alt="">
	  <div class="noCart">
	    购物车空空如也~~~
	    <router-link :to="{name:'main'}">
	      <span>前去购物</span>
	    </router-link>
	  </div>
	</template>
	<el-table-column
	  type="selection"
	  width="50"
	>
	</el-table-column>
</el-table>

电商的项目我会继续修改完善，有什么知识点再出来修改添加吧。

清新小伙子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
海创软件组--电商项目的总结

最近在做一个电商项目，前台大致功能模块可分为:用户模块：注册，登录，修改个人信息，重置密码商品模块：可按名字查询商品，按商品分类获取商品列表，查看商品详情购物车模块：商品加入购物车，可动态更改购物车的商品数量订单模块：订单预览，创建订单，查询订单列表，未付款的订单可以取消后台：商品分类管理：可修改，新增，删除订单管理：可按订单号进行查询，查看订单详情，已付款未发货可以进行发货操作商品管理：新增商品，商品下架，删除商品，修改商品用户模块：注册：注册分步进行，（1）填写账号和设置
复制链接

扫一扫