Vue3.x项目全程实录 2_项目的需求分析和接口文档说明 学习猿地原创

大家好，我是学习园地的特约讲师高若峰，上节课我们对项目进行了说明，要求大家理解两点，第一，学习这个项目之前一定要有VIVO最新版本的使用基础，第二点，我们使用VIVO开发我们项目中的前端部分前台的模板。这是上节课跟大家介绍的需要大家了解的两点，既然我们是开发一个完整的一个项目，所以我们需要先对这个项目目标进行了解，了解项目的一个开发目标，最简单直接的方式，那一定是有项目的文档，当然了，更直接的方式是直接看原型图，所以呢，我把这个项目的原型图都给大家设计完了。我们选择的是e shop前端部分，那前端部分呢，现在的商城在小程序和移动端应用的比较多，小程序公众号里边应用是最多的，所以呢，咱们开发以移动端为参考去开发。那当然了，开发移动端的技术，大家如果开发的是PC端也是一样可以借鉴的。前面呢，其实我们在做e w shop，在项目的时候用模板去开发，没有用到vuee或者这框架开发的时候，咱们做的是PC端，所以这个呢，咱们选择的是移动端的这种方式开发。另外开发这种项目的结构选择移动的开发，和我们后期再学微信小程序基本上的原理都是一样的。

所以这是我们选择移动端开发的原因，那我们来详细看一下需求，做一个商城，那我们这个商城呢，当然咱们就是一个卖书的商城，起名的就是图书兄弟，图书兄弟呢，大家可以搜索一个小程序，叫图书兄弟的，那最早呢，这个小程序呢，是我将我们出版的所有的出版书籍里边的，呃，配套资源放到图书兄弟里边了，那这次咱们项目呢，PC端咱们叫ewsh，那在这里边呢，咱们中文名字咱们就给它起成叫做图书兄弟。那首先呢，要了解一进入商城肯定是有一个首页，首页那首页又分为几部分呢？很简单的，一个是幻灯片，一个是推荐的，然后呢，分为有畅销的按钮，新书按钮，精选的按钮，那分为这么三类，推荐的，当我们再往上呃选择的时候，会让这个导航栏相当于定在最上面，定在最上面，然后呢，可以通过向上滚动屏幕，不断的加载图书的分页。

因为跟P端不一样，PC端是下一页下一页，而我们是通过向上加载内容，然后再加载下一页这样的一个内容，然后如果超出首屏的话，我们会有一个什么置顶的一个按钮，这是首页的设计。呃，比较容易一些，然后呢是分类设计，在我们接口里边给我们提供的一般是二级分类，所以我们这块接口分类的时候，你可以直接使用一层分类，也可以使用这种二层分类点开的方式，然后通过分类加载图书，加载进来的图书可以按这个分类进行什么销量排序，价格排序和评论多少排序。是这样的一个结构，当然我们下边也会有菜单，上边呢也会有标题栏，标题栏也有返回按钮。啊，跟我们平时用的商城都差不多，那我们一些功能呢，咱们都是仿京东去做的，特别是后台后端的接口，咱们大部分都是仿京东的功能去实现的。

然后详情页，通过分类选择一本图书，你给看图书的详情，包括图书的这样封面，如果有多张图片的话，咱们可以做切换，然后图书名称，图书的说明对吧，是不是新书推荐等等价格，然后可以看他的概述，可以看他的评论，以及选择它相关的图书，我们如果觉得这本书还不错的话，可以加入购物车。可以加入购物车，这就是我们详情页我们需要开发的功能。还有加入购物车，加入购物车那我们可以改变这个数量，然后购物车里边体现选择哪本书书的价钱和数量，当然了我们也可以通过这种什么复选框的方式选择我们购买就是去支付的图书，比如说我选择三本书，但是C分PP第二版和C分PP第四版，第二版我就不买了，选择第四版，所以把这个勾选掉，但是还会留在购物车里面，用我们的那生成订单，如果生成订单的话，会将这两本书形成订单。这是购物车，那购物车再往下走呢，就是生成订单对吧，我们选择了两本书。

邮寄的地址对吧，商品的总价格，然后呢，如果我没有付款的话，我们可以到订单的详情，可以看全部的订单，已支付订单，订单的一个状态，交易完成等等这样的一个环节。然后呢，具体的某个订单还可以到订单详情里面去详细的查看这订单你需要支付多少钱对吧？然后呢，确定了去支付，但是支付的环节可以在生成订单的时候去支付也可以，对吧，后期去支付都是可以的，这是跟嗯传统的商城都是一样的功能。然后呢，像我们呃，收藏也好，或者是加入购物车也好，订单处理也好，都是跟用户个人的行为是相关的，所以呢，咱们需要有用户的登录注册这样的功能。有登录注册，当然了，我们还得有登录，进去之后还有一些个人中心，比如说我这次逛这个商城，我收藏了哪些商品，对吧，还决定买不买，但是我看到这本书不错，比如说我先收藏了，然后我的订单。我购买过的图书对吧，我没有支付的图书都可以查看，物流状态都在我的订单里边可以看到，然后我的账号管理，比如说换一下头像，更改下密码，对吧？这都账号管理的功能，还有地址管理，因为要想一个商城跑通的话，那发货一定得有一个地址，不然的话你买完东西他给你发到哪去啊，它不像我们网课，那网课你购买咱不用物流就可以完成整个交易的过程，但是呢，实体的电商这种我们一定要有地址管理才可以。

还有关于我们当然就是可加可不加的一些功能，然后可以退出的目，那地址管理呢，我们可以有一个默认的地址，对吧，然后可以编辑地址或者是新增地址都是可以的，这就是我们原型图的部分，也就是我们要开发的功能。咱们尽量把所有的功能给大家都开发完。然后我们看一下开发这个功能，这是我们项前期了解的目标，要知道我们能做出什么样的东西来，用到什么技术，这是第一个咱们要知道的。另外我们做这个后端，既然不用我们开发了，已经用写的接口了，那这个就是我们有接口，接口文档，按照接口文档我们去配置接口去使用就可以了。

在这里面。接口文档，当然了，咱们这个文档也就是几十个接口而已，不像我们看到的这个项目，我们项目完成之后会有上千个接口，所以是比较庞大的，那我们这个呢，接口是给大家提供的一个，呃，学习版本的。学习版本了，然后我已经放到了阿里云的服务器上，然后他说那为什么不在本机状态下，因为里边特别是用户登录验证啊，需要有一些手机号的一些方式，以及支付这些呢，都得跑到真实服务器上才可以，那这个接口就给大家留做演示项目和测试去使用，我一直会放到这个线上，这个服务器上，这里边呢。看这文档，我已经让大家看到了使用的默认的这个账号和超级管理员后台的账号。那里边儿数据呢，让广大学员去使用，你尽量不要通过一些不正当手段来打这个接口，给大家营造一个很好的一个学习氛围。不然的话，如果你把这个接口破坏掉，因为我已经看到让你看到了这些管理账号，如果你把你的数据都破坏掉，那么其他同学就用不了了，所以大家正常使用即可，如果你非法使用，我会把你的账号就给封掉。另外呢，大家在使用的时候都使用同一个接口，里边数据毕竟会经常的，呃，都是临时数据，所以呢，后期我也会做成每一周更新一下数据库。

每周更新数据库，还原一下，能能让大家正常使用这个接口，所以呢，接口长时间呢，我不会把它关闭掉，所以大家可以放心的去使用，如果你自己拥有后端技术，你可以自己开发接口，那本接口呢，也可以作为大家的一个开发的一个范例。开发接口，接口怎么写，咱们接口呢，完全是按什么，是按for API的规范去开发的，比如说给我们返回的这些常见的状态码，都是S协议的状态码是基本上是同步的，所以咱们需要判断是什么样的状态，什么问题，对吧，比如二百一般都成功对吧。都是这样的，比如说400服务器，嗯，不理解请求的一些语法，比如说404对吧，找不到资源等等，500呢，就是服务器内部错误返回这么多状态，所以大家在前面判断的时候，你不用理解后端是怎么运营的，当然咱们的奖励项目的时候了，每一个接口在应用的时候，我都大致说一下这后台的一个业务逻辑。

然后这是这个文档的说明，咱们请求的域名是这个，那你一定要用到HTPS这个，因为这里边我们用的是HTTPS这样的，务必使用TSHTPS，否则呢，可能会导致一些部分行为，比如说put呀，或者是post呀，一些起步失败，所以建议大家。一定HTPS，当然了，这个你用咱们这个接口，固定的接口，这个呢，我给你提供的就是什么，就是HTTS的这个不用管，然后呢，所有的用户认证，比如说特别是后台，后台所有都需要认证，前台是部分，比如说购物车，个人中心订单这些都跟用户进供相关的，那使用的是GWT认证，那具体什么是GWT认证，大家可以自己去。了解一下。捐证的API，那我们在认证的时候呢，一都是通过token这个部分，那我们会通过协议头的部分，通过这个去发送过去，前边一定要有这个的，这就是使用GW认证，一定有这个字符串，后边加上我们后的，这在写项目的时候呢，我就给大家详细的说，当然这是提供的默认用户，那前端的我们也不用默认的用户，如果你开发后端的话，你就要用这个登录，然后添加其他的用户，那我们后端就是后端是需要这个超级管员的，前端我们可以新注册用户，然后我们再认证是可以的，那我完全开发这个项目的时候，会按照我们的一个标准的一个流程去开发，所以需要授权的时候，我们再写用户登录注册。

前面呢，我们先把基本结构给建完。那再有呢，就是需要看一下我们的这个项目的表结构，按照我们的需求的原型图，那我们肯定有什么有呃商品对吧，首页商品，购物车这些东西，那比如说我们的用户登录注册的时候，这是用户的表结构，大家要了解一下。当然我们先用性了解，你不了解这些东西没关系啊，这是只是数据字典，也就是我们后端的表结构什么样的。分类表结构怎么样的？做了三层？

固定三层不是像我们前面做的项目做的无限分类固定三层，然后这是我们商品表有什么字段，但商品页面是否是推荐的字段，对吧？创建时间的字段，这个销售额销售的字段，销量的字段，然后呢，这个是库存，这个是价格，这个是详细的描述，这是标题对吧？其他的呢，跟用户关联，跟本身的哎，那个分类关联。是这样的。然后这是我们评论的对商品进行评论的表结构，这是我们订单的表结构，订单详情啊，这是订单，这是订单，这是订单详情，订单分两个，一个是普通订单，一个订单详情，然后购物车地址。当然具体的这些表结构，你如果没接入后端的话，你不用去理解，咱们也用不上。为什么不上呢？因为所有的我们都需要使用这些接口来完成的，现在我们说了这个项目只用VIVO，只做前台部分，既然只做前台部分，那么我们只要了解前台API和认证API这两部分就行了，后端的API等我们学react的时候，做后端的用户管理分类都得用到这些API，你就不用看前端的了，那我们现在看真正的A篇，比如说。

如何注册，我们调这就行了，登录调这个，退出调用这个对吧，上套调这个，这里应该用，然后修改密码。更换邮箱对吧？OS talking，然后绑定手机，这里会发现证手机验证码的短信验证码，然后绑定手机肯定是验证的啊，找回密码邮箱验通过，呃，邮箱找回通过手机号找回等等，是这样的一个结构，就持认证的，我们登录注册以及授权都需要通过这个API来帮我完成，那前端API这里边是我们用的比较多的首页，我们获取首页的数据，通过访问这个API就可以了。同房这个，那每一个API呢，里边都给详细介绍了请求的参数，请求的这个子地址是什么？因为我们根地址请求的啊，是这个是说我们基础URL，在这个基础URL下边，这是固定的地址，下边我们再访问手边的数据，我们就在这个地址上加上这个地址就行了，然后请求的方式是get，然后请求我们可以存什么参数，你看可以存那么多参数。

然后给我们返回的数据有这么多，你看轮播图的数据，然后呢，分类的数据，以及呃，商品信息的数据，这首页上我们需要的，那是这是默认的数据，如果你想返回，按照比如说返回只要推荐的对吧，按销售额这个排序去返回的对吧，然后只要新品的，那我们就可以通过参数，默认呢是返回当前第一页，那我们比如叫第二页，第三页都通过参数。就可以了。总之，通过这个API就能获取首页上我们需要的所有的数据。商品呢，比如说商品列表，那我们需要也是这些参数，请求参数具体详细应用的时候，文档说的很详细啊，这个文档然后以及返回的数据的样例也都有。还有商品的详情页，我们访问的是这个接口，然后也有个人中心的一些部分，比如说用户的一些详情，然后呢，可以更换头像，更新用户信息，这些购物车，这购物车做的比较有意思，因为好多东西都在后端帮我们完成了，等我们详细用购物车的时候，我再详细的讲，然后订单支付，支付呢，这里边儿，呃，微信支付和支付宝这两种，但是呢，咱们能测试的只有这个支付宝，为什么只有支付宝呢？因为只有在安卓手机里边才能装支付宝的那个沙箱，咱们进行演示。

进行演示啊，微信那个是没有那个演示的，他得跑在正式服务器上才可以给提供大量的企业信息，才能完成一个支付，呃，以前呢，在微信支付的时候，给大家讲解的时候呢，就用了正式服务器，所以大家只支付支付就把账号给封掉了，所以呢，咱们在微信的咱就不测试了，只测试支付宝这个支付的啊。还有地址管理。因为你想邮寄的话，一定得有个地址，然后收藏我的收藏，收藏取消等等是这样的功能对应的这些接口的功能，对应的就是我们原型图的这些功能，所以我们访问哪个页面请求哪个接口，我们就使用哪个。啊，这就是呃，让大家了解的。呃，做项目之前了解到我们的目标什么样的，我们用什么样的接口，好吧，好，这节课我们就讲到这里，下节课我们就开始创建，开始从创新项目开始。