精华内容
下载资源
问答
  • (提交的数据包含文本编辑器内容,如果文本内容太多提交不过去,可以后台设置请求头大小 server.max-http-header-size=102400) var data = {titles: this.form.titles,contents:editor.txt.html(),dates:this....

    最近在研究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的提交数据。

    展开全文
  • 之后找后端社区请求头,依然无效 ![图片说明](https://img-ask.csdn.net/upload/202002/15/1581741351_496149.png) ![图片说明](https://img-ask.csdn.net/upload/202002/15/1581741585_927612.png) 先后查询...
  • 详细步骤如下1.在main.js中配置2.在vue.config.js中配置3.测试axios封装自己的axios请求函数axios配置参数 1.在main.js中配置 import Vue from 'vue';...//设置响应请求头 axios.defaults.headers.post['Content-Type']

    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对象
    */
    
    展开全文
  • 基于Vue的SPA如何优化页面加载速度 常见的几种SPA优化方式 减小入口文件体积 静态资源本地缓存 ... 减小入口文件体积,常用的手段... HTTP缓存,设置Cache-Control,Last-Modified,Etag等响应,很多文章讲的

    常见的几种SPA优化方式

    • 减小入口文件体积

    • 静态资源本地缓存

    • 开启GZip压缩

    • 使用SSR

    .....

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

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

    而开启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…减小入口文件... 静态文件本地缓存有两种方式HTTP缓存,设置Cache-Control,Last-Modified,Etag等响应,很多文章讲的比较详细,推荐...

    常见的几种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

    展开全文
  • 文章目录一、axios是什么基本使用二、为什么要封装三、如何封装设置接口请求前缀在本地调试的时候,还需要在vue.config.js文件中配置devServer实现代理转发,从而实现跨域设置请求头与超时时间封装请求方法请求拦截...
  • 关于laravel设置跨域

    2018-02-27 08:41:01
    一般在在mvvm的开发模式下,都是向后端请求接口,在没有打包放到同域下,而是在开发的环境下,像vue-cli都是开一个端口服务,因此在开发环境下,后端都要设置允许跨域(cros) 如何使用laravel做后端时,设置允许跨域...
  • 前端缓存:响应中的cache-control中的max-age设置过期时间,在过期时间内就不会向服务器发送请求 后端 使用nginx转发(不是直接使用uwsgi接受http,而是通过nginx转发socket来接收,这样走的更底层就会更快,...

空空如也

空空如也

1 2 3
收藏数 47
精华内容 18
关键字:

vue如何设置http请求头

vue 订阅