Spring Boot怎么整合Thymeleaf

  org.springframework.boot
  spring-boot-starter-thymeleaf

< p th:text="${name}">aaa

Tom

=18}">成年
=18}">未成年

    
    
    


    学生管理系统
    
        
            
                序号
                姓名
                年龄
                性别
                班级
                生日
                操作
            
        
        
            
                1
                aa
                22
                男
                计科1班
                2022-2-3
                
                    删除
                
            
        
    

编辑学生1


编辑学生2


编辑学生3

  班长
  团支书
  学委
  其他
  

thymeleaf默认给变量名+Stat的状态

如果没有显示设置状态变量，thymeleaf会默认给一个变量名+Stat的状态

th:id、th:value、th:checked等(和form表单相关)

th:object可以定义对象属性
*{}可以和th:object配合使用，可以取出对象中的属性

#dates.format()可以用来格式化日期格式

 
        编号:

        姓名:

        年龄:

        性别:男

        性别:女

        生日:

        
    

整合Thymeleaf

基本配置

 创建项目的时候，记得在模板引擎中勾选Thymeleaf

在pom.xml中把MySQL驱动的作用域删除
然后我们这里使用druid连接池，所以需要在pom文件导入相关依赖

 
            com.alibaba
            druid-spring-boot-starter
            1.2.11
        

然后我们需要在全局配置文件application.properties中进行相关配置

# 指定Mybatis的Mapper接口的xml映射文件的路径
mybatis.mapper-locations=classpath:mapper/*xml
# MySQL数据库驱动
#这个驱动也可以省略，可以根据使用的MySQL自动加载相应的驱动
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
# 数据源名称
spring.datasource.name=com.alibaba.druid.pool.DruidDataSource
# 数据库连接地址
spring.datasource.url=jdbc:mysql://localhost:3306/school?serverTimezone=UTC&zeroDateTimeBehavior=convertToNull
# 数据库用户名和密码
spring.datasource.username=root
spring.datasource.password=a87684009.
# 设置日志级别
logging.level.com.zyh.springboot=debug
# 开启mybatis驼峰命名规则自动转换功能
mybatis.configuration.map-underscore-to-camel-case=true

数据库准备 准备好数据库中表所对应的实体类,以及三层结构

@Data
public class Stu {
    private Integer id;
    private String name;
    private Integer age;
    private Boolean gender;
    private Integer cid;
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private Date birth;
}

三层架构

Mapper

@Mapper
public interface StuMapper {
    /**
     * 查询所有学生信息
     * @return
     * @throws Exception
     */
    @Select("select * from stu")
     List queryAllStu() throws Exception;
}

Service

public interface StuService  {
    /**
     * 查询所有学生信息
     * @return
     */
    List queryAllStu() throws Exception;
}

Service的实现类

@Service
public class StuServiceImpl implements StuService {
    @Autowired
    private StuMapper stuMapper;
    @Override
    public List queryAllStu() throws Exception {
         return stuMapper.queryAllStu();
    }
}

thymeleaf

  
    
    
  
  
    
学生管理系统
    aaaa
  

Controller

@Controller
@RequestMapping("/stu")
public class StuController {
    @Autowired
    private StuService stuService;
    /**
    * 显示学生管理系统的画面
    * @return
    */
    @RequestMapping("/stusUi")
    public String stusUi(){
        return "stus";
    }
}

然后我们先准备好页面

    
    
    


学生管理系统

    
    
        序号
        姓名
        年龄
        性别
        班级
        生日
        操作
    
    
    
    
        1
        aa
        22

        男
        女
        计科1班
       2022-2-3
        
            
            删除
        
    
    

当我们点击删除的时候，后端要根据前端传过来的id来从数据库中删除对应的数据。这里我们先按照我们之前学的时候，熟悉的方法来完成，到后面的时候，会详细讲前后端分离开发

删除操作

Controller(之前的方法这里没有粘贴出来，不然代码太多了)

@Controller
@RequestMapping("/stu")
public class StuController {
    @Autowired
    private StuService stuService;
   
    /**根据id删除数据
     * http://localhost:8080/stu/delete?id=10
     * @return
     */
    @RequestMapping("/delete")
    public String deleteById(@RequestParam("id") Integer id){
        try {
            stuService.deleteByid(id);
        } catch (Exception e) {
            e.printStackTrace();
        }
        System.out.println(id);
        return "redirect:/stu/stusUi";
    }


  }

Service

public interface StuService  {
    /**
     * 查询所有学生信息
     * @return
     */
    List queryAllStu() throws Exception;

    void deleteByid(Integer id);
}

Service实现类

@Service
public class StuServiceImpl implements StuService {
    @Autowired
    private StuMapper stuMapper;
    @Override
    public List queryAllStu() throws Exception {
         return stuMapper.queryAllStu();
    }

    /**
     * 根据id删除数据
     * @param id
     */
    @Override
    public void deleteByid(Integer id) throws Exception {
        stuMapper.deleteById(id);
    }
}

Mapper

@Mapper
public interface StuMapper {
    /**
     * 查询所有学生信息
     * @return
     * @throws Exception
     */
    @Select("select * from stu")
     List queryAllStu() throws Exception;
    @Delete("delete from stu where id=#{id}")
    void deleteById( Integer id);
}

把编号为8的数据删除

编辑操作

页面stus.html

    
    
    


学生管理系统

    
    
        序号
        姓名
        年龄
        性别
        班级
        生日
        操作
    
    
    
    
        1
        aa
        22

        男
        女
        计科1班
         2022-2-3
        


            
            删除
            编辑
        
    
    

页面 stu-edit.html

  
    
    
  
  
    编辑学生信息
    
      学号:


      姓名:


      年龄:


      性别:男
      女


      班级:


      生日:


      
    
  

Controller

/**
     * 根据id来修改数据
     * 我们首先得先根据id把数据查询出来，然后把数据展示出来
     * 用户再进行编辑，用户编辑完并且提交以后，跳转到学生管理系统画面，展示所有数据
     * @return
     */
    @RequestMapping("/edit")
    public String edit(@RequestParam("id") Integer id,Model model){
        System.out.println("id"+id);
        try {
            Stu stu=stuService.queryById(id);
            model.addAttribute("stu",stu);
        } catch (Exception e) {
            e.printStackTrace();
        }

        return "stu-edit";
    }

Service

public interface StuService  {
    /**
     * 查询所有学生信息
     * @return
     */
    List queryAllStu() throws Exception;

    /**
     * 根据id来删除学生信息
     * @param id
     * @throws Exception
     */
    void deleteByid(Integer id) throws Exception;

    /**
     * 根据id来查询对应学生信息
     * @param id
     * @return
     * @throws Exception
     */
    Stu queryById(Integer id) throws Exception;
}

Service实现类

@Service
public class StuServiceImpl implements StuService {
    @Autowired
    private StuMapper stuMapper;
    @Override
    public List queryAllStu() throws Exception {
         return stuMapper.queryAllStu();
    }

    /**
     * 根据id删除数据
     * @param id
     */
    @Override
    public void deleteByid(Integer id) throws Exception {
        stuMapper.deleteById(id);
    }

    @Override
    public Stu queryById(Integer id) throws Exception {
        return stuMapper.queryById(id);
    }
}

Mapper

@Mapper
public interface StuMapper {
    /**
    * 查询所有学生信息
    * @return
    * @throws Exception
    */
    @Select("select * from stu")
    List queryAllStu() throws Exception;
    @Delete("delete from stu where id=#{id}")
    void deleteById( Integer id);
    @Select("select * from stu where id=#{id}")
    Stu queryById(Integer id) throws Exception;
}

比如在序号为4中，点击编辑

用户登录

登录页面：

    
    


    
用户登录
    
        账号:


        密码:


        
    

因为需要判断用户是否存在，这是从数据库进行查询的，所以要准备对应的管理员表

# 创建管理员表
CREATE TABLE admin(
	id INT PRIMARY KEY AUTO_INCREMENT,
	username VARCHAR(20),
	`password` VARCHAR(20)
); 

INSERT INTO admin VALUES
	(DEFAULT,'aaa',111),
	(DEFAULT,'bbb',222),
	(DEFAULT,'ccc',333);
# 查询测试
SELECT * FROM admin;	

准备对应的实体类

@Data
public class Admin {
    private String username;
    private String password;
}

Controller

@Controller
@SessionAttributes(names = {"admin"})
public class AdminController {
    @Autowired
    private AdminService adminService;

    /**
     * 显示登录页面
     * @return
     */
    @RequestMapping(value = "/loginUi")
    public String loginUi(){
        return "login";
    }
    @RequestMapping(value = "/login",method = RequestMethod.POST)
    public String login(String username, String password, Model model){
        try {
            Admin admin = adminService.login(username, password);
            //用户名存在说明登录成功
            if (admin!=null){
                //存放到session域中
                model.addAttribute("admin",admin);
                return "redirect:/stu/stusUi";
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "redirect:/loginUi";
    }

}

Service

public interface AdminService {
    Admin login(String username,String password) throws Exception;
}

Service对应的实现类

@Service
public class AdminServiceImpl implements AdminService {
    @Autowired
    private AdminMapper adminMapper;
    @Override
    public Admin login(String username, String password) throws Exception {
        return adminMapper.queryByUsernameAndPassword(username,password);
    }
}

Mapper

@Mapper
public interface AdminMapper {
    @Select("select * from admin where username=#{username} and password=#{password}")
    Admin queryByUsernameAndPassword(@Param("username") String username, @Param("password") String password);
}

    
    
    


    学生管理系统
    用户名
    登录
    注销用户

    
    
        序号
        姓名
        年龄
        性别
        班级
        生日
        操作
    
    
    
    
        1
        aa
        22

        男
        女
        计科1班
        2022-2-3
        


            
            删除
            编辑
        
    
    

用户注销

注销的话，我们把session域中的用户对象取消，然后这个时候就得重新登录，应该要跳转到登录画面

@RequestMapping("/logout")
    public String logout(HttpSession session){
        session.removeAttribute("admin");
        return "redirect:/loginUi";
    }

点击注销用户