最近在研究vue项目，通过vue向springboot后台提交数据，后台却接收不到数据，解决办法：上代码

第一步：首先看前台vue的提交数据代码，

（提交的数据包含文本编辑器内容，如果文本内容太多提交不过去，可以后台设置请求头大小 server.max-http-header-size=102400）

var data = {titles: this.form.titles,contents:editor.txt.html(),dates:this.formatDate(this.form.dates)};
//data 提交请求参数
         this.$axios.post("/Article/insertArticle", data
         ).then(function(response) { //采用post提交数据
             console.log(response.data);
             if(response.data.code=="000000"){
               that.$message({
                         message: '添加成功！',
                         type: 'success'
                       });
               that.dialogFormVisible = false;
             }
           }).catch(function(error) {
             console.info(error);
           });

        }

第二步：看后台接收数据的代码

 重点：设置@RequestBody  


//设置POST接收数据
@RequestMapping(value = "/insertArticle", method = RequestMethod.POST)
	public @ResponseBody Result insertArticle(@RequestBody   Map<String, String> params,HttpSession session){  
   //@RequestBody 重点：一定是@RequestBody 不能是@RequestParam
		Result re =articleService.insertArticle(params,session);
		return re;
		
	}

以上两步就可以解决springboot接收vue的post的提交数据。

详细步骤如下
1.在main.js中配置
2.在vue.config.js中配置
3.测试axios
封装自己的axios请求函数
axios配置参数

1.在main.js中配置
import Vue from 'vue';
import axios from 'axios';
Vue.prototype.$http=axios;
//默认的根路径
axios.defaults.baseURL = '/api'
//设置响应请求头
axios.defaults.headers.post['Content-Type'] = 'application/json';

2.在vue.config.js中配置
注:首选我们得先创建一个vue.config.js
module.exports = {
		devServer: {
		    open: true, //是否自动弹出浏览器页面
		    host: "localhost", 
		    port: '8081',
		    https: false,
		    hotOnly: false, 
		    proxy: {
		        '/api': {
		            target: 'https://www.v2ex.com/api', //API服务器的地址
		            changeOrigin: true,
		            pathRewrite: {
		                '^/api': ''
		            }
		        }
		    },
		}
	}

3.测试axios
注:这里随便找个组件进行测试,查看效果(跨域问题解决了,好开心啊!!!)
let url = this.HOST + 域名（网址）
	this.$http(url).then(res => {
		return res
	},error => error)	

封装自己的axios请求函数
首先得自己手动创建一个axios.js文件,然后把下面内容复制上去,自己的axios请求函数就创建好了
import axios from 'axios';

export function request(config) {
	//1.创建axios实例
	const instance = axios.create({
		baseURL: '地址如：http://123.207.32.32:8000',
		timeout: 5000
	})
	//axios拦截器
	//请求拦截器的使用
	instance.interceptors.request.use(config => {
		return config;
	},err => {
		// console.log(err);
	})
	
	//响应拦截器的使用  用于获取响应数据
	instance.interceptors.response.use(res => {
		return res.data;
	},err => {
		console.log(err);
	})
	
	//3.发送真正的网络请求
	return instance(config);
}

axios配置参数
/*
axios配置参数:
	baseURL 配置的域名
	timeout:请求超时时长
	url:请求路径
	methods:请求方法  get/post/put/patch/delete
	params: 请求参数拼接在url上
	data:请求参数请求体中
	
优先级： axios请求配置 > axios实例配置 > axios全局配置 
	axios实例  axios.create() 返回的是一个promise对象
*/

常见的几种SPA优化方式


	
减小入口文件体积
	
	

	
静态资源本地缓存
	
	

	
开启GZip压缩
	
	

	
使用SSR
	
.....


	
减小入口文件体积，常用的手段是路由懒加载，开启路由懒加载之后，待请求的页面会单独打包js文件，使得入口文件index.js变小，开启懒加载之后，js是这样请求加载的：
	


2. 静态文件本地缓存有两种方式


	
HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头，很多文章讲的比较详细，推荐：www.cnblogs.com/chinajava/p…
	

	
Service Worker离线缓存，缺点：需要在HTTPS站点下，推荐：lzw.me/a/pwa-servi…
	
而开启GZip压缩和使用SSR原理都比较简单，我们很容易想到这两种方式是如何提高页面加载速度的。

但是除了上面几种方式，另外一种优化方案也不容小觑，这也是我在近期项目开发中使用并理解到的。我们先说说通常项目中是如何加载页面数据：Vue组件生命周期中请求异步接口，在mounted之前应该都可以，据我了解绝大部分同学是在mounted的时候执行异步请求。但是我们可以把页面需要的请求放到Vue-Router的守卫中执行，意思是在路由beforeEnter之前就可以请求待加载页面中所有组件需要的数据，此时待加载页面的Vue组件还没开始渲染，而Vue组件开始渲染的时候我们就可以用Vuex里面的数据了。

以上方法的实现思路：



图意：每个页面（Page）中都会有很多个Vue组件，可以在Vue组件中添加自定义属性fetchData，fetchData里面可以执行异步请求（图中执行Vuex的Action），但是我们怎么获取到所有组件的fetchData方法并执行呢？如图所示，在router.beforeResolve守卫中，我们看看router.beforeResolve的定义，所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用，意思是即使页面中有异步组件，它会等待异步组件解析之后执行，并且解析守卫在beforeEnter之前执行。那我们怎么在解析守卫中获取到待加载页面的所有组件呢？通过router.getMatchedComponents方法。



完整实例：



这样我们就可以在解析守卫中获取到所有待加载组件的fetchData方法并执行，这样无疑会在组件开始渲染之后获取到所有数据，提高页面加载速度。

很多人可能有个疑问，如果异步请求放在beforeCreate和created不是一样吗？答案是否定的，因为这种方式可以将异步请求放到beforeCreate之前！

原文链接：https://juejin.cn/post/6844903618777186311

常见的几种SPA优化方式
减小入口文件体积
静态资源本地缓存
开启GZip压缩
使用SSR
…
减小入口文件体积，常用的手段是路由懒加载，开启路由懒加载之后，待请求的页面会单独打包js文件，使得入口文件index.js变小，开启懒加载之后，js是这样请求加载的：
2. 静态文件本地缓存有两种方式
HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头，很多文章讲的比较详细，推荐：https://www.cnblogs.com/chinajava/p/5705169.html
而开启GZip压缩和使用SSR原理都比较简单，我们很容易想到这两种方式是如何提高页面加载速度的。
但是除了上面几种方式，另外一种优化方案也不容小觑，这也是我在近期项目开发中使用并理解到的。我们先说说通常项目中是如何加载页面数据：Vue组件生命周期中请求异步接口，在mounted之前应该都可以，据我了解绝大部分同学是在mounted的时候执行异步请求。但是我们可以把页面需要的请求放到Vue-Router的守卫中执行，意思是在路由beforeEnter之前就可以请求待加载页面中所有组件需要的数据，此时待加载页面的Vue组件还没开始渲染，而Vue组件开始渲染的时候我们就可以用Vuex里面的数据了。
以上方法的实现思路：
图意：每个页面(Page)中都会有很多个Vue组件，可以在Vue组件中添加自定义属性fetchData，fetchData里面可以执行异步请求(图中执行Vuex的Action)，但是我们怎么获取到所有组件的fetchData方法并执行呢？如图所示，在router.beforeResolve守卫中，我们看看router.beforeResolve的定义，所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用，意思是即使页面中有异步组件，它会等待异步组件解析之后执行，并且解析守卫在beforeEnter之前执行。那我们怎么在解析守卫中获取到待加载页面的所有组件呢？通过router.getMatchedComponents方法。
完整实例：
这样我们就可以在解析守卫中获取到所有待加载组件的fetchData方法并执行，这样无疑会在组件开始渲染之后获取到所有数据，提高页面加载速度。
很多人可能有个疑问，如果异步请求放在beforeCreate和created不是一样吗？答案是否定的，因为这种方式可以将异步请求放到beforeCreate之前！
版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
作者: 悟空不打白骨精
原文链接：https://juejin.im/post/6844903618777186311