第04章 SpringBoot Web开发（一）

序言

1.内容介绍

​ 本章介绍了Maven的相关技术点，对于Maven的作用、特性、如何搭建本地Maven环境、如何配置IDEA Maven环境进行了一 一说明，同时对于thymeleaf模板引擎进行了详细的说明和讲解，提供了SpringBoot集成thymeleaf模板的操作演示，最后对于SpringBoot项目中如何引入静态资源进行了详细的描述和说明。

2.理论目标

• 掌握项目构建的意义
• 了解Maven的作用及相关概念
• 了解thymeleaf的概念及特点

3.实践目标

• 熟练进行Maven本地环境搭建，达到基于命令进行项目构建
• 熟练进行Idea Maven环境配置，能基于IDE进行Maven使用
• 熟练进行SpringBoot集成thymeleaf模板，丰富前端的页面展示
• 熟练进行静态资源的引入，便于前端项目效果的渲染

4.实践案例

• 搭建本地Maven环境
• 配置IDEA Maven环境
• SpringBoot集成thymeleaf模板，实现静态资源访问

5.内容目录

• 1.Maven项目构建
• 2.SpringBoot整合thymeleaf
• 3.静态资源映射

---

第1节 Maven项目构建

1. 项目构建概述

• 什么是项目构建？
  • 清理、编译、测试、打包、部署
• 什么是理想的项目构建？
  • 高度自动化、跨平台、可重用的组件、标准化的

2. Maven是什么？

• Maven是一个由Apache开发的基于项目对象模型（POM）进行软件项目管理的工具

3. Maven的作用

• 统一项目依赖管理
• 提供统一模板，统一项目结构
• 统一对项目创建、编译、打包、发布等操作进行管理
  • 注意：pom.xml是Maven用于管理项目的配置文件，用来配置和管理整个项目(如项目依赖、项目发布配置等)

4. Maven相关概念

• Maven构建
  • 定义：项目编译或运行需要依赖的各种Maven组件
  • 类型：Jar包、描述文件、插件等
• Maven仓库
  • 保存Maven构建的本地或者远程存储区域
  • 分类：本地仓库、远程仓库
• Maven坐标
  • Maven构建的定位标识（GroupID、ArtifactID、Version）
  • 作用：用来定义和寻找要使用的Maven构建
• Maven常用命令：
  • mvn clean
    • 清空上一次项目运行生成的文件
  • mvn compile
    • 下载构建并编译项目
  • mvn install
    • 下载构建并打包项目，并安装项目到本地仓库
  • mvn package
    • 下载构建并打包项目

5. 搭建本地Maven环境

• 下载Maven(3.X)

• 解压到指定目录

• 配置环境变量

• 配置“阿里云”镜像地址

  • 为了提升library的下载速度，推荐配置国内镜像url地址
  • 在settings.xml配置文件的中添加如下标签：

  nexus-aliyun * Nexus aliyun http://maven.aliyun.com/nexus/content/groups/public

• 测试

  

6. 配置Idea Maven环境

• 注意：需要基于Idea全局配置

• 选择settings,进入全局配置窗口

  

• 选择"Maven",依次选择Maven主目录、配置文件位置、本地仓库目录

  

---

第2节 SpringBoot整合thymeleaf

1. thymeleaf概述

• Thymeleaf是跟Velocity、FreeMarker类似的模板引擎，它可以完全替代JSP。

2. thymeleaf特点

• Thymeleaf在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以thymeleaf的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。

• Thymeleaf开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、OGNL表达式效果，避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

• Thymeleaf提供spring标准方言和一个与SpringMVC完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

3. SpringBoot集成thymeleaf模板

• 在pom.xml文件引入thymeleaf

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

• 在application.yml文件中配置thymeleaf

  # thymeleaf 
  spring.thymeleaf.prefix=classpath:/templates/ 
  spring.thymeleaf.check-template-location=true 
  spring.thymeleaf.suffix=.html 
  spring.thymeleaf.encoding=UTF-8 
  spring.thymeleaf.content-type=text/html 
  spring.thymeleaf.mode=HTML5 
  spring.thymeleaf.cache=false
  

• 编写控制层HelloController.java

  • 接收客户端的id参数

  @Controller public class HelloController { @RequestMapping("/hello") public String hello(HttpServletRequest request,String id) { request.setAttribute("id", id); return "hello"; } }

• 新建编辑模板文件

  • 在resources文件夹下的templates目录，用于存放HTML等模板文件，新增hello.html。

• 启动服务，测试

  • 输入url地址：http://localhost:8080/hello?id=100

4. thymeleaf标签详解

• 变量表达式
  • 即OGNL表达式或Spring EL表达式(在Spring术语中也叫model attributes)。
  • 比如：${session.user.name}
• 选择(星号)表达式
  • 选择表达式很像变量表达式，不过它们用一个预先选择的对象来代替上下文变量容器(map)来执行
  • 比如：*{customer.name}
• 文字国际化表达式
  • 文字国际化表达式允许我们从一个外部文件获取区域文字信息(.properties)，用Key索引Value
  • 比如：#{main.title}
• URL表达式
  • URL表达式指的是把一个有用的上下文或回话信息添加到URL，这个过程经常被叫做URL重写。
  • 比如：
    • @{/order/list}
    • URL还可以设置参数：@{/order/details(id=${orderId})}

5. thymeleaf标签操作

• 编写实体类UserInfo.java

  public class UserInfo { private int userId; private String userName; public UserInfo() { } public UserInfo(int userId, String userName) { this.userId = userId; this.userName = userName; } public int getUserId() { return userId; } public String getUserName() { return userName; } }

• 编写控制层HelloController.java

  @Controller public class HelloController { @RequestMapping("/hello") public String hello(HttpServletRequest request, String id) { //存储编号 request.setAttribute("id", id); //存储单个对象 request.setAttribute("user",new UserInfo(1001,"Jain")); //存储用户对象集合 List userList = new ArrayList(); userList.add(new UserInfo(1001,"Jain")); userList.add(new UserInfo(1002,"Admin")); userList.add(new UserInfo(1003,"Tony")); return "hello"; } }

• 编写模板页面hello.html

  •  

• 启动服务，测试

  

开始实验

第3节 静态资源映射

• 本项目的JS、CSS、jQuery文件，SpringBoot默认是从以下这些路径中读取的：
  • classpath:/META‐INF/resources/
  • classpath:/resources/
  • classpath:/static/
  • classpath:/public/
  • /：当前项目的根路径

1. 首页index.html配置

在SpringBoot默认静态资源访问路径下添加名为index.html文件，那么访问localhost:8080,会自动跳转到这个index.html

---

2. 配置jQuery脚本

• static目录下创建js文件夹

  • 复制jQuery.js

• 在index.html引入jQuery.js，并编程实现

  项目的首页index.html

3. 配置样式表文件

• static目录下创建css文件夹

  • 创建样式表文件mycss.css

  .myred{ color:red; font-size: 30px; }

• 在index.html引入样式

  项目的首页index.html

4.启动服务，执行测试

• 输入服务地址: http://localhost:8080/index.html
• 执行效果是：