P6 - 实现用户的注册和登录功能

2025-09-05

5分钟阅读时长

【版本】

当前版本号v20250905

版本	修改说明
v20250905	初始化版本

任务6.1 修改数据库用户表

【任务目的】

掌握编写 SQL 脚本修改数据库

【任务环境】

内存：至少4G
硬盘：至少空余10G
操作系统: 64位 Windows系统。

【任务资源】

IDEA
Maven 3.6

【任务要求】

现在需要给前面实验3建好的数据库用户表ms_user新增一列email，用于保存用户的邮箱地址。请新增一个脚本文件V003__ALTER_USER.sql，记录用于修改现有数据库的 SQL 脚本，并且使用数据库客户端(例如：HeidiSQL)执行该脚本。

任务6.2 修改注册页面

【任务目的】

掌握 HTML 页面的编写

【任务环境】

内存：至少4G
硬盘：至少空余10G
操作系统: 64位 Windows系统。

【任务资源】

IDEA
Maven 3.6

【任务要求】

修改register.html，要求新增一个表单和注册按钮，让用户可以提交以下信息到RegisterController。

username 用户名
password 密码
email 邮箱地址

表单使用Post方法提交，提交的地址为signup。
在RegisterController新增一个signup方法，收到注册的信息以后把内容打印出来，并跳转到msg.html。

RegisterController.java新增方法

@RequestMapping(value = "/signup")
    public String signUp(ModelMap map,String username, String password, String email){
        System.out.println(username+" "+password+" "+email);
        return "msg";
    }

尝试在页面提交注册信息，在控制台查看RegisterController 打印的注册信息。

任务6.3 保存注册用户信息到数据库

【任务目的】

掌握基于 SSM 编写代码，完成新的功能

【任务环境】

内存：至少4G
硬盘：至少空余10G
操作系统: 64位 Windows系统。

【任务资源】

IDEA
Maven 3.6

【任务要求】

新增UserDao接口和UserEntity。

UserDao.java

package mobileshop.dao;

import mobileshop.entity.UserEntity;

public interface UserDao {
    int save(UserEntity ue);
}

UserEntity.java

package mobileshop.entity;

public class UserEntity {
    private Long userId;
    private String username;
    private String password;

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public Long getUserId() {
        return userId;
    }

    public void setUserId(Long userId) {
        this.userId = userId;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    private String email;

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

新增UserDaoMapper.xml，请完善以下的SQL语句。

UserDaoMapper.xml MyBatis 对应 UserDao 的 Mapper 配置

<?xml version="1.0" encoding="UTF-8" ?>  
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="mobileshop.dao.UserDao">
	<insert id="save" parameterType="mobileshop.entity.UserEntity">
		请完善SQL
	</insert>
</mapper>

新增UserService接口和UserServiceImpl类。

UserService.java

package mobileshop.service;

import mobileshop.entity.UserEntity;

public interface UserService {

    /**
     * 保存用户信息
     * @param ue
     * @return
     */
    boolean save(UserEntity ue);
}

UserServiceImpl.java

package mobileshop.service;

import mobileshop.dao.UserDao;
import mobileshop.entity.UserEntity;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImpl implements UserService{

    @Autowired
    private UserDao userDao;

    @Override
    public boolean save(UserEntity ue) {
        return userDao.save(ue)>0;
    }

}

请利用以上的代码，完善RegisterController.signUp方法。当用户在页面输入注册信息并提交时，可以保存信息到数据库。

任务6.4 添加用户信息校验功能

【任务目的】

掌握基于 SSM 编写代码，完成新的功能

【任务环境】

内存：至少4G
硬盘：至少空余10G
操作系统: 64位 Windows系统。

【任务资源】

IDEA
Maven 3.6

【任务要求】

在UserDao新增existUserNameOrEmail方法。用于查找是否在用户表已存在username或email，存在则发回true，否则返回false

package mobileshop.dao;

import mobileshop.entity.UserEntity;
import org.apache.ibatis.annotations.Param;

public interface UserDao {
    int save(UserEntity ue);

    boolean existUserNameOrEmail(@Param("username") String username, @Param("email") String email);
}

UserDaoMapper.xml新增对应existUserNameOrEmail方法的配置，请完善其中的SQL语句。

<?xml version="1.0" encoding="UTF-8" ?>  
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="mobileshop.dao.UserDao">
	<insert id="save" parameterType="mobileshop.entity.UserEntity">
		请完善SQL语句
	</insert>
	<select id="existUserNameOrEmail" parameterType="string" resultType="boolean">
		请完善SQL语句
	</select>
</mapper>

完善UserService接口和UserServiceImpl类。

UserService.java

package mobileshop.service;

import mobileshop.entity.UserEntity;

public interface UserService {

    /**
     * 保存用户信息
     * @param ue
     * @return
     */
    boolean save(UserEntity ue);

    /**
     * 存在 username 或 email 则返回 true
     * @param username
     * @param email
     * @return
     */
    boolean existUserNameOrEmail(String username,String email);
}

UserServiceImpl.java

package mobileshop.service;

import mobileshop.dao.UserDao;
import mobileshop.entity.UserEntity;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImpl implements UserService{

    @Autowired
    private UserDao userDao;

    @Override
    public boolean save(UserEntity ue) {
        return userDao.save(ue)>0;
    }

    @Override
    public boolean existUserNameOrEmail(String username,String email){
        return userDao.existUserNameOrEmail(username,email);
    }

}

完善RegisterController.signup方法，加入对用户提交数据的校验，校验逻辑如下：（1）如果username、password、email 任意一个为空，则返回消息用户名，密码，邮箱均不能为空。（2）如果username或email 已经存在与用户表，则返回消息用户名或Email已存在。（3）如果用户注册数据成功保存到数据库，则返回消息注册成功，否则返回消息注册失败。

参考代码如下：

@RequestMapping(value = "/signup")
    public String signUp(ModelMap map,String username, String password, String email){
        String result="msg";
        UserEntity ue=new UserEntity();
        ue.setPassword(password);
        ue.setUsername(username);
        ue.setEmail(email);
        if(请完善此处代码) {
            if(请完善此处代码) {
        if (请完善此处代码) {
            map.put("msg", "注册成功");
        } else {
            map.put("msg", "注册失败");
        }
            }else{
        map.put("msg", "用户名或Email已存在");
            }
        }else{
            map.put("msg", "用户名，密码，邮箱均不能为空");
        }
        return result;
    }

任务6.5 使用 Ajax 实现注册

【任务目的】

掌握基于 AJax 和 SSM 的前端和后端的代码编写

【任务环境】

内存：至少4G
硬盘：至少空余10G
操作系统: 64位 Windows系统。

【任务资源】

IDEA
Maven 3.6
jQuery.js

链接：https://pan.baidu.com/s/1JtKJfJtb0ruoIB1VtvBWFw
提取码：heis

【任务要求】

在POM.xml新增以下依赖包。

<dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-databind</artifactId>
  <version>2.9.10.8</version>
</dependency>

新增 Javascript 脚本jQuery.min.js，请从实验资源的网盘链接下载。
新增 Ajax 注册页面register2.html。

<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
用户名：<input type="text" id="username" name="username"/>
密码：<input type="password" id="password" name="password"/>
邮箱：<input type="text" id="email" name="email"/>
<input type="button" id="registerBtn" value="注册">

<script type="text/javascript">
$(document).ready(function(){
 	$("#registerBtn").click(function(){
 		//获取input中的值
 		var username=$("#username").val().trim();
 		var password=$("#password").val().trim();
 		var email=$("#email").val().trim();
 		$.ajax({
      url:"http://localhost:8082/signup2",
      type:"post",
      data:{"username":username,"password":password,"email":email},
      dataType:"json",
      success:function(result){
        alert(result.errmsg);
      },
      error:function(){
        alert("注册异常");
      }
 		});
 	});
 });
</script>
</body>
</html>

新增类ResMsg用于消息返回。

package mobileshop.vo;

public class ResMsg {
    private String errcode;
    private String errmsg;
    private Object result;

    public String getErrcode() {
        return errcode;
    }

    public void setErrcode(String errcode) {
        this.errcode = errcode;
    }

    public String getErrmsg() {
        return errmsg;
    }

    public void setErrmsg(String errmsg) {
        this.errmsg = errmsg;
    }

    public Object getResult() {
        return result;
    }

    public void setResult(Object result) {
        this.result = result;
    }
}

在RegisterController增加2个方法，其中register2方法可以访问 Ajax 注册页面，signup2方法用于接收 Ajax 注册的信息并返回注册结果。

  @RequestMapping(value = "/register2")
  public String register2() {
    return "register2";
  }

  @RequestMapping(value = "/signup2")
  @ResponseBody
  public ResMsg signup2(@RequestBody String username, @RequestBody String password, @RequestBody String email){
    ResMsg resmsg=new ResMsg();
    //请完善注册功能，业务逻辑和上面signup方法保持一致
    return resmsg;
  }

#java #web

黄老师

扫码或长按识别访问

上一页 P5 - SSM框架整合和开发