美文网首页关于vue
SpringBoot+Vue数据交互

SpringBoot+Vue数据交互

作者: 简小园 | 来源:发表于2019-05-26 11:10 被阅读0次

后端框架Spring Boot,前端框架vue

1. 跨域+携带cookie

跨域-携带cookie

2. 拦截器

在main.js里设置拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前,格式化参数,增加token
  let data = config.data;
  let params = new URLSearchParams()
  for (var key in config.data) {
    params.append(key, data[key])
  }
//params.append("tokenStr", getTimes())
  config.data = params;
  return config;
}, function (error) {
  return Promise.reject(error);
});
拦截器

3. 发送请求

    login:function(){
      let that=this;
      this.axios({
        method: 'post',
        url: 'http://000.00.00.0:8888/login', //后端api
        data: {
          account: $("#account").val(),  //传给后端的数据
          userPassword: $("#pwd").val()
        },
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}   //跨域
      }).then(function (res) {
        console.log(res);
      }).catch(function (error) {
        console.log(error)
      });
    },

相关文章

  • SpringBoot+Vue数据交互

    后端框架Spring Boot,前端框架vue 1. 跨域+携带cookie 跨域-携带cookie 2. 拦截器...

  • 关于node中数据交互的理解

    什么是数据交互? 数据交互是httpd协议中常见的,数据交互顾名思义就是我把数据传输给你,你再把数据返回给我,这么...

  • python multiprocessing Queue and

     多进程通过Queue和Pipe交互数据的开销对比。相比Pipe,通过Queue交互数据,进程之间数据交互有更大的...

  • 数据交互

    1 jquery-form的方式提交数据 自定义上传的数据 文件篇 前台使用ajaxupload.js对文件进行上...

  • 数据交互

    概述 客户端和服务器之间交互的时候,客户端不仅可以发送请求给服务器,还可以把一些内容传递给服务器;服务器接收到请求...

  • 数据交互

    1、表单(最简单、基本) (1)、属性 (a)、action:提交到哪里(b)、method:提交方式,如:GET...

  • 登录页记住账号密码js+localstrage+ajax

    包含数据交互ajax

  • 初见SpringMVC之json交互

    初见SpringMVC之json交互 JSON数据是一种存储数据的格式,前后台之间通过json数据进行交互是非常常...

  • ajax的写法与注意事项

    -------------------ajax: 数据交互---------------------- 表单for...

  • Lua与C数据交互一

    C与Lua的数据交互,是通过虚拟栈来完成数据交互的,在C与Lua之间的交互,实际上是C与虚拟栈之间的交互以及Lua...

网友评论

    本文标题:SpringBoot+Vue数据交互

    本文链接:https://www.haomeiwen.com/subject/splxtctx.html