spring boot + vue + element-ui全栈开发入门——前后端整合开发
一、配置
思路是通过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全栈开发入门——前后端整合开发的更多相关文章
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- 自搭的一个系统框架,使用Spring boot+Vue+Element
基于:jdk1.8.spring boot2.1.3.vue-cli3.4.1 特性: ~ 数据库访问使用spring data jpa+alibaba druid ~ 前后端数据交互使用 ...
- spring boot 解决 跨域 的两种方法 -- 前后端分离
1.前言 以前做项目 ,基本上是使用 MVC 模式 ,使得视图与模型绑定 ,前后端地址与端口都一样 , 但是现在有些需求 ,需要暴露给外网访问 ,那么这就出现了个跨域问题 ,与同源原则冲突, 造成访问 ...
- spring boot + vue + element-ui全栈开发入门——开篇
最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...
- spring boot + vue + element-ui全栈开发入门
今天想弄弄element-ui 然后就在网上找了个例子 感觉还是可以用的 第一步是完成了 果断 拿过来 放到我这里这 下面直接是连接 点进去 就可以用啊 本想着不用vue 直接导入连接 ...
- 前后端分离,我怎么就选择了 Spring Boot + Vue 技术栈?
前两天又有小伙伴私信松哥,问题还是职业规划,Java 技术栈路线这种,实际上对于这一类问题我经常不太敢回答,每个人的情况都不太一样,而小伙伴也很少详细介绍自己的情况,大都是一两句话就把问题抛出来了,啥 ...
- 一套基于SpringBoot+Vue+Shiro 前后端分离 开发的代码生成器
一.前言 最近花了一个月时间完成了一套基于Spring Boot+Vue+Shiro前后端分离的代码生成器,目前项目代码已基本完成 止步传统CRUD,进阶代码优化: 该项目可根据数据库字段动态生成 c ...
- 如何利用vue和php做前后端分离开发?
新手上路,前端工程师,刚毕业参加工作两个月,上面让我用vue搭建环境和php工程师一起开发,做前后端分离,然而我只用过简单的vue做一些小组件的经验,完全不知道怎样和php工程师配合,ps: php那 ...
- spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
随机推荐
- (笔记)一场由SD卡引发的灾难
一场由SD卡引发的灾难 注:此文章转自“https://user.qzone.qq.com/63915185/blog/1512562541”. Flash里面的数据在使用过程中莫名改变或不翼 ...
- 【译】Apache Kafka支持单集群20万分区
之前网上关于确定Kafka分区数的博客多多少少都源自于饶军大神的文章,如今他带来了这方面的第二篇文章,特此翻译一下,记录一下其中的要点. 原贴地址: https://www.confluent.io/ ...
- ubuntu开机后弹出System program problem detected的解决办法
sudo gedit /etc/default/apport 将enabled=1改为enabled=0保存退出重启后就可以了
- Rafy环境配置
如果现在项目已经创建好啦,要使用Rafy框架进行存储,这里我简单的总结下配置的环境步骤: 一.添加引用Rafy的SDK,如下几个; 二.新建文件夹Entities 在此文件夹下创建rafy实体以及仓库 ...
- cs231n笔记 (一) 线性分类器
Liner classifier 线性分类器用作图像分类主要有两部分组成:一个是假设函数, 它是原始图像数据到类别的映射.另一个是损失函数,该方法可转化为一个最优化问题,在最优化过程中,将通过更新假设 ...
- linux安装jdk和tomcat命令
1.linux centos6.5 安装jdk1.在/usr/local/src目录下,创建java文件夹,拷贝jdk安装包到/usr/local/src/java下面:cd /usr/local/s ...
- STL之pair对组
#include<iostream> #include<algorithm> #include<cstring> #include<cstdlib> u ...
- java学习(二)--- 变量类型
变量声明 type identifier [ = value][, identifier [= value] ...] ; 局部变量: 1.局部变量声明在方法.构造方法.语句块中 2.局部变量在方法. ...
- ClientImageViewController
package com.vcredit.ddcash.server.web.controller.common; import com.vcredit.ddcash.server.commons.mo ...
- JQuery实现表格自动增加行,对新行添加事件
实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...