Springboot快速入门（三）——Web开发：首页实现

1. SpringBoot Web开发

1.1 要解决的问题：

• 导入静态资源
• 首页
• jsp，模板引擎Thymeleaf
• 装配扩展SpringMVC
• 增删改查
• 拦截器
• 国际化

1.2 自动装配

• xxxxAutoConfiguration….：向容器自动配置组件
• xxxxProperties：自动配置类，装配配置文件中自定义的一些内容

2 静态资源处理

2.1 @GetMapping和@RequestMapping有啥区别

• @RequestMapping可以指定GET、POST请求方式

• @GetMapping等价于@RequestMapping的GET请求方式。eg：

  @RequestMapping(value = “hello”, method= RequestMethod.GET ) == @GetMapping(“hello”)

  @RestController
  public class HelloController {
      //@RequestMapping(value = "hello", method= RequestMethod.GET )
      @GetMapping("/hello")
      public String hello(){
          return "hello,world";
      }
  }

2.2 静态资源存放的目录

"classpath:/META-INF/resources/
"classpath:/resources/"
"classpath:/static/"
"classpath:/public/"

• 优先级：resources>static(默认)>public

2.3 自定义静态资源路径

spring.web.resources.static-locations=classpath:/coding/,classpath:/github/

一旦自己定义了静态文件夹的路径，原来的自动配置就都会失效了！

3. thymeleaf模板引擎

4. Spring MVC 配置原理

5. 配置环境及首页

5.1 配置环境准备工作

5.1.1 导入依赖包

<!--   lombok     -->
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
</dependency>

5.1.2 导入实体类

// 部门类
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Department {
    private Integer id;
    private String departmentName;

}

// 员工类
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Employee {
    private Integer id;
    private String lastName;
    private String email;
    private Integer gender;
    private Department department;
    private Date birth;

}

5.1.3 配置Dao层

@Repository
public class DepartmentDao {
    // 模拟数据库中的数据
    private static Map<Integer, Department> departments=null;
    static {
        departments = new HashMap<Integer, Department>();   // 创建一个部门
        departments.put(101,new Department(101,"运营部"));
        departments.put(102,new Department(102,"策划部"));
        departments.put(103,new Department(103,"法务部"));
        departments.put(104,new Department(104,"开发部"));
        departments.put(105,new Department(105,"宣传部"));
    }
    // 获得所有部门的信息
    public Collection<Department> getDepartments(){
        return departments.values();
    }
    // 通过ID查询部门
    public Department getDepartment(Integer id){
        return departments.get(id);
    }
}

@Repository
public class EmployeeDao {
    // 模拟数据库中的数据
    private static Map<Integer, Employee> employees=null;
    // 员工所属部门
    @Autowired
    private DepartmentDao departmentDao;
    static {
        employees = new HashMap<>();   // 创建一个部
        employees.put(1001,new Employee(1001,"Quary","A2835467@qq.com",1,new Department(1001,"运营部"),new Date()));
        employees.put(1002,new Employee(1002,"Quary","B2835467@qq.com",0,new Department(1002,"策划部"),new Date()));
        employees.put(1003,new Employee(1003,"Quary","C2835467@qq.com",1,new Department(1003,"法务部"),new Date()));
        employees.put(1004,new Employee(1004,"Quary","D2835467@qq.com",0,new Department(1004,"开发部"),new Date()));
        employees.put(1005,new Employee(1005,"Quary","F2835467@qq.com",1,new Department(1005,"宣传部"),new Date()));
    }
    // 增加员工,主键自增
    private static Integer initid=1006;
    public void save(Employee employee){
        if(employee.getId()==null){
            employee.setId(initid);
        }        employee.setDepartment(departmentDao.getDepartment(employee.getDepartment().getId()));
        employees.put(employee.getId(),employee);
    }
    // 查询全部员工信息
    public Collection<Employee> getAll(){
        return employees.values();
    }
    // 通过ID查询员工
    public Employee getEmployee(Integer id){
        return employees.get(id);
    }
    // 删除员工
    public void delete(Integer id){
        employees.remove(id);
    }
}

5.1.4 导入静态资源

• css，js等放在static文件夹下
• html放在template文件夹下

5.2 首页实现

• 方式一：写一个controller实现

  @Controller
  public class IndexController {
      /**
       * 会解析到templates目录下的index.html页面
       * @return
       */
      @RequestMapping({"/","/index.html"})
      public String index(){
          return "index";
      }
  }

• 方式二：自己编写MVC的扩展配置

  @Controller
  public class IndexController implements WebMvcConfigurer {
      @Override
      public void addViewControllers(ViewControllerRegistry registry) {
          registry.addViewController("/").setViewName("index");
          registry.addViewController("/index.html").setViewName("index");
      }
  }

• 解决资源导入

  • xmlns:th="http://www.thymeleaf.org"
  • th:href="@{}"

  <html lang="en" xmlns:th="http://www.thymeleaf.org">
      ·····················
      <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
      <link th:href="@{/css/signin.css}" rel="stylesheet">
      ·····················
      <img class="mb-4" th:src="@{/img/bootstrap-solid.svg}" alt="" width="72" height="72">
      ·····················