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

「爱情、让人受尽委屈。」 2023-10-11 17:42 25阅读 0赞

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

老规矩，后端工具：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);
        }

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

![933567fd31b94e29b01e0d946fe78343.png][]

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

一、打开HbuilderX。

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

![ee508d7e44154130abcbf117efd6b7ec.png][]

2、在template中写一写样式。

3、在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页面，点击运行，运行到火狐浏览器，展示如下信息（需要输入正确的用户名和密码）才可以登录。

![49c0e8c8c23f48e8b5ff1f6f7c9accfc.png][]

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

![6b5df47292c94d169557afca3e1ee559.png][]

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

![2576ca7931144efca93fbd563c19fca6.png][]

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

[933567fd31b94e29b01e0d946fe78343.png]: https://img-blog.csdnimg.cn/933567fd31b94e29b01e0d946fe78343.png
[ee508d7e44154130abcbf117efd6b7ec.png]: https://img-blog.csdnimg.cn/ee508d7e44154130abcbf117efd6b7ec.png
[49c0e8c8c23f48e8b5ff1f6f7c9accfc.png]: https://img-blog.csdnimg.cn/49c0e8c8c23f48e8b5ff1f6f7c9accfc.png
[6b5df47292c94d169557afca3e1ee559.png]: https://img-blog.csdnimg.cn/6b5df47292c94d169557afca3e1ee559.png
[2576ca7931144efca93fbd563c19fca6.png]: https://img-blog.csdnimg.cn/2576ca7931144efca93fbd563c19fca6.png