前后端分离实践——Jsonp数据交互

Posted 程序猿LM

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前后端分离实践——Jsonp数据交互相关的知识,希望对你有一定的参考价值。

笔者这里所说的前后端分离,是指后端通过SpringBoot解决业务逻辑,视图及交互通过Vue来解决,两者之间的数据交互则通过Jsonp实现。这种做法完全摒弃了传统MVC设计模式里面的模板引擎,为何这样做?嗯...通俗点说,当你体验过Vue有多美,就能明白模板引擎有多丑了...

项目源代码

个人比较喜欢在讲一个东西之前,先把自己准备的Demo代码放出来,因为对于有的看官而言,有代码就足够了。

Github测试项目: simple-jsonp

以及Vue插件项目:simple-jsonp-plugin

simple-jsonp是主程序,simple-jsonp-plugin是一个Vue的插件,该插件封装了对Vuex store的使用和利用Jquery下的jsonp来获取后端数据,并写入state中。

程序不难,但是涉及到的知识面稍微有点点范,可能会要求看官有一定的全栈知识才能完全理解。

至于Jsonp是什么,看官可以参考我的另一篇博文:Jsonp原理

前言

因为在本地同时部署了前后端的环境,后端监听9080端口,前端监听8080端口,所以在前后端数据ajax交互上面,就涉及到了跨域的问题。

请各位注意,跨域并不仅仅是说域名不一致会产生,端口不一致也是会发生这个问题的。

在解决跨域这个问题的前提下,首先我们需要准备一个环境,这个环境,也就是说,你的前端是什么,后端是什么,然后再来进行数据交互,把跨域问题产生了,再来解决它。

在解决问题的具体方式上,我没有直接写在前端的代码里,而是另外新建了一个Vue插件,在这个插件中,去执行Jsonp的跨域请求数据。

现在先说一下前后端的具体环境。

具体环境

后端基于Maven管理依赖,SpringBoot驱动。前端则通过Vue全家桶套餐来实现。具体列表如下:

后端

  • Maven


  • SpringBoot


前端

  • Vue2.0


  • Vue-router


  • Vuex


  • Vue-devtools


  • 加一个简单的Vue插件


接下来开始我那不太正式的分析:

分析

后端

后端不多说了,直接启动,然后等待前端的数据请求即可。

但是要注意一点:

后端在返回数据的时候,一定是:

 
   
   
 
  1. callback({status:1, content: 'hello jsonp' , message: 'hello world'})

这种,在一个方法名称内包含一个Json对象的格式。

同时建议使用FastJson或者其他Json转换的工具完成json的转换。

因为我们需要考虑,对象转json、数组转json等场景。

前端

在我写的Vue插件中,直接跟Jsonp相关的代码就是以下这段:

 
   
   
 
  1. opt.$.ajax({

  2.    type:"get",

  3.    async:false,

  4.    url:opt.url,

  5.    dataType:'jsonp',

  6.    jsonpCallback:'callback',

  7.    success: function (json) {

  8.      console.log(json);

  9.      opt.store.commit('setStatus' , {

  10.        status: json.status

  11.      });

  12.      opt.store.commit('setContent' , {

  13.        content: json.content

  14.      });

  15.      opt.store.commit('setMsg' , {

  16.        msg: json.message

  17.      });

  18.    },

  19.    error: function (error) {

  20.      console.log('something wrong')

  21.    }

  22.  })

其中,opt.store的内容如下所示:

 
   
   
 
  1. import Vue from 'vue'

  2. import Vuex from 'vuex'

  3. Vue.use(Vuex)

  4. const state = {

  5.  status: null,

  6.  content: null,

  7.  msg: null

  8. }

  9. const mutations = {

  10.  setStatus (state, payload) {

  11.    state.status = payload.status

  12.  },

  13.  setContent (state, payload) {

  14.    state.content = payload.content

  15.  },

  16.  setMsg (state, payload) {

  17.    state.msg = payload.msg

  18.  }

  19. }

  20. export default new Vuex.Store({

  21.  state,

  22.  mutations

  23. })

它的作用很简单,就是用来将从后端获取到的数据,写入Vuex的state中,供其他的component调用。

opt.$就是指从Vue中获取到的Jquery,我们利用jquery对Jsonp的完美支持,来实现前端对后端jsonp数据请求及回调方法的使用。

再简单点来说,把dataType设置为jsonp,把jsonpCallback设置的值跟后端返回的方法名保持一致,即可以正常使用,success方法中传入的json对象,便是后端在方法中加入的json对象,我们直接拿过来用即可。

写到这里,我们便完成了前后端jsonp的数据交互。




(完)

以上是关于前后端分离实践——Jsonp数据交互的主要内容,如果未能解决你的问题,请参考以下文章

前后端分离,最佳实践

前后端分离实践分页请求历史聊天消息

技术干货网易视频云前后端分离实践

基于 webpack 的前后端分离开发环境实践

前后端分离交互

老树发新芽-前后端分离实践