从0开始写一个问卷调查APP的第五天

1.任务

实现登录功能

2.前端页面的实现

2.1页面设计分析

我们先来分析一下，我们现在做的是一个问卷调查类的APP但是由于我们是一个练手项目所以不用考虑太多，页面上的设计也就只需要大致三个信息(用户昵称，登录密码，手机号码)这写就可以实现大致功能了，如果你还想有其它的信息设置，可以之自定义进行添加。

2.2代码部分

我们在上次写好的index页面的基础上思考一下，当我们进入到欢迎页面时候，应该有一个动作，什么动作呢？那就是点击进入按钮之后，进入到登录页面。下面是添加的代码部分：

这样当你点击进入后方可进入登录页面

 对了，当我们新建一个页面后，要到pages.json页面添加注册一下新添加的页面

login页代码

这里的样式我就不截图了有需要的私信我

样式图

其实在这里的控件我们可以用前面文章中我们安装好的一个uview这个框架里面的，这里面的都是别人写好的样式，可能更加美观。不过我比较喜欢自己写。

3.数据库添加测试数据

由于我们是实现登录功能那么想登录我们必须有用户在我们questionnaire数据库的表中，所以我们得建立相对应的用户表。

这里我们就适当添加我们所需要的字段就可以了，其实如果是正常的企业开发，我们应该得先把一整个数据库建立好，大致页面写好，但是个人开发练习自己的技术，就跟据自己的需要，只要能把大致的功能实现就可以了。

简单的先添加一条记录

4.后端接口的实现

4.1修改user对应的类文件

在原来项目中是有过user这个表对应的文件的，所以我们只需要修改就可以，如果我们是没有表对应的文件时，我们是需要像之前文章中建立question表对应的文件的步骤去做的。

修改AccountController.java文件，因为对应的类文件改变了，之前的类的属性名称包括方法也应该要改变，很幸运的是这里的登录接口是写好的，只需要修改就可以了

前端连接

在这里我又添加了一个按钮用于登录

这里的获取数据就不像在html中的value值获取，用的是vue中的双向绑定v-model

5.实现效果

这个密码框我设置的输入类型是password我也不知道为啥没有隐藏，应该是浏览器问题这个不重要，一般登录成功后会先提示成功，然后跳转到首页，这里的提示后跳转我们就明天再说吧。

在这里我们可以在控制台看见我们输出的返回信息。也就是前端的res里面。