SpringBoot使用thymeleaf实现用户的登录注册(四)

本文在上一篇SpringBoot整合多数据源jpa+mybatis(三)基础上使用thymeleaf实现用户的登录注册。

项目结构图如下:
在这里插入图片描述
流程图如下:
在这里插入图片描述
user采用JPA,product采用mybatis,html采用thymeleaf模板。

数据源配置不变,实体类也不变。

1.为项目增加依赖

我们只需再加入thymeleaf即可

<!--thymeleaf-->
<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2.修改application.properties,配置相关信息

添加如下配置

#关闭thymeleaf缓存,开发时使用,否则没有实时画面
spring.thymeleaf.cache=false

3.修改功能实现

3.1修改User---->jpa

为User的DAO层增加自定义查询方法
IUserDao.java

//Jpa提供了增删改查的功能
public interface IUserDao extends JpaRepository<User, Integer> {  //第一个泛型为实体类,第二个为实体类的主键类型

    /**
     * 查找是否有这样的用户名和密码用户存在
     * @param name
     * @param password
     * @return
     */
    User findUserByUserNameAndUserPassword(String name, String password);

    /**
     * 查找是否有这样的用户存在
     * @param name
     * @return
     */
    List<User> findUserByUserName(String name);
}

为User的Service层增加自定义查询方法
IUserService.java

	public interface IUserService {

    /**
     * 添加新用户
     * @param user
     */
    void saveUser(User user);

    /**
     * 查找是否有这样的用户名和密码用户存在
     * @param name
     * @param password
     * @return
     */
    User findByNameAndPassword(String name, String password);

    /**
     * 查找是否有这样的用户存在
     * @param name
     * @return
     */
    List<User> findByName(String name);
}

UserServiceImpl.java

@Service
public class UserServiceImpl implements IUserService {

    @Autowired
    private IUserDao userDao;

    /**
     * 添加新用户
     * @param user
     */
    @Override
    public void saveUser(User user) {
        userDao.save(user);
    }

    /**
     * 查找是否有这样的用户名和密码用户存在
     * @param name
     * @param password
     * @return
     */
    @Override
    public User findByNameAndPassword(String name, String password){
        return userDao.findUserByUserNameAndUserPassword(name, password);
    }

    /**
     * 查找是否有这样的用户存在
     * @param name
     * @return
     */
    @Override
    public List<User> findByName(String name){
        return userDao.findUserByUserName(name);
    }
}

3.1修改Product---->mybatis

为Product的mapper增加自定义查询方法
ProductMapper.java

@Qualifier("db2SqlSessionFactory")
@Mapper
@Component
public interface ProductMapper {

    /**
     * 添加一个商品
     * @param name
     * @param price
     */
    @Insert("insert into product(productName, productPrice) values(#{productName}, #{productPrice})")
    void addProduct(@Param("productName") String name, @Param("productPrice") Double price);

    /**
     * 查询所有的商品
     * @return
     */
    @Select("select * from product")
    List<Product> findAll();
}

为Product的Service层增加自定义查询方法
IProductService.java

@Service
public class ProductServiceImpl implements IProductService
{
    @Autowired
    private ProductMapper productMapper;

    /**
     * 添加一个商品
     * @param product
     */
    @Override
   // @Transactional(transactionManager = "db2TransactionManager")
    public void saveProduct(Product product) {
        productMapper.addProduct(product.getProductName(), product.getProductPrice());
    }

    /**
     * 查询所有的商品
     * @return
     */
    @Override
    public List<Product> findAllProducts() {
        return productMapper.findAll();
    }
}

5.修改Controller

IndexController.java

@Controller
public class IndexController {

    /**
     * 初始界面,选择登录或者注册
     * @return
     */
    @RequestMapping("/")
    public String index(){
        return "index";
    }
}

UserController.java

@Controller
public class UserController {

    @Autowired
    IUserService userService;


    /**
     * 登录界面
     * @return
     */
    @RequestMapping("/login")
    public String login(){
        return "login";
    }

    /**
     * 判断能否成功登录
     * @param request
     * @return
     */
    @RequestMapping("/dologin")
    public String login(HttpServletRequest request){
        String name = request.getParameter("username");
        String password = request.getParameter("password");
        User user = userService.findByNameAndPassword(name, password);
        if(user != null){
            return "redirect:/productList";
        }else{
            return "login";
        }
    }

    /**
     * 注册界面
     * @return
     */
    @RequestMapping("/register")
    public String register(){
        return "register";
    }

    /**
     * 判断是否成功注册
     * @param request
     * @return
     */
    @RequestMapping("/doregister")
    public String register(HttpServletRequest request){
        String name = request.getParameter("username");
        String password = request.getParameter("password");
        String password2 = request.getParameter("password2");
        List<User> userList =  userService.findByName(name);
        if(userList.size() == 0 && password.equals(password2)){
            User user = new User();
            user.setUserName(name);
            user.setUserPassword(password);
            userService.saveUser(user);
            return "login";
        }else{
            return "register";
        }
    }
}

ProductController.java

@Controller
public class ProductController {

    @Autowired
    IProductService productService;

    /**
     * 商品列表
     * @param model
     * @return
     */
    @RequestMapping("/productList")
    public String productList(Model model){
        List<Product> products = productService.findAllProducts();
        model.addAttribute("products", products);
        return "product/productList";
    }
}

6.使用Thymeleaf写HTML页面

1.在Resource—>templates下新建

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
</head>
<body>

<a href="/login">登录</a><br>
<a href="/register">注册</a>

</body>
</html>

login.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>

<form action="/dologin" method="post">
    用户名:<input type="text" name="username"><br>
    密码: <input type="password" name="password"><br>
    <input type="submit" value="登录">
</form>

</body>
</html>

register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
</head>
<body>

<form action="/doregister" method="post">
    用户名:<input type="text" name="username"><br>
    密码:<input type="password" name="password"><br>
    确认密码:<input type="password" name="password2"><br>
    <input type="submit" value="注册">
</form>

</body>
</html>

2.在Resource—>templates—>product下新建

productList.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>productList</title>
</head>
<body>
<br/>
<h1>商品列表</h1>
<br/><br/>
<div class="with:80%">
    <table>
        <thead>
        <tr>
            <th>#</th>
            <th>productName</th>
            <th>productPrice</th>
        </tr>
        </thead>
        <tbody>
        <!--each来进行for循环求值-->
        <tr  th:each="product : ${products}">
            <th scope="row" th:text="${product.productId}"></th>
            <td th:text="${product.productName}"></td>
            <td th:text="${product.productPrice}"></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

7.页面展示

index初始界面
在这里插入图片描述
登录界面
在这里插入图片描述
注册界面
在这里插入图片描述
商品列表界面
在这里插入图片描述

8.项目源代码

源代码链接
https://github.com/Qreply/springbootThymeleaf.git

Spring Boot 整合 Thymeleaf 实现注册功能通常涉及以下几个步骤: 1. **添加依赖**: 首先,在`pom.xml`文件中添加Thymeleaf、Spring Web和其他必要的依赖: ```xml <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> </dependencies> ``` 2. **配置视图解析器**: 在`application.properties`或`application.yml`中设置模板文件的位置: ```properties thymeleaf.servlet.multipart-enabled=true thymeleaf.mode=HTML5 spring.thymeleaf.location=classpath:/templates/ ``` 3. **创建控制器**: 创建一个控制器,如`RegistrationController`,处理用户注册请求。这里可以使用`@PostMapping`注解处理POST请求,并使用`ModelAndView`返回包含表单的视图: ```java @RestController public class RegistrationController { @GetMapping("/register") public String registerForm() { return "register"; } @PostMapping("/register") public String handleRegister(@ModelAttribute("registration") UserRegistration registration) { // 这里对注册信息进行验证并保存到数据库 return "redirect:/success"; // 成功后重定向 } } ``` 4. **创建视图**: 在`templates/register.html`或相应的文件夹下编写Thymeleaf模板,用于显示用户输入框和表单结构。例如: ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <body> <form th:action="@{/register}" method="post" th:object="${registration}"> <input type="text" name="username" placeholder="用户名"/> <input type="password" name="password" placeholder="密码"/> <!-- 其他字段... --> <button type="submit">注册</button> </form> </body> </html> ``` 5. **处理成功页面**: 如果注册成功,可以在`success.html`模板中显示一个简单的成功消息。当用户提交表单后,会自动跳转到这里。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值