任务1 大觅项目业务场景
大觅项目的业务类型属于票务销售。在网络已完全融入日常生活的今天，从网络上订购商品日益流行，当然也包括订购各种门票。大觅网便是可以选座订购门票的网站。图1.1至图1.3分别代表了大觅项目的首页、详情页和选座页。通过部分页面的展示，可以初步了解大觅项目。接下来会详细地介绍项目情况，首先介绍一下项目的业务需求。
图1.1 大觅项目首页
图1.2 大觅项目详情页
图1.3 大觅项目选座页
1.1.1 大觅项目业务分析
本节描述大觅项目的业务需求。首先分析一下大觅项目的业务，如图1.4所示。
图1.4 大觅项目业务分析
通过图1.4对于大觅项目的业务有了大致了解，接下来针对每一个功能模块进行分析，首先看登录页，如图1.5所示。
如图1.5所示为大觅项目登录页，登录验证规则如下。
（1）登录方式分为两种：账户登录和短信快捷登录。
图1.5 大觅项目登录页
（2）账户登录中会对输入的手机号以及密码长度进行验证，如果输入有误，均会有相应的错误提示。
（3）短信快捷登录中，输入正确的手机号，单击发送动态密码按钮，会提示验证码发送成功。这里只是模拟实现功能，任意输入字符均可登录成功，跳转到项目首页。
图1.6所示为大觅项目注册页。
图1.6 大觅项目注册页
注册规则如下。
（1）注册时填写内容：手机号、登录密码、确认登录密码、验证码。
（2）会对手机号格式进行验证，如果有误会给出错误提示。
（3）登录密码不能为空且长度不能小于6位，如果输入的密码不符合要求，会给出错误提示。
（4）确认登录密码不能为空且与登录密码要求相同。
（5）验证码不能为空，单击“获取验证码”按钮，会提示验证码发送成功。这里只是模拟效果，可以填写任意字符。
（6）以上内容填写无误之后，单击“立即注册”按钮，会跳转到登录页。
大觅项目业务分析
通过对登录页面和注册页面的业务分析，发现这种梳理方式太过枯燥，而且之后的页面都是长页面，也不方便以截图的形式呈现。之后的业务分析可微信扫码观看视频。
1.1.2 大觅项目业务梳理
通过对大觅项目中每一个页面的功能进行分析，读者对每一个页面内部的具体情况有了大致了解。下面对项目的整个业务流程进行梳理分析。首先看一下大觅项目的业务流程图，流程图入口在项目首页，如图1.7所示。
图1.7 大觅项目业务流程
大觅项目业务流程的入口是项目首页。下面举例梳理一条流程，首先通过首页的左侧导航进入到列表页，通过单击列表页中的商品进入到对应商品的详情页，在详情页选中演出时间、票价、购买数量，单击选座购买可以进入选座页面；选好座位之后，这里假设已经登录，就会进入信息确认页，在信息确认页中选择购票人以及填写发票等信息之后，单击提交订单会进入订单支付页；订单支付页中有两种支付方式可供选择，一种是微信支付，另一种是支付宝支付，这样就梳理出一条完整的流程，对应图1.7。读者可以对其余的路径同理进行梳理，确保把整个项目的业务梳理清楚。
1.1.3 大觅项目技术栈选型
目前前端技术更新速度非常快，各种技术层出不穷，有前端自动化工具（Gulp、Grunt），前端组件化框架（Vue.js、React.js）、前端工程化（这是一套技术思想）、前端模块化（SeaJS、RequireJS、ECMAScript），简称四个“现代化”。同类技术虽然很多，但基本思想是相通的，每种技术学习其一即可，而且建议前端不要一味去追逐新技术，等到项目或者开发需要用到这些技术时，再去基于需求驱动学习，这样会理解得更快、更直接。本项目选择的核心技术是前端组件化框架Vue.js，因此确定了Vue.js+Webpack这套技术栈，也是目前最火的技术栈之一。
下面分析一下大觅项目的技术栈选型。
➢ 安装Node环境，这是目前前端技术的基础环境，大部分技术栈都依赖它，所以必须要安装。
➢ 包管理工具NPM是伴随Node安装的，Node安装之后，NPM也自动安装完成了。建议使用淘宝镜像CNPM，在后面会讲到如何切换到淘宝镜像使用。
➢ Vue-cli的安装以及初始化vue项目。
➢ 与Vue框架搭配使用的UI框架选择iView框架，UI框架可以大大节约开发时间和成本，如何安装配置后面会讲到。
➢ 页面路由选择使用vue-router插件来完成。
➢ Vue项目里面的数据共享，选择使用VueX来管理。
➢ 选择使用ECMAScript 6语法编写JavaScript。
➢ 选择Vue官方推荐的 axios插件发送异步请求。
➢ 大觅项目为前后端完全分离的项目，需要的后台数据通过Mock数据进行模拟。
➢ 还要使用一些前端小工具或者插件，在后续章节会陆续介绍，这里就不再一一列举。