00:00
大家好,我是学习园地的特约讲师高若峰,上节课咱们完成了购物车的编写,那按照我们的流程,那我们下一步应该把购物车的商品生成订单,然后呢,我们确认订单支付这样的一个流程,但是呢,在我们的呃,订单管理生成订单,这是一个原因图。生成订单除了有购买的商品之外和总价钱生成订单,那么还需要有什么,还需要有这个配送的地址,因为得给你发货嘛,对吧,那地址呢,我们得先做管理,比如说可以编辑地址,然后呢,把哪些地址设置成默认的,对吧?因为我们有可能邮寄的时候,你有多个地址,比如在单位寄到家里,对吧,有这样的一个情况,所以呢,咱们得先做地址管理,才能在订单这里边儿有地址,因为订单里边我们得需要一个地址,所以按照现在的流程,咱们先不写订单,咱们先写地址管理。嗯,找到地址管理,比如说可以有几个地址,然后把地址设成默认的地址,可以编辑,然后可以新增地址,是这样的一个情况,但是呢,做地址呢,咱们得需要从什么个人中心这块转过去,所以呢,咱们这节课先完成个人中心,下节课咱们从个人中心找到地址管理这块过来,大家也可以从订单这块把地址呃转过来,然后去编辑地址,两种都可以。
01:11
咱们这节课呢,就呃编写下个人中心的一个页面,那个人中心的页面呢,我提前也把这个样式给大家写好了,功能都没写了,原来咱们在个人中心这块只是把什么呃,退出登录这个地方功能能写了,对吧?其他的地方没写,然后有几个是给大家留的作业的,就给大家写了,因为跟咱们整个商城的购物流程呃关系不大,也比较简单,比如说收藏,那你接口都给你提供了,你只要在商品详情地方加一个收藏按钮,对吧?那收藏这里边去收藏列表也可以删除收藏就可以了,然后呢,订单是咱们重点要写的,因为这属于咱们整个商城的一个重要的一个流程的部分,然后账号管理,咱们现在登录退出就可以实现咱们的流程了,账号管理呢,你可以修改密码头像对吧,找回密码,这些呢都在账号管理里边可以设置,这个呢也交给你优惠作业,跟咱们这个流程也没关系,你就可以后期补这个功能都行了,都是通用的一些功能,然后地址管理,关于我们呢,你随便放个页面对吧,你的企业信息介介绍什么的,这不给你写了,放在这里边,所以呢,咱们后边流程有两个比较重要的,一个是地址管理,一个是我的订单。
02:11
对吧,收藏和账号管理是你自己写,所以呢,这里边儿留给你自己写的东西有我的收藏,整个收藏的流程,然后呢,呃,账号管理你自己写,然后再有呃,像搜索商品,在商品列表那里边加个搜索功能,然后呢商品评论四个功能需要你自己去完成,但是这四个功能跟我们主体流程关系不大,所以呢,我就不给你,呃单独的都讲一遍了。给你留的作业,那我们来看一下呃,个人中心这个页面,我现在提前已经把这个呃页面功能写好了啊,个人中心跟这个是呃差不多的。来我们看一下,因为它这里边儿需要的样式什么的比较多。嗯,没有用到组件,基本上用到组件就用到一个,这里边给加上了是这个,嗯I con,也就是我们这边的一个小图标这个icon。
03:02
很简单的一个,就是我们这边的最右侧的一个小浮标在这。然后其他的就全是样式的部分了,咱们都是用div和列表啊做的一个布局,在这有这么多样式,你可以自己去看一下啊。都不难啊,但是咱们写起来还是稍稍费时的,得一点点调,所以呢提前给大家写好啊,然后呢,这里边儿呢,个人中心肯定得获取到个人用户的信息,对不对,所以呢,我们用户相关的。用户相关的网络请求都在这里边,对吧,登录退出对不对,那这里边儿我们还需要写一个什么,写一个呃,得到用户信息,这个肯定得需要的,不然的话我们得不到用户信息,你想要我们也获取不到所有用户的东西,对不对,所以我在这块得到一个呃,用户信息找一个。十个处一个吧。结构都一样的,对不对,然后我们只要加上得到用户信息get user,只要是我们授权过的对吧,你也不用传当前用户ID啊,或者什么,只要是授权过的,咱他topn获取到了这个信息,那么我们就能得到我们当前的这个用户信息,我们看一下用得到信息肯定方法是盖的,那我们删掉对吧,我们找一下接口。
04:10
得到信息。呃,用户。用户个人中心用户闲情,你看更改头像啊,对吧,中心用信息都有接口,就是这个。我们现在是登录的,那就我们会发送就可以了。然后这里边有名字以email电话对吧,头像头像的图片地址对吧,然后呢,呃,还有是否是被锁的状态对吧?然后呢,用户的创建时间,这些比较简单的一个,嗯,都是信息用不上,那咱们这里边获取用户信息。拿过来通过这个片就可以把这个我们需要在我们这里边引入,这里边呢,除了咱原来写的功能对吧,其他的就是一个架子放在这块,没有用到其他的东西,那我们退出和得到用户信息放在这块,那这里边呢,我们就可以写什么需要我们去写跟用户相关的获取信息了,那用户相关信息获取的时候,我们一定在哪块去获取啊。
05:04
在嗯。这个属性里边。挂载的生命周期里边,在这里边,我们所有获取网络的数据都在这里边,这边加了这个。然后我们得到user,通过这个方法不用传任何参数DB,然后我们看一下res里边打印一下,这里边我们打印一下res。答,一下,看一下能不能获取到用户信息。这个个人中心的话刷新一下。把ID是15对不对,用户名是这个,登录名是这个对吧,当然其他的都没有设置,你可以在在账号管理里边,把其他设置什么电话呀,头像啊,对吧,这些时间呢,都是空的对吧。电话头像都是空的图像,Ul这里边呢,你得设置完之后,这里边才能获取要的那信息,那我们把用户的全部信息,我们做一个状态管理,把它都放在咱们的状态管理里边,但是不是VVS状态管理啊,我们就直接做一个这个con ST第七的。
06:06
创建一个状态ST,所有的你放在这里边,这样我们用标点直接展开就行了,然后re里边放一个对象,里边我们就放上用户的信息,给他一个空对象,然后我们需要在页脚底下必须把什么用把它返回去对不对?那我们直接展开这个对象就可以了,连着点住。IFS,这里边我们STT把所有的状态返回,这样的话我们就不用一个一个的去声明这里的状态了,对吧?所有这些页面用到都放这里边,当然这个页面本身只用这一个,对吧?只用这一个呢?那我们就把这一个加在这里边来,那就是T,这样user直接等于因为我们返回来的,我们看一下下边就直接是这个信息了,对不对,那我们直接将这个res给他就行了。不用做更多的更多的其他的处理就OK了。然后获取到这个状态管理里边也返回了,对吧,也通过这个方法返回了,那这里边。
07:03
我们就可以改变这些用户的昵称啊,图片啊,对吧,这些内容你就可以修改了,当然我们这个用户头像里边是空的一职单位,你如果用的话,直接在这面换成变量就可以了。然后呢,我们这里边用差值的方式,比如昵称,那就是uc.name名称对不对,登录名。登录名,我们登录的是使用邮箱登录的,那我们这块直接user.email就可以了,你看现在能获取的就是我当前的登录的信息,看错误。啊,这号没加。逗号一个。老师上课回来。那登录名对吧。呃,昵称登录名称这个丢了,然后标签呢,咱们这个接口里没有,如果嗯,你需要有个个性签名的话,那你在那个接口里边加上,也就在后台的数据表里边加上一个,这样,然后在接口里加上就可以了,接口没提供,在页面里边一般都加一个这个对吧。然后呢,购物车数量下边有其他的也不用加了,然后我们给每一个加上一个链接,这里边儿都是跳转到其他页面对吧?呃,不需要在这块做那种,嗯,手风琴式的对吧?展开处理,那样的话这个页面太小了,在手机里边还是我们把它转到其他的地方去处理是比较合适的,那我们需要。
08:20
呃,处理这里边每一个都是一个链接,那咱不能每一个都是用一个路由管理,这边写一个公用的方法,然后去调用就行了,那这里边写一个,呃,公用的一个跳转的方法,跳转方法。在这里边我们加上cost啊。Con ST声明一个goto。第二个咱们在几边大写,然后传的一个什么,传的一个路径和加的一个参数Q公用的传到这里边来,然后我们直接通过什么通过路路由这个呢,我们前边也引入了这个。看到吧,在这块对吧,有一个路由,那路由呢,里边我们说了用pass最需要一个对象,对象里边两部分,一个是p pass的部分对吧,和一个参数部分,那现在pass部分这个R就是我们的是吧,Pass的部分,那你可以在这块直接加一个什么PA pass对吧。
09:16
过来那这块呢,就可以直接加一个单词就可以了。Pass,这里边传过来值和和那个名称是一样的,咱们可以简写对不对,然后呢,查询字符串,我们这块如果你传过来的是一个对象参数,那我们直接传对吧?或者如果前面的没有对象,你没有存参数,或者那我们就传一个什么空对象,可以这么一起解写就行了。这个用的是短路运算符嘛,对吧,只要一个成功的话,对吧,就返回就不用往下写了,如果用安德符的话,两个安德符的话,那就前边如果成功了再执行后边,前面失败了就不执行后边,这个呢,前面成功了就行,后边对吧,这空对下。都不啊这块这个那个我们用技能函数啊。
10:00
不是直接写上一个方法等于,然后参数这里边。加减到函数出错啊。然后我们在每一个方法里边。那说话。你看点击箭,咱不光点击箭头,点击整个列,整个列表的时候,我们都直接呢,让它跳转就可以,所以呢,我们在列表这块加上一个链接。这块加上一个,比如说CK等于。嗯,Got goto,那比如说我们呃,收藏传一个路径参数不需要,那我们就不传参数,对吧,传一个路径收藏CO1CD,当然了,我们这个路由没写了对不对,然们收藏就给你编写,那你就自己去写。然后路由里边标要添加上CL等于。嗯,O。这里边我们,呃订单,订单呢,咱们叫做or DR,跟排序的那个词是一样,对不对,订单。转向订单的页面,然后这个。呃,账号管理,账号管理咱们就直接,比如说账号设置嘛,Set ting。
11:04
这个没有对吧,也需要你自己去设置。这个也是留给作业啊,账号管理改头像啊对吧?嗯,请优化自己的号信息啊,都可以在里面去做地址管理,这块是咱们重点啊,马上要写的。Ad res放在这里边,关于我们呢,那你就到就行了,A do。这个呢?这个好,咱们有吧,那有没有这个,没有的话,这页面给你自己写啊,这简单写不写都可以,那这样的话我们通过。这里边能不出错就可以对吧,然后比如说我的订单一点到订单里边去,当然现在没有这个订单有对吧,然后呢,呃。O two不是一个函数。他提示这个错误。这是一个路由goto啊goto我们写完之后没有干嘛,没有在这块传过去。哦。
12:00
更新一下。你比如说地址管理上面地址对不对,然后这个页面马上就行了,然后呢,呃,账号管理载体都是可以啊。那如果你算参数的话,也可以在里边加上参数这对象的格式就可以了,收藏里没有,但是路由都可以了,你你得在路由里边添加这个路由就行了,好,这节课我们就讲到这里,下节课呢,我们开始通过这个入口进到我们的地址里边,把我们的地址管理给写完,好,谢谢大家,这节课我们到这里。
我来说两句