Springboot+Thymeleaf环境搭建与简单应用

最新推荐文章于 2024-03-16 08:59:44 发布

原创最新推荐文章于 2024-03-16 08:59:44 发布 · 置顶 · 328 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #spring boot #后端 #html #bootstrap

1，环境搭建

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>
   <parent>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-parent</artifactId>
      <version>2.3.4.RELEASE</version>
      <relativePath/> <!-- lookup parent from repository -->
   </parent>
   <groupId>com.lin</groupId>
   <artifactId>xinguanthymeleaf</artifactId>
   <version>0.0.1-SNAPSHOT</version>
   <name>xinguanthymeleaf</name>
   <description>Demo project for Spring Boot</description>

   <properties>
      <java.version>1.8</java.version>
   </properties>

   <dependencies>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-thymeleaf</artifactId>
      </dependency>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-web</artifactId>
      </dependency>
      <dependency>
         <groupId>org.mybatis.spring.boot</groupId>
         <artifactId>mybatis-spring-boot-starter</artifactId>
         <version>2.1.3</version>
      </dependency>

      <dependency>
         <groupId>mysql</groupId>
         <artifactId>mysql-connector-java</artifactId>
         <scope>runtime</scope>
      </dependency>
      <dependency>
         <groupId>org.projectlombok</groupId>
         <artifactId>lombok</artifactId>
         <optional>true</optional>
      </dependency>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-test</artifactId>
         <scope>test</scope>
         <exclusions>
            <exclusion>
               <groupId>org.junit.vintage</groupId>
               <artifactId>junit-vintage-engine</artifactId>
            </exclusion>
         </exclusions>
      </dependency>
   </dependencies>

   <build>
      <plugins>
         <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
         </plugin>
      </plugins>
   </build>

</project>

application.properties

#thymelea模板配置
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
spring.thymeleaf.cache=false
spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**

application.yml


spring:

  profiles:

    active: dev

application-dev.yml



server:

  port: 8081



spring:

  datasource:

    username: root

    password: root

    url: jdbc:mysql://localhost:3306/mybatis_plus?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC

    driver-class-name: com.mysql.cj.jdbc.Driver



mybatis:

  mapper-locations: classpath:mapping/*Mapper.xml

  type-aliases-package: com.lin.entity



#showSql

logging:

  level:

    com:

      example:

        mapper : debug

启动文件

package com.lin;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@MapperScan("com.lin.mapper")
@SpringBootApplication
public class XinguanthymeleafApplication {

   public static void main(String[] args) {
      SpringApplication.run(XinguanthymeleafApplication.class, args);
   }

}

controller

package com.lin.comtroller;

import com.lin.entity.User;
import com.lin.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.List;

@Controller
public class testController2 {
    @Autowired
    private UserService userService;


    /**

     * http://localhost:8080/user/toHome

     * @param model

     * @return

     */

    @RequestMapping(value="/testThymeleaf1")

    public String toHome(Model model) {

        //向页面返回的数据

        model.addAttribute("code", 200);

        model.addAttribute("msg", "管理员向你表示祝贺！");

        //自动跳转到默认的 classpath:/templates/home.html 页面

        return "home";

    }

    @RequestMapping("/testThymeleaf2")
    public String selectAll(Model model){
        List<User> allUser = userService.getAll();
        System.out.println(allUser);
        model.addAttribute("allUser",allUser);
        return "selectAll";
    }

    @RequestMapping("/insert")
    public String test3(User user){
        userService.saveUser(user);
        return "redirect:/testThymeleaf2";
    }

    @RequestMapping("/testBootstrap")
    public String test4(){
        return "testBootstrap";
    }


}

Service

package com.lin.service;

import com.lin.entity.User;

import java.util.List;


public interface UserService {

    User getUserById(int id);

    List<User> getAll();

    Integer saveUser(User user);
}

package com.lin.service.impl;

import com.lin.entity.User;
import com.lin.mapper.UserMapper;
import com.lin.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserServiceImpl implements UserService {
    @Autowired(required = false)
    private UserMapper userMapper;
    @Override
    public User getUserById(int id) {
        return userMapper.getUserById(id);
    }

    @Override
    public List<User> getAll() {
        return userMapper.getAll();
    }

    @Override
    public Integer saveUser(User user) {
        return userMapper.saveUser(user);
    }

}

Mapper

package com.lin.mapper;

import com.lin.entity.User;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

@Mapper
public interface UserMapper {

    User getUserById(int id);

    List<User> getAll();

    Integer saveUser(User user);
}

entity

package com.lin.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {

    private Long id;
    private String name;
    private int age;
    private String email;
}

mapper.xml

<?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.lin.mapper.UserMapper">
    <select id="getUserById" resultType="User">
        SELECT * FROM mybatis_plus.user WHERE id = #{id};
    </select>

    <select id="getAll" resultType="User">
        SELECT * FROM mybatis_plus.user;
    </select>

    <insert id="saveUser" parameterType="User">
        INSERT INTO mybatis_plus.user(id,name,age,email)VALUES (#{id},#{name},#{age},#{email})
    </insert>
</mapper>

前端页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
    <div class="col-sm-3" style="background-color:lavenderblush;"> &nbsp;</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">&nbsp; </div>
    <div class="col-sm-3" style="background-color:lavenderblush;">&nbsp; </div>
    <div class="col-sm-3" style="background-color:lavenderblush;"> &nbsp;</div>
    <div class="col-sm-3" style="background-color:lavenderblush;"> &nbsp;</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div>

    <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">
        <form action="/insert"  method="post">
            <!--<input type="hidden" th:field="*{id}">-->
            <div class="form-group">
                <label for="pwd">Name:</label>
                <!--<input type="text" class="form-control" id="pwd" th:field="*{name}">-->
                <input type="text" class="form-control" id="pwd"  th:value="${name}" name="name">
            </div>
            <div class="form-group">
                <label for="age">Age:</label>
                <!--<input type="text" class="form-control" id="email" th:field="*{email}">-->
                <input type="text" class="form-control" id="age"  th:value="${age}" name="age">
            </div>
            <div class="form-group">
                <label for="email">Email address:</label>
                <!--<input type="text" class="form-control" id="email" th:field="*{email}">-->
                <input type="text" class="form-control" id="email"  th:value="${email}" name="email">
            </div>
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox"> Remember me
                </label>
            </div>
            <button  class="btn btn-primary">Submit</button>
        </form>
    </div>
    <div class="col-sm-4"  style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div>
    <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div>



</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table">
    <thead>
    <tr>
        <th>姓名</th>
        <th>邮箱</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="allUser : ${allUser}">
        <td th:text="${allUser.name}"></td>
        <td th:text="${allUser.email}"></td>
    </tr>
    </tbody>
</table>
</body>
</html>