为了账号安全,请及时绑定邮箱和手机立即绑定

31、地址新增 — 定义数据结构与获取方式

标签:
vuex

前言:前两章我们讲了地址列表和地址填写两个页面的制作,这几章就是把上两章的内容打通,新增一条数据并在地址列表中展示,实现地址列表页与地址填写页的数据互通获取与编辑功能。
GitHub:https://github.com/Ewall1106/mall

1、地址的数据结构

根据对地址列表和地址填写所需要字段的分析,我们可以知道数据结构应该是这样:

  • id: 每条地址的唯一标识

  • name: 收货人姓名

  • tel: 收货人手机号

  • address:收货地址(这个应该是在地址填写页面的时候将详细地址和省市区拼接而来)

  • addressDetail:用户填写的详细地址

  • areaCodeL: 地区编码,通过省市区选择获取

  • postalCode: 邮政编码

  • idDefault: 是否为默认地址

webp

地址的数据结构

2、新建一条地址

(1)让我们进入addressEdit.vue页面填写一条地址,ok,现在假设你已经填写完毕。
(2)这个时候我们点击保存按钮且应该为这个按钮添加一个save事件,通过官方文档可知,我们可以通过这个事件获取填写表单的内容。

webp

截图来自vant官网

webp

save获取用户所填写的内容

webp

打印用户所填写的内容

(3)然后,应该将事件返回的数据变为我们开头说好的那种数据结构,所以我们定义一个data对象:

// 保存onSave(e) {  let data = {};
  data.name = e.name;
  data.tel = e.tel;
  data.address = e.province + e.city + e.county + e.addressDetail + "";
  data.addressDetail = e.addressDetail;
  data.areaCodeL = e.areaCode;
  data.postalCode = e.postalCode;
  data.isDefault = e.isDefault;  console.log(data);
},

3、列表页面获取数据

(1)当在地址编辑页面编辑完成以后,如何在上一级的列表页面获取地址数据呢?我举例几种方法:

  • 使用接口获取
    当用户点击保存的时候,我们可以post请求向后台提交本条数据,然后当回退到地址列表页面的时候再次请求一遍接口获取数据,只是重复请求对体验不好;

  • 使用本地存储localStorage
    我们将这条数据保存起来,然后当进入到其他页面时再次从本地获取。

  • 使用vuex。
    使用vuex来管理状态当然是最好的选择了,所以下面几章专门讲讲vuex;后端现在还没写,就简单用本地存储localStorage存储/获取数据。

4、小结

本章主要是定义了地址的一个数据结构然后就是添加了一个save事件,下章简单讲下localstorage的用法,并使用它存储/获取一下数据,毕竟localStorage本地存储在日常的项目构建中还是经常用到的一个知识点。
下下章说下大家期待的vuex



作者:Ewall_
链接:https://www.jianshu.com/p/ed72a5544d59


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消