JAVA零基础入门5-实现登录注册功能

对于一个系统来说，其第一个功能就是应该实现账号的登录注册功能，本章节继续前端的代码，实现登录验证然后跳转index主页的新功能

2023/11/2

1.实现登录查询验证

我们要实现登录的功能，首先前端页面我们需要一个表单，内容应该包括账号密码，这里我加一个账号类型，方便我们后续做管理员和普通用户的区分，然后应该有一个登录按钮，如果用户没有账号，应该同时提供一个注册按钮，代码逐个分析：

新建一个实体用来存储用户信息-实体User

@Data
public class User {
    int id;
    String username;
    String password;
    String usertype;
}

对应的数据库建表

create table user(
id int auto_increment PRIMARY KEY,
username varchar(255) not null,
password varchar(255) not null,
usertype int 
)

新建对应的service和service实现类，这里我采用的方法逻辑为，如果用户要登录，当输入账号密码后，我首先使用一个查询username是否存在的方法selectUserByUsername，返回一个布尔类型，如果存在再进行密码的验证。这里我们使用selectpassword方法，具体代码如下：

@Service
public interface UserService {
    void save(User user);
    Boolean selectUserByUsername(String username);
    String selectpassword(String username);
}
@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;

    @Override
    public void save(User user) {
        userMapper.save(user);
    }
    public Boolean selectUserByUsername(String username){
        return userMapper.selectUserByUsername(username);
    }
    public String selectpassword(String username){
        return userMapper.selectpassword(username);
    }
}
#sql语句
    <insert id="save">
        insert into user (username,password,usertype)values (#{username},#{password},#{usertype})
    </insert>
    <select id="selectUserByUsername" resultType="java.lang.Boolean">
        select count(*)>0 from `user` where username=#{username}
    </select>
    <select id="selectpassword" resultType="java.lang.String">
        select password from user where username=#{username}
    </select>

方法写好之后，写我们的后端controller逻辑，首先设置默认根路径为login页面，然后接收login路径提交的参数，判断havaname是否存在，若存在，比对密码，否则返回错误信息

@Controller
@Slf4j
public class loginController {
    @Autowired
    private UserService userService;
    @GetMapping("/")
    public String index(){
        return "login";
    }   
 @PostMapping("/login")
    public String login(@RequestParam("username")String username,
                        @RequestParam("password")String password,
                        Model model) {
        Boolean havaname = userService.selectUserByUsername(username);
        if (havaname) {
            String pd = userService.selectpassword(username);
            if (pd.equals(password)) {
                model.addAttribute("status", "200");
                return "index";
            }
            else{
                model.addAttribute("message","密码错误");
                return "login";
            }
        } else {
            model.addAttribute("message", "账号不存在");
            return "login";
        }
    }
}

前端页面代码：

<div class="loginpage">
<h1>用户登录页面</h1>
  <form method="post" th:action="@{/login}">
    <label for="username">账号：</label>
    <input id="username" name="username" type="text"><br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password"><br>
    <button type="submit" id="loginbutton" >登录</button>
  </form>
  <form method="get" th:action="@{/register}" id="zhuce">
      <button type="submit" id="registerbutton">注册</button>
  </form>
</div>
  <script th:inline="javascript">
      window.onload = function() {
          var message = /*[[${message}]]*/ '';
          if (message) {
              alert(message);
          }
      };
  </script>

具体实现效果图：
 

2.实现注册账号功能

如果用户没有账号，点击登录页面的注册按钮，会跳转到register注册页面，前端如下：

<div class="loginpage">
  <form method="post" th:action="@{/toregister}">
    <label for="username">账号：</label>
    <input id="username" name="username" type="text" required><br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required><br>
    <label for="usertype">类型：</label>
    <select id="usertype" name="usertype" required><br>
      <option value="merchant">商家</option>
      <option value="customer">顾客</option>
    </select>
    <button type="submit" id="registerbutton" >注册</button>
  </form>
  <script th:inline="javascript">
    window.onload = function() {
      var message = /*[[${message}]]*/ '';
      if (message) {
        alert(message);
      }
    };
  </script>
</div>

与登录页面类似，但是多了一个type选择框，当点击提交后，后端会将信息存储到数据库中，这样就完成了一个闭环，先进行注册，然后返回到前端页面登录。注册controller代码：

    @GetMapping("/register")
    public String register(){
        return "register";
    }
    @PostMapping("/toregister")
    public String toregister(@RequestParam("username")String username,
                                                         @RequestParam("password")String password,
                                                    @RequestParam("usertype")String usertype,
                                                    Model model){
        User user = new User();
        user.setUsername(username);
        user.setPassword(password);
        user.setUsertype(usertype);
        System.out.println(user);
        userService.save(user);
        model.addAttribute("message","注册账号成功，请继续登录");
        return "login";
    }

注册逻辑和登录逻辑都放在loginController即可，最后的功能展示：

注册成功图

登录成功图

登录失败图