文章目录

qs序列化：是什么？为什么？怎么办？`实例截图参考`
- 一、`（简单了解）` · `三步解析 `
- - - 序列化是一种用来处理对象流的机制：
    - 对象、文件、数据，有许多不同的格式，很难统一传输和保存
    - 序列化的主要作用：
    - 什么时候使用序列化：
    - 序列化的实现：
  - 为什么一定要`qs.stringify`序列化？
  - - 其实也不一定非要`qs.stringify`序列化:
    - `主要缘故在于：`
- 二、 `Demo代码实例` · `axios发送请求`主要代码：
- - 1. 主要代码示下：
  - 2. 效果图 · 截图 · 理解：
  - 3. demo全部代码参考：
- 三、附 · `推荐热文`· 参考文章

qs序列化：是什么？为什么？怎么办？`实例截图参考`

一、`（简单了解）` · `三步解析`

（what、why、how）

序列化是一种用来处理对象流的机制：

所谓对象流就是将对象的内容进行流化。可以对流化后的对象进行读写操作，也可将流化后的对象传输于网络之间。
序列化是为了解决在对对象流进行读写操作时所引发的问题。
对象、文件、数据，有许多不同的格式，很难统一传输和保存

序列化以后就都是字节流了，无论原来是什么东西，都能变成一样的东西，就可以进行通用的格式传输或保存，传输结束以后，要再次使用，就进行反序列化还原，这样对象还是对象，文件还是文件
序列化的主要作用：

使数据被统一成统一个格式, 从而方便跨程序, 跨平台等使用. 但因为实体类通常都会考虑WebService传输，所以通常都声明可序列化以支持WebService…
什么时候使用序列化：

对象序列化可以实现分布式对象。
主要应用例如：RMI要利用对象序列化运行远程主机上的服务，就像在本地机上运行对象时一样。
java对象序列化不仅保留一个对象的数据，而且递归保存对象引用的每个对象的数据。可以将整个对象层次写入字节流中，可以保存在文件中或在网络连接上传递。利用对象序列化可以进行对象的"深复制"，即复制对象本身及引用的对象本身。序列化一个对象可能得到整个对象序列。

序列化的实现：

将需要被序列化的类实现Serializable接口，该接口没有需要实现的方法，implements Serializable只是为了标注该对象是可被序列化的，然后使用一个输出流(如：FileOutputStream)来构造一个ObjectOutputStream(对象流)对象，接着，使用ObjectOutputStream对象的writeObject(Object obj)方法就可以将参数为obj的对象写出(即保存其状态)，要恢复的话则用输入流;

为什么一定要`qs.stringify`序列化？

我使用Jquery的ajax的时候，就直接在data区域写入参对象就行啊

其实也不一定非要`qs.stringify`序列化:

如果入参的格式不是js对象，而是就像我们写好的 uid=cs11&pwd=123这样的字符串拼接格式，那么就不用再序列化操作。

`主要缘故在于：`

axios内部会自动对Object的入参进行转换，转换成json字符串，其实就是JSON.stringify的操作，同时，会指定Content-type为applicaltion/json。

后台是按照application/x-ww-form-urlencoder方式在接口中进行数据获取和处理的，这样的话，后台处理就会出问题。

同样的，如果后台的接口就是处理Content-Type=application/json类型的入参，那么根本就不用再使用qs序列化了，直接正常post即可。如果强制使用了，后台接口在处理的时候会获取失败。

区间内容节选自：@http://www.manongjc.com/article/67890.html

二、 `Demo代码实例` · `axios发送请求`主要代码：

个人项目备忘：【参考项目】
（参考源码来源：某房网托管项目-小程序接口【已上线】）

1. 主要代码示下：

import axios from 'axios'
import qs from 'qs'// 调用登录接口：
axios.post('https://dev.xxxxxx.com/admin/user/login',// 数据qs序列化qs.stringify({'username': this.ruleForm.username,'password': this.ruleForm.password})
).then(function (response) {console.log(response)
}).catch(function (error) {console.log(error)
})/**********es6**********
*************************
.then(response=>{console.log(response.data);if(response.data.httpCode == 200){}else{}
})
**********************
**********************/

2. 效果图 · 截图 · 理解：

3. demo全部代码参考：

<template><div class="login-container bg-login" style="width:400px;margin:100px auto;"><el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm"><h3 class="title">系统登录</h3><el-form-item label="" prop="username"><el-input v-model="ruleForm.username" placeholder="账号" autocomplete="off"></el-input></el-form-item><el-form-item label="" prop="password"><el-input type="password" v-model="ruleForm.password" placeholder="密码" autocomplete="off"></el-input></el-form-item><el-form-item label="" prop="remember" class="remember-div"><el-checkbox class="remember" v-model="ruleForm.remember" checked="checked">记住密码</el-checkbox></el-form-item><el-form-item><!-- <el-button type="primary" @click="submitForm('ruleForm')">立即登录</el-button> --><el-button type="primary" @click="submitForm('ruleForm')" style="width:100%">立即登录</el-button><!-- <el-button @click="resetForm('ruleForm')">重置</el-button> --></el-form-item></el-form></div>
</template><script>
import axios from 'axios'
import qs from 'qs'
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';export default {name: 'login',data() {return {ruleForm: {username: 'appAdmin',password: '123456',remember: []},rules: {username: [{ required: true, message: '请输入账号', trigger: 'blur' },{ min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: ['blur', 'change'] },// 若验证规则为邮箱格式，取消注释即可// { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: ['blur', 'change'] }],remember: [{ type: 'array', required: false, message: '请至少选择一个选项', trigger: 'change' }],}}},mounted() {},methods:{submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {// alert('submit!');axios.post('https://dev.xxxxxx.com/admin/user/login',// 数据qs序列化qs.stringify({'username': this.ruleForm.username,'passwd': this.ruleForm.password})).then(function (response) {if(response.data.code==20000){  console.log(response.data.msg)// 登录成功提示this.$notify({title: '123465789',// message: '正在跳转中···',type: 'success',duration: 2000});    this.$message({message: response.data.msg,type: 'success'});        // token写入本地客户端存储localStorage.setItem("token",response.data.data.token);// token获取本地客户端存储// var key = localStorage.getItem("token");// console.log("key=" + key)// 成功之后执行跳转   this.$router.replace   this.$router.replace('/index');}}).catch(function (error) {})} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}
}
</script><style scoped>.login-container {border-radius: 5px;-moz-border-radius: 5px;background-clip: padding-box;margin: 180px auto;width: 350px;padding: 35px 35px 15px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;}.login-container .title {margin: 0 auto 40px;text-align: center;color: #505458;}.remember-div{text-align: left;}.remember{/*margin: 0 0 35px;*/}
</style>

三、附 · `推荐热文`· 参考文章

Vue传递序列化数据

旧版代码参考：【服务器变配变参之前】

// 登录接口var serverPath = 'https://dev.xxxxxx.com/admin/';axios.post( serverPath + '/user/login',    {          'userName': this.ruleForm.username,'passwd': this.ruleForm.password,// 'userType':"2"},{headers: {'Content-Type':'application/json',//'Authorization':'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiI1QUZFRkQ4NTNFNjIwNDIyOEIwNDE3MzdCMDdBNEJCNURDNTBEQjA4OUFCQzBENDM4MDA5RkM4REU4QkMyODkzIiwidXNlck5hbWUiOiIxNzY4MTEzNTIwMSIsInVzZXJBZ2VudCI6Ik1vemlsbGEvNS4wIChXaW5kb3dzIE5UIDEwLjA7IFdpbjY0OyB4NjQpIEFwcGxlV2ViS2l0LzUzNy4zNiAoS0hUTUwsIGxpa2UgR2Vja28pIENocm9tZS82OC4wLjM0NDAuMTA2IFNhZmFyaS81MzcuMzYiLCJleHAiOjE1NTE5MzYzODQsIm5iZiI6MTU1MTkzNDU4NH0.YgRW-Wnlk_Gz64id_jTocH68oj8DuZuI1WyQBmmrt7c'}},).then(function (response) {console.log(response);if (response.data.code == 40000) { // 登录失败，用户名或者密码错误this.$notify.error({title: response.data.msg,duration: 2000});return false;}if (response.data.code == 20000) { // 登录成功this.$notify.error({title: response.data.msg,duration: 2000});return false;}}.bind(this)).catch(function (error) {console.log("请求失败"+error);});

推荐热文：http://www.axios-js.com/zh-cn/docs/#浏览器【截图如下】

以上就是关于“ vue+axios+qs序列化 “三步解析”【含demo实例】- 代码篇 “三步解析”【含demo实例】 - 代码篇” 的全部内容。

vue+axios+qs序列化 “三步解析”【含demo实例】- 代码篇相关推荐

jsp数据 foreach 循环遍历（含效果图）- 代码篇
jsp数据 foreach 循环遍历 (含效果图)- 代码篇效果图: 重要代码 · 示下: <c:forEach items="${governorlist}" var=& ...
vue 调用移动录像_Vue 莹石摄像头直播视频实例代码
vue 莹石摄像头直播视频代码. html代码: 直播地址是调用接口获取的. export default { data(){ return{ player:"", rtmp_ur ...
vue 手风琴效果_Vue实现侧边菜单栏手风琴效果实例代码
编程之家收集整理的这篇文章主要介绍了Vue实现侧边菜单栏手风琴效果实例代码,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. 效果图如下所示: {{item.name}} { // 判断如 ...
Vue axios 中提交表单数据(含上传文件)
http://www.jb51.net/article/118051.htm 转载于:https://www.cnblogs.com/tanhao/p/8488206.html
004.前端面试排雷之唱、跳、rap三步曲（一）唱篇
酒香犹怕巷子深,说学逗唱样样学. 投递了简历但是了无音讯.等待你的可能是,hr的一句不合适,您已加入简历库.你那,精心准备的简历,貌似并不能打动HR.别辜负了你的,爆肝熬夜,深思熟虑,字字珠玑.我就来 ...
CSP-S 2019 第二轮 DAY2 简单解析(含部分分代码)
CSP-S 2019第二轮第二试昨天上午正式结束了,赛后仔细拜读了DAY2的三个题目,难!但也是明年NOI选手不错的试炼机会,高分选手大概率也是明年NOI赛场上的选手. 第一题:Emiya 家今天的饭 ...
Java 网络IO编程总结（BIO、NIO、AIO均含完整实例代码）
本文会从传统的BIO到NIO再到AIO自浅至深介绍,并附上完整的代码讲解. 下面代码中会使用这样一个例子:客户端发送一段算式的字符串到服务器,服务器计算后返回结果到客户端. 代码的所有说明,都直接作为 ...
(转载)Java 网络IO编程总结（BIO、NIO、AIO均含完整实例代码）
转载请注明出处:http://blog.csdn.net/anxpp/article/details/51512200,谢谢! 本文会从传统的BIO到NIO再到AIO自浅至深介绍,并附上完整的代码讲解 ...
AutoLayout的三种设置方式之——NSLayoutConstraint代码篇
本文转载至 http://www.cnblogs.com/madpanda/p/4311980.html AutoLayout是从IOS 6开始苹果引入来取代autoresizing的新的布局技术,该 ...

vue+axios+qs序列化 “三步解析”【含demo实例】- 代码篇

文章目录

qs序列化：是什么？为什么？怎么办？`实例截图参考`

一、`（简单了解）` · `三步解析`

序列化是一种用来处理对象流的机制：

对象、文件、数据，有许多不同的格式，很难统一传输和保存

序列化的主要作用：

什么时候使用序列化：

序列化的实现：

为什么一定要`qs.stringify`序列化？

其实也不一定非要`qs.stringify`序列化:

`主要缘故在于：`

二、 `Demo代码实例` · `axios发送请求`主要代码：

1. 主要代码示下：

2. 效果图 · 截图 · 理解：

3. demo全部代码参考：

三、附 · `推荐热文`· 参考文章

vue+axios+qs序列化 “三步解析”【含demo实例】- 代码篇相关推荐

最新文章

热门文章

vue+axios+qs序列化 “三步解析”【含demo实例】- 代码篇

文章目录

qs序列化：是什么？为什么？怎么办？实例截图参考

一、（简单了解） · 三步解析

序列化是一种用来处理对象流的机制：

对象、文件、数据，有许多不同的格式，很难统一传输和保存

序列化的主要作用：

什么时候使用序列化：

序列化的实现：

为什么一定要qs.stringify序列化？

其实也不一定非要qs.stringify序列化:

主要缘故在于：

二、 Demo代码实例 · axios发送请求主要代码 ：

1. 主要代码示下：

2. 效果图 · 截图 · 理解：

3. demo全部代码参考：

三、附 · 推荐热文· 参考文章

vue+axios+qs序列化 “三步解析”【含demo实例】- 代码篇相关推荐

最新文章

热门文章

qs序列化：是什么？为什么？怎么办？`实例截图参考`

一、`（简单了解）` · `三步解析`

为什么一定要`qs.stringify`序列化？

其实也不一定非要`qs.stringify`序列化:

`主要缘故在于：`

二、 `Demo代码实例` · `axios发送请求`主要代码：

三、附 · `推荐热文`· 参考文章