Vue中的Uniapp与springboot交互实现登录注册

---

前言

本文主要是用uniapp和springboot框架实现登录注册功能。

---

一、登录前后端代码思路讲解

登录后端实现思路

登录是条件查询，判断用户所输入的账号和密码是否存在，如果存在，则登录成功，如果不存在，则登录失败，所以mapper接口的返回值是实体类型。接下来就是后端简单实现。
mapper接口

user login(String name,String password);

mapper.xml

<select id="login" resultType="com.shop.demo.pojo.user">
        select * from user where name=#{name} and password=#{password}
    </select>

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>

---

总结

以上就是今天要输出的内容，这个文章的内容还有很多可以更新的地方，后续也会进行进一步的更新，希望能帮助到大家。