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

本贴最后更新于 2333 天前,其中的信息可能已经渤澥桑田

笔者这里所说的前后端分离,是指后端通过 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 的数据交互。

  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1090 引用 • 3467 回帖 • 298 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3165 引用 • 8206 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    710 引用 • 1173 回帖 • 193 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • eddy

    看成 jsoup 了,觉得奇怪了好一阵。

  • 其他回帖
  • someone

    :joy: :joy: :joy:

  • someone

    :smile: 这种解决办法在CORS里得到了很好的体现,我之后会写一篇如何利用eBay的CORS来解决跨域的文章。

  • undefinedUser

    spring-boot

    gg.png