深入前端学习原来这么有趣 第5期

如无意外，每周更新时间为周日

好消息:

公司要做一个微信商城准备采用前后端分离的方案，Vue作为主要框架，最近我更新的技术站总算是有用武之地了。我准备将这个过程学到的经验写下来，也打算前后端分离的伙伴，可以去看看，给我提提意见：
一步步从后端渲染到前后端分离经验分享（1）

终极技术方案：
- 1.Vue-Router:路由管理系统，模拟浏览器的history机制，使用方便。不反人类
- 2.VueX：官方的解释是这就像你的眼镜，你自然知道什么时候去用它。
- 3.axios：用来做数据请求
- 4.Mint：UI框架
- 5.npm：包管理工具
- 6.webpack：打包工具
- 7.Vue：数据渲染框架

坏消息

上一期说的《CSS世界》总结分享，这一期没有了，实在是有点忙，以后我肯定会补上的。下个周我也要住公司了，因为项目开发时间紧张，已经为我们准备好了晚餐和住宿

周知识总结

未来简史

这是最近相当火的一本书了，前段时间左手韩新书发布会在北京二环的国瑞商城举行。由于左手韩画风真的很犀利，我对他本人的长相还是相当好奇的。于是途径西西弗书店，整整一个专栏都放的这本书，当时就默默的把书名记住了。后来在掌阅APP上又看到这本书被推上了热销榜，就非常好奇的打开这本书看了一下。里面对未来的几个预测真的很犀利，当然前提要能成真才行：

预测1->人类活到150岁

里面先叙述了人类从平均寿命40岁到现在普及的平均寿命70多岁作为参考依据，然后大胆做出假设，以后人类的寿命可能还会进行增倍到150岁。当然作者也提到了，之前是因为各种症状原因导致了人类非自然死亡，而现在大部分人基本上都是自然死亡。要想达到150岁还是很有难度的。假设人类活到150岁这个命题成立下面这些事情必然是需要思考的：
- 1.150岁死亡，那么90岁退休是不是就变得正常了呢。这个样子你可以想象一下现在可能马上就要退休的你还要在接着干30多年
- 2.如果还是25-30岁左右结婚，预示着你将和你的配偶度过120多年的光阴。所以婚姻可能会被延期
- 3.如果你40岁的时候生了俩个孩子，养育孩子已经是遥远的记忆，只算的上是慢慢人生中的一个小小的插曲。在这种情况下，很难说究竟会发展处怎样的亲子关系

也就是说整个社会结构都会重新打破。

预测2->人类可以自由选择基因组合

当有一天人类可以自由选择基因组合方式，例如选择爸爸的智慧，母亲的美貌。而不是让自然决定，当然这种方式肯定会有一部分人反对。作者也给出了一个强有力的推论：你排斥这种方式，可你邻居正在进行这种方式。人家的孩子就会拥有更好地外貌，更聪明的脑袋，你真的愿意让你的孩子输在起跑线上么。在往大了说，你的国家拒绝了这种方式，可是有一个小国选择了这种方式，培育出来了一批一批的数学天才，体育健将，超级明星。所以这种趋势是不可阻挡的。

以上仅仅是书中推测的第一章的内容，但是已经足以让我震撼了，建议你们也去读读这本书，对于视野的启发相当有帮助。

axios的post请求数据后端接收不到？

post几种常见的请求头普及：

正常能走通的ajax请求格式：

axios的post请求格式：

也就是说将下面的Request Payload转变成Form Data即可，网上普遍的说法是：

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

确实是生效了，但是距离想要的效果还差了一些：

所以还需要一个数据格式转换：

transformRequest: [function (data) {
    // Do whatever you want to transform the data
    var ret = ''
    for (var it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
    }
    return ret
}]

最终的解决方案是：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // post 请求的时候数据格式是Request Payload
    // 将其修改成 Form Data
    if (config.method === 'post') {
        config.transformRequest = [function (data) {
            // Do whatever you want to transform the data
            var ret = '';
            for (var it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
            }
            return ret
        }];
    }
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

这样你每次都只需要按照官网正常的post方式请求即可。

往期回顾：

深入前端学习原来这么有趣 第4期

深入前端学习原来这么有趣 第3期

深入前端学习原来这么有趣 第2期

深入前端学习原来这么有趣 第1期