一、配置

---

?

思路是通過node的跨域配置來調用spring boot的rest api。

?

修改config\index.js文件，設置跨域配置proxyTable：

proxyTable: {'/api': {target: 'http://localhost:18080/',changeOrigin: true,pathRewrite: {'^/api': '/'}}}

　　

完整的config\index.js代碼如下：

'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. const path = require('path')module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/api': {target: 'http://localhost:18080/',changeOrigin: true,pathRewrite: {'^/api': '/'}}},// Various Dev Server settingshost: 'localhost', // can be overwritten by process.env.HOSTport: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determinedautoOpenBrowser: true,errorOverlay: true,notifyOnErrors: true,poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-/*** Source Maps*/// https://webpack.js.org/configuration/devtool/#developmentdevtool: 'cheap-module-eval-source-map',// If you have problems debugging vue-files in devtools,// set this to false - it *may* help// https://vue-loader.vuejs.org/en/options.html#cachebustingcacheBusting: true,cssSourceMap: true},build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/',/*** Source Maps*/productionSourceMap: true,// https://webpack.js.org/configuration/devtool/#productiondevtool: '#source-map',// Gzip off by default as many popular static hosts such as// Surge or Netlify already gzip all static assets for you.// Before setting to `true`, make sure to:// npm install --save-dev compression-webpack-pluginproductionGzip: false,productionGzipExtensions: ['js', 'css'],// Run the build command with an extra argument to// View the bundle analyzer report after build finishes:// `npm run build --report`// Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report} } config\index.js

?

?

回到src\main.js文件中，注釋掉mock.js的配置

//開發模式開啟mock.js if (process.env.NODE_ENV === 'development') {// require('./mock') }

　　

其他任何地方都不需要修改。

讓我們看看具體的效果：

?

?

觀察數據庫，發現已經保存到數據庫中了：

?

?二、總結

---

?

上述過程無疑體現了前后端分離開發的便利性。

?

?傳統方式是：作為前端開發者，必須等待后端程序員開發完畢之后才能做數據綁定，否則只能編寫假數據渲染到頁面上來模擬開發。等到后端開發完畢，又需要重新把頁面的假數據刪除，改用調用后端接口。這無疑增加了前端開發者的工作量。而且，當一方出現問題后，又需要協調工作才能把問題就解決。而這無疑也增加了溝通帶來的時間成本。

?

前后端分離方式是：前后端開發者一起定義好接口的規范，然后按照這個規范并行開發。前端開發者通過mock.js模擬并測試。后端開發者通過Unit Test來測試接口。當前后端都開發完畢后，只需要修改配置就可以了。避免了二次工作和重復性工作，而且也避免了需要等一方完成工作后自己再去工作的問題。

?

?

?

?

返回目錄

?

git代碼地址：https://github.com/carter659/spring-boot-vue-element.git

?

如果你覺得我的博客對你有幫助，可以給我點兒打賞，左側微信，右側支付寶。

有可能就是你的一點打賞會讓我的博客寫的更好:)

總結

以上是生活随笔為你收集整理的spring boot + vue + element-ui全栈开发入门——前后端整合开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。