浅谈SpringBoot项目如何让前端开发提高效率(小技巧)

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

今天要分享的小技巧，或许能够大幅提高你的开发效率。你可以用省下来的时间打个盹，浏览个美女写真什么的。

本篇文章涉及的知识点有

  • 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文件。只要把静态目录排除掉就可以了。 这里这里：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • SpringBoot和Swagger结合提高API开发效率

    现在Web开发越来越倾向于前后端分离,前端使用AngularJS,React,Vue等,部署在NodeJS上,后面采用SpringBoot发布Rest服务,前后端进行分离.这样的架构灵活且特别适合大型团队的协作开发. 那么问题来了,因为前端都是和后端通过API进行交互的,那么前后端的Rest API的接口如何进行定义和沟通呢?首先想到的应该就是Swagger. 那么什么是Swagger,Swagger™的目标是为REST APIs 定义一个标准的,与语言无关的接口,使人和计算机在看不到源码或者看

  • 浅谈SpringBoot项目如何让前端开发提高效率(小技巧)

    浅谈SpringBoot项目如何让前端开发提高效率(小技巧)

    社会分工越来越细,对于工程类研发来说,全栈是越来越少了.这是时代的进步,也是个体的悲哀. 今天要分享的小技巧,或许能够大幅提高你的开发效率.你可以用省下来的时间打个盹,浏览个美女写真什么的. 本篇文章涉及的知识点有 Swagger 为了文档 Nginx 为了效率 众所周知, java 项目的启动速度就像沙子里走路.要是你的前端模块也很大,有一大堆 node_modules , SpringBoot 会毫不犹豫的给你打包进去.每次修改前端页面,都需要打包才能调试,真是等的媳妇都跑了.可惜的是, v

  • 浅谈springboot项目中定时任务如何优雅退出

    在一个springboot项目中需要跑定时任务处理批数据时,突然有个Kill命令或者一个Ctrl+C的命令,此时我们需要当批数据处理完毕后才允许定时任务关闭,也就是当定时任务结束时才允许Kill命令生效. 启动类 启动类上我们获取到相应的上下文,捕捉相应命令.在这里插入代码片 @SpringBootApplication /**指定mapper对应包的路径*/ @MapperScan("com.youlanw.kz.dao") /**开启计划任务*/ @EnableScheduling

  • 浅谈SpringBoot项目打成war和jar的区别

    浅谈SpringBoot项目打成war和jar的区别

    首先给大家来讲一个我们遇到的一个奇怪的问题: 1.我的一个springboot项目,用mvn install打包成jar,换一台有jdk的机器就直接可以用java -jar 项目名.jar的方式运行,没任何问题,为什么这里不需要tomcat也可以运行了? 2.然后我打包成war放进tomcat运行,发现端口号变成tomcat默认的8080(我在server.port中设置端口8090)项目名称也必须加上了. 也就是说我在原来的机器的IDEA中运行,项目接口地址为 ip:8090/listall,

  • jQuery前端开发35个小技巧

    废话不说 直接代码,有问题可以一起交流 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 Hide when clicked in the search field, the value.(example can be found below in the comment fields) $(docu

  • 浅谈vue项目,访问路径#号的问题

    刚入手vue,有好多的疑问,目前遇到的是vue项目启动之后,输入http://ip:port,我发现浏览器里面显示的地址栏竟然是http://ip:port/#/,这个"/#/"不知道是什么东西,于是百度查了一下. 原因:对于vue开发的单页面应用,我们在切换不同的页面的时候,可以发现html永远只有一个,这也正是称之为单页面的原因.而vue-router默认hash模式--------使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载.因为对于正常的页面

  • 浅谈springboot内置tomcat和外部独立部署tomcat的区别

    前两天,我去面了个试,面试官问了我个问题,独立部署的tomcat跟springboot内置的tomcat有什么区别,为什么存在要禁掉springboot的tomcat然后将项目部署到独立的tomcat当中? 我就想,不都一个样?独立部署的tomcat可以配置优化?禁AJP,开多线程,开nio?而且springboot内置的tomcat多方便,部署上服务器写个java脚本运行即可.现在考虑下有什么条件能优于内置tomcat的. 1.tomcat的优化配置多线程?内置的也可以配置多线程 server

  • 浅谈SpringBoot如何封装统一响应体

    浅谈SpringBoot如何封装统一响应体

    一.前言 在上一篇 SpringBoot 参数校验中我们对参数校验添加了异常处理,但是还是有不规范的地方,没有用统一响应体进行返回,在这篇文章中介绍如何封装统一响应体. 关于统一响应体的封装,没有一个标准答案,我在各种技术社区看了一遍,汇总了一个复用性比较好的方案. 二.添加结果类枚举 在项目目录下面建一个 responseEntity 的 package,然后在里面建一个 ResultEnum 枚举类,添加如下代码: 这边介绍一下枚举类的用法.枚举类的作用实际上就是定义常量,如果不使用枚举类,

  • 浅谈VUE项目打包后运行页面一片白问题

    目录 1.说明 2.问题说明 3.解决 3.1.index.js 3.2.utils.js 3.3.webpack.prod.conf.js 4.总结 1.说明 我们用VUE搭建一个脚手架后,在IDEA等工具中开发时,启动都没有什么问题,但是项目开发完成之后,可能需要部署上线,所以需要进行打包操作了,一般都是用下面命令进行打包: npm run build 打包过程一般没有什么问题,然后就会在工程目录下生成一个[dist]文件夹,里面就是我们打包好的文件,把这些文件部署到Nginx中或者Tomc

  • 浅谈SpringBoot处理url中的参数的注解

    1.介绍几种如何处理url中的参数的注解 @PathVaribale 获取url中的数据 @RequestParam 获取请求参数的值 @GetMapping 组合注解,是 @RequestMapping(method = RequestMethod.GET) 的缩写 (1)PathVaribale 获取url中的数据 看一个例子,如果我们需要获取Url=localhost:8080/hello/id中的id值,实现代码如下: @RestController public class Hello

  • 浅谈vue项目4rs vue-router上线后history模式遇到的坑

    此次项目开发完后准备打包,因为hash模式的路径带#看着实在是有点丑,所以采用history模式.因为本次项目属于以前网站重构,但是seo问题,所以需要以前的一些地址路径写,所以vue-router的路径全部重改了.打包后查了网上一大堆,都说要把config里的index.js 里的build里的 assetsPublicPath: '/'改成'./',打包上线发现在hash模式下是没问题的, 但一旦改成history模式,有些动态js文件的路径都是错的.无奈之下死马当活马医,把'./'改回了'

随机推荐