SpringBoot项目前端
这篇文章主要介绍了浅谈SpringBoot项目如何让前端开发提高效率(小技巧),主要介绍了Swagger和Nginx提高效率的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
社会分工越来越细,对于工程类研发来说,全栈是越来越少了。这是时代的进步,也是个体的悲哀。
本篇文章涉及的知识点有
- Swagger 为了文档
- Nginx 为了效率
众所周知, java
项目的启动速度就像沙子里走路。要是你的前端模块也很大,有一大堆 node_modules
, SpringBoot
会毫不犹豫的给你打包进去。
每次修改前端页面,都需要打包才能调试,真是等的媳妇都跑了。可惜的是, vue
、 angular
等当道,每一个都又大又肥,苦也。
Swagger
swagger
除了调试用,还可作为在线文档使用。给前端这个东西,后端基本上就可以闭嘴了。
快速集成
swagger
配置还是有点工作量。所幸已经有了 starter
封装。
首先, pom.xml
里放入
1 2 3 4 5 |
|
然后, application.yml
里放入
1 2 3 4 5 6 7 8 9 |
|
最后, App.java
中加入注解
1 2 3 4 5 6 |
|
三部曲完成以后,访问 http://{ip}:{port}/{contextPath}/swagger-ui.html
,就可以看到界面啦
好看一点
swagger
改版后,颜值很低。我们尝试来改变它。
这里推荐两个界面。都是引入相应的jar包即可,不需要有任何其他改动。
swagger-ui-layer
1 2 3 4 5 |
|
swagger-bootstrap-ui
1 2 3 4 5 |
|
至于种草哪一个,看你喽。
Nginx
nginx
才是本文的重点。主要是去做路由,方便你在 本地调试
。哪怕服务端部署在其他环境。
本地启动一个 nginx
,加几行配置就OK了
1 2 3 4 5 6 7 8 |
|
稍微解释一下。
- 访问 /时,默认去找服务端的rest请求
- 访问前端页面时,指向本地的静态文件目录
是不是想大呼一声:卧槽,这么简单。对,就是这么简单!在后端解决跨域问题前,你甚至能将后端多个项目揉在一起。
其他
有同学反映有大量js在项目里的时候。打开Idea,会非常的慢。原因就是你的Idea在索引你的js文件。只要把静态目录排除掉就可以了。 这里这里:
1.1、静态资源访问
在我们开发Web应用的时候,需要引用大量的js、css、图片等静态资源。
默认配置
Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则:
/static
/public
/resources
/META-INF/resources
举例:我们可以在src/main/resources/目录下创建static,在该位置放置一个图片文件。启动程序后,尝试访问http://localhost:8080/D.jpg。如能显示图片,配置成功。
1.2、渲染Web页面
渲染Web页面
在之前的示例中,我们都是通过@RestController来处理请求,所以返回的内容为json对象。那么如果需要渲染html页面的时候,要如何实现呢?
模板引擎
在动态HTML实现上Spring Boot依然可以完美胜任,并且提供了多种模板引擎的默认配置支持,所以在推荐的模板引擎下,我们可以很快的上手开发动态网站。
Spring Boot提供了默认配置的模板引擎主要有以下几种:
- Thymeleaf
- FreeMarker
- Velocity
- Groovy
- Mustache
Spring Boot建议使用这些模板引擎,避免使用JSP,若一定要使用JSP将无法实现Spring Boot的多种特性,具体可见后文:支持JSP的配置
当你使用上述模板引擎中的任何一个,它们默认的模板配置路径为:src/main/resources/templates。当然也可以修改这个路径,具体如何修改,可在后续各模板引擎的配置属性中查询并修改。Freemarker模板引擎渲染web视图
使用Freemarker模板引擎渲染web视图
在Web前端的学习中我们会应用多种的模板引擎来快速的完成动态网站的开发,下面就给大家详细的讲解一下使用Freemarker模板引擎渲染web视图的应用方法。
1.3.1、pom文件引入:
<!– 引入freeMarker的依赖包. –> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> </dependency> |
1.3.2、后台代码
在src/main/resources/创建一个templates文件夹,后缀为*.ftl
@RequestMapping(“/index”) public String index(Map<String, Object> map) { map.put(“name”,“美丽的天使…”); return “index”; } |
1.3.3、前台代码
<!DOCTYPE html> <html> <head lang=”en”> <meta charset=”UTF-8″ /> <title></title> </head> <body> ${name} </body> </html> |
1.3.4、Freemarker其他用法
@RequestMapping(“/freemarkerIndex”) public String index(Map<String, Object> result) { result.put(“name”, “zhaocong”); result.put(“sex”, “0”); List<String> userlist = new ArrayList<String>(); userlist .add(“zhangsan”); userlist .add(“lisi”); userlist .add(“atguigu”); result.put(“userlist “, userlist ); return “index”; }
<!DOCTYPE html> <html> <head lang=”en“> <meta charset=”UTF-8″ /> <title>首页</title> </head> <body> ${name} <#if sex==”1″> 男 <#elseif sex==”2″> 女 <#else> 帅气的boy </#if> <#list userlist as user> ${user} </#list> </body> </html>
|
1.3.5、Freemarker配置
新建application.properties文件
######################################################## ###FREEMARKER (FreeMarkerAutoConfiguration) ######################################################## spring.freemarker.allow-request-override=false spring.freemarker.cache=true spring.freemarker.check-template-location=true spring.freemarker.charset=UTF-8 spring.freemarker.content-type=text/html spring.freemarker.expose-request-attributes=false spring.freemarker.expose-session-attributes=false spring.freemarker.expose-spring-macro-helpers=false #spring.freemarker.prefix= #spring.freemarker.request-context-attribute= #spring.freemarker.settings.*= spring.freemarker.suffix=.ftl spring.freemarker.template-loader-path=classpath:/templates/ #comma-separated list #spring.freemarker.view-names= # whitelist of view names that can be resolved
|
SpringBoot整合日志管理
1.1使用log4j记录日志
1.1.2新建log4j配置文件
文件名称log4j.properties
#log4j.rootLogger=CONSOLE,info,error,DEBUG log4j.rootLogger=info,error,CONSOLE,DEBUG log4j.appender.CONSOLE=org.apache.log4j.ConsoleAppender log4j.appender.CONSOLE.layout=org.apache.log4j.PatternLayout log4j.appender.CONSOLE.layout.ConversionPattern=%d{yyyy-MM-dd-HH-mm} [%t] [%c] [%p] – %m%n log4j.logger.info=info log4j.appender.info=org.apache.log4j.DailyRollingFileAppender log4j.appender.info.layout=org.apache.log4j.PatternLayout log4j.appender.info.layout.ConversionPattern=%d{yyyy-MM-dd-HH-mm} [%t] [%c] [%p] – %m%n log4j.appender.info.datePattern=‘.’yyyy-MM-dd log4j.appender.info.Threshold = info log4j.appender.info.append=true #log4j.appender.info.File=/home/admin/pms–api-services/logs/info/api_services_info log4j.appender.info.File=/Users/dddd/Documents/testspace/pms–api-services/logs/info/api_services_info log4j.logger.error=error log4j.appender.error=org.apache.log4j.DailyRollingFileAppender log4j.appender.error.layout=org.apache.log4j.PatternLayout log4j.appender.error.layout.ConversionPattern=%d{yyyy-MM-dd-HH-mm} [%t] [%c] [%p] – %m%n log4j.appender.error.datePattern=‘.’yyyy-MM-dd log4j.appender.error.Threshold = error log4j.appender.error.append=true #log4j.appender.error.File=/home/admin/pms–api-services/logs/error/api_services_error log4j.appender.error.File=/Users/dddd/Documents/testspace/pms–api-services/logs/error/api_services_error log4j.logger.DEBUG=DEBUG log4j.appender.DEBUG=org.apache.log4j.DailyRollingFileAppender log4j.appender.DEBUG.layout=org.apache.log4j.PatternLayout log4j.appender.DEBUG.layout.ConversionPattern=%d{yyyy-MM-dd-HH-mm} [%t] [%c] [%p] – %m%n log4j.appender.DEBUG.datePattern=‘.’yyyy-MM-dd log4j.appender.DEBUG.Threshold = DEBUG log4j.appender.DEBUG.append=true #log4j.appender.DEBUG.File=/home/admin/pms–api-services/logs/debug/api_services_debug log4j.appender.DEBUG.File=/Users/dddd/Documents/testspace/pms–api-services/logs/debug/api_services_debug
log4j代码 private static final Logger logger = LoggerFactory.getLogger(IndexController.class); |
Maven依赖
<parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.0.0.RELEASE</version> </parent> <dependencies> <!– SpringBoot 核心组件 –> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-tomcat</artifactId> </dependency> <dependency> <groupId>org.apache.tomcat.embed</groupId> <artifactId>tomcat-embed-jasper</artifactId> </dependency> <!– spring boot start –> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId> <exclusions> <!– 排除自带的logback依赖 –> <exclusion> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-logging</artifactId> </exclusion> </exclusions> </dependency>
<!– springboot-log4j –> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-log4j</artifactId> <version>1.3.8.RELEASE</version> </dependency> </dependencies> |
1.2使用AOP统一处理Web请求日志
1.2.1POM文件新增依赖
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-aop</artifactId> </dependency> |
1.2.2POM文件新增依赖
@Aspect @Component public class WebLogAspect {
private static final Logger logger = LoggerFactory.getLogger(WebLogAspect.class);
@Pointcut(“execution(public * com.itmayiedu.controller.*.*(..))”) public void webLog() { }
@Before(“webLog()”) public void doBefore(JoinPoint joinPoint) throws Throwable { // 接收到请求,记录请求内容 ServletRequestAttributes attributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes(); HttpServletRequest request = attributes.getRequest(); // 记录下请求内容 logger.info(“URL : ” + request.getRequestURL().toString()); logger.info(“HTTP_METHOD : ” + request.getMethod()); logger.info(“IP : ” + request.getRemoteAddr()); Enumeration<String> enu = request.getParameterNames(); while (enu.hasMoreElements()) { String name = (String) enu.nextElement(); logger.info(“name:{},value:{}”, name, request.getParameter(name)); } }
@AfterReturning(returning = “ret”, pointcut = “webLog()”) public void doAfterReturning(Object ret) throws Throwable { // 处理完请求,返回内容 logger.info(“RESPONSE : ” + ret); } } |
1.3Spring Boot集成lombok让代码更简洁
1.3.1添加lombok依赖
<dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> |
1.3.2实体类演示
@Slf4j @Data public class UserEntity { // @Getter // @Setter private String userName; // @Getter // @Setter private Integer age;
@Override public String toString() { return “UserEntity [userName=” + userName + “, age=” + age + “]”; }
public static void main(String[] args) { UserEntity userEntity = new UserEntity(); userEntity.setUserName(“zhangsan”); userEntity.setAge(20); System.out.println(userEntity.toString()); log.info(“####我是日志##########”); }
} |
1.3.2其他特性
@Data 标签,生成getter/setter toString()等方法 @NonNull : 让你不在担忧并且爱上NullPointerException @CleanUp : 自动资源管理:不用再在finally中添加资源的close方法 @Setter/@Getter : 自动生成set和get方法 @ToString : 自动生成toString方法 @EqualsAndHashcode : 从对象的字段中生成hashCode和equals的实现 @NoArgsConstructor/@RequiredArgsConstructor/@AllArgsConstructor 自动生成构造方法 @Data : 自动生成set/get方法,toString方法,equals方法,hashCode方法,不带参数的构造方法 @Value : 用于注解final类 @Builder : 产生复杂的构建器api类 @SneakyThrows : 异常处理(谨慎使用) @Synchronized : 同步方法安全的转化 @Getter(lazy=true) : @Log : 支持各种logger对象,使用时用对应的注解,如:@Log4 springboot + redis 相关
SpringBoot,thymeleaf实现点击切换语言 编写国际化文件: language.properties(基础文件) 1 login=登录 1 login=login spring.messages.basename=static.message.language 这样springBoot就能根据 浏览器中的语言 任意切换语言 原理是 springBoot 的 WebMvcAutoConfiguration 配置类内配置了一个LocaleResolver(区域解析器) 思路: 前端页面提供a标签 用户点击a标签想服务器发请求 带上要切换的语言(格式为 zh_CN) 前端页面 <div align='center' > @Bean 我们可以配置自己的 区域解析器 代替默认的 从而实现 用户自由切换语言的功能 代码: public class LocaleConfig implements LocaleResolver{ //实现LocaleResolver接口 @Override } 效果: |