前端---【2】如何制作小米商城【全套】？

此文章

1.完善上一节小米商城【1】的东西

2.实现比较难的功能！如何写分页如何实现校验登录以及收货地址实现等！

3.小米商城共三节，此文章是第二节。第三节就是画出完整的小米商城！

1.优化上一节内容

我们在上一节遍历出了三栏+每一栏中的卡片

1.优化卡片数据：重命名

思考：前后端开发是一起进行的，前端的我们暂时没有拿不到栏以及卡片的数据，我们只能自己模拟数据，看图解析

【还是不太理解没关系，看到后面就懂了】

卡片这么改写噢！

    现在我管你后端传入的图片或者标题用的什么数据命名，我统一给你重命名------这样卡片的渲染一直用的是你自己的重命名，无需再根据后端的命名规则--再修改卡片组件的数据渲染啦! !!

还有一种命名方法：

在获取卡片数据接口中：将每一栏的卡片重新命名---再放入到一个数组中

该数组构成：存放有三条数据，每一条数据存放了一栏的卡片数据

代码

咱们打印看看

然后：获取当前下标----渲染对应下标的卡片数据，直接传值即可！！

页面效果：发现可以渲染！

2.改写"浏览更多“卡片”

上一节“浏览更多卡片”是我们单独写的--现在让他套用“卡片组件”

“浏览更多卡片”与“组件卡片”的flex布局搬到公共样式，【上一节“浏览更多卡片”的flex布局已经搬到公共样式，所以我们把“组件卡片”的flex布局搬到公共样式】

代码如图：

再思考：浏览更多也是卡片组件的一种，那么骚操作来啦！

操作：删除更多卡片样式-----引入卡片组件

 使用插槽

整体思路就是：

 

页面效果

卡片组件整体清晰代码

2.写登录功能

去elementui找到这个

预览效果：正是我们需要的登录效果

来到头部组件--写登录

数据绑定

1.实现图标

使用elementui组件库

加上去

效果：完美！

输错出现“x”如何实现？

加这个

加登录按钮

效果

给登录按钮加宽度

效果

2.登录注册共用弹窗逻辑

写个标识dailogMode--表示当前弹窗用途是什么

判断显示“登录”还是“注册”标题

判断显示“登录”还是“注册”按钮

点击登录或者注册--关闭弹窗

点击登录或者注册按钮---弹窗显示

效果

3.表单校验

首先：写好校验规则

效果

写校验规则

写一个自定义校验函数，并且打印看看是啥

将校验规则写入校验里面，并且只留下trigger---如图

看看效果

假如我输入值

完善自定义校验规则

效果

完善“请输入密码和再次输入密码”校验

效果

4.登录

接口

引入接口

效果

小问题

点击登录----点击input不输入---点击X--关闭弹窗

再次点击登录---发现表单保留了上一步的状态

怎么做？

有个关闭弹窗函数

点击X--清空表单

效果----没有保留上次表单状态

3.订单的收货地址

首先---创建订单页---进行路由注册

点击我的订单--跳转订单页

画图

效果

我们要实现的效果：点击中间加号---弹出弹窗【国家--省级--市级--县区--镇：运用动态加载】

点击北京市后，只会加载北京市下面的区县，而不是显示所有省份下的内容--这叫动态加载--减少存储

首先先接接口

模拟pid为1--调用

效果

我们选择省级----再显示市级---再显示县级等----效果引用级联选择器

首先：画弹窗

效果

基础样式代码如下

1.级联选择器el-cascader

效果

绑定数据

当传入Pid：1时--返回省份数据

看这个

发现数据有了--只是没有渲染

因为级联选择器默认显示的字段是value和label

而我们后端返回的是id和name

而且看elementui的方法：options数据源+props要显示的字段

效果

选中北京市----发现绑定的area存的是一个数组【因为地址是逐级的：像这样[福建省,泉州市,洛江区]=[110000,10000,11000]】

2.启动动态加载

效果

1.加载下一级数据源lazyLoad函数

效果

继续点击xx市

所以lazyLoad是返回点击对象的下一级，咱们先拿到当前节点的id值传入到地区接口

发现报错

是因为最初的level是第0级，是没有id的！

所以写个判断

接下来我们把下一节点的数据返回出去

效果

有个问题：我们打印请求数据

效果

2.优化层级数

层数不一样--我们要规范:我们就显示到第三级别【和后端沟通级别】

代码如下：

效果解析：点击山西省--判断level是否满足大于等于2--否---给他的儿子打不上leaf标签

点击长治市---判断他的level是否满足大于等于2？---是---给他的儿子打上leaf标签--则儿子们成为叶子结点

有个问题：这里只有两级，第三级别是没有显示的，这样我们无法选中两级作为值【解决：要么很后端沟通，要么采用elementui提供的方法】

采用elementui提供的方法

选择第几级--值就固定位几级

方法如下：

与父级关联

效果

选中啦！

3.按钮

4.订单修改地址【难】

效果：

引入---调用

效果：查询到了用户地址信息

我们把地址信息存起来

渲染

效果

点击--跳出弹窗

效果

但是发现地址数据没有回显---因为后端给我们返回的是一串字符串

而且我们给后端返回的数据也是字符串类型的

但是级联选择器绑定的是数组形式

故：我们把后端返回的字符串转为“级联选择器”需要的数组形式，用split和map

结果：赋值给orderform.area之后还是没有回显，这是为什么？

因为

1:options绑定的是数据源areaList---联级选择器点击选择省份触发lazyLoad---再选择市级等---不是点击个人地址--直接动态执行lazyLoad----回显效果

2.我们v-model="orderForm.area是数组，options也是数据源---联级选择器会优先选择options绑定的数据进行下一步

3.点击用户信息--出现弹窗---level此时为0----直接return出去了--根本不会执行lazyLoad

那我们怎么做？？

当level为0的时候---直接给level赋值为1---这样点击个人地址---跳出弹窗---直接根据

v-model="orderForm.area执行lazyLoad加载--然后回显！

当level为0的时候---直接给level赋值为1---点击添加地址--跳出弹窗---v-model为空---执行一次lazyLoad加载出省份

删除options

效果：回显啦！

补充：

一般修改地址后--我们要把id+中文地址返回给后端！那么如何拿到中文？

选好地址后----获取组件的值---拿到其中的中文数组----转为中文字符串---传给后端

让我们看看该组件的方法getCheckedNodes()能拿到什么样的值

首先在级联选择器写个点击事件【级联选择器点击是指---点击组件---地址有变动后才会触发点击】

打印

展开看看----发现一串刚刚选的地址数据

现在想办法获取到并且转为字符串！！

发现已经转为了字符串！

5.全部商品

首先点击更多商品卡片---跳转到全部商品页----$router.push

点击“浏览更多”---跳转

目前我们的全部商品页长这样

1.画样式

这个咋画

用这个

效果

这个咋画？

用这个

效果

商品分类有提供接口

调用

数据查询出来啦！

存数据

遍历--渲染

效果：完美！

接下来画主要商品卡片

接口

接口调用

看返回值---有数据

存返回值【producList自己在data的return中自己定义哈，我就不多放图片了】

绑定后--组件传值---渲染

效果

改变一下样式

效果

头部与卡片有一定的距离--找到这个标签--进行修改

elementui组件库修改一定要记住深度修改

整体效果

2.写分页

copy这个

效果

解决页数问题---total表示卡片数量--绑定到分页组件上---组件根据：total卡片总数量除以每页数量＝页数----会回显页数！

绑定total

效果：有4页

其中的事件解析如下：当前页发生改变就会触发！！

事件有个自带的val--打印看看是啥

原来val是当前的页数！

拿到当前页---赋值给当前页pageNum---再次调用获取数据列表接口

效果

问题来啦---发现我们最后一页布局有问题！而且grid布局就是三行五列！！

看这个--点击当前页---发送请求---后端返回当前页的长度length---每一页15个数据【15个数据就是15个lengh】

用length/5得到行数row：15除以5刚好是三行---如果是5条数据/5得到1行！

动态使用style--加载行数

效果--完美！

3.完善页面功能

这个有个全部按钮

但是后端返回的数据没有全部字段---那我们自己手动添加

效果

点击tab栏---显示对应的商品

tab组件有个事件

打印看看能拿到什么

可以打印出组件的数据-----展开有个index----发现和categoryId能够对应上---咱们把他转为Number类型传入后端即可

打印看看是否接收成功

拿到啦！

传入到后端--后端返回对应tab的数据！！

效果

又有个问题

当点击tab栏的手机--再点击全部---发现数据不见了

【因为初始的时候--没有点击tab---categoryId为undifined---那么传入后端的只有页数和当前页--就可以返回全部数据。

点击tab全部----categoryId赋值为0---后端没有categoryId=0的处理--后端返回的数据就会为空】

怎么写？咱们写个判断函数：catagoryId为0为一种赋值-----不为0是另外一种赋值--再将赋值的传入后端即可！

调用这个函数：根据index的值改变pagination的数据

再次刷新数据---更新的pagination的数据传入后端---回显数据！

效果：点击手机--再次点击全部--发现数据回显--该页面画出来啦！

以上内容都是小米商城的稍微难的地方啦，下一章内容【3】：完善全部小米商城