小技巧: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檔案。只要把靜態目錄排除掉就可以了。 這裡這裡: