微服务项目
前后端分离
前端 -----------------vue----------------前端工程师
后端-------------springboot------------后端工程师
动静分离 -------> 部署cdn上
cdn----------------->减少带宽距离传输–减少自己服务器带宽
静态资源访问
在我们开发Web应用的时候,需要引用大量的js、css、图片等静态资源。
默认配置
Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则:
/static
/public
/resources
/META-INF/resources
举例:我们可以在src/main/resources/目录下创建static,在该位置放置一个图片文件。启动程序后,尝试访问http://localhost:8080/D.jpg。
如能显示图片,配置成功。
渲染Web页面
controller—视图层 渲染我们页面 – 视图层页面跳转
service------业务逻辑层 – 访问jspn格式
dao-- --------数据库访问层
前后端
渲染Web页面
在之前,我们都是通过@RestController来处理请求,所以返回的内容为json对象。那么如果需要渲染html页面的时候,要如何实现呢?
模板引擎 能够非常好的帮助seo搜索到该网页
在动态HTML实现上Spring Boot依然可以完美胜任,并且提供了多种模板引擎的默认配置支持,所以在推荐的模板引擎下,我们可以很快的
上手开发动态网站。
Spring Boot提供了默认配置的模板引擎主要有以下几种:
- Thymeleaf
- FreeMarker
- Velocity
- Groovy
- Mustache
Spring Boot建议使用这些模板引擎,避免使用JSP,若一定要使用JSP将无法实现Spring Boot的多种特性,具体可见后文:
支持JSP的配置当你使用上述模板引擎中的任何一个,它们默认的模板配置路径为:src/main/resources/templates。
当然也可以修改这个路径,具体如何修改,可在后续各模板引擎的配置属性中查询并修改。
YML与Properties用法
SpringBoot支持两种配置方式,一种是properties文件,一种是yml。
使用yml可以减少配置文件的重复性。
例如:application.properties配置
dudu.name=dudu
dudu.age=14
前面都一样、配置较多时会冗余
package com.dudu.service;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
/**
* @Author 嘟嘟嘟
* @ClassName MemberService
* @Project springboot-helloword
* @CreateTime 2021/1/17 14:47
*/
@RestController
public class MemberService {
@Value("${dudu.name}")
private String name;
@Value("${dudu.age}")
private String age;
@RequestMapping("/getPropertise")
public String getPropertise(){
return name+"--"+age;
}
}
在读取本地的配置文件时需要用到 @Value注解
例如:application.yml配置
dudu:
name: lala
age: 22
在企业中application.yml方式用的是比较多的;
使用 FreeMarker模板引擎渲染web视图
pom文件引入FreeMarker
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
controller层
@Controller
public class FreeMarkerIndexController {
@RequestMapping("/index")
public String freemarkerIndex(Map<String,String> result, HttpServletRequest request){
//Map<String, String> result与HttpServletRequest request一样
//request.setAttribute("name","dudu");HttpServletRequest request一样
result.put("name","dudu");
System.out.println("mfsl");
//model.addAttribute("name","dudu");
return "freemarkerIndex";
}
}
静态资源.ftl文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
</head>
<body>
${name}
</body>
</html>
不要忘了配置.yml文件
spring:
freemarker:
suffix: .ftl
Freemarker其他用法
FreeMarkerIndexController:
@Controller
public class FreeMarkerIndexController {
@RequestMapping("/index")
public String freemarkerIndex(Map<String,Object> result, HttpServletRequest request){
//Map<String, String> result与HttpServletRequest request一样
//request.setAttribute("name","dudu");HttpServletRequest request一样
result.put("name","dudu");
//0为男、1为女
result.put("sex","0");
result.put("age",22);
ArrayList<String> userlist=new ArrayList<>();
userlist.add("dudu");
userlist.add("xianggang");
result.put("userlist",userlist);
//model.addAttribute("name","dudu");
return "freemarkerIndex";
}
}
freemarkerIndex:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
</head>
<body>
${name}
<#if sex=='0'>
男
<#elseif sex=='1'>
女
<#else>
其他
</#if>
<#if age gt 17><!--这里的数字要注意,这里是int类型、controller里也要是int、要保持一致-->
成年了
<#else>
未成年
</#if>
<#list userlist as user>
${user}
</#list>
</body>
</html>
yml的一些配置:
dudu:
name: dd
age: 25
spring:
freemarker:
allow-request-override: false
cache: false
check-template-location: true
charset: UTF-8
content-type: text/html; charset=utf-8
expose-request-attributes: false
expose-session-attributes: false
expose-spring-macro-helpers: false
## 模版文件结尾.ftl
suffix: .ftl
## 模版文件目录
template-loader-path: classpath:/templates
server:
servlet:
encoding:
force: true
charset: UTF-8
使用 thymeleaf模板引擎渲染web视图
什么是thymeleaf
thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎,类似JSP,Velocity,FreeMaker等,它也可以轻易的与Spring MVC等Web
框架进行集成作为Web应用的模板引擎。
加入依赖;
<!--引入thymeleaf的依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
yml 配置文件
###ThymeLeaf配置
spring:
thymeleaf:
#prefix:指定模板所在的目录
prefix: classpath:/templates/
#check-tempate-location: 检查模板路径是否存在
check-template-location: true
#cache: 是否缓存,开发模式下设置为false,避免改了模板还要重启服务器,线上设置为true,可以提高性能。
cache: true
suffix: .html
encoding: UTF-8
mode: HTML5
controller层
@Controller
public class MyThymeleafController {
@RequestMapping("/myThymeleaf")
public String myThymeleaf(HttpServletRequest request, Map<String,Object> result){
//request.setAttribute("user",new UserEntity("dudu",22)); 这种写法可能会引起静态页面误报
result.put("user",new UserEntity("dudu",22));//并不一定能解决误报问题、但尽量用此方法
return "myThymeleaf";
}
}
entity层
public class UserEntity {//这里没有用lombok
private String userName;
private Integer age;
public UserEntity(String userName, Integer age) {
this.userName = userName;
this.age = age;
}
public String getUserName() {
return userName;
}
public Integer getAge() {
return age;
}
}
静态页面
在使用thymeleaff时,静态页面需要添加:xmlns:th=“http://www.thymeleaf.org”
<!DOCTYPE html>
<!--需要在HTML文件中加入以下语句: -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Show User</title>
</head>
<body>
<table>
姓名:<span th:text="${user.userName}"></span><br/>
年龄:<span th:text="${user.age}"></span>
</table>
</body>
</html>
thymeleaf循环、if判断
controller层:
@Controller
public class MyThymeleafController {
@RequestMapping("/myThymeleaf")
public String myThymeleaf(HttpServletRequest request, Map<String,Object> result){
//request.setAttribute("user",new UserEntity("dudu",22));
//result.put("user",new UserEntity("dudu",22));
ArrayList<UserEntity> userEntities = new ArrayList<>();
userEntities.add(new UserEntity("dudu1",22));
userEntities.add(new UserEntity("dudu2",23));
userEntities.add(new UserEntity("dudu3",24));
userEntities.add(new UserEntity("dudu4",25));
result.put("userlist",userEntities);
return "myThymeleaf";
}
}
静态资源页面:
<!DOCTYPE html>
<!--需要在HTML文件中加入以下语句: -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Show User</title>
</head>
<body>
<table>
姓名:<span th:text="${user.userName}"></span><br/>
年龄:<span th:text="${user.age}"></span>
<ul th:each="user:${userlist}">
<li th:text="${user.userName}"></li>
<li th:text="${user.age}"></li>
</ul>
<span th:if="${user.age>17}">成年</span>
<span th:if="${user.age<17}">未成年</span>
</table>
</body>
</html>```