第8章 实战项目
通过前面的学习，相信大家已经对Vue.js有了一个非常全面的了解。
下面通过一个真实的项目来完成Vue.js实战。
假设我们在一家互联网电子商务公司就职，该公司的业务是帮助大山里的穷苦农民，把自家的农产品卖到城市。
需要解决的问题有以下三个：
（1）让农民把大山里的东西卖掉。
（2）让都市中的人享受到纯原生态的绿色食品，并且享受更低的价格。
（3）去掉中间商。保证农民的收入更多，消费者消费的价格更低。
通过这样的公益项目，公司也可以解决自身的生存问题。
8.1 准备1：文字需求
梳理需求是项目的重中之重，把老板的“一句话需求”梳理成条理清晰符合逻辑的文字，再进一步的整理成原型图。
1. 参与的角色
总共是以下三个角色：
- 大山中的农民：提供农产品。
- 城市消费者：来购买农产品。
- 平台管理员：对平台进行日常运作。
参与的角色如图8-1所示。
图8-1 参与的角色
（1）消费者
- 可以注册。
- 可以微信授权。
- 可以查看商品列表页。
- 可以查看商品详情页。
- 可以查看购物车。
- 可以支付商品。
消费者用例图如图8-2所示。
图8-2 消费者用例图
（2）农民
直接与公司联系，告知可以出售的特产、价格等信息。
农民用例图如图8-3所示。
图8-3 农民用例图
（3）平台管理员
- 可以管理商品分类。
- 可以管理商品的上/下架。
- 可以处理订单。
- 订单付款确认后，线下联系发送快递。
平台管理员用例图如图8-4所示。
图8-4 平台管理员用例图
8.2 准备2：需求原型图
UI（原型图）永远是程序员和产品经理沟通的主要方式。程序员的头脑中会同时关注UI和技术实现，但产品经理及用户只会关注UI。所以，任何一个程序员在开始新项目时，都不能贸然地根据文字需求就开工。
8.2.1 明确前端页面
根据前面的小节，我们已经明确了每个角色的主要任务，知道前端是专门为消费者使用的。消费者可以：
（1）做微信绑定（微信提供授权页面，就不需要注册页面了）。
（2）看到首页。
（3）看到商品列表页。
（4）看到商品详情页。
（5）看到购物车页面。
（6）看到个人信息页面。
（7）看到微信支付页面。
8.2.2 如何画原型图
原型图就是简笔画。画原型图不需要任何门槛，建议新手直接动笔画：准备一支笔和一张白纸，心中想象着项目的样子，一个页面一个页面地画出来即可。根据笔者的经验，一个不太复杂的APP，一两个小时就可以画出来了。
不要怕原型图丑陋难看。越是简陋的原型图，修改起来就越容易。画得精细的原型图，反而不敢动手修改。
一旦有了动笔画的经验，下一步就可以使用鼠标来画。市面上的原型图设计工具中，笔者比较喜欢的是Mockplus，简单好用，没有门槛。
8.2.3 首页
用户打开链接后，直接进入首页，如图8-5所示。
在首页中：
图8-5 首页的原型图
- 上部分是轮播图；
- 中间部分是商品分类；
- 下方是商品列表；
- 最下面是4个标签页，即首页、商品、购物车、我的。
8.2.4 商品列表页
用户在首页点击商品，即可进入商品列表页，如图8-6所示。
图8-6 商品列表页
8.2.5 商品详情页
用户在商品列表页点击某个商品后，就会进入商品详情页面，如图8-7所示。
图8-7 商品详情页
在该页面中，可以看到商品的图文介绍，可以修改购买的数量，也可以直接下单付款。
8.2.6 购物车页面
消费者可以在查看商品时把商品放到购物车中，然后统一结算，如图8-8所示。
图8-8 购物车页面
8.2.7 支付页面
用户可以在购物车中进行支付，也可以在商品购买页中进行支付，如图8-9所示。
图8-9 支付页面
在支付页面会需要显示商品的各种信息、待付金额、用户的收货地址等。确定全部信息无误后，即可进入微信支付页面。
8.2.8 我的页面
用户在首页点击我的，即可进入我的页面，如图8-10所示，可以看到自己的头像、微信昵称及历史下单记录。
图8-10 我的页面
8.2.9 我的订单列表页面
用户在我的页面中点击我的订单，即可进入我的订单页面，如图8-11所示。
图8-11 我的订单页面
可以看到历史订单、每个订单的编号、内容和支付状态等信息。
8.2.10 总结
这些原型图直接勾勒出我们要做的项目。
8.3 准备3：微信的相关账号和开发者工具
8.3.1 微信相关账号的申请
因为微信的H5页面会涉及一些功能（登录、分享等），所以需要事先了解一下微信的产品家族。
- 微信公众平台：包括服务号、订阅号。网址为https://mp.weixin.qq.com。
- 微信开放平台：为“手机App”提供登录分享等操作。网址为https://open.weixin.qq.com/。
- 微信商户平台：提供微信支付功能。网址为https://pay.weixin.qq.com。
无论是新手还是高手，在这里几乎都会发蒙，所以读者务必做好笔记。另外，每申请一个账号，就要把用户名和密码记下来。以上三个平台的账号都是独立的，并且每个账号中有自己的appid、appkey、app secret等各种机密的秘钥。一定要妥善保管好，不能混淆，否则会为调试带来很大的困扰。
对于公司来说，需要准备好相关的证照，并且在对应的时间内使用公司账号打款给微信。由于过程比较烦琐，因此这里将申请的步骤省略。
读者不要打退堂鼓，我们在真实的项目中，几乎每个互联网公司都会用到微信公众号的功能。
下面我们假设已经成功申请到了微信的相关账户，公众平台上的是“服务号”且具备支付功能。
8.3.2 微信开发者工具
由于微信自带浏览器的特殊性（一定会自带weixin openid等微信独有的信息），会导致我们平时使用的普通浏览器在开发微信相关功能时（授权、分享、支付等）无法使用，因此需要下载微信开发者工具，地址为https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html。如果网址有变化，也可以自行百度搜索“微信开发者工具”。下载页面如图8-12所示。
图8-12 下载页面
下载完成后，双击开始安装。安装后会出现登录页面，如图8-13所示。
扫描二维码后，可以看到有两个入口：一个是微信小程序；另一个是公众号网页项目，如图8-14所示。
图8-13 登录页面
图8-14 两个入口
点击公众号网页项目，可以看到界面几乎与浏览器的开发者工具一样，并且提供了额外的功能。
- 左上角提供了WIFI的信号选择。
- 右上角提供了“清缓存”功能。
- 左上角可以看到当前登录的微信用户图标。
如图8-15所示。
图8-15 微信开发者工具
建议Linux环境开发的读者，暂时回到Windows的开发环境，因为Linux下没有官方提供的微信开发者工具。
8.4 项目的搭建
创建一个基于Webpack模板的新项目：
$ vue init webpack shop_h5
安装依赖：
$ cd shop_h5 && cnpm install
在本地以默认端口来运行：
$ npm run dev
可以看到本地服务器已经运行起来了。在这个阶段，只需要修改它的标题就可以。打开根目录下的index.html，修改其内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>公益爱农</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
使用浏览器打开后，就可以看到一个没有内容的Vue.js应用已经运行起来了。
8.5 用户的注册和微信授权
为了追求快速上线，项目组决定去掉传统项目中的用户注册和用户登录页面，直接使用微信授权来实现。
- 用户的微信浏览器会把当前微信用户的open_id传递给后台服务器。
- 后台服务器给微信服务器发送请求，获得当前微信用户的信息。
- 后台服务器为该用户生成一个用户文件。
- 后台服务器告知H5端已经成功注册该用户。
- H5端为该用户展示对应的页面。
通过微信授权来注册的过程如图8-16所示。
图8-17 通过微信授权来注册的过程
可以看出，主要代码都是在服务器端实现的。
1. 用户打开首页后直接跳转到后台服务器
（1）修改路由文件src/router/index.js。
（2）增加src/views/wait_to_shouquan.vue。
上面的代码使用了Vuex来保存系统变量。
（3）增加核心模板文件src/main.vue。
上面代码的mounted()方法会对当前用户的open_id进行判断。如果open_id存在，就跳转到首页；如果open_id不存在，表示该用户是新用户，就需要跳转到授权等待页面。对应的代码如下：
（4）增加对应的Vuex代码。
目前来看，Vuex需要保存两个信息：用户的open id和远程服务器的地址、端口等常量。
（5）增加src/vuex/store.js，这是最核心的文件。完整代码如下：
在上面的代码中，部分代码是在后面会陆续用到的。不用过多考虑，只需要关注下面几行代码：
（6）增加vuex/modules/user_info.js文件。该文件定义了用户信息的各种属性，代码如下：
（7）增加src/vuex/mutation_types.js文件。该文件定义了对象的两个操作，内容如下：
export const SET_BASEINFO = 'SET_BASEINFO' export const GET_BASEINFO = 'GET_BASEINFO'
（8）增加src/vuex/modules/actions.js文件。该文件对mutation_types进行了引用，内容如下：
import * as types from './mutation_types'
（9）增加src/vuex/modules/getters.js文件，内容为空。
// 先放成空内容
2. 与后端的对接
后端为我们提供了一个链接：http://shopweb.siwei.me/auth/wechat作为授权页面。我们让H5页面直接跳转到该链接即可，不需要添加任何参数。
3. 效果图
在微信开发者工具中打开页面，发现页面会自动跳转。其实有两次跳转：
第一次跳转到http://shopweb.siwei.me/auth/wechat；第二次跳转到https://open.weixin.qq.com/connect/oauth2/authorize......。
微信授权页面如图8-18所示。
图8-18 微信授权页面
点击“确认登录”按钮，进行授权后，就会进入到H5的首页。
4. 总结
本节为了让用户跳转到微信授权页面并自动注册，我们做了如下程序层面的内容。
- 使用Vuex记录系统常量（远程服务器的地址）。
- 使用Vuex记录用户的信息（新增了一个对象user_info)。
- 使用了一个独立的页面（等待微信授权页面）。
- 每次打开首页之前，都要判断该用户是否登录。
- （后端）让该用户在微信端授权并自动注册，然后把数据返回给前端。
Vuex是Vue.js既复杂又不好理解的模块，这是由javascript的语言特性决定的。
另外，本节对于后端的是个挑战，需要对微信返回的数据结构和微信配置很熟悉。由于本书篇幅所限，所以省略后端内容。
8.6 登录状态的保持
对于经典的Web开发，都是把当前用户的信息保存到session中，需要的时候读取。
对于前端，从理论上讲有以下两种方式：
- 读取cookie（适合所有H5框架）；
- 读取vuex（适合Vue.js）。
1. 简单版：使用cookie
cookie是明文存储，可以通过调用document.cookie来操作。例如，打开浏览器的console，输入：
document.cookie
结果：
"TY_SESSION_ID=fad74371-40d1-444b-9d1c-5dd33c086b20; uuid_tt_dd=10_37220323210-1535781572649-914811; dc_session_id=10_1535781572649.670168; Hm_lvt_6bcd52f51e9b3dce32bec4a3997715ac=1535781569,1535873915; dc_tos=pef3wv; Hm_lpvt_6bcd52f51e9b3dce32bec4a3997715ac=1535873935"
里面有哪些内容就一目了然了。所以，从安全性的角度来讲，用户的登录信息容易被人盗走。
2. 使用Vuex
一旦熟悉了的Vuex写法，还是很容易的使用。
另外，Vuex会对很多信息进行封装和作用域的判断，提高了安全性。
保存信息的代码如下：
store.dispatch(SET_BASEINFO, this.user_info)
读取信息的代码如下：
store.state.userInfo
8.7 首页轮播图
用户登录到首页之后，首先注意到的就是轮播图，下面就为首页增加该功能。
1. 增加路由
在路由文件src/router/index.js的对应位置增加如下代码。
2. 增加vue页面
增加src/views/shops/index.vue，内容如下：
上面的代码中，先读取了一个API，然后渲染数据并调用首页的轮播图。
3. 增加轮播图组件
做开发的核心方法论：不要造轮子。一定要造轮子的话，先搜索是否有现成的。而轮播图是最常见的组件之一，所以一定有其他人写好的第三方包，我们拿来用就好。
（1）增加轮播图的组件。在src/views/shops/index.vue中增加：
import {bindEvent,scrollPic} from '../../libs/index.js'
（2）增加对应的文件libs/index.js。
（3）轮播图的视图层。
增加src/components/HomeBanner.vue文件，代码如下：
这个component的内容非常简单，只是轮播图的View。调用代码如下：
<HomeBannerView></HomeBannerView>
4. 增加物品分类
增加src/components/HomeNav.vue:
调用代码如下：
<HomeNavView></HomeNavView>
5. 效果图
默认页面效果如图8-19所示。
3秒钟之后，轮播图发生了滚动，如图8-20所示。
图8-19 默认页面效果
图8-20 轮播图发生滚动
6. 总结
我们使用了轮播图组件，非常简单。步骤如下：
（1）复制对应组件的js文件到src/lib文件夹。
（2）复制对应组件的vue文件到src/components文件夹。
（3）在对应的vue文件中调用即可。
8.8 底部Tab
页面的底部Tab是非常重要的部分，几乎所有的H5项目都会用到。
1. 在首页中引用底部Tab
2. 增加对应的component文件
增加/components/NavBottom.vue文件，代码如下：
3. 效果图
效果如图8-21所示。
图8-21 效果图
4. 总结
底部Tab很简单也很重要。在本节中使用了component实现，然后在其他页面重用。
8.9 商品列表页
因为商品列表出现在首页和列表页，所以可以直接把它做成组件。
下面以首页中引用为例进行讲解。
1. 在首页中添加代码
核心代码如下：
<!-- 这里循环显示特产商品列表 --> <SpecialMarket :id="good.id" :name="good.name" :description="good.description" :image_url="good.image_url" v-for="good in goods"></SpecialMarket>
上面代码使用了v-for和componment的组合。
2. 在component中添加文件
添加文件src/components/SpecialMarket.vue。
可以看到，该段代码会接受一个数组，然后循环显示。点击某个商品就会跳转到该商品的详情页面。
3. 总结
这里非常简单，是基础知识。
8.10 商品详情页
当用户在商品列表页面中点击某个商品时，就会跳转到该页面。
1. 新增路由
向src/router/index.js中增加如下代码。
2. 新增vue页面
向src/views/shops/goods_details中增加如下代码。
在上面的代码中：
- 实现了加入购物车的方法；
- 实现了对于支付页面的跳转；
- 实现了从远程接口读取数据。
3. 添加商品到购物车
在src/views/shops/goods_details.vue文件，下面的代码是把某个商品添加到购物车中。
我们需要在src/vuex/actions.js中添加如下代码。
export const addToCart = ({ commit }, product) => {
commit(types.ADD_TO_CART, {
id: parseInt(product.id),
image: product.image,
title: product.title,
quantity: product.quantity,
price: product.price
})
}
4. 效果图
效果如图8-22所示。
图8-22 效果图
5. 总结
这个页面包含的知识点比较多，购物车使用了Vuex来保存数据。
进入支付页面，在后面会详述。本页面使用了后台提供的接口，会返回必要的数据。接口结构略。
8.11 购物车
购物车具备以下两个功能：
- 保存用户需要的数据；
- 清空商品。
所以使用Vuex来实现非常合适。
1. 添加路由
向文件src/router/index.js中增加如下代码。
2. 添加查看页面
新增src/components/Car.vue文件，代码如下：
3. 增加对应的组件
（1）新增购物车的头部文件src/components/CartHeader.vue，代码如下：
（2）新增购物车的主体内容src/components/CartMain.vue，代码如下：
（3）修改Vuex的函数，把下面代码添加到src/vuex/actions.js文件中。
上面的代码实现了购物车的若干功能，比如可以对商品数量进行增减；当商品数量改变时，商品总价也随之修改等。
4. 效果图
购物车页面如图8-23所示。
图8-23 购物车页面
5. 总结
购物车的数据是通过Vuex保存的。
购物车中商品数量的加减是可以直接影响到商品总价的。这个功能使用Vuex实现非常适合，解决方案也非常优雅。如果使用传统的方式来做的话，代码就会非常臃肿，而且难以实现。
8.13 微信支付
微信支付最难的地方不在于技术，而是在于微信有一套自己的技术规范，建议读者查看官方文档。虽然有一些现成的工具集成（如Ping++）了微信支付功能，但是往往这类产品入门门槛低，深入门槛高，后期交易量大了之后收费也很高昂，出了问题不好调试。另外，支付功能是核心技术，一定要亲自掌握，不要过于依赖第三方。
接下来的内容前提是微信的支付配置都已经做好了。
1. 添加支付页面的路由
为路由文件src/router/index.js增加如下代码。
2. 添加支付页面
新增src/shops/pay.vue，内容如下：
核心代码如下：
上面的代码用于页面一准备好（即WeixinJSBridge准备好了）的时候，当前页面就要调用的。
上面的代码用于打开微信支付页面。其中WeixinJSBridge是微信浏览器自带的变量，不必声名直接调用即可。
4. 效果图
微信的支付页面打开（图略）。
5. 总结
- 微信支付的细节处理都交给了后端处理。只要前端把参数准备好，直接访问后端链接http://shopweb.siwei.me/api/payments/user_pay即可。
- 新手对于变量WeixinJSBridge很难掌握，需要多查看文档。另外，微信支付对于后端开发难度更高，建议后端开发人员多查多试。
- 在微信的后台要配置不同的支付目录。安卓和iOS的配置是不一样的。建议大家百度一下。
- 微信的支付场景对应的支付方式和实现方式是不一样的。本例是“微信的公众号内支付”。
- 微信官方文档提供的例子仅有基于经典的Web页面（非SPA）的情况，目前还没有看到SPA的例子。建议大家遇到问题多上网搜索。
由于篇幅限制，微信相关的内容不再赘述。
8.14 回顾
本章我们把一个公益扶农的项目从零到一搭建了起来。实际上这是笔者公司参与的一个真实项目，我们使用Vue.js开发之后，很快就交付给了甲方使用。
使用Vue.js来做开发，有以下好处：
- 开发效率更高。
- 页面解耦更加彻底，整体结构清晰，文件组织合理。
- 可以很方便地引用现成的组件。
- 就算遇到难题，也比使用其他的框架简单不少。
- 自带的双向绑定，极大地节省了开发时间。
- 前/后端分离的非常彻底，特别适合做微信端、H5端的开发。
注意：为了节约篇幅，本章的代码中都省去了<style>的内容。可以在以下网址找到完整的源代码：https://github.com/sg552/happy_book_vuejs。