2. 搭建一个前后端分离的登录页面uniapp+springboot

一、实验要求

1. 实验目的

使用uniapp的开发用户登录模块。

2. 实验内容

使用uniapp开发一个用户登录功能模块，登录内容包括:用户名、密码。

3. 要求:

1、用户如果未输入用户名和密码，则登录按钮为灰色，不允许点击
2、点击注册按钮后，向后台发送http post请求,根据后台返回的结果给用户进行相关提示。如果后台返回成功则跳转到首页；如果返回失败，则提示失败原因。

二、环境搭建

参考: https://blog.csdn.net/hznb_369/article/details/124475593.

三、后端功能实现

1. 在UserController中添加登录的实现

@RequestMapping("/register")
    public Boolean register(@RequestParam("username") String username,
                      @RequestParam("password") String password){
        User user = new User(username,password);
        Boolean aBoolean = userService.selectUserByIdAndPs(user);
        System.out.println(aBoolean);
        return aBoolean;
    }

2. UserService

Boolean selectUserByIdAndPs(User user);

3. UserServiceImpl

	@Override
    public Boolean selectUserByIdAndPs(User user) {
        User user1 = userDao.selectOne(user);
        System.out.println(user1);
        if (user1 != null) {
            return true;
        }
        return false;
    }

4. 接口测试
   

四、前端功能实现

1. 新建一个登录页面
   
2. 页面代码

<template>
	<view>
		<view>
			<form @submit="formSubmit" @reset="formReset">
				<view>
					<view>账号</view>
					<input @input="onKeyInput" focus v-model="name" name="username" placeholder="请输入账号" />
				</view>
				<view>
					<view >密码</view>
					<input @input="onKeyInput" v-model="pass"  name="password" placeholder="请输入密码" />
				</view>
				<view >
					<button :disabled="flag" form-type="submit" id='aa'>登录</button>
					<button type="default" form-type="reset">清空</button>
				</view>
			</form>
		</view>
	</view>
</template>

3. 方法代码

<script>
	export default {
		data() {
				return {
					name:'',
					pass:'',
					flag: true
				};
		},
		methods: {
			onKeyInput: function(event) {
			    if (this.name.length > 0 && this.pass.length > 0) {
					console.log(11)
					this.flag = false;
				}else {
					this.flag = true;
				}
			},
			formSubmit: function(e) {
				uni.request({
				    url: 'http://localhost/user/register', //仅为示例，并非真实接口地址。
				    data: {
				       username: this.name,
					   password: this.pass
				    },
				    header: {
				        'header': 'application/x-www-form-urlencoded' //自定义请求头信息
				    },
				    success:res => {
				    	console.log(res)
				    	if (!res.data) {
				    		return uni.showToast({
				    			title:'密码错误'
				    		})
				    	}
						uni.switchTab({
							url: '/pages/index/index'
						});
				    }
				});
			},
			formReset: function(e) {
				console.log('清空数据')
			}
		}
	}
</script>

五、测试

1. 没有输入账号和密码不能点击
   
2. 输入错误的账号和密码
   
3. 正确登录