大作业设计--登录/注册页面

数据库信息

首先我们创建了数据库用户表，用于存储我们的用户信息

后端操作

mapper层

然后我们创建了我们的javaweb项目，和前面作业操作一样，连接配置好数据库，书写好我们的数据库实体类并创建书写好我们的返回result类，然后创建好我们的mapper类，书写我们的数据库操作语句，包括三条操作语句，登录操作(数据库中已存在)，注册判断操作(是否已注册)，和注册操作(将数据存入数据库)

service层

然后我们便开始书写我们的接口service类，包含两个接口，登录和注册接口

然后我们开始实现这两个接口

登录接口

我们传入uid和密码，并传给mapper实体，进而传递给数据库进行操作，返回我们的数据库实体对象

注册接口

我们传入需要填写的信息，然后通过判断两次密码是否相同，数据库中是否已存在该账户

然后我们将传入的参数都赋值给我们的数据库实体对象，然后调用我们的mapper实体对象，将该用户实例传给数据库语句进行操作增加，成功后返回注册成功

controller层

最后，我们就可以书写我们的controller层了，我们书写登录和注册两个控制器

登录控制器

我们将一个数据库实例对象作为参数传入，然后调用接口实例对象的接口方法，将传入的实例对象的uid和密码传入，最后经过mapper类的查找，将查找出来的对象存入另外一个数据库实例对象中，如果该对象为空，则说明数据库没有改匹配对象，则密码或账号错误或未注册，登陆失败，如果不为空，则存在该账户，登陆成功

注册控制器

我们将要注册填写的信息传入，然后返回调用接口函数的操作结果，在返回过程中，就已经将数据传入数据库，然后将service层的返回结果返回过来，显示插入成功或失败

前端操作

在前端页面，我们还是引用element-ui  vue  axios等相关的组建依赖

登录界面

在登陆界面中，我们创建一个表单，然后添加文本框和按钮，最后再添加一个超链接进行跳转到注册界面

然后为每一个输入框绑定一个限制rules

然后在vue中，我们首先需要的数据有两个，就是用户输入的账号和密码，所以我们在data中添加两个对象uid和password，然后我们再来定义一下我们上文提到的限制rules，我们在data里面接着书写我们的限制，required:true表明该项为必须不可为空的否则会进行提示

我们接着再来书写我们的点击方法login

首先调用axios与我们的后端连接起来，然后进行搜索判断是否登陆成功

注册界面

注册界面和登录界面大相径庭，先是书写我们的主页面，书写一个表单，然后将文本框和按钮都写在里面，同时给输入框加上限制

然后来看我们的vue，一样在data中创建好我们需要用的变量和限制

来看我们的点击方法

这里我们需要注意一下，我们的限制操作，只能在前端来限制提醒我们应该输入，但输不输入对后端没有影响，所以我们为了保持前后端一致，也要对后端的传入数据有所约束，这里我们使用
this.$refs.form.validate() 实现，该方法会检查所有表单项是否符合定义的规则。只有当所有规则都通过时，才应发送请求到后端。

然后将数据传给后端进行插入数据库，进行注册操作

这里来看一下效果