第12课:开发进行时之订单流程

第12课:开发进行时之订单流程

在前几篇文章中,我们对一个电商网站中购物这一块的大致内容进行了讲解和演示。本篇文章,我们就把这些内容串联起来,让他们更具关联性。

一般情况下,用户在购物的时候流程是下面这样的。

  • 打开首页。首页一般是一个网站的门面,首页的样式决定了用户是否会喜欢你的网站,而首页的加载速度,则决定了用户是否会在第一时间离开网站。如果网站的加载时长大于三秒,可能你就直接流失了这个用户,所以我们在首页的时候一定要做好性能的测试。

  • 查看推荐商品或者搜索商品。如果用户有明确的目标,他则会直接根据关键词来检索产品,从产品列表中寻找它需要的哪个产品。如果用户没有明确的目标,他则会在网站中闲逛,看你各个地方推荐的内容,所以一个购物网站往往在首页中的大多数内容都是各种商品的推荐。

  • 进入商品详情页。当用户找到某个产品并想了解详情的时候,他就会选择进入商品详情页进行详细的了解,商品的介绍一般由后台控制。在这一块,我们的工作就是展示后台的内容,如果用户觉得满意,就在这个页面选择他需要的产品的规格颜色等等,然后添加到购物车。

  • 购物车提交。当用户选择好商品的属性之后,就会选择将商品添加到购物车或者直接提交,在这里我们需要对用户已经选择好的商品进行展示,包括基础信息和价格。如果用户确认没有问题就会提交到下一个步骤,确认订单及付款。

  • 确认订单付款。这里到了一个订单前期流程的最后一步,一般在这里用户确认收件信息之后就会付款,根据网站的不同,有的网站会在上一个步骤就生成订单,有的网站会在这里生成订单,如果你生成了订单,则可以打断现有操作,在符合规定的时间内都可以回到这里进行继续操作。

在这些步骤中,彼此之间都会存在关联,一级一级的往下走,都需要从上一个步骤中获取某些信息,然后到新的页面之后根据上一个页面传递的信息作为某些参数,在本页面请求新的数据。

在开始讲述订单流程之前,我们先来讲解下页面公共部分的工作。

头部。一般我们会有两套样式,一套是用户已经登录了,如果用户已经登录则会从后台请求用户信息,某些用户的某些信息会被展示出来,而有的用户信息则会存在项目中,在其他地方使用。另一套则是用户未登录的时候,展示登录或者注册按钮。我们会在这个模块记录登录的状态,供其他地方使用。

悬浮区域。悬浮区域一般有两种,一种是导航,一种是页面功能(如简版购物车、联系客服等等)。导航一般出现在首页及一级页面,而页面功能则在详情页或者店铺页出现。

尾部。这一部分包含了许多网站的各类信息以及第三方链接。在网站中一般会有几套底部样式,在不同的页面采用不同的底部。

在每个页面都会有这三部分,所以在开发过程中,我们就会把这三个内容当作三个组件,分别引入。

接下来,就让我们从第一部开始,来走完一个订单的下单流程。

在首页,用户可能有两种操作,第一种通过检索,到达商品列表页,另一种则是点击推荐商品,直接进入商品详情页。二者的区别多了一道检索工作。

在首页的时候,我们通常会去做如下这些事。

1.获取页面数据。网站所有的商品数据和分类数据,一般情况下都来源于后台,所以在进入页面的时候会先去后台请求数据,然后将返回的数据按照之前的需求做处理,赋值给我们已经定义好的变量。这样首页就能够将这些信息展示给用户。代码示例如下。

axios.post('首页数据接口','请求所需参数')
        .then(function(res){
         // 响应成功回调
         if(res.data.success==true){//后台返回成功
         this.indexData=res.data.data//将后台返回的数据赋值给页面中定义好的变量
         }else{//后台返回失败
         //后台获取数据错误的处理
         }
        })
        .catch(function(err){//网络响应错误
          // 网络错误的处理
        })

   }

2.搜索商品。虽然说这一功能是在首页,但实际上我们在做这个功能的时候首页并没有去搜索商品,而是记录下了用户输入的关键词,然后跳转至下一页面,在下一页面带着关键词去后台请求数据,然后展示在页面中。所以在这里,搜索商品,首页执行的就是带上检索关键词跳转。代码示例如下。

//首页进行页面跳转
//this.search为检索输入框的绑定变量
router.push({ name: 'searchList', params: { search: this.search }})

3.页面跳转。根据用户的点击,跳转到分类导航的页面或者进入商品详情页。如果跳转至其他一级页面,基本上一个简单的跳转就 OK 了。如果是跳转到详情页,这时则需携带商品对应参数,到详情页之后根据参数来获取商品详情。

当离开首页或者其他一级页面,进入了二级页面,二级页面较多时候是一些列表页。前面说了首页离开会做些什么事儿。接下来我们来看看跳转到二级页面时,这些二级页面要做些什么。

在二级页面中,页面内容都是由上一页面的操作决定的,某些页面的内容可能是固定的,但是更多的页面内容都是根据跳转的时候上一页面所携带的参数不同,在本页面进行与后台的交互,从而获取到与参数匹配的内容进行展示。代码示例如下。

//首先在钩子函数中获取传递的参数
 this.$route.params.search
//然后根据参数去请求数据回来
axios.post('商品检索接口','请求所需参数')//这里的参数就是上一个页面传递过来的检索关键词
        .then(function(res){
         // 响应成功回调
         if(res.data.success==true){//后台返回成功
         //将后台返回的数据赋值给页面中定义好的变量,检索出来的结果就会列表渲染出来。
         this.indexData=res.data.data
         }else{//后台返回失败
         //后台获取数据错误的处理
         }
        })
        .catch(function(err){//网络响应错误
          // 网络错误的处理
        })

   }

同样的,在它跳往下一页面的时候也会携带对应的参数前往下一页面。

//跳往详情页
//item.id为列表渲染数据中商品的ID
router.push({ name: 'item', params: { id: item.id }})

在二级页面中,一般下一步操作就是进入商品的详情页,相对于之前的页面而言,详情页给用户的操作内容更多,用户在这个页面除了进行商品的信息浏览之外,还会选择他需要的商品规格样式等,对于这个页面中,我们又会如何处理呢?

不同的详情页需要不同的做法。有的网站会在进入的时候就把所有数据都交互回来,你点击操作所带来的数据改变都是进入时请求回来的,但有的网站是在进入的时候默认一组操作参数作为请求,当你去操作的时候又实时的与后台进行新的交互。代码示例如下。

//首先在钩子函数中获取传递的参数
 this.$route.params.id
//然后根据参数去请求数据回来
axios.post('商品详情接口',this.$route.params.id)//
        .then(function(res){
         // 响应成功回调
         if(res.data.success==true){//后台返回成功
         //赋值给定义好的变量,渲染页面
         this.indexData=res.data.data
         }else{//后台返回失败
         //后台获取数据错误的处理
         }
        })
        .catch(function(err){//网络响应错误
          // 网络错误的处理
        })

   }

当用户在进行选择操作的时候,我们会改变页面中的某些数据并记录下来,在之前的章节中有讲解,对于商品选择操作这一块我们就不再重复讲述了。

接下来我们讲解加入购物车或者点击购买的流程。

无论用户点击立即购买或者是加入购物车,我们都需要进行判断,判断现在用户是否已经进行了登录。之前的页面都可以在游客的模式下进行,但是如果到这里了,用户必须完成登录后才能到下一步(PS:网站架构,购物车功能基于用户存在),所以在这里我们就会用到头部中的数据,头部会在页面加载时就判断登录与否。如果已经登录,就使用头部所携带的用户信息和商品信息进行下一步,如果没有登录,则让用户前往登录。

当用户已经登录,点击加入购物车。与后台接口进行交互,将用户所选的商品参数传递给接口,后台将商品加入购物车数据库。如果本页面有悬浮的购物车,则需要在添加请求成功后同步更新购物车数据。

var data={
    userId:this.userId,//用户ID,数据来源于头部的请求
    itemData:{//商品信息,根据商品实际数据来决定有哪些数据
        itemId:this.$route.params.id,//上一个页面传递的商品ID,或者本页面请求回来的ID
        size:this.selectData.size,//用户选则的规格
        color:this.selectData.color,//用户选则的颜色
        number:this.selectData.number//购买的数量
    }
}
axios.post('商品详情接口',data)//
        .then(function(res){
         // 响应成功回调
         if(res.data.success==true){//后台返回成功
         //这里可以让后台返回你需要的购物车信息,或者重新再去请求购物车接口,以同步页面上的悬浮购物车数据
            axios.post('购物车信息结构','用户信息')//
                .then(function(res){
                 // 响应成功回调
                 if(res.data.success==true){//后台返回成功
                    this.shopCarData=res.data.data//将返回数据赋值给购物车
                 }else{//后台返回失败
                 //后台获取数据错误的处理
                 }
                })
        .catch(function(err){//网络响应错误
          // 网络错误的处理
        })

   }
         }else{//后台返回失败
         //后台获取数据错误的处理
         }
        })
        .catch(function(err){//网络响应错误
          // 网络错误的处理
        })

   }

当用户已经登录,点击立即购买,则会直接跳往订单的核实页面,这时候一样得携带上用户信息及商品信息前往核实页面,传递参数的方法与之前的一致。

无论是加入购物车或者是立即购买,最终都会到核实订单这一页面,这里只需要简单的根据之前的信息去请求你需要的数据,请求回来展示给用户,如果用户没有问题,就直接点击下一步生成订单。

一个订单的前期流程,即从进入网站到下单的过程。中间就是在不停的传递参数和请求数据。这也是我们日常网站中最常见的状态。在很多页面间携带参数跳转,获取数据展示。大家了解在 Vue.js 中是如何来完成这些跳转和请求的即可。至于使用的跳转方法和请求方式,在前几章中我们有详细的讲解。大家可以根据自己的情况来决定你使用哪种方式来请求,使用哪种方式来跳转。

上一篇
下一篇
目录