2021-03-14 SpringBoot项目前端开发

最新推荐文章于 2024-04-12 03:34:26 发布

okludawei

最新推荐文章于 2024-04-12 03:34:26 发布

阅读量939

点赞数

文章标签： spring boot

本文链接：https://blog.csdn.net/okludawei/article/details/114776695

版权

SpringBoot项目前端

这篇文章主要介绍了浅谈SpringBoot项目如何让前端开发提高效率(小技巧)，主要介绍了Swagger和Nginx提高效率的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

社会分工越来越细，对于工程类研发来说，全栈是越来越少了。这是时代的进步，也是个体的悲哀。

本篇文章涉及的知识点有

Swagger 为了文档
Nginx 为了效率

众所周知， java 项目的启动速度就像沙子里走路。要是你的前端模块也很大，有一大堆 node_modules ， SpringBoot 会毫不犹豫的给你打包进去。

每次修改前端页面，都需要打包才能调试，真是等的媳妇都跑了。可惜的是， vue 、 angular 等当道，每一个都又大又肥，苦也。

Swagger

swagger 除了调试用，还可作为在线文档使用。给前端这个东西，后端基本上就可以闭嘴了。

快速集成

swagger 配置还是有点工作量。所幸已经有了 starter 封装。

首先， pom.xml 里放入

<dependency>

<groupId>com.spring4all</groupId>

<artifactId>swagger-spring-boot-starter</artifactId>

<version>1.7.1.RELEASE</version>

</dependency>

然后， application.yml 里放入

swagger:

title: ${artifactId}

version: @version@

contact:

name: 小姐姐味道

email: xiaojiejie@sayhiai.com

base-package: com.sayhiai.controller

base-path: /**

exclude-path: /error, /ops/**

最后, App.java 中加入注解

@EnableSwagger2Doc

@Slf4j

public class App extends SpringBootServletInitializer {

public static void main(String[] args) {

SpringApplication.run(App.class, args);

}

三部曲完成以后，访问 http://{ip}:{port}/{contextPath}/swagger-ui.html ，就可以看到界面啦

好看一点

swagger 改版后，颜值很低。我们尝试来改变它。

这里推荐两个界面。都是引入相应的jar包即可，不需要有任何其他改动。

swagger-ui-layer

<dependency>

<groupId>com.github.caspar-chen</groupId>

<artifactId>swagger-ui-layer</artifactId>

<version>${last-version}</version>

</dependency>

swagger-bootstrap-ui

<dependency>

<groupId>com.github.xiaoymin</groupId>

<artifactId>swagger-bootstrap-ui</artifactId>

<version>1.7</version>

</dependency>

至于种草哪一个，看你喽。

Nginx

nginx 才是本文的重点。主要是去做路由，方便你在 本地调试 。哪怕服务端部署在其他环境。

本地启动一个 nginx ，加几行配置就OK了

server {

listen 80;

location / {

proxy_pass http://192.168.3.227:11057/;

}

location /static/ {

alias /codes/devops-publish-webapp/src/main/resources/static/;

}

稍微解释一下。

访问 /时，默认去找服务端的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。如能显示图片，配置成功。

Web前端之SpringBoot开发

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的依赖包. –>

<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>

<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依赖

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-parent</artifactId>

<version>2.0.0.RELEASE</version>

</parent>

<!– SpringBoot 核心组件 –>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-tomcat</artifactId>

</dependency>

<groupId>org.apache.tomcat.embed</groupId>

<artifactId>tomcat-embed-jasper</artifactId>

</dependency>

<!– spring boot start –>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter</artifactId>

<!– 排除自带的logback依赖 –>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-logging</artifactId>

</exclusion>

</exclusions>

</dependency>

<!– springboot-log4j –>

<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文件新增依赖

<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依赖

<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 相关

代码如下：

@RestController
public class RedisExampleController {


    @Autowired
    private IRedisService redisService;


    @RequestMapping("/redis/set")
    public Object redisSet(@RequestParam("value")String value){
        boolean isOk = redisService.setString("name", value);
        if(isOk){
            return new XPFSingleResponse("redis新增成功");
        }else{
            return new XPFBadRequestException("redis新增失败");
        }
    }

    @RequestMapping("/redis/get")
    public Object redisGet(){
        String name = redisService.getString("name");
        return new XPFSingleResponse("redis获取：" + name);
    }
}

配置如下（路径在 springBoot-api\src\main\resources\application-dev.properties）：

#REDIS
# Redis数据库索引（默认为0）
spring.redis.database=0
# Redis服务器地址
spring.redis.host=127.0.0.1
# Redis服务器连接端口
spring.redis.port=6379
# Redis服务器连接密码（默认为空）
spring.redis.password=
# 连接池最大连接数（使用负值表示没有限制）
spring.redis.pool.max-active=8
# 连接池最大阻塞等待时间（使用负值表示没有限制）
spring.redis.pool.max-wait=-1
# 连接池中的最大空闲连接
spring.redis.pool.max-idle=8
# 连接池中的最小空闲连接
spring.redis.pool.min-idle=0
# 连接超时时间（毫秒）
spring.redis.timeout=0

redis赋值测试(项目名这里定义成 zeus ，下同)： http://localhost:7500/zeus/redis/set?value=vic

redis取值测试： http://localhost:7500/zeus/redis/get

SpringBoot,thymeleaf实现点击切换语言
首先在application.properties配置文件内配置基础国际化文件的位置

编写国际化文件：
文件路径：

language.properties(基础文件)
login=登录
username=用户名
password=密码

1
2
3
4
language_zh_CN.properties(中文)

1
2
3
4
language_en_US（美式英语）

spring.messages.basename=static.message.language
1
然后在html内通过 #{xxx}引入国际化中的配置

这样springBoot就能根据浏览器中的语言任意切换语言
例：如果你浏览器语言设置为美式英语那么#{login}就从 language_en_US.properties内引入值

原理是 springBoot 的 WebMvcAutoConfiguration 配置类内配置了一个LocaleResolver(区域解析器)

思路：前端页面提供a标签用户点击a标签想服务器发请求带上要切换的语言(格式为 zh_CN)
后台通过request.getParameger 获得语言信息产生新的语言地区
实现语言的切换

前端页面

<div align='center' >
       <h2>[[#{login}]]</h2> 
       <h3 th:text='${message}'></h3>
       <form th:action='@{/logtest}' method='POST'>
           用户名：<input type='text' name='username' th:placeholder="#{username}"/>
           密码：<input type='password' name='password' th:placeholder="#{password}" />
           <input type='submit' value='提交'/>
       </form>
       </br>
       <a th:href='@{/login(lg=zh_CN)}'>中文</a>  | 
       <a th:href='@{/login(lg=en_US)}'>英文</a>
   </div>
1
2
3
4
5
6
7
8
9
10
11
12
后端：
1.编写自己的LocaleResolver

@Bean
       @ConditionalOnMissingBean
       @ConditionalOnProperty(prefix = "spring.mvc", name = "locale")
       public LocaleResolver localeResolver() {
           if (this.mvcProperties.getLocaleResolver() == WebMvcProperties.LocaleResolver.FIXED) {
               return new FixedLocaleResolver(this.mvcProperties.getLocale());
           }
           AcceptHeaderLocaleResolver localeResolver = new AcceptHeaderLocaleResolver();
           localeResolver.setDefaultLocale(this.mvcProperties.getLocale());
           return localeResolver;
       }
1
2
3
4
5
6
7
8
9
10
11
他能自动根据你浏览器设置的语言自动切换地区

我们可以配置自己的区域解析器代替默认的从而实现用户自由切换语言的功能

代码：

public class LocaleConfig implements LocaleResolver{ //实现LocaleResolver接口
   @Override
   public Locale resolveLocale(HttpServletRequest request) {
       Locale locale = Locale.getDefault(); //获取默认的地区
       if(request.getParameter("lg")!=null) { //如果能获取到说明用户要指定语言
           String str = (String)request.getParameter("lg"); //获取用户选择的语言
           String[] temp = str.split("_"); //分割下字符串
           locale = new Locale(temp[0],temp[1]);//产生新的Locale
           request.getSession().setAttribute("lg",locale ); //将Locale对象放入session 作为默认的语言地区
       }
       //如果用户没指定语言从session获取默认的语言地区
       if(request.getSession().getAttribute("lg")!=null) {
           return (Locale)request.getSession().getAttribute("lg");
       }
       return locale ; //返回语言地区
   }

   @Override
   public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {

   }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
将 LocaleResolver 放入spring容器中
@Configuration
public class MvcConfig implements WebMvcConfigurer{
   @Bean(name = "localeResolver")
   public LocaleResolver localeResolver() { //注意bena的名字必须为localeResolver
       return new LocaleConfig();
   }
1
2
3
4
5
6
这样就实现了点击a标签任意切换语言的功能了非常简单

效果：

okludawei

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
2021-03-14 SpringBoot项目前端开发

SpringBoot项目前端开发之Swagger 这篇文章主要介绍了浅谈SpringBoot项目如何让前端开发提高效率(小技巧)，主要介绍了Swagger和Nginx提高效率的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下社会分工越来越细，对于工程类研发来说，全栈是越来越少了。这是时代的进步，也是个体的悲哀。本篇文章涉及的知识点有Swagger 为了文档 Nginx 为了效率众所周知，java项目的启动速度就像沙子里走路。要是你的前端模块也很大，有一大堆...
复制链接

扫一扫