摘要:當(dāng)前前后端架構(gòu)分離的模式比較流行,前端用或者等方式發(fā)布與渲染網(wǎng)頁(yè),后端程序只提供的數(shù)據(jù)接口。但是與結(jié)合起來(lái)就不太協(xié)調(diào)。這時(shí)候就可以用到的代理模式了。在中添加之后直接啟動(dòng)程序,然后就可以通過(guò)訪問(wèn)端口來(lái)進(jìn)行前端的熱開(kāi)發(fā)了
當(dāng)前前后端架構(gòu)分離的模式比較流行,前端用Nodejs或者ngnix等方式發(fā)布與渲染網(wǎng)頁(yè),后端程序只提供restful的數(shù)據(jù)接口。但對(duì)于一些小項(xiàng)目來(lái)說(shuō),并不想讓前后端如此分離,還是希望用spring-boot的內(nèi)置tomcat來(lái)serve static content。
如果只是用前端工具的話,webpack是一個(gè)很好的打包方式,webpack-dev-server給我們提供了很好的在線調(diào)試與修改。但是與spring-boot結(jié)合起來(lái)就不太協(xié)調(diào)。這時(shí)候就可以用到webpack-dev-server的代理模式了。通過(guò)webpack-dev-server來(lái)代理spring-boot中tomcat的端口(默認(rèn)8080)
這里貼出我的一個(gè)配置文件
// webpack.config.js var path = require("path"); var webpack = require("webpack"); var HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { devtool: "source-map", entry: [ "webpack-dev-server/client?http://localhost:3000", "webpack/hot/only-dev-server", "./src/main/web/index.js" ], output: { path: "./src/main/resources/static", filename: "index.js", publicPath: "http://localhost:3000/" }, module: { loaders: [ {test: /.css$/, loader: "style!css"}, { test: /.js$/, loader: "babel-loader", exclude: /node_modules/, query: { presets: ["es2015"] } }, { test: /.(png|jpg|jpeg|gif|woff)$/, loader: "url-loader?limit=8192" }, { test: /.html$/, loader: "html"}, ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new HtmlWebpackPlugin({ template: "./src/main/web/index.tmpl" })], devServer: { port: 3000, proxy: { "**": { target: "http://localhost:8080", secure: false, prependPath: false } }, publicPath: "http://localhost:3000/", historyApiFallback: true } };
在這里我們可以看到,通過(guò)webpack-dev-server的3000端口去代理8080端口。在package.json中添加
"scripts": { "webpack": "webpack", "watch": "webpack-dev-server --inline" },
之后直接啟動(dòng)spring boot程序,然后npm run watch就可以通過(guò)訪問(wèn)3000端口來(lái)進(jìn)行前端的熱開(kāi)發(fā)了
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/80546.html
摘要:這里使用的是數(shù)據(jù)庫(kù)啟動(dòng)類上加上注解在啟動(dòng)類中添加對(duì)包掃描掃描多個(gè)包下的可以有以下幾種方法掃描會(huì)自動(dòng)加載相關(guān)配置,數(shù)據(jù)源就會(huì)自動(dòng)注入到中,會(huì)自動(dòng)注入到中,可以直接使用。有配置文件下的使用掃描多個(gè)包下的可以有以下幾種方法掃描 Spring-Boot 學(xué)習(xí)筆記 1 Spring-Boot 介紹 1.1 什么是Spring-Boot Spring-Boot是由Pivotal團(tuán)隊(duì)提供的全新框架...
摘要:概述進(jìn)行的開(kāi)發(fā)過(guò)程中,我們很多時(shí)候經(jīng)常需要重啟服務(wù)器才能保證修改的源代碼文件或者一些諸如的配置文件以及一些靜態(tài)文件生效,這樣耗時(shí)又低效。 showImg(https://segmentfault.com/img/remote/1460000015363888); 概述 進(jìn)行SpringBoot的Web開(kāi)發(fā)過(guò)程中,我們很多時(shí)候經(jīng)常需要重啟Web服務(wù)器才能保證修改的 源代碼文件、或者一些...
摘要:第二個(gè)類級(jí)別注解是。將引導(dǎo)應(yīng)用程序,啟動(dòng),從而啟動(dòng)自動(dòng)配置服務(wù)器。比如想使用不同版本的,具體如下在標(biāo)簽中還可以指定編譯的版本和項(xiàng)目的編碼格式指定項(xiàng)目編碼為使用插件可以為項(xiàng)目提供的操作方式,的個(gè),默認(rèn)。 引言 Spring 框架對(duì)于很多 Java 開(kāi)發(fā)人員來(lái)說(shuō)都不陌生。Spring 框架包含幾十個(gè)不同的子項(xiàng)目,涵蓋應(yīng)用開(kāi)發(fā)的不同方面。如此多的子項(xiàng)目和組件,一方面方便了開(kāi)發(fā)人員的使用,另外...
摘要:使用開(kāi)發(fā)項(xiàng)目熱部署,自動(dòng)部署使用開(kāi)發(fā)項(xiàng)目,即使項(xiàng)目使用了,修改了類或者等,還是不會(huì)自動(dòng)重啟,非要手動(dòng)去一下或者重啟,就更沒(méi)有使用熱部署一樣。 使用Intellij IDEA 開(kāi)發(fā) Spring-boot項(xiàng)目 熱部署,自動(dòng)部署 使用Intellij IDEA 開(kāi)發(fā) Spring-boot項(xiàng)目,即使項(xiàng)目使用了spring-boot-devtools,修改了類或者h(yuǎn)tml、js等,idea還...
摘要:前言在生產(chǎn)環(huán)境中,我們比較關(guān)心任意時(shí)刻一個(gè)的運(yùn)行情況。調(diào)用接口返回結(jié)果我們猜測(cè)這個(gè)應(yīng)該是表示應(yīng)用程序正在正常運(yùn)行。調(diào)用接口返回結(jié)果似乎什么都沒(méi)發(fā)生,沒(méi)關(guān)系,我們繼續(xù)進(jìn)行。我們繼續(xù)試了上文列舉的若干接口,發(fā)現(xiàn)大部分返回結(jié)果都是未授權(quán)。 前言 在生產(chǎn)環(huán)境中,我們比較關(guān)心任意時(shí)刻一個(gè)JVM的運(yùn)行情況。SpringBoot為我們提供了一個(gè)方便的功能模塊Actuator。只要簡(jiǎn)單幾步就可以為我們...
閱讀 3607·2021-10-09 09:41
閱讀 2801·2021-10-08 10:18
閱讀 2252·2021-09-10 10:51
閱讀 2737·2021-09-10 10:50
閱讀 853·2021-09-09 09:33
閱讀 3468·2021-09-06 15:14
閱讀 3091·2019-08-30 11:06
閱讀 3313·2019-08-29 14:04