Vue3.x从入门到项目实战 44.项目其他流程 学习猿地原创

那咱们现在做这个呢，是前台对吧？那后边的功能我会给大家捋一下，那咱们再看一个，这个就是呃，API过来有个后台项，后台演示，这个呢是咱们用vuee加TS，呃加V就是另外一个教手架啊，咱们会开发这个后台，那也是教学级的，所以呢，也不是说把所有的功能做的很完善，这个你看像刚才注册的用户用户管理对吧？商品管理咱可以新建的添加所有的这个商品，然后呢，呃，订单管理下订单对吧？然后呢，用户评论准没有用户评论，然后轮播图，好，这是咱们说后边上的这个后台的。咱们还是看这个前台的这个功能吧，然后给大家比代码，那咱走一下购物流程和这个支付流程，然后呢，看一下这些代码咱是怎么写的，比如说随便点任何一本书。

这个咱商城都都逛逛啊，收藏什么的那个东西你该加加都可以啊，然后呢，如果点加入购物车，那只是呢，添加到购物车了，对不对，如果同一本书你再加入一个，那这本书就会买两本，就会买两本，两本呢它按数量下边只显示一个对不对，因为它是按本书，不是说按那个就是类别按类别去区分的，那如果你选一本书，比如说我们这块切换一下，选择一本书之后，那如果我们选择。立即购买。立即购买。那他就会直接转到购物车这块，然后要我们去结算，OK。那我们再回到首页里边，我们再选多选几本。比如说spring。啊，宣传板加上购物车。再选一本。来本好书。

这个多买几本加购物车啊。然后也可以立即购买。你看有这么几本书看到了吧？那这个里边的默认状态是全选择的，全选择的，然后假如说C说P2P或者是某一本书，这四本书我们不买了，你把勾选掉，这个勾选掉，你看就不是全选它下边这个状态也要他没有啊注意这些细节。注意这些细节，然后呢，我们哪些想删除掉就选择上，假如说购物车我不想留了，对吧，就彻底不想买。你可以滑动删除，那你说这个特效怎么写的，这不用你写组件库里都有对吧，这些都组件库的，只不过加了一个这个数量而已，对吧，你看如果加号不能点的，说明这个数量库存就没有了，库存就没有了，听到吧，已经是到六本了，就点不了了，他这块最大的是库存。

我看，但是这块呢，为了防止你快点对吧，因为每点一下，它并不是说在前端变了，而购物车它是一个表是在后端存的，所以呢每点一下。对吧，他都得请求接口，如果这个接口没请求完，你连续快点，那他又出现另外一个问题，所以你看所有的商城都是什么呢？这个我是仿京东的啊，你看如果所有的。都是这样对吧，快点的话会操作错误，所以你看一些这个按钮，它都会加一个修改中，对吧，返回来之后我们才可以再去修改，就保证没有这样的一个bug OK。然后选中之后下边的价钱，你所有的选中价钱加数量之后，对吧，这些价钱都让他这个值跟着变。看到了吧，都应跟着变啊，这样的一一个过程，所以呢，逻辑上它就是一个表处理的，这个逻辑还不算什么，呃，太复杂的，那假如说我就选中了这两本书，这个买两本对吧？呃，这个买四本，一共是496块钱，然后呢，我现在点结算一点结算的时候并不是马上什么生成这个订对吧，你看合计496这块呢，还得需要我们有地址才可以，对吧，没有地址是发不了货的，当然了，你要是做全的话，还得选择快递啊，选择什么东西是不是都有那个东西啊，所以现在简称简生成订单的话是不行的，对吧，那得需要我们干嘛呀，你看收货地址不能为空有个提示啊，这个给判断好。

你看购物车数量还是没给我们清空，因为没结算成功对不对，看到这个了，但是刚才点传递的时候，不知道大家注没注意这个地址，你看一些新手写的演示级别的啊，他们呢，呃，把逻辑放在前端，就是所有算账这些信息。干嘛呀，所有这些信息走的是通过参数传递，买了哪些书啊，书读啊，什么这个参数这么长对吧，占成整个这个栏了，这种不安全，听到吧，地址栏是这块又是有缓存的。

OK，所以呢，咱们这个走的什么呢？就跟京东啊，和其他商城是一样的，走的是后端接口，也就是我这块所有的改变，哪怕我任何一个动作，其实都给后端跟这个用户相关的这条购物车的这个表给改了。OK，所以呢，我在点结算的时候。在点结算的时候，你要注意啊，他是直接在结算的页面，通过这个用户的这个ID就会把再把这个购物车表拿过去，在另外一个传，就不用我们通过参数传了，这样非常的安全，我看现在的商城都是这样的，所有的有操作动作都会请求一下接口，哪怕加一些数量都是请求一下接口。OK，那请求接口就会干嘛呀，就会写到表里去，所以你再点结算到下个页面，不用管这个页面的所有的状态记录的数据在下一页面都可以找得到，但是他说了结算的时候需要一个地址，所以呢，地址在哪？在我的信息这块有个地址管理，还没有地址，咱就得新增一个地址，比如说姓名对吧，姓名呃姓名比如说呃老老孟电话，比如说呃1771009对吧，0088随便写的啊，然后地区你看这块选的地址，这个地址也是组件，但是咱们得把数据给他，他本身是不带数据的。

有这东西去确认，然后这块写个呃1234，随便来一个设置为默认地址可以选择，然后保存默认地址，它就会默认把地址选择那块，当然我们还可以重新去编辑，OK。等待一下，等待一下，但是还是慢编辑的时候会把那个信息再给我们拿回来啊，然后呢，我们再可以新增很多个地址啊，新增比如说呃小凤，然后电话那188。

8888999，随便来一个啊，然后诶。地址北京北京市，咱们给他选个西城。嗯，随便写几个，你看，如果我这个都是在数据库表有记录的，如果我切换它为默认地址，默认地址只有一个，那你看一下是不是下边这高晓峰地就是默认地址对吧？其他边你可以填很多个激活的地址都可以啊，对吧。呃，然后在编辑编辑这块下边有个删除按钮，你可以把它删除掉啊。然后点我的这里边就能有了，然后再回到购物车页面有地址，填完之后他就会这个用户，他就一直记录着，对吧，你不用下次每次都填对不优化都填一遍就行，现在再点结算。

你看上面就有显示默认地址就会放到这块，对吧，当然你想切换现在这个链接，你就可以怎么的再切换对吧，你说把这个比如说我改回什么，改回默认地址。保存主要是那个数据没回来，他那接接接口那个慢啊。经常办。先退回来吧，现在有地址了，然后这个书价格496，现在我们再点生成订单，生成订单的时候，对吧，直接会调用什么，会调用支付。会调用支付。等待一下会慢啊，然后如果是在微信里边，你可以直接调用微信的什么那个二维码啊，什么移动的里边，对吧，在APP里边肯定直接调用支付了，对吧，在这里边我们因为咱是模拟嘛，所以之后我就调出来两个二维码，现在这二维码呢，这两个其实你看是支付宝二维宝，微信二维码，那个微信是没有沙箱的，沙箱环境的，那现在你可以装一个什么，下载一个沙箱环境，支付宝的沙箱环境，专门开发测试用的一个支付宝那里边呢，你可以马上成为亿万富翁，你里边可以存个几百个亿都可以啊。

都行的，但测试用不能真人支付，然后呢，这个沙箱环境，但是呢，像我这个我现在就不给你支付了啊，我这块是，呃，我手里现在没有安卓手机，那只有安卓才能装那个杀箱环境，那装完那个杀箱环境你在这里边，如果大家现在你有那个安卓手机有杀箱环境，你现在就可以扫一下，扫一下之后你那时候就会显示你购买了几件商品，然后之后你的总价是多少，然后你一支付一支付，那它就会关掉到下一个页面，那咱现在不支付直接关掉，我现在还不想支付呢，也会生成订单，但是这块也会提示你，你已经下单了，但没有支付。OK，已经下单了，没有支付，所以呢，在后台管理这块，你比如说。

嗯，订单管理里边。呃。给你。现在没支付那块儿还还不行。休息一下。应该到这儿啊，怎么没有呢？后台功能还不全，你像地址编辑什么东西，这个大家到时候你你学会这个东西不全的功能你就可以给他补上了，因为教学的一般都写主体，那个主体流程不写，重复的功能就很少写啊。再回到这儿啊。然后这里边咱可以比如说去支付这块呢，又会调用这个EXCE2二维码，对吧，你支付，然后这块呢，是用什么是用轮询的方式啊，轮询的方式什么叫轮询方式呢？就他每隔多少秒，比如说每隔两秒钟就会到服务器请求接口，看你支没支付。

每隔两秒请求一次，一旦你支付了，然后他用时间轮询，然后就回来把这个页面给关掉，所以你看咱们在网上支付的时候，一扫码支付完，诶这个框怎么就能没这个，就觉得很奇怪，对不对，其实是轮询的，他不能改变你客户端的状态。清楚吧，但是它能改变服务器的状态，也就是类似于这样，假如服务器这块有个状态，你你付支没支付过对不对，有个状态在服务器上，但你客户端这块这个二维码会一直显示着，那他每隔两秒请求一下这个状态变不变，比如说由一变成零，或者由零变成一，对不对，然后请求看变不变，两秒钟请求，两秒钟请求，哎，一看你由一变成零了，状态变了，返回告诉他状态变了，然后呢，它就消失。对吧，然后告诉你支付成功之类的。都是这么做的，因为你拿手机这块扫一下客户端，你手机是控制不了这个页面的，清楚吧，而能控制服务器的，那为什么能让它变化，就是因为它时间轮询每个列表去判断状态，然后改变这个状态。

你一扫码支付，因为你改变的是什么，你通过支付宝的后台，你扫完码之后，支付是支付宝后台，咱们后台这块请求的支付宝这个接口对不对，然后把这状态改变的是这样的一个流程，所以你页面看上才会变，感觉你是在和他交互，其实呢，你先跟支付宝交互，支付宝在跟这个交互对不对，这会有时间轮询在过来的这样的一个流程啊。嗯，然后这块有在我这块你就可以有什么我的订单对吧，刚才咱们这个一个订单，假如说有多个订单，咱们再下个订单，一个用户有多个订单吧，订单号创建时间对吧什么什么的，然后有待付款的对吧，这是全部订单，然后呢，假如你支付了这块就有已支付的订单，然后正在发货中的，其实就是状态嘛，对吧，到哪个状态。

加一个状态标记就行了，哪些过期的对不对。有这么多，所以呢，其实这个支付流程要细看的话，也是有一些，呃，对于新手来说会有一些繁琐的，我们对于一些呃经常写商城来说，那这个流程他会逐渐的去细化的，OK。所以呢，这是我们呃请求，就是整个项目的这样的一个流程，当然个人中心其他地方你可以再去细做啊，那按照这个你可以回去之后把这项目其他的先把这个代码都过一遍，然后呢，在这基础上，咱们没写的功能给他完善界面不好看的给它完善行了吧，像这里边像账户管理，账户管理什么改个用户名啊对不对，头像到时候直接可以在这块咱们去改了，对不对。在这块咱可以去换一下。你看头像，但是其他的对吧。

地址管理咱也写了，收藏也写了，订单也写了，还有什么评论管理啊，这些东西对吧？我的评论啊，这些东西是不是都没有啊，那你都可以去加上借口，有都可以那看一下，要想完成后边的流程，那你一定得先熟悉接口是什么样的，什么样的是后台给我们写，什么样前台给我们写的，你比如说购物车，购物车里边是不是就有添加购物车的接口，对吧？需要授权对吧，什么参数返回什么值，有购物车列表的对吧？有购物车改变数量的接口哪个呀，你数量加加减减呢，对不对，至少是一嘛，然后移除购物车了，还有购物车改变状态的就全选，反选呢，它会这样的一个数组选中的哪个会选中的对不对，所有的都是在后台。购物车有这么多操作，那这些操作。你会对应什么呢？对应我们这里边的网络接口，咱们这写的好处就是什么？就是很清晰，把这种接口，现在咱们是完全抽象了这种接口，比如说刚才咱看的购物车是不是这个，你看这里边是不是修改购物车数量，就按他的访问什么ID数据访问这个接口，然后呢，选中状态，然后获取购物车的列表，然后删除购物车，你看跟那个接口是不是都对应的，那这样的话就能够在我们写购物车页面的时候，把这些方法导入购物车，购物车在写购物车页面的时候，你看我们能把这些方法都导入，都导入的时候，我们用的时候其实就是一条语句得到购物车啊，对吧。

这些。你看修改购物车数量啊，对吧，状态啊，复选框啊等等就可以了，一一对应的就能把数据给挂上，改变它的状态。这就是这样的，那同样。你可以对比一下，假如随便找一个吧，在随便上，你比如说收藏，收藏里边是不是有我的收藏对吧，访问这个接口，然后呢，还有收藏，你点击收藏和取消对吧，都需要授权的，那这有两个动作，两个接口，那我们这块就找一下。

Ne里边你看你就你就可以按这个顺序看懂了，是不是这个收藏，收藏里边是不是我的收藏对吧，设置收藏，设收藏的话，就根据哪个ID对吧，他这根据ID就会判断你是如果已经收藏的了，那你调用它一下，它就给你取消，如果是不是收藏的，你调用他一下，他就会给你收藏，就这么简单。对吧，你看收藏用的ID。获取成功参数就是这个ID就行了，所以呢，是收藏了就给你取消，是不是收藏的，就是什么也不用说，存一存零对吧，服务器端自己判断，先判断这个表状态是不是收藏了。跟用户关联呢就行了。所以呢，把一些业务逻辑都写在服务器端了，那除了这个咱这几个都看一下吧，你比如说支付获取二维码的这个接口，对吧，获取这个什么支付，那这里边就可以类型。

参数传类型，类型呢是阿里云的还是微信的对吧？那你通过调用的接口传这个参数传类型等于阿里云，那就会访问阿里云的二维码对吧？存类型等于微信，那就返回微信的二维码支付就行了，然后这里边返回二维码的图片呢？阿里云的返二维码图片，然后微信的对吧？防二维码图片对吧。状态码等等登成功。嗯。你看这话。沙箱支付宝就是下载沙箱支付宝仅支持安卓手机，安装之后使用测试账号登录，那哪个测试账号有个什么？呃，买家的账号，你可以这个登录密码，支付密码在这呢下载，然后买家账号，你可以用这个账号去测试一下啊。

这是支付的，那获取这个查询状态，支付的状态对不对，通过订单ID访问状态，然后一就是新订单，然后呢，支付支付完成已发货，已确认已过期，这五个状态嘛，值是五个对吧，根据返回的不同值就知道他在哪个状态，根据这个状态就能判断咱们前边的这个页面订单。我的订单你看。待付款已支付对吧，发货交易过期就这些吗？这是。接口这块有的，那这些接口对应的就是我们这些刚才收藏分类购物车咱们看了对不对？嗯，商品详情就这一个，然后主页上的接口，然后这个是订单的创建，订单订单预览获取二维码对吧，订单状态。

对吧，订单详情确认订单还有什么。还有获取物流信息，这些都在这啊，你都可以去怎么着去看一看，然后这是总体的所有这些都请求这个嘛，然后用户信息的这咱们自己写过了对吧，只不过你没写的这块有个传用户的一个生成状态，还有什么设置用户名。呃，得到用户名退出登录对吧，请求这个注册这些一一对应的，那这块咱们就这几个模块对吧，那当然这里边好像评论的咱们写啊，就那写吧，到时候你自己加上去吧，如果这一个商城假如有很多，那你这里边也有很多，那按照大模块，如果再细分的话，你再拆成多个文件就行了。

这是网络请求部分挂数据，所以这个网络请求这块是一个重点的地方，就就会封装好就行了，好多人不封装这个，不封装这个就在模板里写，你想想这个反复的写多啰嗦呀，对不对，所以写一次。接口。跟后端对应就行了，所以呢，管这个文件咱们也叫做数据模型，如果你是学后端的，那你写这个呢，其实就写操作数据库的那一部分，那你现在就把它看成操作数据库，给他什么参数，他给我返回什么数据，对吧？什么参数改回什么，只不过变得简单一些了，对吧？后端还有程序帮我们处理，你就把后端看成数据库，把这个看成接口，其实就这意思。所以你看写前端是不是跟写后端感觉是差不多的，对吧，只不过到少了一个后端架构啊，服务器的优化啊，数据库的操作的部分了，对吧，你就把这个网络部分当成后端，当成数据库就行了，那种感觉啊，当成model OK就行，然后呢，呃，路由当成控制器，OK，这个当成model，状态管理当成model，然后路由当做控制器。

这个当做控制器，然后咱写的界面当做视图，也是MVC模式，OK，那有都有这些了，那咱就看从这边开始看，看一下这个，呃，购物车。这样的一个流程啊，购物车。嗯。这的你看前面这个不用管对吧。然后购物车这里边首先呢，会用那个一个你看VN开头的都是VT的组件库吧，VT有复选框组，因为在购物车这块前边是不是有什么。购物车。是不是有这种复选框组，两个都选，下边也选，这个也选，下面也选，对不对，有这样的一个复选框组，不干，它里边原带样的就行，这基本上都没改，我都没改，直接用他的组件库，只不过我获取了什么，获取了这个数据，然后呢，变了一下这里边数据而已，然后把数据都显示在这块，里边有对应的什么改变操作呀，对不对，这些改变操作呀，然后调用里面的方法而已。

You know。就完了，然后默认如果没有数据就空空如也嘛，千万购物嘛。这里边一样包含这些东西，现在都应该能看懂了，路由路由器对吧，数据模型，这购物车列表的数据模型列表对吧？有结果数字选中不选中的啊，默认，比如说这个所有都是选中的，加了一个这样的一个状态而已啊，然后初始化数据，初始化之前你看先调用这种这个轻提示加载加载中对吧。这个就为你机手库里边给我们提供的什么也不用管，加上这个，那加上这个是真一直提示，然后遇到什么，遇到这个对吧，如果从购物车里边得到了数据，看得到的数据，把它放到这个结果里边。

状态在结果里边ID的数组里边放到这里边来了，那我们把这个框可就把这个加载中马上就清除掉，不然他等几秒之后，它在什么默认好像两秒三秒啊清除掉对吧，加上这个就手动清除掉，这也是这个组件给我们提供的功能。然后加载数据，然后计算属性，计算总价对吧，通过这个列表里边，把里边每个结果包含这个ID，就选中的状态的ID拿过来，然后最后呢，我们算出一个总价的一个结果返回来，那在页面就可以放这个总价。然后呢，改变购物车的数量。直接调用什么调用修改这个接口对吧，直接一调用这个状态一循环就行了。然后复选光的一个状态改变，选中复选框所有的，然后前往购物，一点击到下页就是，呃，这块回到首页了，你调用这个方法就相当于回到首页继续购物嘛，又回到首页了，然后删除商品，也是调用接口删除，删除完之后初始化一下，重新初始化一下就行了，然后创建订单，对吧，你如果没选择商品，请选择商品，否则的话就直接调创建订单那个页面。

那创建订单界面，咱们再看一下这里边儿的路由。你看这路由把这几个页面都加上了啊，你得先看这个控制器，咱所说的这个路由这个部分。这一部分除了咱前面加的这个登录注册咱写过的页面。写过的页面，这是多了一个收藏，收藏是不是需要授权，应该一样的，对吧，然后还有地址也单独一个页面吧，编辑地址也是单独一个页面吧，还有订单。

对吧，还有创建订单也是一个页面，还有订单详情也是一个页面，关于我们是一个页面，对吧，其他没有了这么多页面。跟这里边跟咱们写的都是一样的这样的一个过程，只不过这里边多加了一些页面而已啊，所以你按照这个顺序，你就可以把这个代码分析完了，那自己在读代码的时候怎么读呢？就是边读边写，注释一个功能一个功能看，去找他的事件对应什么方法，因为这些方法的顺序它不一定说跟上边这些顺序是完全对应的，对不对，一点的去去看，按照程序的执行顺序去看啊，就能找到，比如almost amount加载完之后就是直引的啊，对不对，它里边定LT初始化购物车里边基本数据你就在这块嘛，加载数据得到数据，包含数据和那个商品的include，包含商品的这个参数，我得说一下。找到。

哎，那个那个等会啊。购物车列表。你看。这个也就是加参数的时候，有的时候插入include包含的这块有好多东西，这个还看不出来，我给你找一下订单的啊。嗯，这是咱们写后端经常用到的一种方式，就是订单。呃，订单预览。这没有。订单详情。你看这地方啊，也就是这块一般都用include，也就是通过这个你可以一起改变返回数据的格式，返回数据的格式啊，你看。如果是这样包含的in订单详情，然后商品，那也就意味着如果不加这个商品，不加点goods，那就返回什么，返回的是订单详情，还有这个地址，如果加这个在订单详情下边又有一个子对象。

里边儿包含了商品信息。所以呢，如果这是这么写，如果这块不加这个，要是逗号都是逗号级别的话，它三个是平级的关系，OK，如果你比如说不加它，把它后边加个点good，就是在详情里边包含商品，而不是商品和这详情是同级的。所以这个参数这个设置的话是有很多原因的，这是在看别人接口的时候，你也要注意的一点啊。所以是不是下边的子数据怎么遍历，怎么获取数据，要根据这个详细的去看，OK，但是一般别人不给你怎么记录，那你就看不出来了，就看他的文档说明的详不详，详不详细啊，就怎么跟后端去沟通。

这是，呃，包含商品拿过来对吧，其他没什么了，只是计算一下结果我那空。话总数。购物车页面，你可以一点点删代码，再一点点加代码，一点点注释，你就知道这个一个流程了，先把这个功能都研究完，我告诉你另外一种就是看这个过程了，因为我不是给你一步一步写出来的，对吧，咱讲一个你要举一反三，把其他弄出来就行，先把这个功能每一个操作，就像我刚才演示的细节，懂不懂详细的。去。了解一遍，了解这个流程OK，然后呢，第二步干嘛呢，你要冥想一下，先冥想什么叫冥想一下，就是我。如果这个功能，假如说我这一点全选，这块能选中对吧，一点没选中，如果让我写的话，我会用什么样的逻辑去写，OK，第二步冥想这个业务逻辑，就把这个步骤设计出来，第三步先自己动手做，第四步再过来看我这个代码。

听懂吧，先演示这功能，这这个代码会给你先演示这个功能，咱就比如说这个全选的功能是怎么出来的，对吧。对吧，有的时候他很容易啊，一改变这个状态，让他全选就行了呗，那我怎么能做到这里边全选，我有一个不选，他这个下边就不选了呢，我全选了之后，他怎就选全选上了呢？对吧，很容易怎么的判断选中的这个ID的一个长度。对吧，如果选中ID的长度小于整个列表的这样的一个长度，那它的状态就是甲就不选择。OK，如果这里面长度相等全等的话，那把它的状态就标上就行了，那它的状态一全选，那所有的像上面都是全选的，就这样的一个逻辑就行了。

就是实际选中的长度，数组的长度小不小于整个列表的长度，这样的一个过程去写就行了。好，这是购物车，购物车一点之后，下边就是什么到订单页面了，这订单页面我再给大家看一个那个。看一个时间片轮询的那个。都是通过接口获取啊呃，创建。呃，订单订单订单。嗯，不是这个，这是订单列表，呃，创建订单在这呢。啊，创建订单，创建订单完之后，订单一旦创建成了，别管它支不支付，你要把购物车给清了听了吧，所以这里边呢，得调用一下购物车的这些东西啊。

呃，网络订单在哪？先不来看，咱就直接看那个轮询吧。创建订单，呃，支付你看调用这个支付的接口对吧，这里边儿你就可以获取谁啊。把这个阿里的微信的，但是这两个你看我都写在一起了，正常的话是分开写的，因为类型都是阿里，因为它有沙箱的测试，对不对，然后类型写这个你分开两个写，这两个放在一起写了，所以两个你会看到二维码是一样，对吧。你右眼究可能你看不出来，但你实际对比一下是一样的，这会跟大家说一下，看这个，然后轮巡查看你看第一个两秒钟，两秒钟干嘛呀，去服务器请求，把这个订单号传过去，请求状态，如果返回的状态等于二。我们就干嘛清除这个定时，这块是生为一个定时，是不是清除这个定时，然后跳转到什么订单详情。

对吧，就看状态等不等于二，等于二的话就就完了，如果不等于二，两秒钟一直请求，一直请求对吧，什么也不做，如果等于二的时候，对吧，清除就不允许了，然后调用到这个，把订单号一传。到订单详情，然后就能把订单详情都列出来，就这意思啊。这就是轮训查看好多功能，咱们画的一个图看就是。他通过阿里对吧，支付宝改变他的状态，你的手机调用的是你的支付宝，支付宝访问阿里服务器，阿里服务器，咱们网站请求阿里的服务器，对不对，然后能把状态改变，把状态改变。那这个时间分中心它就改变了，是间接的这个页面会变化。所有的通过手机操作页面其实都是走的这样的一个一个一个闭环啊。

身份热心，其他的就没有什么了，你现在你有可能乍一看看代码挺乱，你看不懂对吧？这里边我注释也写的也少，你只要是按照我刚才说那几个步骤，先演示功能对吧，自己琢磨功能，然后试想着这个功能如果我写怎么样，对吧？然后试着写，然后写不出来，你再看这个代码，然后看完这个代码之后再考虑各种问题，然后去优化。考虑到我这么操作他会怎么样，对吧，就暴力操作，这也就是一个测试的过程，然后呢，每一种用户可能的一个操作都要想到，然后呢一一的去处理。所以呢，代码量会越来越长，越来越大啊。嗯。这个然后还有一个知识点，大家得看一下，嗯，就是地址管理看在这个里边啊。就是在咱们这里边儿，我的。

呃，地址管理里边。呃。这编辑这个地址。为什么没返回的，我现在开的这个不是那个测试环境啊，所以呢，每次假如装作还得还得点包，打包这块有有一个好像有一个。小bug似的。地址没返回来。我的地址管理，我新增地址吧。嗯，你看地址，其他的字就是一个组件啊，这个页面我都一点没改，你看这个地方。你看就跟他一样的吗。看到吗？是不是一模一样的对吧，新增地址。

它的新增还还还不好使，然后有个地址区域，咱说的是这个，这怎么获取。你看怎么样才能跟他的数据一模一样，然后确认啊或者什么的对吧。地址取消确认，他不是说这个组件不会自带数据。听楚吗？这个组件不会自带数据啊，那如果咱不用组件的话，像地址列表咱们可以用，把这个信息存在数据库里啊，或者什么都可以啊，但现在我这个呢，我是存到JS里边，你看它使用工具包里边，咱这一直没用，有个地址列表，在网上当了一个地址列表。做了一个。一个这样的一个区域，你看。什么地方对应什么，这有对应的这个号对吧。就相当于剑和直。这样的一个关系键和直对的关系。做了几级类似于这样的分类都有了，然后这块你可以返回做了几个方法，就是便利上面这这个数组遍历上面数组返回什么级别一的。

嗯，级别一就是什么省对吧，然后呢，返回市省市区对吧，或者县到第三级就行了，返回所有的省，所有市所有区。通过这个这个就是，呃，网上有这样的代码，这个这你不用自己写，你也编不了，自己写也写不了，对不对，你这里边你比如说龙山县，你能给他改别的名吗？改不了别的名，这是统一的，OK。所以这些东西不用纠结，就固定代码想都不用想，对吧，然后这个代码拿过来之后，那我们再编辑地址的地方。编辑地址的地方。也就是在。嗯。定地址编辑在这里边，然后呢，我们因为写的JS文件，咱们用ES6直接包含进来就可以了，你看直接把它JS包含过来就行了，这就是地址，把地址拿过来之后，那我们就看这个地址对吧，他需要什么样的数据。

他需要什么数据，就看这个手册，你看他有这么多值，看到了吧，有这么多值。什么这些按钮啊什么的，对吧。省市县。区域提示文字等等。就这些。然后呢，按照它这里边的提示，我这里边就获取了什么，获取了通过咱们编辑的那个地址栏里边，你看all的时候，也就是页面一加载的时候，对吧，我获取这几个级别省列表，城市列表对吧，然后区的这个列表是这个三级的嘛，对吧，三级那就调用这个是我们包含过来的，也就是。通过这个地址的JS就包含过来的对吧，包含过来这个得到省级的便历，然后把这省级对应的里边通过这个ID对吧，然后文本对应的什么，比如说北京啊对吧，下边的什么什么区啊对吧，什么什么线呢，一层层的遍地的三级，然后形成了一个什么，放到这三个里边，形成这样的一个数组，所以呢，什么省什么区，下边的就有这三个数组了。

编辑一下这块，然后放到这个这个区域里边去，然后下边就开始编辑啊，如果等于什么代码这块是没什么问题的，然后呢，呃，保存的时候再形成这样的一个参数数据模型，对吧？如果是编辑的话，就修改数据，把这数据再填回去对吧，如果是新加数据的话，添加数据就完了，就这一个逻辑代码，瞅着挺多的，但是其实呢，不难。好吧。这些呢，其实是这也是一个算是一个固定的算法，先找当前对应的区域省市对吧，一层一层的，所以这地址这块并不是组件里边就完全提示好的，那个也也没法给你提示好，所以你可以自己做一些数据，然后呢，就是静态的数据就几个，就像他手册里边提供的啊，然后你就就是数据如果多，你像咱们刚才看到这个地址这块，就看4000多行对不对。

你这做实验，你模拟4000多行，你多难呢，所以你先什么按照他的接口提示，人家这里边提示都给你用什么，用了几个数据，你看北京市，北京市东城区对吧，就是这个层次的几个数据，那你这几个数据如果能出现列表能完事对吧？那这就把这几个数据模型扩大，然后再找这个数据形成这样的数据模型，那他就我然后对应的位置一放就形成它了，这是一个过程。所以呢，对于代码多的，当然逻辑并不是说复杂的，代码多的你就可以按这种方式去走，好吧。

这样的话一点点就行了，这只是一个小商城，那你可以举一反三，那至于这个项目将来假如你做的话，哪些你可以借鉴的去使用，但是想把它写熟，把流程都都写通啊，特别是跟接口什么处理的，那这个你将来能用的能处理就是整个的项目的一个架构。项目的一个架构，然后网络请求的一个过程，和一些基本的业务流程和组织或的一个使用，你做一个项目感觉自己那什么感觉不到自己有多大提升啊，像这个VVE项目怎么也得做三五个以上。才能试着做商业项目去干活，听懂吗？三五个，而且三五个呢，要逐渐的细化，你没发现成员都有这个特点吗？程序越写越好，越写越好，因为他写第一个程序接触到这业务逻辑好的地方留下对吧，那第二项目，那就用第一个项目好的地方，那不好的地方他在改正，逐渐有好的，一旦他写出任何一个。

比如说任何一个功能，就哪怕是咱说的登录注册这样过程，他写过一次完美的一个结构，你下次让他再写不完美的，那这乘务员他就觉得心里不舒服。所以呢，刚学的时候，有可能注册登录你用了十条代码对吧，随着工作写了几次，有可能写到了50条代码，然后或者是又精细的去处理你写到了什么，假如说100条代码对吧，或者是500条代码。就问题就考虑很清楚了，那你以后不管什么样的场景应用，在遇到什么像这个注册登录这样的时候，假如你已经达到了500条代码能写好这个注册登录的级别，你基本上以后再写，你不会低于500条代码的。都是这样的，任何一个成员，同样的功能再写第二遍、第三遍都会比以前的代码多，也一定会是这样的。

代码多，考虑的问题严谨细致，OK。如果你逐渐代码小，那除非你优优化好了，也就是写的软件质量吧，或者健壮性吧，一次比一次强对吧，最终那个强呢，都不会比前面的低，所以这就是有经验和没经验的这样的一个写代码的一个一个区别啊。其他的就自己去看一看吧。没有什么。太太多了，那订单什么就列出来，然后就状态判断流程什么的，没有什么太多难度的。然后大家把这个拿过去，按照我说的，把这个后边我没写的，你自己给补上，然后呢，接口里边接口没有的功能，那你肯定没办法了，对吧，接口里边有的功能，我这里面没写的给他补上。OK就可以了，这块里边还差啥？

我看这里边咱们是，呃，用户详情更换头像这些都写了对那个用户信息的修改，对吧，更改用户信息。改用信息这块只是改一个名称，倒没有太多，嗯。地址管理有多少？你写了省市列表、更新列表、收藏，我也给你写了二维码，写了对商品评价商品，评论商品。哎。评论商品这块。这个把它写了，然后。嗯。评论商品为什么写在订单里啊？为什么写在订单里边，你想象一下。对吧，是不是只有购买了之后，是不是才能去评价呀，购买了之后才能去评价。OK，好评中兵，差评评星，这只评星，然后评价内容就这么几个啊，提交评价内容，这样的话就可以评价商品了。

放在订单里，目的就是购买之后才可以评价，好多不都这样嘛，不然都乱评那个就乱了，对不对，那获取评价信息呢，一般都是评价的是具体的某一个商品。对吧，是某一个商品，所以呢，你有订单购买商品了，那就到这个商品。呃，商品详情，商品详情里边就会有一个，你看商品的评论列表，到时候你可编列出来在这个地方，所以他的逻辑跟实际的业务逻辑也是实时对应上的，OK。