实现登陆注册基础功能——前后端

简介

基于Spring boot+Vue的一个前后端分离的登陆注册功能界面，仅实现一些简单基础的功能，用于学习和熟悉登陆注册功能的实现。

数据库

MySQL8.0

前端

技术栈

vue+element ui + axios

功能实现

登陆

template页面，用是的element ui 中的表单元素 ：

导出组件到路由
用到ES6的模块语法，

注册

temple页面：

导出组件到路由：

导入组件以及路由配置：

校验部分

用到了v-model这个指令，v-model是一个特殊的指令，用于在表单元素和Vue实例的数据之间创建双向数据绑定
输入校验：
template页面

script标签中的内容，一个简单的例子如下

其中ref 是一个用于创建响应式引用的函数，它允许我们跟踪一个基本类型的值或对象的变化，并在其值发生变化时触发视图更新。

登陆校验：

在这里，template页面使用@click建立了一个监听事件器用于监听 DOM 元素的点击事件，script页面使用method组件调用事件监听器相对应的函数方法
使用 axios API 发送 POST 请求到服务器进行登录验证。

'http://localhost:8901/user/login/'

后端服务器的地址和端口号以及处理登录请求的路由

后端

技术

spring boot + mybatis-plus

功能实现

结构介绍
接口类

服务类

在服务类中，先是添加服务接口再是添加实现类
控制类

Controller类是用来连接界面层和Java代码的服务层中间的接口，也就是这两之间的过渡桥梁，所以controller类才是真正给接口响应的代码类
服务器端口：

确保前后端服务器端口一致，否则会出现跨越问题，导致前端页面无法正确获取后端数据。

登陆注册

数据获取

框选部分即为后端处理登录请求的路由。
下面解释登陆功能

这行代码的目的是创建一个新的 CommonResp 对象，其类型参数为 UserReq，并将这个新对象引用赋值给名为 resp 的变量

上图是参数的数据类型

下图是用户登陆

用户登陆

返回值到前端


返回一个描述该对象状态的字符串
注册功能大致相同，不同的是调用服务类