前后端分离实践——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插件
接下来开始我那不太正式的分析：
分析
后端
后端不多说了，直接启动，然后等待前端的数据请求即可。
但是要注意一点：
后端在返回数据的时候，一定是：
callback({status:1, content: 'hello jsonp' , message: 'hello world'})
这种，在一个方法名称内包含一个Json对象的格式。
同时建议使用FastJson或者其他Json转换的工具完成json的转换。
因为我们需要考虑，对象转json、数组转json等场景。
前端
在我写的Vue插件中，直接跟Jsonp相关的代码就是以下这段：
opt.$.ajax({
type:"get",
async:false,
url:opt.url,
dataType:'jsonp',
jsonpCallback:'callback',
success: function (json) {
console.log(json);
opt.store.commit('setStatus' , {
status: json.status
});
opt.store.commit('setContent' , {
content: json.content
});
opt.store.commit('setMsg' , {
msg: json.message
});
},
error: function (error) {
console.log('something wrong')
}
})
其中，opt.store的内容如下所示：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
status: null,
content: null,
msg: null
}
const mutations = {
setStatus (state, payload) {
state.status = payload.status
},
setContent (state, payload) {
state.content = payload.content
},
setMsg (state, payload) {
state.msg = payload.msg
}
}
export default new Vuex.Store({
state,
mutations
})
它的作用很简单，就是用来将从后端获取到的数据，写入Vuex的state中，供其他的component调用。
opt.$就是指从Vue中获取到的Jquery，我们利用jquery对Jsonp的完美支持，来实现前端对后端jsonp数据请求及回调方法的使用。
再简单点来说，把dataType设置为jsonp，把jsonpCallback设置的值跟后端返回的方法名保持一致，即可以正常使用，success方法中传入的json对象，便是后端在方法中加入的json对象，我们直接拿过来用即可。
写到这里，我们便完成了前后端jsonp的数据交互。
（完）
以上是关于前后端分离实践——Jsonp数据交互的主要内容，如果未能解决你的问题，请参考以下文章