Springboot的后端开发 · 登录功能

拉过来尝试写一下springboot的前后端联调。其实感觉自己说的不是很明白。我的前端是学django的时候学了一点，不过学Springboot的时候又重新搞了一遍。

1.前端代码介绍讲解

黑马那边的前端我一点没看过，纯靠自己and AI，AI太好用了你们知道吗！

那我们当然不能用AI，正常来说初学前端一般直接form表单提交是最简单的，不需要怎么深入写。

1.html文件建立和编写

直接在IDEA/VSCode中,src/main/resources/static新建一个html文件，自动生成如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aouos的登录系统</title>
<head>
<body>

</body>
</html>

生成出来是这样的，直接点开html文件就是一片空白的界面。

先分析一下，我们不要求做其他什么功能、美化要求，直接只写html不管js和css。很明显，<head>...<head>这一块是你的标题，就是你的网页名称。<body>...</body>这一块就是编写你网页显示的内容。关于前端不需要学习太多，我们直接用form表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aouos登陆系统</title>
</head>
<body>
<form method="get" action="/....">
    用户名:<input type="text" name="username">
    账号:<input type="password" name="password">
    <input type="submit" value="登录按钮">
</form>

</body>
</html>

2.分析form表单

在Body里声明form表单类型，然后我们来分析这个简单的示例表单

<form method="get" action="/....">

在这里面method是传输的类型，可以用get/post

后面的action是指你要提交到后端的路由，比如你的路由是/login，那么你就填action="/login"。其实可能有很多其他更好的提交方式，我们之后再修改。

关于这边账号密码的讲解，type是指用户输入的类型，password类型可以直接隐藏用户输入的密码（字面意义，只是看不到而已，没有任何加密功能）

最重要的是关于后面的的name="...."，这里是你在链接后端时候要特别注意的地方，这里的字段名必须和后端接收的时候必须是相同的，一个字都不能差。

用户名:<input type="text" name="username">
账号:<input type="password" name="password">

就假设我这边字段名为username 和 password。

接下来可以看后端的代码了。

2.前后端互联

后端这边有些文件夹需要建立，之后也比较好检查维护，可以跟着我这篇文章建立一下

Spingboot开发 · 后端讲解

1.后端响应前端代码

那么后端怎么连接响应前端的请求呢？我这边就用/Login路由作为例子。

在Controller包下新建一个LoignController.java类，在这里就是用来接收前端返回数据，同样也可以返回数据给前端。关于后端这方面的编写，可以看黑马程序员的视频，这边给出链接：

【黑马程序员】

黑马程序员那里讲的非常清楚了，那这么多方法我们应该选择哪个呢？

1.普通获取前端数据

对于初学者，可以先使用直接写到构造函数的变量中，这样清晰易懂。要注意变量名称需要和前端的字段名相同！

package com.example.newtest.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class LoginController {
    @RequestMapping("/Login")
    public String Login(String username, String password) {
        System.out.println(username);
        System.out.println(password);
        return "ok";
    }
}

2.使用实体类接收前端数据（推荐）

但是我的建议是使用实体类的方法，这样就算以后使用json格式提交也能成功处理啦，而且user类的创立对于之后注册功能也能用到，非常nice。

初学略有难度。

先在pojo包下面创建一个user类，在user类里，你的Private变量名称必须要和前端提交的字段名是相同的，不然就无法识别提交的数据了。

package com.example.newtest.pojo;

import lombok.Data;

@Data
public class user {
    private String username;
    private String password;
    private String name;
    private String birthday;
    private String phone;
    private String captcha;
}

我是懒狗，是从我已经做好的后端里拿的。那关于lombok.Data黑马程序员也有讲，其中封装了很多函数，比如getuersername，getpassword函数。这样就可以不用自己构造函数功能了，不然你的代码会变成下面这样：

package com.example.newtest.pojo;


public class user {
    private String username;
    private String password;
    private String name;
    private String birthday;
    private String phone;
    private String captcha;
    
    public String getUsername() {
        return username;
    }
    public String getPassword() {
        return password;
    }
    public String getName() {
        return name;
    }
    public String getBirthday() {
        return birthday;
    }
    public String getPhone() {
        return phone;
    }
    public String getCaptcha() {
        return captcha;
    }
}

虽然这样看起来十分直观，你的构造函数都清晰明了，但是之后继续开发，即使用TAB一键填充也十分的麻烦，使用Lombok可以简化代码，当然如果是第一次接触这样子写其实也没有任何问题，也好了解最基础的功能。

讲解lombok.Data的功能链接我也放出来。这块视频已经在讲Mybatis(服务器操作数据库）了，有时间也要看一下，有用的。

黑马程序员

2.编写控制类获取前端数据

在pojo中设置完了ueser类之后，可以编写LoginController的函数了

我们需要在函数里提前引入我们写好的user类：

import com.example.newtest.pojo.user;

然后我给出我的完整代码

package com.example.newtest.controller;


import com.example.newtest.pojo.user;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class LoginController {
    @RequestMapping("/Login")
    public String Login(user user) {
        System.out.println(user.getUsername());
        System.out.println(user.getPassword());
        return "ok";
    }
}

其实非常简单，直接一个@RestController声明这个函数是一个请求处理类，用来处理前端发送的消息。然后使用@RequsetMapping("/Login")声明处理请求的路径，也就是前端中action="/Login"中双引号中的内容。

在前端点击提交以后，后端中Login函数的括号中就会收到前端提交的内容。这里涉及到底层的servlet传输，因为我们Springboot的强大，可以简化这里的操作流程，具体的本质底层可以看黑马HTTP协议那一章。

public String Login(user user)

虽然user类中有很多没有用到，但是没关系，其他的这些都是可以为空的，虽然也可以调用getName的函数，返回的值就是空，是不会报错的。

System.out.println(user.getUsername());
System.out.println(user.getPassword());

这里再用函数在IDEA的控制台输出我们获得前端的值，验证是否成功。

3.验证前后端互联

做到这里可以启动我们的服务器了。启动你的APPlication，访问：

http://localhost:8080/login.html

这里后缀跟你放在static中的html的名字相同，一定要加.html结尾，不然没用，你的网页是无法显示的。这时你往其中输入任意账号密码，点击提交，再回到我们后端就能看到我们的结果，控制台应该能输出我们想要的结果。

做到这里可以看到前端和服务器已经连接上了，如果有任何问题可以来问我。

3.后端调用数据库

然后我们服务器连接数据库，关于数据库的配置和连接大家应该都做好了，就不多说了，如果有问题看下面这篇文章。

IDEA下载使用和Springboot的部署

关于服务器和数据库中的连接要讲的东西还挺多的，使用的是Mybatis的数据库操作，黑马程序员视频如下：

黑马程序员

里面详细介绍了mybatis语法和功能，如果没有配置依赖往前面视频看一下，如果不会添加依赖的话找我，我再写一下。

1.基于Mybatis的数据库调用操作

看完之后，在Mapper包下新建LoginMapper，选择接口类型，然后去编写服务器数据调用，代码如下：

package com.example.newtest.Mapper;

import com.example.newtest.pojo.user;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface LoginMapper {
    @Select("select * from users where username=#{username}")
    List<user> getUserByUsername(String username);
}

"select * from users where username=#{username}"中是数据库查询语句，users是你数据库中的数据表，#{username}是代入下方getUserByUsername(String username)中的username变量。

但有些人觉得这样不会因为sql注入而不安全吗？于是我们要看到mybatis的伟大，mybatis已经封装的预编译的功能，这样可以防止sql注入，具体可以看黑马程序员 mybatis基础操作删除（预编译）那一集，里面讲解的很仔细。

关于users表中数据创建，建议提前准备好需要的数据类型和长度，列名可以和pojo.user中的名字相同，这样可以方便数据操作。当然不一样也可以，根据黑马程序员的教程可以给字段起别名让其和数据库一致。

LoginMapper编译好之后，我们要实现登录功能的验证。

2.编写service实现登录功能

在Service包下添加LoginService.java用来编写登录验证。关于LoginService这个我已经没看黑马程序员了，让我自己瞎讲一下吧，具体讲解放代码注释里了，代码如下：

package com.example.newtest.service;


import com.example.newtest.Mapper.LoginMapper;
import com.example.newtest.pojo.user;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class LoginService {
    //声明@Autowired将LoginMapper中的功能装配给loginMapper
    @Autowired
    private LoginMapper loginMapper;


        public String login(String username, String password) {
            try {
                //调用loginMapper查询数据库中的数据
                List<user> users = loginMapper.getUserByUsername(username);
                
                //判断用户是否存在
                if (users == null || users.isEmpty())
               {
                    return "账号不存在";
                }

                //如果存在，则通过get(0) 获取列表中索引为0的第一个元素
                //第一个user是类型，即pojo.user类，第二个user是变量名，所以这个变量user可以调用user类中的函数getPassword函数来获取这个变量user中封装的数据
                user user = users.get(0);
               
               //判断用户输入密码是否和数据库密码相同
               if (password.equals(user.getPassword()))
              {
                    return "ok";
                }
                else  {
                    return "账号或密码错误";
                }
            } catch (Exception e) {
                return "服务器出错，请稍后再试";
            }
        }

    }

讲的可能有点晦涩难懂了其实，不过相信大家一定能理解的！

4.LoginController完善编写

我们的登录功能也快接近尾声了，我们只需要向LoginController中添加功能就好了。

package com.example.newtest.controller;


import com.example.newtest.pojo.user;
import com.example.newtest.service.LoginService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class LoginController {

    @Autowired
    private LoginService loginService;

    @RequestMapping("/Login")
    public String Login(user user) {
        return loginService.login(user.getUsername(),user.getPassword());
    }
}

这边放出我的成功案例吧