从零开始的旅游小项目【vue】-02-

上次给项目开了个头（其实四舍五入什么都没干），但是总算是立项了吧！现在继续。

使用mock模拟后端数据

首页总不能就这么一个图吧，肯定要有登录和注册的入口，但是在这个时候就涉及到了数据的问题！如果叫我自己写后端接口的话……我觉得真的暂时不行= =如果直接把数据写死在页面里也太蠢了，因为我一直秉持个人遇到的问题就是大家都会遇到的问题去搜了搜，果不其然发现了一个好东西：mock模拟后端数据

由于现在前后端分离，前端有时候经常需要后端的数据才能显示出效果，可是后端有时候也不能那么快提供接口，在这段尴尬的时期，前端就可以使用mock模拟接口，首先来安装mock，使用npm install --save-dev mockjs

然后在main.js中引入mock，再在mock.js文件中添加规则，先设立了一条username和password数据。

模拟完数据如何将数据传递到页面呢，在这里就要用到axios的请求方式，于是又下载和安装了axios……又在main.js中引用，标准三连了，果然需要的东西还是很多的鸭。

准备工作都做完了，可以在组件中调用了，看看会console.log出什么东西来。

简直完美！由于这个本体还是小demo啦，所以对于数据的要求也不会那么精确，能展示出网页的样子就满意了！

登录/注册页面

首先把登录和注册页面的静态页面给捣鼓了，依旧是我自己喜欢的风格：

那个半透明的框其实也是同一个组件，但是在这里用到了子组件向父组件传值，因为输入的用户名和密码其实是在子组件中输入的，然后由子组件将得到的输入返回给父组件Login和Register，在父组件中进行验证。我个人是采取了这种方式，如果你有其他更好的方式，或者觉得不对的，强烈欢迎指出！

透明框子组件的双向绑定接受数据：

点击按钮后$emit向父组件返回一个名字叫"listenToChild"的事件

在父组件中接收值，listentoChild后调用handleChildMsg函数

这样父组件就可以得到用户的输入了，而且如果别的页面想要调用这个半透明登录框组件也比较方便了。

登录数据验证

在能获取到数据之后，理论上就要将页面输入的数据与数据库中的用户数据比对，一是判断有没有此用户，二是判断密码是否和注册时使用的密码相同。在此处没有数据库，就简单地和mock中设定的用户名abc，密码123进行匹配，模拟匹配的过程。

判断优先级：账户或密码不能为空>此用户不存在>密码错误，分别设了errorFirst，errorSecond，errorThird。

handleChildMsg是从子组件中接收用户输入的信息，这里存储在visitor对象中，因为每次只需要判断一组用户名和密码，所以visitor每当获取到新的数据时，把旧的数据释放掉就行。如果有用户名或者密码为空，就v-show中将errorFirst设为true，显示的是输入不能为空的错误，直到都有输入了，才会继续下一步验证。

userExist就是验证的函数，this.user是获取到的模拟数据，先将输入的用户名和mock里的数据都对比，如果不存在，则errorSecond=true，显示用户名不存在。当用户名存在的情况下，再判断密码是否相同，不相同则errorThird=true，显示的是密码不正确，当以上条件全部满足，则默认登录成功。

测试结果如下：

(正确为用户名abc，密码123)

注册格式验证

注册时也要考虑到注册的逻辑：输入是否为空？用户名是否已存在？密码不符合格式？依照登录逻辑判断再来个注册判断

判断结果如下：

虽然登录注册是最基本的啦，但是因为主要还是要搭建更多的东西，所以不会在这两个模块上浪费太多的时间，而mock也不是真正的数据库可以随意增删查改，所以会稍显简陋点，主要是流程的模拟。之后就要研究session和开始正式搭建网站内部了。