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 list = authUserMapper.select(param);
        if (list!=null&&list.size()>0){
            user= list.get(0);
        }
        return user;
    }

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

    @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中写一写样式。

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

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

二、测试。

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

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

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

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