一、配置


思路是通过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: { // Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost:18080/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}, // Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- /**
* Source Maps
*/ // https://webpack.js.org/configuration/devtool/#development
devtool: '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#cachebusting
cacheBusting: true, cssSourceMap: true
}, build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'), // Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/', /**
* Source Maps
*/ productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#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-plugin
productionGzip: 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 UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  2. 自搭的一个系统框架,使用Spring boot+Vue+Element

    基于:jdk1.8.spring boot2.1.3.vue-cli3.4.1 特性:    ~ 数据库访问使用spring data jpa+alibaba druid    ~ 前后端数据交互使用 ...

  3. spring boot 解决 跨域 的两种方法 -- 前后端分离

    1.前言 以前做项目 ,基本上是使用 MVC 模式 ,使得视图与模型绑定 ,前后端地址与端口都一样 , 但是现在有些需求 ,需要暴露给外网访问 ,那么这就出现了个跨域问题 ,与同源原则冲突, 造成访问 ...

  4. spring boot + vue + element-ui全栈开发入门——开篇

    最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...

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

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

  6. 前后端分离,我怎么就选择了 Spring Boot + Vue 技术栈?

    前两天又有小伙伴私信松哥,问题还是职业规划,Java 技术栈路线这种,实际上对于这一类问题我经常不太敢回答,每个人的情况都不太一样,而小伙伴也很少详细介绍自己的情况,大都是一两句话就把问题抛出来了,啥 ...

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

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

  8. 如何利用vue和php做前后端分离开发?

    新手上路,前端工程师,刚毕业参加工作两个月,上面让我用vue搭建环境和php工程师一起开发,做前后端分离,然而我只用过简单的vue做一些小组件的经验,完全不知道怎样和php工程师配合,ps: php那 ...

  9. spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发

     前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...

随机推荐

  1. netty 对象序列化传输示例

    package object.server.impl; import io.netty.bootstrap.ServerBootstrap; import io.netty.channel.Chann ...

  2. nw.js---创建一个点击菜单

    使用nw.js创建一个可点击的菜单: <!doctype html> <html lang="en"> <head> <meta char ...

  3. php算法题2

    一群猴子排成一圈,按1,2,…,n依次编号.然后从第1只开始数,数到第m只,把它踢出圈,从它后面再开始数,再数到第m只,在把它踢出去…,如此不停的进行下去,直到最后只剩下一只猴子为止,那只猴子就叫做大 ...

  4. 防止xss和sql注入:JS特殊字符过滤正则

    function stripscript(s) { var pattern = new RegExp("[%--`~!@#$^&*()=|{}':;',\\[\\].<> ...

  5. Docker win10安装

    因为虚拟机还没装好,所以现在win10上安装Docker 1.首先下载Docker Toolbox,因为Docker for windows需要win10专业版或者其他64位版本,我的系统虽然也是wi ...

  6. 补充:ajax post 方式请求

    1. 什么是ajax Ajax: asynchronous  javascript  and  xml (异步js和xml) 其是可以与服务器进行(异步/同步)交互的技术之一. ajax的语言载体是j ...

  7. 1 创建一个存储过程,以及对存储过程的调用 MySQL

    1  首先创建一张tb1表  sql语句如下 CREATE TABLE `tb1` (  `Id` int(11) NOT NULL AUTO_INCREMENT,  `age` int(11) DE ...

  8. python全栈开发 * 14 知识点汇总 * 180530

    14 生成器表达式 内置函数# 一.迭代器 (补充)# 1.如何判断迭代对象,迭代器# (1).dir(obj)检测对象有没有iter方法,然后it=obj.__iter__() 获取迭代器 , it ...

  9. web 容器

    jboss简单使用(AS7): 将项目打成war包,放到jboss-as-web-7.0.0.Final\standalone\deployments下 访问 alias .name+port+war ...

  10. phpredis Redis阵列 Redis Arrays

    官方URL:https://github.com/phpredis/phpredis/blob/master/arrays.markdown#readme 2017年10月29日20:44:01 Re ...