开发中遇到的问题记录

js去重(基本数组与对象那个数组)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
    var unique = {};
    obarr = [
      {name: 'sdsd',key: 'zc'}
    ]
    obarr.forEach(function(gpa) {
         unique[JSON.stringify(gpa)] = gpa
     });
    obarr = Object.keys(unique).map(function(u) {
         return JSON.parse(u)
     });

POST application/json 适用于传递多层的json 本来以为自己写了那么多post请求，ajax已经难不住了呢，结果现实无比的残酷，后台换成了java，发多层级的json，后台就取不到了，虽然到最后还是配置正确了，。。记录下来，引以为戒，

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
axios.post("POST", "/URL", this.state.datas, {headers: {"Content-Type": "application/json"}})
    .then( res => {  
               console.log(res.data)     
           })
    .catch(err => {
            console.log(err)
        })

// 来一个原生版的
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var res = JSON.parse(xhr.responseText);
              
            }
        }
    }
    xhr.open("POST", "./toLogin.do", true);
    xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
    xhr.send({})

其实重点就是请求头信息

1
2
3
4
"Content-Type": "application/json"
// 顺便一提
"Content-Type": "application/x-www-form-urlencoded" // 适用于大部分情况
"Content-Type": "multipart/form-data" // 适用于文件上传

为什么在vue的组件中，data要用function返回对象呢？

类比与引用数据类型。js在赋值object对象时，是直接一个相同的内存地址如果不用function return 每个组件的data都是内存的同一个地址，那一个数据改变其他也改变了，这当然就不是我们想要的。用function return 其实就相当于申明了新的变量，相互独立，自然就不会有这样的问题

[转载]Vue 组件data为什么必须是函数？
在创建或注册模板的时候，传入一个data属性作为用来绑定的数据。但是在组件中，data必须是一个函数，而不能直接把一个对象赋值给它。

1
2
3
4
5
6
Vue.component('my-component', {
  template: '<div>OK</div>',
  data() {
    return {} // 返回一个唯一的对象，不要和其他组件共用一个对象进行返回
  },
})

你在前面看到，在new Vue()的时候，是可以给data直接赋值为一个对象的。这是怎么回事，为什么到了组件这里就不行了。

你要理解，上面这个操作是一个简易操作，实际上，它首先需要创建一个组件构造器，然后注册组件。注册组件的本质其实就是建立一个组件构造器的引用。使用组件才是真正创建一个组件实例。所以，注册组件其实并不产生新的组件类，但会产生一个可以用来实例化的新方式。

理解这点之后，再理解js的原型链：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var MyComponent = function() {}
MyComponent.prototype.data = {
  a: 1,
  b: 2,
}
// 上面是一个虚拟的组件构造器，真实的组件构造器方法很多

var component1 = new MyComponent()
var component2 = new MyComponent()
// 上面实例化出来两个组件实例，也就是通过<my-component>调用，创建的两个实例

component1.data.a === component2.data.a // true
component1.data.b = 5
component2.data.b // 5

可以看到上面代码中最后三句，这就比较坑爹了，如果两个实例同时引用一个对象，那么当你修改其中一个属性的时候，另外一个实例也会跟着改。这怎么可以，两个实例应该有自己各自的域才对。所以，需要通过下面方法来进行处理：

1
2
3
4
5
6
7
8
9
var MyComponent = function() {
  this.data = this.data()
}
MyComponent.prototype.data = function() {
  return {
    a: 1,
    b: 2,
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
var MyComponent = function() {
  this.data = this.data()
}
MyComponent.prototype.data = function() {
  return {
    a: 1,
    b: 2,
  }
}
function () {
  return {
    a: 1,
    b: 2,
  }
}
var component1 = new MyComponent()
var component2 = new MyComponent()
undefined
component1.data===component2.data
false
component1.data
Object {a: 1, b: 2} 

这样每一个实例的data属性都是独立的，不会相互影响了。所以，你现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的，跟vue本身设计无关。其实vue不应该把这个方法名取为data()，应该叫setData或其他更容易立即的方法名。

axios 请求中文传输返回乱码

前后端需使用相同的编码解码方式，默认是UTF-8, axios 使用以下代码处理

1
axios.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

axios, post、put请求传递不了参数?

首先，可以试着把axios请求部分换成：

1
2
3
4
5
6
7
axios.post('post.php', {
    a: '1'
}).then(function(response) {
    alert(response.data);
}).catch(function(error) {
    alert(error);
});

另外，由于axios默认发送数据时，数据格式是Request Payload，而并非我们常用的Form Data格式，PHP后端未必能正常获取到，所以在发送之前，需要使用qs模块对其进行处理。

1
2
3
4
5
6
7
import qs from 'qs';
...
axios.post('post.php', qs.stringify({
    a: '1'
}))
.then( ... )
.catch( ... );