un7.2:IDEA中实现登录功能

我们无论是做网页还是小程序，都需要使用登录功能，那么我们该如何实现呢？接下来我用前后端分离的方式来给大家分享一些我的经验，希望可以帮到大家。

老规矩，后端工具：IDEA，前端：HbuilderX，浏览器：火狐。

话不多说，开始！

首先，打开IDEA。

一、在IAuthUserService接口中声明一个login方法。

public AuthUser login(String phone,String passwd);

二、在AuthUserServiceImpl实现类中实现方法。

@Override
    public AuthUser login(String phone, String passwd) {
        AuthUser user=null;
        AuthUser param=new AuthUser();
        param.setPhone(phone);
        param.setPasswd(passwd);
        List<AuthUser> list = authUserMapper.select(param);
        if (list!=null&&list.size()>0){
            user= list.get(0);
        }
        return user;
    }

三、在AuthUserController中完成数据处理，在这里，我把笔记也上传了，大家也可以借鉴。

/**
     * restfull 软件设计模式，如果使用此模式，上面的注解必须使用restcontroller。
     * 查：getmapping
     * 增：postmapping
     * 改：putmapping
     * 删：deletemapping
     * @param phone
     * @param passwd
     * @return
     */
    @GetMapping("/login/{phone}/{passwd}")
    @ResponseBody
    @CrossOrigin(origins = "*")
    public HttpResult login(@PathVariable String phone,@PathVariable String passwd){
        AuthUser user=authUserService.login(phone,passwd);
        if (user!=null){
            return new HttpResult(200,null,user,0);
        }
        return new HttpResult(500,"用户名或密码错误,请重新登录",null,0);
    }

四、打开火狐浏览器输入网址进行测试。

 显示如此数据的时候，代表已经实现了此功能，不过这还没结束，接下来，我们需要在前端页面进行编写。

一、打开HbuilderX。

1、进入cms/pages/user中新建一个login.vue。

2、在template中写一写样式。

<template>
	<view>
		<!-- 导航栏 -->
		<uni-nav-bar backgroundColor="#d3233b" color="#ffffff" title="律行法务"></uni-nav-bar>
        <view style="width: 300rpx;margin-top: 30rpx;margin-left: auto;margin-right: auto;">
		<uni-forms>
			<input style="border: 1px solid #000000;border-radius: 5rpx;height: 50rpx;line-height: 30rpx;margin-bottom: 15rpx;padding: 10rpx;" type="number" v-model="FormData.phone" placeholder="请输入手机号"/>
			<input style="border: 1px solid #000000;border-radius: 5rpx;height: 50rpx;line-height: 30rpx;margin-bottom: 15rpx;padding: 10rpx;" type="text" password="true" v-model="FormData.pwd" placeholder="请输入密码"/>
			<button size="mini" type="primary" @click="dologin">登录</button>
		</uni-forms>
	</view>
	<!--弹出警告对话框-->
	<uni-popup ref="popup" type="dialog">
		<uni-popup-dialog mode="base" title="通知" content="登录失败" :beforeClose="true" @close="close" @confirm="confirm"></uni-popup-dialog>
	</uni-popup>
	</view>
</template>

 3、在script中写入需要的数据和函数，写的时候注意位置，函数后面要加“，”，切勿忘记！

<script>
	export default {
		data() {
			return {
				//表单数据
				FormData:{
					phone:null,  //手机号
					pwd:null  //密码
				}
			}
		},
		methods: {
			//点击登录触发
			dologin(){
				uni.request({
				    url: 'http://localhost:8082/authuser/login/'+this.FormData.phone+'/'+this.FormData.pwd+'', //仅为示例，并非真实接口地址。
				    method: "GET",
				    success: (res) => {
				        console.log(res.data);
				        if(res.data.code == 200){//登录成功
							//console.log("登录成功,跳转到主页");
							//保存用户信息
							try {
								uni.setStorageSync('user_info', res.data.data);
							} catch (e) {
								// error
							  console.log(e)
							}
							
							//页面跳转
							uni.redirectTo({
								url: '../main/main'
							});
						}else{//登录失败
							this.open();
						}
				    }
				});
			},
			//点击对话框确认按钮执行的操作
			confirm(){
				this.$refs.popup.close();
			},
			//点击对话框关闭按钮执行的操作
			close() {
				this.$refs.popup.close();
			},
			//弹出警告对话框
			open() {
				this.$refs.popup.open();
			}
		}
	}
</script>

4、在pages中新建一个页面，注意：是页面。不是.vue文件，新建页面的时候Vue文件会自动生成，不需要更改。

<template>
	<view>
		欢迎使用律行法务后台管理系统！
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		//当页面显示完成时执行
		onShow() {
			//读取缓存中显示的页面信息
				var value = uni.getStorageSync('user_info');
				console.log(value)
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

二、测试。

1、在mian.vue页面，点击运行，运行到火狐浏览器，展示如下信息（需要输入正确的用户名和密码）才可以登录。

2、登录成功后会显示如下界面，数据也会获取到。

3、我添加了一个样式，如果用户名和密码错误则会显示如下界面，重点是下面的控制台，已经显示用户名和密码错误了。

 如此，我们这便实现了前后端分离的登录功能了！