一、配置


思路是通过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全栈开发入门——前后端整合开发相关推荐

  1. Spring Boot Vue Element入门实战(完结)

    最近给朋友做一个大学运动会管理系统,用作教学案例,正好自己也在自学VUE,决定用spring boot vue做一个简单的系统.vue这个前端框架很火,他和传统的Jquery 编程思路完全不一样,Jq ...

  2. vue+element模仿电商商城,前后端分离实现,下单微信扫码支付

    1.前言 接上一篇<vue+element+SpringBoot+OAuth2+Spring Security+Redis+mybatis-plus+mysql+swagger模仿商城,前后端分 ...

  3. 在线相册 ,图片上传, 基于 Spring boot vuejs element ui mysql 的项目

    最近想学关于vuejs 和 element ui ,趁着工作之余开发了一个在线相册的项目,功能有 注册,登录,预览,各种中心,图片上传,我的资源,图片编辑等,,在此做一个分享吧. Git 地址 :ht ...

  4. Spring Boot Vue Element入门实战(四)主页面开发

    本博客属作者原创,未经允许禁止转载,请尊重原创!如有问题请联系QQ509961766 (一)页面布局 页面布局分为3个部分: 顶部导航:系统logo,登录信息,退出按钮等 左侧菜单:显示系统菜单 右侧 ...

  5. Spring Boot Vue Element入门实战(五)封装axios

    本博客属作者原创,未经允许禁止转载,请尊重原创!如有问题请联系QQ509961766 (一)关于Axios Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get.pos ...

  6. Spring Boot Vue Element入门实战(十)Vue生命周期

    本博客属作者原创,未经允许禁止转载,请尊重原创!如有问题请联系QQ509961766 前面9篇文章基本上完成了vue 静态页面的入门,包括列表展示,路由动态加载菜单,echarts图表的一些使用,后面 ...

  7. spring boot + vue + element-ui全栈开发入门

    今天想弄弄element-ui  然后就在网上找了个例子 感觉还是可以用的  第一步是完成了  果断 拿过来  放到我这里这  下面直接是连接  点进去 就可以用啊 本想着不用vue   直接导入连接 ...

  8. shiro+php,一套基于SpringBoot+Vue+Shiro 前后端分离 开发的代码生成器

    一.前言 最近花了一个月时间完成了一套基于Spring Boot+Vue+Shiro前后端分离的代码生成器,目前项目代码已基本完成 止步传统CRUD,进阶代码优化: 该项目可根据数据库字段动态生成 c ...

  9. 014-Axios Ajax:前后端分离概述,发送json类型的参数,前后端分离开发:在线接口文档,前端工程化、Element、nginx

    第一节 Ajax概述 1.概述 概念: Asynchronous JavaScript And XML,异步的JavaScript和XML. 作用: 数据交换:通过Ajax可以给服务器发送请求,并获取 ...

最新文章

  1. arc diff 指定版本号_Phabricator客户端安装
  2. 电子学会 软件编程(图形化)一级训练营
  3. 人工智能正在引领全球企业的创新
  4. 网易云网络服务研发实践—第1代云网络服务|网易云
  5. 蓝卡在哪里_什么是蓝卡,魅力在哪里,让申请者为之着迷?
  6. 安安猜价格聪明机器人_5 项降噪优化,石头扫地机器人 T6 安静也有大吸力
  7. docker 修改服务器,docker-修改容器挂载目录的3种方法小结
  8. leetcode104. 二叉树的最大深度(dfs)
  9. 网易MCtalk泛娱乐科技峰会:泛娱乐的未来时代属于科技创新者
  10. 如何在iOS地图上高效的显示大量数据
  11. 旧计算机 云桌面,切换桌面(云桌面切换到自己电脑)
  12. 全国计算机二级C语言考试难不难?应该怎么备考?
  13. C. Spell Checker
  14. linux脚本设置字体颜色,xshell设置字体及背景颜色方法详细教程
  15. 『互联网架构』调⽤链系统底层逻辑
  16. Openstack 经典面试问题和解答
  17. C语言九:位域(位域声明、位域的定义和位域变量的说明、对于位域定义的几点说明:、位域的使用)、typedef(typedef vs #define)、强制类型转换(整数提升、常用的算术转换)
  18. 中华黄金·金生态合伙人颁奖典礼在珠海站开幕完美收官!!
  19. 搞 AI 建模预测都在用 Python,其实入门用 SPL 也不错
  20. RGCF:Learning to Denoise Unreliable Interactions forGraph Collaborative Filtering论文解读

热门文章

  1. 对人工智能问题的提问
  2. 算法 排序 python 实现--快速排序
  3. 初步学习“C#枚举”
  4. [转] 使用模板自定义 WPF 控件
  5. formdata.append加多个值_呆哥数学每日一题 —— 多个最值函数混合向量
  6. python字符串split_「干货」Python字符串中的split方法
  7. Windows核心编程 第23章 结束处理程序
  8. Windows核心编程 第四章 进程(上)
  9. hdu3714 水三分
  10. 汇编 and or xor not test cmp 条件跳转指令 jcc