本文主要是用uniapp和springboot框架实现登录注册功能。
一、登录前后端代码思路讲解
登录后端实现思路
登录是条件查询，判断用户所输入的账号和密码是否存在，如果存在，则登录成功，如果不存在，则登录失败，所以mapper接口的返回值是实体类型。接下来就是后端简单实现。
mapper接口
user login(String name,String password);
mapper.xml
mapper.xml <select id="login" resultType="com.shop.demo.pojo.user">
service接口
user login(String name,String password);
service接口实现类
@Override public user login(String name, String password) { return mapper.login(name,password); }
controller控制层
@RequestMapping("login") public String login(String name,String password){ user login = service.login(name, password); if(login!=null){ return "登录成功"; }else { return "登录失败"; } }
在上述代码中，主要用controller层进行if else判断，来确定用户输入的值，是否在user表中存在，如果存在则存入login对象中，根据login对象是否为空来判断用户输入的值是否正确。
登录前端实现思路
首先在前端data中需要三个参数，分别为name账号，password密码和flag装登录成功或登录失败的字符串，用v-mode来进行数据绑定，用@click点击事件来触发uni.request事件，request事件中，传入数据绑定后的name和password值，并且在success中把res.data的值赋给flag，在success中判断flag的值是登录成功还是登录失败，如果登录成功直接跳转到首页，登录失败则调用uni.showModel弹窗事件告知用户登录失败。
以下是代码实现：
<template> <view > <view style="font-size:50rpx;text-align: center; font-weight:bold"> 物资管理平台 </view> <view> <text>账号:</text><input type="text" v-model="name"> 密码:<input type="safe-password" v-model="password"> </view> <button @click="login">登录</button> <button @click="zhuce">注册</button> </view> </template> <script> export default { data() { return { name:"", password:"", flag:"" } }, onLoad() { }, methods: { login(){ this.flag="" uni.request({ url:'http://localhost:8080/login', data:{ name:this.name, password:this.password }, success: (res) => { console.log(res.data); this.flag=res.data; console.log("flag:"+this.flag); if(this.flag=="登录成功") { uni.redirectTo({ url:'/pages/first/first', }) } else if(this.flag=="登录失败"){ uni.showModal({ title: '提示', content: '登录失败', showCancel: false, confirmText: '确定' }) } } }) }, zhuce(){ uni.redirectTo({ url:'/pages/zhuce/zhuce', }) } } } </script> <style> input{ width:auto; border-bottom:1px solid lightgray; } </style>
二、注册前后端代码思路讲解
注册后端代码思路讲解
注册主要用到的也是name和password两个参数，用的是sql中的insert语句，首先确定它接口返回值是boolean类型或int类型，我选择的是int，在接口实现后，把接口的返回值赋给int类型的res，如果插入成功，则res为1，如果插入失败，则res为0，返回的也是res的值，通过判断res的值来确认是否注册成功，这里的逻辑比较简单，真正的注册还需要用到唯一主键判断和安全、权限等问题，这里就不多赘述，代码实现如下：
mapper接口
int register(String name,String password);
mapper.xml文件
<insert id="register" > insert into user(name,password) values(#{name},#{password}) </insert>
service层
int register(String name,String password);
serviceimpl实现类 @Override public int register(String name,String password){ int res=mapper.register(name,password); return res; }
controller层
@RequestMapping("register") public int register(String name, String password) { int res=service.register(name,password); if(res==1) { return res; } else { return 0; } }
注册前端代码思路讲解
注册也是通过v-model数据绑定+@click点击事件来进行实现，这里值得注意的是用到的post如果不加请求头，header: {‘content-type’:‘application/x-www-form-urlencoded’}会出现传不过去值的情况，所以这是比较容易出错的地方，这是Post请求的三种编码格式之一的表单提交编码格式。因为我写的代码不涉及到注册不成功的情况，所以说只需要name和password参数即可。接下来进行代码展示。
<template> <view> <view class=""> 注册界面 </view> 账号名：<input type="text" v-model="name"> 密码：<input type="safe-password" v-model="password"> <button @click="zhuce">注册</button> </view> </template> <script> export default { data() { return { name:"", password:"" } }, methods: { zhuce:function(){ console.log(this.name+this.password) uni.request({ url:'http://localhost:8080/register', method:'post', header: { 'content-type':'application/x-www-form-urlencoded' }, data:{ name:this.name, password:this.password, }, success: function(res) { console.log(res.data); }, fail: function(err) { console.log(err); }, }) } } } </script> <style> input{ border-bottom:1px solid lightgray; } </style>
总结
以上就是今天要输出的内容，这个文章的内容还有很多可以更新的地方，后续也会进行进一步的更新，希望能帮助到大家。
