Javaweb-Vue-Springboot-前后端分离交互

1. JSON（JavaScript Object Notation）

JSON 是一种轻量级的数据交换格式，用来方便的表示对象，作为前后端传递的对象数据

//JSON的属性名必须有双引号，如果值是字符串，也必须带双引号
var jsonObj = {
	"key1":10,  				//数字
	"key2":"name",				//字符串
	"key3":true,				//布尔类型
	"key4":[10,"name",true],	//数组
	"key5":{					//另一个json
		"key5_1":20,
		"key5_2":"name"
	},
	"key6":[{json1},{json2},{json3}]			//json数组
};

1.1 json对象

操作json中的数据时使用json对象

json对象转json字符串

var jsonString = JSON.stringify(jsonObj);

1.2 json字符串

客户端和服务器间数据交换时使用json字符串

json字符串转json对象

var jsonObj = JSON.parse(jsonString);

2. AJAX（Asynchronous Javascript And XML）

AJAX 是一种浏览器通过 js 异步发起请求，局部更新页面的技术，原生的AJAX请求很麻烦，开发中从不使用

在Vue没出来前，开发中常使用JQuery AJAX方法向后端服务器进行异步请求，随着Vue的发展，不再使用JQuery了

2.1 JQuery AJAX 方法

$.ajax({
           type: 'POST', //请求类型
           dataType: 'json', //响应的数据类型
           url: '/project', //请求地址
           contentType: 'application/json; charset=utf-8',
           data: JSON.stringify(data), //发送给服务器的数据
           success: function (result) { //当请求成功时运行的函数
               $('#result2').html(JSON.stringify(result));
           },
           error: function () { //如果请求失败要运行的函数
               $('#result2').html('接口异常，请联系管理员！');
           },
       });

2.2 axios（ajax i/o system）

axios是Vue官方推荐的ajax框架

//全局方式（不要这么使用）
import axios from 'axios'

axios.defaults.baseURL = 'http://xxx.xxx.xxx.xxx:8888' //配置默认的全局根url
//axios.defaults.xxx ，其他的属性也可以配置成全局

axios({
  url: '/homepage/userdata', //后台服务器地址
  method: '' //请求方式，get、post等等，默认get方式
  ...
}).then(res => { //promise用法，直接拿到请求到的json数据，返回给res
  console.log(res);
})

创建axios实例，并封装

1. src里建立network文件夹，建立request.js

import axios from 'axios'

//1.创建axios实例
let instance = axios.create({
	baseURL: 'http://xxx.xxx.xxx.xxx:8888',
	timeout: 10000,
})

//可以选择性的使用拦截器
//2.instance.interceptors.request.use(成功， 失败)
//3.instance.interceptors.response.use(成功， 失败)

//4.具体api的请求分离到其他文件
export default instance

2. src下建立api目录，存放相关api模块文件

import request from '@/network/request'

export function login(data) {
	return request({
		url: '/homepage/userdata',
		method: 'post',
		data
	})	
} //将具体api请求封装到函数中以供其他位置调用，该函数返回一个Promise对象

//.then(res => {
//	console.log(res);
//})
//.catch(err => {
//	console.log(err);
//)}

3. Vuex

3.1 Promise方法（ES6）

new Promise((resolve, reject) => {
	//第一次请求
	if(请求成功) {
		resolve() //执行第一次处理请求的代码
	} else {
		reject()
	}
}).then(() => {
	//第一次处理请求代码
	...

	return new Promise((resolve,reject) => {
		//第二次请求
		if(请求成功) {
			resolve() //执行第二次处理请求的代码
		} else {
			reject()
		}
	}).then(() => {
		//第二次处理请求代码
		...
	})

3.2 状态管理模式

vuex 使用单一状态树，整个应用只有一个store实例，所有的属性全局共享（单例）

• state：存放全局属性
• getter：可认为是 store 的计算属性，对state中的属性进行计算，派生出新状态
• mutations（同步）：凡是要修改state中的属性，必须 commit 到 mutations；

//事件类型：mutations中定义的方法，其方法名以字符串形式作为commit的第一个参数
//回调函数：mutations中定义的方法，方法体即回调函数
mutations: {
	increment (state) {
		state.count++	//回调函数
	}
}

store.commit('increment', payload) //'icrement' 即事件类型

• actions: 异步操作时，需要先 dispatch 到 actions ，actions 再 commit 到 mutations

//actions: {
//	increment (context) {
//		context.commit('increment')
//	}
//}
//实际开发中，使用ES5的参数结构写法简化代码
actions: {
	increment ({ commit }) {
		return new Promise((resolve, reject) => { //这个Promise会返回到store.dispatch
			setTimeout(() => {				//异步操作
				commit('increment')			
				resolve()
			}, 1000)
		})
	}
}

//store.dispatch可以处理action中方法返回的Promise，进而继续一些其他操作
store.dispatch('increment').then(() => {...})