序言
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
- 下载构建并打包项目
- mvn clean
5. 搭建本地Maven环境
-
下载Maven(3.X)
-
解压到指定目录
-
配置环境变量
-
配置“阿里云”镜像地址
- 为了提升library的下载速度，推荐配置国内镜像url地址
- 在settings.xml配置文件的中添加如下标签：
<mirror> <id>nexus-aliyun</id> <mirrorOf>*</mirrorOf> <name>Nexus aliyun</name> <url>http://maven.aliyun.com/nexus/content/groups/public</url> </mirror> -
测试
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
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> -
在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。
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>springboot-thymeleaf demo</title> </head> <body> <p th:text="'得到编号, ' + ${id} + '!'" /> </body> </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<UserInfo> userList = new ArrayList<UserInfo>(); userList.add(new UserInfo(1001,"Jain")); userList.add(new UserInfo(1002,"Admin")); userList.add(new UserInfo(1003,"Tony")); return "hello"; } } -
编写模板页面hello.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>springboot-thymeleaf</title> </head> <body> <!--变量表达式--> <p th:text="'得到单个编号, ' + ${id} + '!'" /> <span th:text="'用户编号:'+${user.userId}+',用户姓名:'+${user.userName}"/> <!--选择表达式 --> <ul> <li th:each="user : ${users}"> <span th:text="*{user.userId}"/> <span th:text="*{user.userName}"/> </li> </ul> </body> </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，并编程实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>设置项目首页</title> <link type="text/css" rel="stylesheet" href="/css/mycss.css" /> <script type="text/javascript" src="/js/jquery-3.3.1.js"></script> </head> <body> <span class="myred">项目的首页index.html</span> <img src="images/lvdouwa.png" height="156" width="154"/></body> <span id="my"></span> <script type="text/javascript"> $(function(){ $("#my").html("Hello Jquery!") }) </script> </html>
3. 配置样式表文件
-
static目录下创建css文件夹
- 创建样式表文件mycss.css
.myred{ color:red; font-size: 30px; } -
在index.html引入样式
<link type="text/css" rel="stylesheet" href="/css/mycss.css" /> <span class="myred">项目的首页index.html</span>
4.启动服务，执行测试
- 输入服务地址: http://localhost:8080/index.html
- 执行效果是：
2831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
