mybatis+thymeleaf登录

news2024/12/23 12:32:53

一.将页面显示在浏览器中

1.新建项目并导入页面

2.使用th标签

3.新建控制层

4.显示结果

二.将两个页面进行关联

1.提交表单

2.跳转页面

3.结果

三.登录账号名动态改变

1.获取登录表单数据

2.给页面传值

3.页面显示

4.结果

四.连接数据库

1.新建数据库

2.分别建立访问层，实体类，实现类和数据库配置文件

3.连接数据

4.登录判断

5.结果

一.将页面显示在浏览器中

1.新建项目并导入页面

2.使用th标签

首先在html标签中引入th标签

<html xmlns:th="http://www.thymeleaf.org">

将页面中部分修改为th标签

th:href="@{css/public.css} -----css使用

th:src="@{/img/clock.jpg}" -----图片使用

th:src="@{/js/time.js}" -----js引用

th:action="@{/}" -----表单提交

th:href="@{/login}" -----页面跳转

此时需指向服务器路径login

3.新建控制层

在Controller包中新建文件，控制页面

@Controller
public class UserController {

    @RequestMapping("/")
    public String goindex(){
        return "index";
    }

    @RequestMapping("/login")
    public String gologin(){
        return "login";
    }

}

4.显示结果

二.将两个页面进行关联

1.提交表单

将登录时的表单提交到首页（默认页面）。

其中，是提交from表单，提交到th:action="@{/}"，/为首页路径。

<section class="loginCont">
            <form class="loginForm" th:action="@{/}">
                <div class="inputbox">
                    <label for="user">用户名：</label>
                    <input id="user" type="text" name="username" placeholder="请输入用户名" />
                </div>
                <div class="inputbox">
                    <label for="mima">密码：</label>
                    <input id="mima" type="password" name="password" placeholder="请输入密码" />
                </div>
                <div class="subBtn">
                    <input type="submit" value="登录" />
                    <input type="reset" value="重置"/>
                </div>
            </form>
        </section>

2.跳转页面

此时，href标签找到控制层的服务器路径，通过路径，找到其中的页面。

<a th:href="@{/login}">退出</a>

@RequestMapping("/login")
    public String gologin(){
        return "login";
    }

3.结果

此时点击登录即可进入首页，首页也可退出返回登录页。

三.登录账号名动态改变

1.获取登录表单数据

页面中可知，表单将提交到首页页面，所以在首页获取

@RequestMapping("/")
    public String goindex(User user){
        System.out.println(user.getUsername()+"  "+user.getPassword());
        return "index";
    }

2.给页面传值

获取到后，将名字传值给页面

@RequestMapping("/")
    public ModelAndView goindex(User user){
        System.out.println(user.getUsername()+"  "+user.getPassword());
        ModelAndView mav =new ModelAndView();
        mav.addObject("name",user.getUsername());
        mav.setViewName("index");
        return mav;
    }

3.页面显示

页面即可获取数据，并以文字显示

<h2 th:text="${name}">Admin</h2>

4.结果

四.连接数据库

1.新建数据库

create database if not exists my_sql;
use my_sql;
create table if not exists User
(
    userID   int primary key auto_increment,
    username varchar(20)     not null,
    password varchar(20)     not null
);

insert into User value
    (1,  'sean', '123456'),
    (2,  '李四', '123456'),
    (3, '王五', '123456'),
    (4, 'sean1', '111111');

2.分别建立访问层，实体类，实现类和数据库配置文件

方法一：按照之前方法，自行建包、接口、类和xml文件

方法二：安装EasyCode插件

使用插件生成

生成所有需要文件

3.连接数据

实体类

/**
 * (User)实体类
 *
 * @author makejava
 * @since 2024-03-11 15:39:45
 */
@Data
public class User implements Serializable {
    private static final long serialVersionUID = 157892786167003600L;
   
    private Integer userid;
   
    private String username;
   
    private String password;

}

接口

/**
 * (User)表数据库访问层
 *
 * @author makejava
 * @since 2024-03-11 15:39:44
 */

@Mapper
public interface UserDao {
    public List<User> getUser();
}

对外暴露接口

/**
 * (User)表服务接口
 *
 * @author makejava
 * @since 2024-03-11 15:39:45
 */

@Mapper
public interface UserService {
    public List<User> getUser();
}

接口实现类

/**
 * (User)表服务实现类
 *
 * @author makejava
 * @since 2024-03-11 15:39:46
 */
@Service
public class UserServiceImpl implements UserService {
    @Autowired
    UserDao userDao;

    @Override
    public List<User> getUser() {
        return userDao.getUser();
    }
}

myBaits配置

<?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="com.example.lianxi.dao.UserDao">

    <!--查询单个-->
    <select id="getUser" resultType="list">
        select
          userID, username, password
        from user
    </select>
</mapper>

控制层

/**
 * (User)表控制层
 *
 * @author makejava
 * @since 2024-03-11 15:39:43
 */
@Controller
public class UserController {
    @Autowired
    UserServiceImpl userService;

    @RequestMapping("/")
    public ModelAndView goindex(User user){
        System.out.println(user.getUsername()+"  "+user.getPassword());
        ModelAndView mav =new ModelAndView();
        mav.addObject("name",user.getUsername());
        mav.setViewName("index");
        return mav;
    }

    @RequestMapping("/login")
    public String gologin(){
        return "login";
    }

}

4.登录判断

根据输入的名字和密码查询，如果列表为空，则登录失败，否则，登录成功

@RequestMapping("/")
    public ModelAndView goindex(User user){
        System.out.println(user.getUsername()+"  "+user.getPassword());
        ModelAndView mav =new ModelAndView();
        User login = userService.login(user);
        if (login!=null){
            mav.addObject("name",user.getUsername());
            mav.setViewName("index");
        }else {
            mav.addObject("error","用户名和密码错误");
            mav.setViewName("login");
        }
        return mav;
    }