Instruction:
redis 失效的key造成的问题
是这样得
```
//这里面执行判断是否存在缓存
$res = redis -> get("xxx");
if($res != null){
  //返回缓存结果
  return $res;//缓存返回
}

$res = db -> query("select * ...")//假设这句要3秒

redis -> setex("xxx",3600,$res)//保存到缓存，3600时间
//返回查询结果
return $res;

```
大概意思是这样的,就是我先从缓存取，没有就从数据库取，且存到缓存中，方便下次再去取。
但是问题就来了，假设我有千万并发，xxx 这个key存在3600,3600时间后自动销毁，必须得重新从数据库获取，而这句sql要3秒，3秒钟并发了几千万，就是查了几千万次数据库，必须得第一条成功缓存下来,后续的才不会跳过缓存返回那句，但这期间3秒却足以使服务器垮了，我想问的是怎样才能只访问一次数据库，其他那几千万访问都是从缓存取。

Output:
可以看看这篇博文：缓存更新的套路
补充：
缓存被“击穿”问题（以前看过一篇文章的做法，你可以借鉴一下）：
业界比较常用的做法，是使用mutex。简单地来说，就是在缓存失效的时候（判断拿出来的值为空），不是立即去load db，而是先使用缓存工具的某些带成功操作返回值的操作（比如Redis的SETNX或者Memcache的ADD）去set一个mutex key，当操作返回成功时，再进行load db的操作并回设缓存；否则，就重试整个get缓存的方法。类似下面的代码：
```
 public String get(key) {
      String value = redis.get(key);
      if (value == null) { //代表缓存值过期
          //设置3min的超时，防止del操作失败的时候，下次缓存过期一直不能load db
          if (redis.setnx(key_mutex, 1, 3 * 60) == 1) {  //代表设置成功
               value = db.get(key);
                      redis.set(key, value, expire_secs);
                      redis.del(key_mutex);
              } else {  //这个时候代表同时候的其他线程已经load db并回设到缓存了，这时候重试获取缓存值即可
                      sleep(50);
                      get(key);  //重试
              }
          } else {
              return value;
          }
  }
```


Instruction:
求解一道关于js的百度笔试题
```
var name = "World";
(function () {
  if (typeof name === 'undefined') {
    var name = 'Jack';
    console.log('Goodbye' + name);
  } else {
    console.log('hello ' + name);
  }
})()

```
输出：GoodbyeJack

Output:
变量声明提升: 变量的声明会提升到当前作用域的顶部
你的代码等于
```
var name = "World";
(function () {
  var name //声明提升
  if (typeof name === 'undefined') {
    name = 'Jack';
    console.log('Goodbye' + name);
  } else {
    console.log('hello ' + name);
  }
})()

```


Instruction:
react不能给组件绑定点击事件吗？
这是我的点击事件：
```
useCoupon=()=>{
    console.log(444444)
};

```
这是我的DOM结构：
```
<div className="select-wrapper-inner">
  {
    this.state.availableCouponList.map((item,index)=>{
      return (
                 <SingleCoupon key={index} onClick={this.useCoupon} price={item.price} condition={item.condition} deadline={item.deadline}/>
             )
    })
   }
</div>

```
我现在绑定的这个点击事件不会被触发，什么意思？SingleCoupon是我自定义的一个组件

Output:
SingleCoupon是你定义的组件，并不是一个真实的DOM元素，它不存在点击事件，因为它不是最终渲染的页面的元素。
你应该这样用
```
class SingleCoupon extends Component {
    render() {
        return (
            <div onClick={this.props.onClick}/>
        )
    }
}

```
所有的事件处理函数都必须要绑定到真实的DOM上。传给组件，组件只会认为它是个prop


Instruction:
js对象为什么不能直接操作？
发现一个小问题，在控制台输入{a:1}.toString()会报错，必须要先把{a:1}赋值给一个变量然后在进行操作才行，这是什么情况

Output:
因为语法规定。
因为语法规定导致 js 解释器没有正确理解你的意图。解决办法, 加括号消歧义。
```
({a:1}).toString() // or
({a:1}.toString())
```
## 引申
开始以为是 console 的锅，后来发现 node CLI 里一样存在这个问题，于是发现里蹊跷：
花括号 `{}` 除了可以用来定义对象字面量，还可以用来定义代码块。
冒号`:` 除了可以用来定义对象字面量中的 key-value 对外，还可以用来定义 `label`
label的概念
如果你听说过 C 语言（js就是C系的语法），你听说过有个语句叫 `goto`，那你应该对 `label` 有印象。js 里没有 `goto`，但是有 `break` 和 `continue`, 这俩货可以和 `label` 连用。
`{a:1}.toString()` 之所以报错 `unexpected token .` ，是因为它被解析成了：
```
{
// code block
a: // 定义一个label，名字叫a

1 // 这是一条语句，就一个数值 1

}
// block 结束了
.toString() // 报错，非法字符`.`
```
所以你可以这样玩：
```
{
  a:console.log(1);console.log(2);
}
```
这代码语法正确，能执行！


Instruction:
从mysql查出200万数据有什么好的办法
查询的时候老是崩溃

Output:
不要用分页，查到后面越查越慢。
因为
```
limit 10000,100
```
这种那个10000是会查询然后丢弃的。
正确的做法是用游标。
假设你的游标字段为`id`
```
$cursor = 0;
$size = 1000;
do {
$sql = 'SELECT * FROM user WHERE id > :id ORDER BY id DESC limit :size';
$data = 执行查询得到的数组。
$count = count($data);
foreach($data as $row){
    $id = $row['id'];
//处理数据
}
// 当前条数不大于size，证明下面没数据了。
if($count<$size){
    break;
}
}while(true);
```
这种是利用mysql查询筛选【一部分你要的数据，不存在数据丢弃】。所以速度一直都很快


Instruction:
请问大家某些大牛常说不要做“api程序员”，这里的api一般是哪些api呢？ 像 环信 融云 这样的算api吗 ？
请问大家某些大牛常说不要做“api程序员”，这里的api一般是哪些api呢？ 像 环信 融云 这样的算api吗 ？本人是做php开发的

Output:
API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力。我们在写程序时，无疑会调用各种第三方库的API来实现功能。
从描述看，问题中的API指的是Web API，这里的API并不是特指某个服务的API。
对于Web API而言，仅仅调用别人的API来实现业务功能，或者说，自己仅仅是从数据库中取数据，写简单的增删查改的API，这类工作的技术含量是很低的，所以不要做“API程序员”
一个好的Web开发者，应当是需要具备比较深厚的编程功底的。比如数据结构、算法等，做web开发，需要知道restful规范，HTTP协议，负载均衡，分布存储等知识。这些要求就会高得多了。
简而言之，你需要去做一些技术含量高的东西，简单的API调用很基本，刚学了几天web开发的程序员就会调用，这不能构成任何的竞争力。大量轮子已经造好，完全从零开始不实际的，需要关注的是，你的代码中算法和模型这些核心占比多少，纯粹的API调用占比多少，调用的API内部实现的机制了解多少，不要只是简单调用。


Instruction:
golang time.Now() 格式化的问题。
golang中使用time.Now().Format("2006/1/2 15:04:05") 格式化时间输出时，Format的参数必须是"2006/1/2 15:04:05",这个时间为例的时间格式吗？
```
func main() {
    now := time.Now()

    fmt.Println(now)

    // 必须使用这个时间才能返回正确的格式化后的时间，其他的都不行
    fmt.Println(now.Format("2006/1/2 15:04:05"))
    fmt.Println(now.Format("2006/01/02 15:04:05"))
    fmt.Println(now.Format("15:04:05 2006/1/2"))
    fmt.Println(now.Format("2006/1/2"))
}

```
请问"2006/1/2 15:04:05"这个时间有什么历史典故吗？

Output:
这个是我以前收藏的笔记
go 的time package 提供了time.Format函数，用来对时间进行格式化输出。
类似的还有time.Parse用来解析字符串类型的时间到time.Time。这是两个互逆的函数。
问题是，go 采用的格式化 layout 和我们以往所用的任何经验都不同。以至于初次接触总是一头雾 水。
其实 go 提供的这个 layout 对算法的实现非常科学高效，而且很规律。下面我们详细分解下。 直接上个对应表
前面是含义，后面是 go 的表示值,多种表示,逗号","分割
```
月份 1,01,Jan,January
日　 2,02,_2
时　 3,03,15,PM,pm,AM,am
分　 4,04
秒　 5,05
年　 06,2006
时区 -07,-0700,Z0700,Z07:00,-07:00,MST
周几 Mon,Monday

```
您看出规律了么！哦是的，你发现了，这里面没有一个是重复的，所有的值表示都唯一对应一个时间部分。并且涵盖了很多格式组合。
比如小时的表示(原定义是下午3时，也就是15时)
```
3 用12小时制表示，去掉前导0
03 用12小时制表示，保留前导0
15 用24小时制表示，保留前导0
03pm 用24小时制am/pm表示上下午表示，保留前导0
3pm 用24小时制am/pm表示上下午表示，去掉前导0

```
又比如月份
```
1 数字表示月份，去掉前导0
01 数字表示月份，保留前导0
Jan 缩写单词表示月份
January 全单词表示月份

```
实例对应
真实时间：我的UTC时间是 2013年12月5日，我的本地时区是Asia
字符表示：　　2013 12 5 Asia
Go Layout：　2006 01 2 MST
真实时间：我的UTC时间是 2013年12月22点，我的本地时区是Asia
字符表示：　　2013 12 22 Asia
Go Layout：　2006 01 15 MST
是滴，上面这个时间是合法的，虽然没有说是那一天，但是说了小时
而所有这些数字的顺序正好是1,2,4,5,6,7和一个时区MST
其实还有一个秒的 repeated digits for fractional seconds 表示法
用的是 0和9 ,很少用，源代码里面是这样写的
stdFracSecond0                          // ".0", ".00", ... , trailing
zeros included stdFracSecond9                          // ".9", ".99",
..., trailing zeros omitted
那些分界符
除了那些值之外的都是分界符号，自然匹配了，直接举例子吧
字符表示：　　2013-12 21 Asia
Go Layout：　2006-01 15 MST
字符表示：　　2013年12月21时 时区Asia
Go Layout：　2006年01月15时 时区MST
好了，您是否感觉这个表示方法兼容度更好，适应性更强呢，更容易记忆呢。


Instruction:
javascript把json对象转为数组
转换前是这样的：
```

var articles = [{
    title: 'hello',
    content: 'hello world',
    created_at:'2017-08-30 13:45:15'
},{
    title: 'foo',
    content: 'foo bar',
    created_at:'2017-08-30 13:45:15'
}];
```
我想把它转成这样：
```
var articles2 = [
    [ 'hello', 'hello world', '2017-08-30 13:45:15' ],
    [ 'foo', 'foo bar','2017-08-30 13:46:06' ]
];
```
用js应该怎么做呢？

Output:
```
var articles = [{
    title: 'hello',
    content: 'hello world',
    created_at:'2017-08-30 13:45:15'
},{
    title: 'foo',
    content: 'foo bar',
    created_at:'2017-08-30 13:45:15'
}]
var result = articles.map(item => {
  return Object.values(item)
})
```


Instruction:
如何用Laravel 做Api接口
我想用laravel做个api接口，但是作为接口，应该对请求做校验，我能想到将校验的数据放到header中，在laravel的中间件对header做校验，但是我现在不知道拿到header怎么去用。
还有就是做api对请求校验的作用，重要性

Output:
API接口的校验有很多种，看你的API是用在哪方面，APP还是web。
也不一定非要放在header中，使用基础的signature方案也能完成对接口的校验。
signature方案：客户端和API使用同一套加密规则，提供一个APPkey和secret，然后经过secret加密（或者其他处理过程）生成signature，传输的时候将signature和appkey作为参数传递。这是目前用的比较多的一种API接口调用权限校验，只是用来校验客户端是否有权限调用API。
JWT: JSON WEB TOKEN 也是一种可选的，只不过他更复杂， 更多的是用来校验用户的登录状态和权限，（用在APP、无状态的web系统），关于JWT有相对应的 composer 包可选择。核心思想就是，API加密一个uid或者其他标识，生成一个token，这个token是有时限的，比如两个小时，放在header的Authorization中，通过获取进行校验，（涉及用户的操作，一般会传递uid或者其他类似标识字段），通过JWT进行权限校验即可。
至于拿到 header 怎么用，如果是JWT 取出 Authorization字段，以及标识字段（如UID）然后进行JWT校验即可，加密和校验可以自己实现，不过建议使用成熟的composer包吧，比如我用过的：https://github.com/lcobucci/jwt。
看你到底需求什么校验 是 `用户鉴权` 还是 `API接口调用权限校验`，个人认为这两者是不同的。
另外API请求校验的作用很明显，别人即使知道你的API，也无法调用。（这个无法调用是相对的，如果你的signature校验写的很死，尤其是可以多次应用的signature，就存在重放攻击）。
用户鉴权这个就更不用说了，不同的用户只能操作自己权限的东西，不鉴权的API，是存在各种问题的。


Instruction:
angular 对象？.语法的具体含义
在angular项目的html中，比如a是个对象，a？.b这句语法是什么意思，是angular中特有的吗？还是问号运算符本身就有的功能，如
```
<div>
    {{ foo?.bar }}
</div>
```

Output:
`?.`是angular模板中的安全属性操作符语法，属于angular模板特有语法
`a?.b`表示当a存在时(不为null或undefined)，取`a.b`的值，否则置空；以避免出现a未赋值时直接报错
详见官方文档The safe navigation operator ( ?. ) and null property paths


Instruction:
vue-router的beforeEach导航钩子，next('/')出现死循环问题
为什么next()指定路径会出现死循环
```
router.beforeEach((to, from, next) => {
  console.log('beforeEach');
  if(true){
    next('/');
  }else{
    next();
 }
});
```

Output:
next()直接跳转到to.path路径，没有再执行一遍beforeEach导航钩子，next('/')或者next('/login')自己指定路径的，路由跳转的时候还执行一遍beforeEach导航钩子，所以上面出现死循环；
栗子：如我们登录页（'/login'）面进入首页('/')，可以这么写：
```
router.beforeEach((to, from, next) => {
  var userInfo= JSON.parse(sessionStorage.getItem('userInfoStorage'));//获取浏览器缓存的用户信息
  if(userInfo){//如果有就直接到首页咯
    next();
  }else{
    if(to.path=='/login'){//如果是登录页面路径，就直接next()
      next();
    }else{//不然就跳转到登录；
      next('/login');
    }

  }
});
```


Instruction:
短信验证码是前端做还是后端？
1.短信验证码接口是前端做的吗？  我们后台是php
2.前端需要做什么工作啊？
我以前没有做过这种事，求大神指导

Output:
初步实现步骤：
```
1、 用户：填写手机号码
2、 用户：点击发送短信
3、 js  ：调用后端接口，提交手机号码-告知后端发送短信
4、 后端：生成随机码，作为验证码
5、 后端：保存随机码-
6、 后端：调用短信接口-将随机码发送给用户
7、 用户：接收到短信，填写验证码
8、 用户：点击提交按钮
9、 js  ：调用后端接口，提交手机号码、验证码
10、后端：根据手机号码获取保存的验证码，与接收到的验证码对比，是不是一样的
11、js  ：判断后端返回的结果Y/N
12、js  ：反馈用户

```
可以另外再做些优化
```
a、限制用户多次提交
b、后端保存的随机码加个时间限制，
。。。
```


Instruction:
什么是跳板机？
什么是跳板机？

Output:
跳板机，就是可以给你远程连接的机器，然后通过这个机器再去访问别的机器，这个跳板机可以是`windows`下也可以是`Linux`下，跟操作系统无关，下面是其中比较常见的一种场景：
很多客户方的服务器外网是连接不了的，一般只能通过`VPN`然后才能连接，然而一些客户方觉得做`VPN`的代价太大，但是开发方不方便经常去现场或者其他原因需要访问客户方的服务器并且服务器外网不能连接时，没有`VPN`时，只能通过远程连接，比如`teamview`,`QQ`远程，还有`windows`自带的远程连接工具，连接到远端的一台电脑上，这台电脑就是跳板机，作为一个桥梁，然后再通过这个机器在内网中访问其服务器


Instruction:
相对于前端来说，SDK指的是什么？
请问 相对于前端开发来说 SDK指的是什么？
- 是API接口？
- 是一段注入JS？
求大大给解惑解惑！

Output:
假设我开发了一个博客后台管理系统，开放了一系列功能操作的HTTP或其他协议的接口，用于创建博客、发布文章、文章列表、发布评论、对文章以及评论点赞等操作，那么这个叫API，用于其他程序方便通过接口实现博客功能。
一般情况下有可能到这一步，我的博客系统就打完收工了。
但是某一天有一个合作伙伴说，你们这一堆API，我熟悉起来要半天，能不能更加方便我来接入，那我问他你用什么语言，他说我就会javascript，那么我就用js写了一堆类和方法，把我的API接口封装起来，用户不需要关心接口地址等，只需要引入我封装的js的url，就可以通过类和方法就可以发布文章、创建博客、文章列表等，这个就叫SDK，当然这个SDK很简单，可能就是一个或几个js文件以及简陋的不能再简陋的文档。
复杂的SDK其实是一整套完整的解决方案，比如IOS APP开发，苹果提供的SDK其实包含了开发工具Xcode、ios各种版本的sdk、帮助文档、命令行工具等等一些列东西


Instruction:
laravel 路由冲突
跟着网上视频学习laravel5.4，写了下面两行代码。
Route::get('/posts/{post}','AppHttpControllersPostController@show');
Route::get('/posts/create','AppHttpControllersPostController@create');
然后视频中访问localhost/laravel/public/posts/create 结果是成功的，而我访问却跳转到了show中，求解？？

Output:
加一个正则表达式限制就好了，默认情况下，`laravel` 的路由匹是从上往下的，匹配到符合的第一条后，就不会往下匹配了：
```

//假设post为int
Route::get('/posts/{post}','AppHttpControllersPostController@show')->where('post', '[0-9]+');
Route::get('/posts/create','AppHttpControllersPostController@create');

```


Instruction:
php 的yield叫协程，go的goroutine也叫协程，它这两种完全不一样吧？
php那个我是没搞懂，而且是会暂停的。
go那个呢，并不需要暂停，我就是类似另开一个线程，做完了事，返回数据，就闪人，这个还更好理解。PHP那个有点搞不懂。

Output:
在`php`等语言里的`yield`，不是`协程`语法，而是`迭代器`语法。
而包括`php`在内的大多数语言实现`迭代器`的方式，是通过一个可中断的函数完成的。
而`协程`的一个特点就是执行中断，切换上下文。
所以就有了通过`迭代器`函数去`实现`协程的方案。这种方案充分利用了`迭代器`可中断的特点来模拟`协程`中断，而利用闭包函数的上下文独立性，实现`协程`的上下文切换。
总结起来，什么是协程，协程是通过切换运行方法和上下文，来在同一个空间中完成不同的处理任务（注意，不是另外开线程）。
那么协程怎么实现，`goroutine`就是协程的一种实现方式。
而通过`迭代器`实现协程，就又是另外一种方式。
两者的区别在于，`goroutine`是已经存在的实现。相当于已经成品的车，你理解起来会相当容易。
而`迭代器`只是提供者实现`协程`的方法，具体要实现协程，还需要自己去写代码完成。这就好像是汽车的零件，你需要自己组装，所以还需要深入学习你才能理解它的原理


Instruction:
php如何打包下载远程图片
现在页面上有多张图片（来自 OSS）,如何根据这些图片的 url 来一次性将图片全部下载到本地？

Output:
如果你想在 浏览器端做这个功能就需要借助 js 实现
如果你想在 服务端实现这个功能，可以一张一张获取，然后打包。
From : https://stackoverflow.com/que...
```
$image1 = "http://cdn.screenrant.com/wp-content/uploads/Darth-Vader-voiced-by-Arnold-Schwarzenegger.jpg";
$image2 = "http://cdn.screenrant.com/wp-content/uploads/Star-Wars-Logo-Art.jpg";

$files = array($image1, $image2);

$tmpFile = tempnam('/tmp', '');

$zip = new ZipArchive;
$zip->open($tmpFile, ZipArchive::CREATE);
foreach ($files as $file) {
    // download file
    $fileContent = file_get_contents($file);

    $zip->addFromString(basename($file), $fileContent);
}
$zip->close();

header('Content-Type: application/zip');
header('Content-disposition: attachment; filename=file.zip');
header('Content-Length: ' . filesize($tmpFile));
readfile($tmpFile);

unlink($tmpFile);
```


Instruction:
为什么.vue文件需要使用export default
```
因为项目要使用vue开发。学习了一段时间之后有几个问题一直困惑着我：
（1）首先就是.vue结尾的文件为何需要export default，就像下面的代码一样？
（2）为什么data需要return，我不用return，直接 data(){
    menu:MENU.data,
    poi:POILIST.data
}不行吗？
这两个问题问了几个人都不能给我合理的解释，求懂的兄弟们给个帮助，谢谢了。

```
```
<script>
    import { POILIST, MENU } from '../config/vuex.js';
    export default {
        data() {
            return {
                menu: MENU.data,
                poi: POILIST.data
            }
        },
        methods: {
            set() {
                MENU.list.push('首页');
                POILIST.list.push({
                    lng: 124.1,
                    lat: 42.3
                });
            }
        }
    }
</script>
```

Output:
export default是ES6的语法，意思是将这个东西导出，你要import 引入东西，导出了才能引用，data是一个函数是因为data是被很多组件共享的，如果 data 是一个的对象的话，每次实例化会造成所有的实例共享引用同一个数据对象，如下
```
var fnc= function() {}
fnc.prototype.data = {
  a: 1,
  b: 2,
}

var fnc1 = new fnc()
var fnc2 = new fnc()

fnc1.data.a === fnc2.data.a // true
fnc2.data.b = 1;
fnc2.data.b // ==1
```
data 是函数的话，每次创建一个新实例后，调用 data 函数，用return返回初始数据的一个全新副本数据对象，就避免了所有实例共享引用同一个数据对象。


Instruction:
npm install -g 和npm install --save-dev的关系
npm install --save-dev xxx是自动把模块和版本号添加到devdependencies部分
npm install -g xxx是将模块安装在全局
但是执行了npm install --save-dev，package.json中devDependencies会加入安装的模块，但是在命令行中执行命令时还是出现command not found，还是必须要npm install -g安装在全局才行。
npm install --save-dev的作用仅仅是自动把模块和版本号添加到devdependencies部分么，我们还是需要先安装么？还是说我们没配对环境变量？ 为什么很多教程在Installation这流程都是npm install --save-dev xxx就OK了呢

Output:
1.`npm install`本地安装
（1）将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。
（2）可以通过 require() 来引入本地安装的包。
2.`npm install` -g全局安装
(1) 将安装包放在 /usr/local 下或者你 node 的安装目录。
(2)可以直接在命令行里使用。
3.`npm install --save`
(1)会把msbuild包安装到node_modules目录中
(2)会在package.json的dependencies属性下添加msbuild
(3)之后运行npm install命令时，会自动安装msbuild到node_modules目录中
(4)之后运行npm install --production或者注明NODE_ENV变量值为production时，会自动安装msbuild到node_modules目录中
4.`npm install --save-dev`
(1)会把msbuild包安装到node_modules目录中
(2)会在package.json的devDependencies属性下添加msbuild
(3)之后运行npm install命令时，会自动安装msbuild到node_modules目录中
(4)之后运行npm install --production或者注明NODE_ENV变量值为production时，不会自动安装msbuild到node_modules目录中


Instruction:
React-Router V4+ 打包后刷新网页404错误
开发使用的构建工具是 create-react-app
我在使用 React-Router V4+ 版本的时候，
```
npm run build
```
编译成功后放在我本地的 Tomcat9 上，运行后可以正常访问首页，跳转其它页面 URL 都正常显示， 但是再刷新当前页面404错误。
按照官方提示：
There is also a similar approach for Apache servers. Create an .htaccess file in your folder's root:
```
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
```
问题1 ：
创建了 .htaccess 文件后，该文件是放在我编译好的包的根目录（index.html所在目录）下，还是在 其它位置。如果需要修改其它东西如 Apache 配置文件，要怎么修改。
问题2 ：
在网上看到这种情况都是将 URl 重定向到 index.html，请问还有其它不修改服务器配置文件的解决办法没有。
跪求解答，谢谢

Output:
我没看过文档，建议你要理解内部的机制。
之所以你在浏览器内可以由首页跳转到其他路由地址，是因为这是由前端自行渲染的，你在React Router定义了对应的路由，脚本并没有刷新网页访问后台，是JS动态更改了location。
当你刷新时，你首先是访问的后台地址，然后返回的页面内加载了React代码，最后在浏览器内执行；也就是说如果这个时候报404，是因为你后台并没有针对这个路由给出返回HTML内容，也谈不上执行React Router了。
解决办法就一条：如果你期望所有的路由都由React Router来定义，只有你的后台，无论任何路径，都返回index.html就好了。剩下的事情交给React Router。那么你要做的就是修改后台服务器，可以放在apache，也可以放在你的java路由内做一个通配路径处理。


Instruction:
如何用 javascript 实现多字段模糊查询
数组如下
```
var arr = [
    {id: "1", en: "Afghanistan", cn: "阿富汗", code: "93"},
    {id: "2", en: "Iraq", cn: "伊拉克", code: "964"},
    {id: "3", en: "Qatar", cn: "卡塔尔", code: "974"}
    ]
```
en,cn,code都能查询
比如输入`aq`，查询返回第二条
比如输入`卡`，查询返回第三条
比如输入`97`，查询返回第三条

Output:
```
function query(arr, q) {
  return arr.filter(v => Object.values(v).some(v => new RegExp(q + '').test(v))
  )
}
```


Instruction:
在命名规范的情况 你还会写注释么？
比如一些方法
```
// 封装链路信息数据
formatLinksInfo() {}

// 获取节点坐标数据
getNodesPosition() {}

// ip转数字
ipToNum() {}

// 判断元素是否全部选中
isAllElemsActive() {}

// 右键菜单选项
itemContextMenu() {}

if(target.classed('topo')){} // 拓扑图情况
if(target.classed('node')){} // 节点
if(target.classed('link')){} // 链路
```
比如像这种命名 不写注释感觉也能通过方法名或者类名 也能看懂，
但自己还是都写了 现在code review看来觉得很冗余
问一下你们关于代码注释编写原则是啥呢，能通过命名读懂的都不写么？

Output:
- 你不应该在每次调用方法的时候写注释，而是应该在声明函数的地方写注释
-
建议每个函数都写相应的注释

你自己写代码存在主观性，你觉得规范，其实不一定规范，或许可以说不一定全面;
每个人理解方法是不一样的，你觉得命名规范了，那也许是真的很规范，但是并不是所有人都能一下子看懂，如果要整个遍历一下方法实现过程这是非常浪费时间的，别人看到一个函数应该立刻能从注释和方法名知道这个函数是干什么的;
函数名写的再好，我也只能大概猜到这个函数是干什么的，但是我对函数的参数和返回值类型等信息一无所知
总而言之，空间换时间，一次时间换以后的`N`次时间是非常值得的

- 建议写英文注释，这样`review`起来更加简洁，不显得那么格格不入，不要觉得什么自己或者其他人英文底子不好，网上各种英汉词典，多写英文注释遇到不知道的还能多学几个英文单词

建议每个函数都写相应的注释
- 你自己写代码存在主观性，你觉得规范，其实不一定规范，或许可以说不一定全面;
- 每个人理解方法是不一样的，你觉得命名规范了，那也许是真的很规范，但是并不是所有人都能一下子看懂，如果要整个遍历一下方法实现过程这是非常浪费时间的，别人看到一个函数应该立刻能从注释和方法名知道这个函数是干什么的;
- 函数名写的再好，我也只能大概猜到这个函数是干什么的，但是我对函数的参数和返回值类型等信息一无所知
- 总而言之，空间换时间，一次时间换以后的`N`次时间是非常值得的


Instruction:
Vue路由的$router.back(-1)回退时如何判断有没有上一个路由
现在每个页面的左上角有一个返回按钮<
点击时的代码是this.$router.back(-1)，返回上一个路由
但是我们现在有这样一个需求，把其中某一页分享出去，用户打开时并没有上一条路由的历史记录，所以点击<按钮时没有反应。
所以应该怎么判断有没有上一条路由的历史记录。
代码：
routerback: function () {
  this.$router.back(-1)
},

Output:
在页面一开始加上一个全局的函数：
```
activated: function () {
  this.$setgoindex()
}
```
这个函数是这样的，判断当前页面的历史记录是不是小于等于1，如果小于等于1，说明这个页面没有可以返回的上一页，如果没有可以返回的上一页，就给地址栏加上一个goindex=true的参数，这样你从这个页面在往下一个页面跳转在返回，这个参数就一直加上的
```
Vue.prototype.$setgoindex = function () {
  if (window.history.length <= 1) {
    if (location.href.indexOf('?') === -1) {
      window.location.href = location.href + '?goindex=true'
    } else if (location.href.indexOf('?') !== -1 && location.href.indexOf('goindex') === -1) {
      window.location.href = location.href + '&goindex=true'
    }
  }
}
```
然后在左上角返回按钮加上这个逻辑：
```
if (this.$route.query.goindex === 'true') {
  this.$router.push('/')
} else {
  this.$router.back(-1)
}
```
这样就可以了


Instruction:
axios 可以挂在Vue原型上 为啥还有个vue-axios?
如题，这个vue-axios有什么其他用途还是多余的？
因为
```
Vue.prototype.$http = axios
和
import Vueaxios from ‘vue-axios’
Vue.use(VueAxios,axios)

```
这二者效果都是一致，这样我就感觉vue-axios显得多余。希望知道多一点的朋友，能告诉我vue-axios存在的必要，非常感谢！

Output:
何不看看vue-axios的源码，就一个文件：
index.js
```
(function () {

/**
 * Install plugin
 * @param Vue
 * @param axios
 */

function plugin(Vue, axios) {

  if (plugin.installed) {
    return
  }
  plugin.installed = true

  if (!axios) {
    console.error('You have to install axios')
    return
  }

  Vue.axios = axios

  Object.defineProperties(Vue.prototype, {

    axios: {
      get() {
        return axios
      }
    },

    $http: {
      get() {
        return axios
      }
    }

  })
}

if (typeof exports == "object") {
  module.exports = plugin
} else if (typeof define == "function" && define.amd) {
  define([], function(){ return plugin })
} else if (window.Vue && window.axios) {
  Vue.use(plugin, window.axios)
}

})();
```
首先是按照`Vue`的插件文档来写的，直接绑在原型链上不是不可以，如果像您这样注册一个$http，和项目其他成员协作的时候就必须注明你注册的变量名称，而使用vue-axios大家就没有歧义了。
说白了，使用vue-axios更多是为了符合规范，并且方便协作吧。


Instruction:
react native使用 react-navigation登录后如何清空 react-navigetion 内的返回记录？
如题所说，使用navigation 导航，登录后清空记录，navigation有相应的方法吗???????

Output:
跳转并清空路由记录
```
 import { NavigationActions } from 'react-navigation'
 resetAction = NavigationActions.reset({
                index: 0,
                actions: [
                    NavigationActions.navigate({routeName:'xxx'})//要跳转到的页面名字
                ]
            });
this.props.navigation.dispatch(resetAction);
```


Instruction:
移动端页面使用background-attachment:fixed;固定背景图片
在某些机型中微信中打开不起作用，大家遇到过没？怎么解决的呢

Output:
移动端对`background-attachment: fixed`支持的不好，但可以hack一下。
```
cssbody:before {
  content: ' ';
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(path/to/image) center 0 no-repeat;
  background-size: cover;
}

```


Instruction:
怎么用js通过文件的url下载文件到本地
目前拿到的是文件的url，不是下载地址，只是文件的存放地址。前端怎样用js通过这个url实现文件的下载呢？

Output:
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <a href="/download/papers/abc.doc">点击链接下载</a>
    <button onclick="download1()">点击按钮下载</button>
      <button onclick="download2">点击按钮下载</button>

    <script>
        // 会打开一个空白页下载，然后空白页消失，用户体验不好
        function download1() {
            window.open('/download/papers/1');
        }

        // 直接下载，用户体验好
        function download2() {
            var $form = $('<form method="GET"></form>');
            $form.attr('action', '/download/papers/1');
            $form.appendTo($('body'));
            $form.submit();
        }
    </script>
</body>
</html>
```


Instruction:
请问 React 中的 registerServiceWorker是干什么的？
create-react-app生成的项目中，多了一个registerServiceWorker.js，并且在 index.js 中引用，请问这个registerServiceWorker是什么东西，融合进 react 的目的是什么？

Output:
看下注释你就知道了，主要是用于在生产环境中为用户在本地创建一个`service worker` 来缓存资源到本地，提升应用的访问速度，具体看下面这段注释。
```
// In production, we register a service worker to serve assets from local cache.

// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.

// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
```


Instruction:
jQuery修改input的val能否触发v-model的更新
现在有需求，希望能通过jQuery修改input的值，并且能触发相关数据的更新，能不能办到。比如
```
$("input").val(2333);
```
我的需求比较奇葩啊，页面上有循环出来的大量input框，而这些input框需要通过一个自定义的键盘来输入。用jQuery的话只要在需要修改的input上打标记，然后再改它的值就行。只用vue的话目前没想到有啥简单的方法来实现。
现在的想法是，实在不行就在每个input上打上数组的维度标记，然后用jQuery根据维度去data中修改对应的值。这么一来就有点麻烦了

Output:
可以的，需要在设置完之后触发一下事件:
```
$("input").val(2333)
//触发一下该input的input事件
$("input")[0].dispatchEvent(new Event('input'))
```
`v-model` 只不过是个语法糖，底层还是监听的input事件


Instruction:
css 当a的父节点是p 的话,该怎么表达呢?
```
<p><a></a><p>
```
这种该怎么表达呢?主要是给p加一个样式……

Output:
原来用纯 CSS是表达不了（CSS3没有父元素选择器）；
不过 CSS4更新了功能，可以参考 CSS4选择器文档CSS Selectors from CSS4 till CSS1
，还有这篇文档：新增伪类 :has()
语法是：
```
!li > p { border:1px solid #CCC; }  /* 为 p 的父元素 li 设置一个边框 */
```
注意的是，这样的父级选择器当时一直都没有被各大浏览器支持；但是可以试试。


Instruction:
微信小程序的背景图要怎么显示？
开发小程序的时候，设置页面的背景，我用到css代码：
```
.page__bd{
    width: 100%;
    height: 220px;
    background: url('../../assets/img/images.jpg') no-repeat;
    background-size: 100% 100%;
}
```
在调试工具上是显示的，但是扫面上传到手机上却显示不出来，谁遇到过这样的问题？

Output:
可以用行内来实现
```
<view class="warp" style="background-image: url('../../images/welcome.png')">

</view>
```
上面这个在“开发工具”中能显示，但是用手机预览的时候就不出图，所以下面：
以欢迎页面来说：
wxml:
```
<!-- welcome.wxml -->
<view bindtap="goHome" class="warp">
    <image src="../../images/welcome.png"></image>
    <text>{{ countDownNumber }}</text> <!-- 倒计时 -->
</view>
```
css:
```
page {
    height: 100%;
}
.warp {
    height: 100%;
    position: relative;
}

.warp image {
    width: 100%;
    height: 100%;
}

.warp text {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 46%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5)
}
```
js:
```
//welcome.js
//获取应用实例
const app = getApp();

Page({

    /**
     * 页面的初始数据
     */
    data: {
        countDownNumber: 5,
        timerId: 0
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var page = this;

        //倒计时关闭当前页，重定向到首页
        var timer = setInterval(function(){
            page.setData({
                countDownNumber: page.data.countDownNumber - 1
            });
            if (page.data.countDownNumber == 1) {
                clearInterval(timer);
                wx.switchTab({
                    url: '../index/index'
                })
            }
        },1000);
        page.setData({
            timerId: timer
        })
    },

    /**
     * 触击“欢迎页面”直接重定向到首页
     */
    goHome: function(e){
        //清空计时器
        clearInterval(this.data.timerId);
        //关闭当前页，重定向到首页
        wx.switchTab({
            url: '../index/index'
        })
    }

})
```
这么着“开发工具”与预览都没问题，线上没试过，它这css里好像只能放网络地址...，我也是头一次摸....


Instruction:
vue2 如何去除带__ob__这样的数据？
```
data: function () {
    return {
        cityData: cityData,
        selectedOptions:this.source[this.schema_key]
    }
}
```
console上面的this.source[this.schema_key]如下
```
[24, 81, __ob__: Observer]
```
有么有一种方式可以直接这样获取这样数据
```
[24, 81]
```

Output:
`__ob__: Observer`这些数据是vue这个框架对数据设置的监控器，一般都是不可枚举的。
`console.log`这样的打印函数，被打印的变量会执行自身的`toString()`，这样，即便内部属性是不可枚举，实际上也能看到。举个例子：
```
const obj = {
    a: 0,
    b: 1
};
Object.defineProperty(obj, 'b', {
    writable: false,
    enumerable: false,
    configurable: false
});

console.log(obj);    // Object {a: 0, b: 1}
```
因为你已经将数据绑定在了vue之中，vue就肯定要为数据添加监控器的，如果你强制删掉了这些监控器，那么这些数据也就失去了监控，那么你使用vue的意义何在……
如果仅仅是去掉这些监控器而不考虑后果的话，把对象复制一份就行了，因为复制的对象是不包含不可枚举属性的。
```
const obj1 = {
    a: 0,
    b: 1
};
Object.defineProperty(obj1, 'b', {
    writable: false,
    enumerable: false,
    configurable: false
});
const obj2 = Object.assign({}, obj1);

console.log(obj2);    // Object {a: 0}
```
js这类动态语言，复制对象是个很头疼的事情。我写了个简单的，你可以参考一下：
```
//对象深复制，不考虑循环引用的情况
function cloneObj(from) {
    return Object.keys(from)
        .reduce((obj, key) => (obj[key] = clone(from[key]), obj), {});
}
//数组深复制，不考虑循环引用的情况
function cloneArr(from) {
    return from.map((n) => clone(n));
}
// 复制输入值
function clone(from) {
    if (from instanceof Array) {
        return cloneArr(from);
    } else if (from instanceof Object) {
        return cloneObj(from);
    } else {
        return (from);
    }
}

const obj = [
    {
        name: '1'
    },
    {
        name: '2'
    }
];
const obj2 = clone(obj);
console.log(obj2);
```
在外面直接用`clone()`方法就行了。


Instruction:
php new 一个类 比如$a = new Cat(); Cat后面为什么写()而不是{}
<?php
```
class Cat{
    public $name;
    public $age;
    function __construct($name,$age){
        $this->name = $name;
        $this->age = $age;
    }
}
$a = new Cat('小白',2);
为什么new Cat('小白',2) Cat后面是()而不是{},看起来很像是函数调用啊,虽然new一个
对象,构造函数会自动调用
因为js里面没有类,只有构造函数,所以new方式调用函数很好理解!
```
?>

Output: 首先`new xxx()`这是规定的声明类的写法，至于你说像函数调用，其实你也可以理解成在`new Cat('小白', 2)`的时候调用了`class Cat`中的构造函数`__construct()`，并且传递了两个参数


Instruction:
提高InnoDB导入数据的速度
向mysql中导入维基百科的数据（数据源中sql的部分,总数据20g，单条sql 100MB--5GB），导入速度太慢，1个晚上才导入不到1GB，如何提高导入速度。主键唯一性检验和自动提交都已经关了。

Output:
之前回答过一个类似的问题，思路如下：
对于insert方式写入优化点：
1、insert批量执行，禁止单条insert value（注意单条sql长度限制，可临时调整max_allowed_packet）
2、开启事务处理，批量提交。原理类似上1(条件允许可适当增大innodb_log_buffer_size，增加单事务提交日志量，该参数read only)
3、主键顺序插入，效率更高
4、业务允许，暂时disable keys
其他录入方式，比如load data是比较快的，可以试试
另外如果业务允许，暂时禁用binlog，并将redolog文件采用软连接的方式放入内存减少磁盘io（同样也可以把你的表数据文件放入内存目录/dev/shm，要求内存足够），要记得导入完成重新放入磁盘，以上两种方式导入均可采用此方式减少磁盘io


Instruction:
.vue文件中 使用@import 来导入样式的路径问题
```
    <style  lang="stylus">
        //使用 ../来匹配路径可以正确导入
        @import '../assets/css/main.styl'; //正确
        //使用 alias 中 配的 @ 就不能用了
        @import '@/assets/css/main.styl';  //错误
    </style>
```
怎么解决这个 @import 导入css文件的路径问题的
总不能一直 ../ 吧、
webpack 配置的 alias 好像不能作用在css里面里面
大佬们有什么解决办法吗？？

Output:
eg:
@import '~@/assets/scss/helpers/_mixin';
使用 ~
原理：
CSS loader 会把把非根路径的url解释为相对路径， 加~前缀才会解释成模块路径。


Instruction:
PHP二维数组根据键值对获取一组数组 (不使用foreach)
```
$user = array(
    0 => array(
        'id'    => 1,
        'name'  => '张三',
        'email' => 'zhangsan@sina.com',
    ),
    1 => array(
        'id'    => 2,
        'name'  => '李四',
        'email' => 'lisi@163.com',
    ),
    2 => array(
        'id'    => 5,
        'name'  => '王五',
        'email' => '10000@qq.com',
    ),
    ......
);
```
比如我想获取当id=2时,该数组的全部内容,不使用foreach,在PHP 5.3版本下

Output:
```
$user = array(
    0 => array(
        'id'    => 1,
        'name'  => '张三',
        'email' => 'zhangsan@sina.com',
    ),
    1 => array(
        'id'    => 2,
        'name'  => '李四',
        'email' => 'lisi@163.com',
    ),
    2 => array(
        'id'    => 5,
        'name'  => '王五',
        'email' => '10000@qq.com',
    )
);
$ids = array_column($user, 'id');
$new_user = array_combine($ids, $user);
var_dump($new_user[2]);
```


Instruction:
vue for循环内点击只显示当前的
拿到了后台给的数据，在循环的时候添加的click，想在点击当前td的时候改变当前下面的show，而不是所有
```
<tr v-for='(i,index) in data'>
    <td @click="changeData">
      <div v-if="show">{{i.mobileNumber}}</div>
    </td>
    <td></td>
    <td></td>
    <td></td>
</tr>

```
我想过在拿到后台数据以后自己给每条数据加个show:false,但有没有更好的方法

Output:
再添加一个数据项
```
currentActive: -1
```
td设置
```
@click="currentActive = index"
```
然后div设置
```
v-if="currentActive == index"

```
相当于一个游标，指向当前激活数据。


Instruction:
js = ==赋值判断问题
1.无意间发现的一个问题 知道语法错误 但不知道原理是为什么.为什么bool打印出来是false
2.var bool,bool_;
if(bool=true && bool_==false){}
console.log(bool,bool_);//false undefined

Output:
很简单， js 运算符优先级的问题， && 的优先级比 = 的要高，所以你这样写等于
```
var bool,bool_;
if(bool=(true && bool_==false)){}
console.log(bool,bool_);//false undefined
```
这样写即可得到想要的结果
```
var bool,bool_;
if((bool=true) && bool_==false){}
console.log(bool,bool_);
```
望采纳！


Instruction:
小程序标记点（markers）怎么保持在地图中间?
组件：https://mp.weixin.qq.com/debu...
API:https://mp.weixin.qq.com/debu...
效果就像滴滴出行的地图，可以进行选点，让标记（markers）一直居中，用户滑动放手后，获取地图中心点坐标

Output:
标记marker可以用control来做，将这个control定位在地图中间就行；
放手后获取地图中心坐标需要用regionchange，他可以判断当前对地图的操作状态，当e.type为end时用mapContext 获取到地图中心的位置；
相关文档：https://mp.weixin.qq.com/debu...
https://mp.weixin.qq.com/debu...


Instruction:
Python requests.get 爬虫 设置代理 IP地址未改变
工作需要爬取亚马逊上面的信息，但是亚马逊反爬虫太厉害，同一个IP地址会被封。
Python版本：3.6， IDE：Pycharm 2017.1
在网上查了很多资料，requests库的手册也读过，但是都是同一个方法，代码如下：
```
import requests
'''代理IP地址（高匿）'''
proxy = {'HTTPS': '117.85.105.170:808'}
'''head 信息'''
head = {'User-Agent': 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36',
    'Connection': 'keep-alive'}
'''http://icanhazip.com会返回当前的IP地址'''
p = requests.get('http://icanhazip.com', headers=head, proxies=proxy)
print(p.text)
```
根据我看过的许多教程的理论，如果代理设置成功，最后显示的IP应该是代理的IP地址，但是最终还是我真实的IP地址，这样一来不就等于没有设置代理么？

Output:
proxies在你访问http时用http的设置，访问https时用https的设置
所以你的proxy需要同时包含http及https的配置，这样才能生效
```
proxy = {
    'http': 'http://117.85.105.170:808',
    'https': 'https://117.85.105.170:808'
}
```


Instruction:
express app和router的区别
var app = express();
var router = express.Router();
以上二者的区别是什么，什么时候用哪个最合适

Output:
区别看下面的例子：
app.js
```
var express = require('express'),
    dogs    = require('./routes/dogs'),
    cats    = require('./routes/cats'),
    birds   = require('./routes/birds');

var app = express();

app.use('/dogs',  dogs);
app.use('/cats',  cats);
app.use('/birds', birds);

app.listen(3000);
```
dogs.js
```
var express = require('express');

var router = express.Router();

router.get('/', function(req, res) {
    res.send('GET handler for /dogs route.');
});

router.post('/', function(req, res) {
    res.send('POST handler for /dogs route.');
});

module.exports = router;
```
在 `app.js` 中调用 `express()` 时，返回一个 `app` 对象。
`app` 对象可以看作创建了一个 `Express` 应用程序。
而当 `express.Router()` 被调用时，返回稍微不同的“迷你应用”。
“迷你应用程序”背后的想法是，应用程序中的不同路线可能变得相当复杂，你可以从将该逻辑移动到单独的文件中获益。
在上面这个简单的例子中，`/dogs` 路由的逻辑已经被移动到自己的文件中，所以它的 `GET` 和 `POST` 处理程序不会混乱 `app.js`。
现在，你可以独立地处理对 `/dog` 的任何请求的逻辑，而不用担心它将如何影响猫 `/birds`。
如果你具有与所有三条路由相关的逻辑（`Express` 中称为中间件），则可以将其放在 `app.use(...)` 调用上方的 `app.js` 中。
如果你有逻辑仅与其中一条路线（`/dog`）相关，那么你只将它放在该路由的文件中。
以上回答，来源于Differences between express.Router and app.get?
共同学习，给赞更好～～～
至于什么时候使用，其实上面的例子已经解释了。
如果代码非常简单，完全可以 `app.get('/',....)`,如果路由比较复杂，使用 `express.Router()` 更合适。


Instruction:
vue webpack [HMR] 警告
[HMR] bundle has 2 warnings
client.js?ede2:161 ./src/components/Banner.vue
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
-
D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangnode_modules.11.3.4@vue-loaderindex.js??ref--0!D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangsrccomponentsBanner.vue
`Used by 6 module(s), i. e.
D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\node_modules\.6.4.1@babel-loader\lib\index.js!D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\node_modules\.11.3.4@vue-loader\lib\selector.js?type=script&index=0!D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\src\page\bbs\index.vue`

-
D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangnode_modules.11.3.4@vue-loaderindex.js??ref--0!D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangsrccomponentsbanner.vue
`Used by 1 module(s), i. e.
D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\node_modules\.6.4.1@babel-loader\lib\index.js!D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\node_modules\.11.3.4@vue-loader\lib\selector.js?type=script&index=0!D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\src\page\service\serviceDetails.vue`
./~/.6.4.1@babel-loader/lib!./~/.11.3.4@vue-loader/lib/selector.js?type=script&index=0!./src/components/Banner.vue

D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangnode_modules.11.3.4@vue-loaderindex.js??ref--0!D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangsrccomponentsBanner.vue
```
`Used by 6 module(s), i. e.
D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\node_modules\.6.4.1@babel-loader\lib\index.js!D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\node_modules\.11.3.4@vue-loader\lib\selector.js?type=script&index=0!D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\src\page\bbs\index.vue`
```
D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangnode_modules.11.3.4@vue-loaderindex.js??ref--0!D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangsrccomponentsbanner.vue
```
`Used by 1 module(s), i. e.
D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\node_modules\.6.4.1@babel-loader\lib\index.js!D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\node_modules\.11.3.4@vue-loader\lib\selector.js?type=script&index=0!D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\src\page\service\serviceDetails.vue`
```
./~/.6.4.1@babel-loader/lib!./~/.11.3.4@vue-loader/lib/selector.js?type=script&index=0!./src/components/Banner.vue
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
-
D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangnode_modules.6.4.1@babel-loaderlibindex.js!D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangnode_modules.11.3.4@vue-loaderlibselector.js?type=script&index=0!D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangsrccomponentsBanner.vue
`Used by 1 module(s), i. e.
D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\node_modules\.11.3.4@vue-loader\index.js??ref--0!D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\src\components\Banner.vue`

-
D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangnode_modules.6.4.1@babel-loaderlibindex.js!D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangnode_modules.11.3.4@vue-loaderlibselector.js?type=script&index=0!D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangsrccomponentsbanner.vue
`Used by 1 module(s), i. e.
D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\node_modules\.11.3.4@vue-loader\index.js??ref--0!D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\src\components\banner.vue`

D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangnode_modules.6.4.1@babel-loaderlibindex.js!D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangnode_modules.11.3.4@vue-loaderlibselector.js?type=script&index=0!D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangsrccomponentsBanner.vue
```
`Used by 1 module(s), i. e.
D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\node_modules\.11.3.4@vue-loader\index.js??ref--0!D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\src\components\Banner.vue`
```
D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangnode_modules.6.4.1@babel-loaderlibindex.js!D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangnode_modules.11.3.4@vue-loaderlibselector.js?type=script&index=0!D:用户目录我的文档HBuilderProjectvue-bulingwangpulingwangsrccomponentsbanner.vue
```
`Used by 1 module(s), i. e.
D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\node_modules\.11.3.4@vue-loader\index.js??ref--0!D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\src\components\banner.vue`
```

Output:
有可能是因为是路径或者文件名大小写的问题，例如原本组件是得这么引的
```
import SueChooseCity from '@souche-vue/sue-pc/src/components/choosecity';
```
然而在单页应用的另外一个页面的一不小心把choosecity写成了chooseCity
```
import SueChooseCity from '@souche-vue/sue-pc/src/components/chooseCity';
```
然后就出了这个错。
```
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.```

我看到你的报错信息里有bulingwangpulingwangsrccomponentsbanner和bulingwangpulingwangsrccomponentsBanner。大小写的B的区别，所以问题就出在这里。


Instruction:
为什么JAVA很多类都放弃了安全而要速度呢
比如hashmap和hashtable，arrylist和vector这种的，我学的时候都说是xxx不用了，区别是一个安全一个不安全，当然hashtable那个还有个null的区别，为啥要用不安全的呢

Output:
什么叫`放弃安全而要速度`。
这认识错的太远了，需要线程安全的情况下当然是`必须`要使用线程安全的类型了，不需要自然是可以不用使用了。
如下代码
```
public void m() {
    int i = 0;
    String s = "string" + i;
    System.out.println(s);
}
```
`JDK`会将字节码编译成如下
```
  public void m();
    descriptor: ()V
    flags: ACC_PUBLIC
    Code:
      stack=2, locals=3, args_size=1
         0: iconst_0
         1: istore_1
         2: new           #2                  // class java/lang/StringBuilder
         5: dup
         6: invokespecial #3                  // Method java/lang/StringBuilder."<init>":()V
         9: ldc           #4                  // String string
        11: invokevirtual #5                  // Method java/lang/StringBuilder.append:(Ljava/lang/String;)Ljava/lang/StringBuilder;
        14: iload_1
        15: invokevirtual #6                  // Method java/lang/StringBuilder.append:(I)Ljava/lang/StringBuilder;
        18: invokevirtual #7                  // Method java/lang/StringBuilder.toString:()Ljava/lang/String;
        21: astore_2
        22: getstatic     #8                  // Field java/lang/System.out:Ljava/io/PrintStream;
        25: aload_2
        26: invokevirtual #9                  // Method java/io/PrintStream.println:(Ljava/lang/String;)V
        29: return
```
可以很清楚的看到字节码中将字符串连接编译成`StringBuilder`的方式，我们知道`JDK`还提供了一个`StringBuffer`线程安全的字符串操作类。那`JDK`编译时为什么不选择`StringBuffer`来做呢，答案很显然是`不需要`，因为这是在一个方法的内部，一个`局部变量`是不可能会遇到`线程安全`问题的。
而`HashMap`与`HashTable`也是同理，如果你是`局部变量`那只需要选择`HashMap`就可以了。如果是`全局变量`且会有多个线程同时操作该变量的情况当然是不能选择`HashMap`，而是要选择`HashTable`这种线程安全的类型，但是现在`HashTable`被选择的也会很少是因为有了更好的选择如`ConcurrentHashMap`来代替。


Instruction:
如何让不带www的网站访问时跳转到带www的网站
我用的是nginx,我按照网上说的301配置但是没有效果，有没有懂的麻烦给讲解一下

Output:
基于域名的虚拟主机的虚拟主机可以轻松做到这一点。
```
server {
    server_name example.com;
    return 301 $scheme://www.example.com$request_uri;
}

server {
    server_name www.example.com;
    #... SNIP ...#
}
```


Instruction:
PHP有办法在闭包外部得到闭包内部的变量吗？
```
<?php

 $arr = [
     ['2','3'],
     ['6,7']
 ];

     $s= array_walk($arr, function($_value,$_key){

           $a = 10;

           return true;
   });

     var_dump($a);//$a 打印的时候报错了，如何得到$a呢？
```

Output:
```
<?php

$arr = [
    ['2','3'],
    ['6,7']
];
$a = 0;
$s = array_walk($arr, function($_value,$_key) use (&$a) {
   $a = 10;

   return true;
});

var_dump($a);
```


Instruction:
三个函数调用之后分别输出什么？
下面的三个函数调用之后分别输出什么？
```
function f1(x, y, a) {
    arguments[2] = 10;
    console.log(a);
}
f1(1, 2, 3);

function f2(x, y, a) {
    arguments[2] = 10;
    console.log(a);
}
f2(1, 2);

function f3(x, y, a) {
    arguments[2] = 10;
    console.log(arguments[2]);
}
f3(1,2);
```
求分析:
输出结果：第一次：10；第二次：undefined；第三次：10

Output:
- arguments是伪值，它是传入函数参数的值组成的数组，它的顺序和参数列表一致，且可以在函数内被重写
- arguments中，每一个值都是指向参数本身的内存，而并非是副本
- 函数内`arguments`，其实就是取到了`[x, y, a]`
- 其中，`arguments[2]`对应的是`a`，且直接指向`a`的内存
- 因此，第一个函数输出10，因为修改`arguments[2]`也就是修改`a`的内存，也就是对`a`赋值10
- 第二次，由于没有传`a`，所以`arguments[2]`没有指向任何内存，且`a`也没有指定内存，因此是`undefined`
- 第三次，由于`arguments[2]`没有指向任何内存，`a`也没有指定内存，所以，`arguments[2]`实质是给`arguments[2]`开辟了一块内存，并初始化值为10，但是这块内存并不是`a`的内存

arguments是伪值，它是传入函数参数的值组成的数组，它的顺序和参数列表一致，且可以在函数内被重写
arguments中，每一个值都是指向参数本身的内存，而并非是副本
函数内`arguments`，其实就是取到了`[x, y, a]`
其中，`arguments[2]`对应的是`a`，且直接指向`a`的内存
因此，第一个函数输出10，因为修改`arguments[2]`也就是修改`a`的内存，也就是对`a`赋值10
第二次，由于没有传`a`，所以`arguments[2]`没有指向任何内存，且`a`也没有指定内存，因此是`undefined`
第三次，由于`arguments[2]`没有指向任何内存，`a`也没有指定内存，所以，`arguments[2]`实质是给`arguments[2]`开辟了一块内存，并初始化值为10，但是这块内存并不是`a`的内存


Instruction:
js产生1-20之间的数，要求数越小出现的概率越高，要怎么写？
需要随机产生1-20之间的数，数字越小，出现的概率越高。
请教大家，该怎么写？

Output:
`1 + Math.floor(Math.random() * Math.random() * 20)`
`Math.random()`的几率是相等的，结果在0到1之间，落在0到0.5和0.5到1之间的概率都是0.5；
两个`Math.random()`相乘落在0到0.5之间的概率是`3 / 4`，落在0.5到1之间的概率是`1/4`，因为只有当两次`Math.random()`的结果都在0.5以上时，结果才会在0.5到1之间。
所以多个`Math.random()`相乘会使数越小出现的概率越高。
Update:
上面所说的：
落在0到0.5之间的概率是`3 / 4`，落在0.5到1之间的概率是`1/4`，应该是`不对`的。因为即使两次`Math.random()`的结果都在0.5以上时，结果也不一定会在0.5到1之间，比如`0.6 * 0.6 = 0.36; 0.7 * 0.7 = 0.49`，所以上面的描述更正如下：
感谢@manggo指正！


Instruction:
js扁平化树形结构的json对象 转换json数据结构
有这样的一个`json`数据
```
[
  {
    'Id': '1',
    'Name': '教学素材管理',
    'Pid': '0',
    'id': '659354849B9A44AA9E2477223DF68C96',
    'children': [
      {
        'Id': '4DDA93E00CD34E4D812EC1A9E10AA883',
        'Name': '教学素材',
        'Pid': '659354849B9A44AA9E2477223DF68C96',
        'id': '4DDA93E00CD34E4D812EC1A9E10AA883',
        'children': [
          {
            'Id': '6CD3A04CFBC1419F81E1A66BDC81F177',
            'Name': '修改',
            'Pid': '4DDA93E00CD34E4D812EC1A9E10AA883',
            'id': '6CD3A04CFBC1419F81E1A66BDC81F177'
          },
          {
            'Id': 'B93352644544420782337BC41C0534A9',
            'Name': '添加',
            'Pid': '4DDA93E00CD34E4D812EC1A9E10AA883',
            'id': 'B93352644544420782337BC41C0534A9'
          }
        ]
      },
      {
        'Id': '68F89C4E368048E699F3D7EDD69A86A7',
        'Name': '测试试题',
        'Pid': '659354849B9A44AA9E2477223DF68C96',
        'id': '68F89C4E368048E699F3D7EDD69A86A7'
      },
      {
        'Id': 'CF31D0CA5BC34765A61909B296E470C6',
        'Name': '问题任务',
        'Pid': '659354849B9A44AA9E2477223DF68C96',
        'id': 'CF31D0CA5BC34765A61909B296E470C6'
      }
    ]
  },
  {
    'Id': 'B85EAE5FAAC64790AC62FA288E87AEAC',
    'Name': '基础数据管理',
    'Pid': '0',
    'id': 'B85EAE5FAAC64790AC62FA288E87AEAC',
    'children': [
      {
        'Id': '134D7E54B9D041539940D29E24592DF4',
        'Name': '专业设置',
        'Pid': 'B85EAE5FAAC64790AC62FA288E87AEAC',
        'id': '134D7E54B9D041539940D29E24592DF4'
      },
      {
        'Id': '2314DE1399484596A7440326E07590DB',
        'Name': '专业管理',
        'Pid': 'B85EAE5FAAC64790AC62FA288E87AEAC',
        'id': '2314DE1399484596A7440326E07590DB'
      }
    ]
  }
]

```
怎么转换成（扁平化）如下格式：
```
[
  {
    'Id': '1',
    'Name': '教学素材管理',
    'Pid': '0',
    'id': '659354849B9A44AA9E2477223DF68C96'
  },
  {
    'Id': '4DDA93E00CD34E4D812EC1A9E10AA883',
    'Name': '教学素材',
    'Pid': '659354849B9A44AA9E2477223DF68C96',
    'id': '4DDA93E00CD34E4D812EC1A9E10AA883'
  },
  {
    'Id': '6CD3A04CFBC1419F81E1A66BDC81F177',
    'Name': '修改',
    'Pid': '4DDA93E00CD34E4D812EC1A9E10AA883',
    'id': '6CD3A04CFBC1419F81E1A66BDC81F177'
  },
  {
    'Id': 'B93352644544420782337BC41C0534A9',
    'Name': '添加',
    'Pid': '4DDA93E00CD34E4D812EC1A9E10AA883',
    'id': 'B93352644544420782337BC41C0534A9'
  },
  {
    'Id': '68F89C4E368048E699F3D7EDD69A86A7',
    'Name': '测试试题',
    'Pid': '659354849B9A44AA9E2477223DF68C96',
    'id': '68F89C4E368048E699F3D7EDD69A86A7'
  },
  {
    'Id': 'CF31D0CA5BC34765A61909B296E470C6',
    'Name': '问题任务',
    'Pid': '659354849B9A44AA9E2477223DF68C96',
    'id': 'CF31D0CA5BC34765A61909B296E470C6'
  },
  {
    'Id': 'B85EAE5FAAC64790AC62FA288E87AEAC',
    'Name': '基础数据管理',
    'Pid': '0',
    'id': 'B85EAE5FAAC64790AC62FA288E87AEAC'
  },
  {
    'Id': '134D7E54B9D041539940D29E24592DF4',
    'Name': '专业设置',
    'Pid': 'B85EAE5FAAC64790AC62FA288E87AEAC',
    'id': '134D7E54B9D041539940D29E24592DF4'
  },
  {
    'Id': '2314DE1399484596A7440326E07590DB',
    'Name': '专业管理',
    'Pid': 'B85EAE5FAAC64790AC62FA288E87AEAC',
    'id': '2314DE1399484596A7440326E07590DB'
  }
]

```

Output:
供参考
```
function flatten (data) {
  return data.reduce((arr, {Id, Name, Pid, id, children = []}) =>
    arr.concat([{Id, Name, Pid, id}], flatten(children)), [])
}
```


Instruction:
正则表达式中 (?:)到底是什么意思
例子：
1.(w)((?=111)(1))+ 为什么=重复4次以上的字母数字，则匹配其剩下最后2位之前的部分
2."abcabc".match(/(?:a)(b).*1/g);   结果为 ["abcab"]

Output:
先回答问题题目的`(?:)`意思
这个代表不捕获分组
比较`(X)`和`(?:X)`，前者是捕获分组，后者不捕获，区别在于正则表达式匹配输入字符串之后所获得的匹配的（数）组当中没有`(?:X)`匹配的部分；
比如
```
var m = "abcabc".match(/(?:a)(b)(c)/)
//结果 ["abc", "b", "c"]
// m[0] 是/(?:a)(b)(c)/匹配到的整个字符串，这里包括了a
// m[1] 是捕获组1，即(b)匹配的子字符串substring or sub sequence
// m[2] 是捕获组2，即(c)匹配到的
```
如果这样
```
var m = "abcabc".match(/(a)(b)(c)/)
//结果 ["abc", "a", "b", "c"]
```
第一小题应该是这样的正则表达式
```
/(\w)((?=111)(1))+/
```
这里有一个知识点`zero-width positive lookahead`，零宽断言，正向前瞻（反正我记不住
意思是`(?=X)`匹配某个位置，右边（正向）是X，它不真正匹配捕获子串。
看几个匹配的测试例子
```
/(\w)((?=111)(1))+/.test("1111") // true
/(\w)((?=111)(1))+/.test("2222") // false
```
匹配重复4次以上的字母或数字可以这么写
```
/(\w)(?=\1{3,})/.test("AAAAAAAA") //true
/(\w)(?=\1{3,})/.test("AAAB") //false
```


Instruction:
mysql like 模糊搜索
问题一   name like '%联想%'  是全表搜索，如何使用索引来优化查询？
```
            有推荐用mysql 函数  locate/instr

            explain SELECT * FROM product where name like '%联想%';
            explain SELECT * FROM product where LOCATE('联想',name)>0 ;
            explain SELECT * FROM product where instr(name, '联想')>0 ;

            看着解释没什么区别啊，都是用了全表搜索

```
问题二   name like '%联想%'  是匹配的 XX联想XX。如何匹配 XX联XX XX想XX，现在是把搜索内容拆分了，name like '%联%' or name like '%想%'

Output:
第一个问题: 如果左边有通配符`%`的话,是无法走索引的,只能走全表扫描,最好的结果是`select`中只查询索引覆盖的列,比如假设只有`name`s列带索引,`select name from product where name like '%联想%'`,走的是扫描整个索引,比全表扫描要快一点,但是应用很局限,一般不会只查被索引覆盖的列啊.
第二个问题: 这种分词查询简单点就用全文索引, 如果表超级大,性能差的话, 上搜索引擎,比如`solr`,`Lucene`、`Sphinx`.


Instruction:
webpack 生产环境打包出的 map 文件有什么用
发现打包出的map文件体积比较大，想知道这个文件有什么用处，还有是否可以不打包生成这些文件？

Output:
打包后产生后缀名为.map的文件是由于配置了sourcemap选项生成的，打包后的文件不容易找到出bug对应的源代码的位置，sourcemap就是来帮我们解决这个问题的，具体配置可以查看官网devtool配置
或者其它的webpack sourcemap 选项多种模式的一些解释


Instruction:
Vue 点击切换颜色
第一次点击span 字体变颜色，再次点击恢复原来颜色，做成选中的效果
代码：
```
<li><span>健康医疗</span><span>生活服务</span><span>旅游</span><span>金融</span></li>
<li><span>信息安全</span><span>广告营销</span><span>数据服务</span><span>智能硬化</span></li>
<li><span>文化娱乐</span><span>网络招聘</span><span>分类信息</span><span>电子商务</span></li>
<li><span>移动互联网</span><span>企业服务</span><span>社交网络</span></li>

```
我是小白>_<   大神们，这个怎么弄？？？
。。。有木有选择span标签进行判断的方法>_<。。。

Output:
修改后：
 <ul v-for="(item,index) in lidata">
```
 <li><span :class="{active:index==isActive}"  @click="changeClass(index)"> {{item.name}}
</span></li>
```
</ul>
data(){
```
    return{
    isActive:-1，
    lidata:[
    {index:0,name:'健康医疗'},
    {index:1,name:'生活服务'},
    {index:2,name:'旅游'},
    {index:3,name:'金融'},
    {index:4,name:'信息安全'},
    {index:5,name:'广告营销'},
    {index:6,name:'数据服务'},
    {index:7,name:'智能硬化'},
    {index:8,name:'文化娱乐'},
    {index:9,name:'网络招聘'},
    {index:10,name:'分类信息'},
    {index:11,name:'电子商务'},
    {index:12,name:'移动互联网'},
    {index:13,name:'企业服务'},
    {index:14,name:'社交网络'}
    ]
    }
   }

changeClass(index){
 this.isActive=index;
},

实现多选：

 <ul v-for="(item,index) in lidata">
<li><span :class="{active:item.checked}"  @click="changeClass(item)"> {{item.name}}</span>
 </li>
```
</ul>
changeClass(item){
```
 if(typeof item.checked=='undefined'){
    this.$set(item,"checked",true)
 }else{
   item.checked=!item.checked
 }
},

限制三次：
  changeClass(item){
    let a=document.getElementsByClassName('active');
   if(typeof item.checked=='undefined'){
     if(a.length<=3){
      this.$set(item,"checked",true);
   }else{
    alert(2222222222)
   }
  }else{
   item.checked=!item.checked;
  }
},
```


Instruction:
如何部署nodejs应用到服务器？
事情是这样的，我是做前端开发的，最近学习nodejs并做了些练手项目。想把他们部署到服务器上，对linux和服务器部署相关知识了解较少。通过google得到大致思路如下：购买一台vps安装linux系统，安装nodejs和mongodb,用Nginx做端口映射，用pm2做进程监控管理。发现这些操作全是命令行，而且感觉好复杂，有好多不了解的知识。我只是单纯的想把项目部署到服务器，之前用php开发的程序的时候，就购买一个虚拟主机，然后ftp上传一下程序就好了，大家部署nodejs应用都是如何操作的，有没有啥简单的方法？

Output:
nodejs服务器部署教程一
nodejs服务器部署教程二，把vue项目部署到线上
nodejs服务器部署教程三，部署基于node+vue+mongodb的项目
nodejs服务器部署教程四，部署ssl证书，升级为https


Instruction:
antd Table 如何根据某一行的数据控制行tr的样式
如果
```
[{nmae:xx,repeat:1},{nmae:xx,repeat:-1},{nmae:xx,repeat:1},{nmae:xx,repeat:-1},{nmae:xx,repeat:1}]
```
数据结构类似与上面，现在通过antd Tabel组件中的columns如何只能改变某一个单元格的式样。请问一下如何设置当repeat为1的时候改变整行tr背景？

Output:
以下代码供参考
```
<Table columns={configColumns} rowClassName={(record, index) => index % 2  === 0 ? styles.classname : ''} dataSource={data}/>

```


Instruction:
java8 stream根据下标分组
我有个list想要按照奇偶下标生成两组list，只利用java8的stream可以做到吗？
比如[1,3,5,7,9]，按照奇偶下标分成[1,5,9]和[3,7],但是stream似乎无法获取下标，所以试了半天也不行。
另外，java8的stream以后可以完全取代for循环吗？我感觉有些复杂的逻辑拿stream折腾不是一个好的选择

Output:
这个要从为什么`java8`会弄出`stream`这种循环方式说起了
以前的`for`循环是属于外部循环，由调用者自己显式的取出每个元素加以处理，尤其是并行处理时，非常痛苦
而stream是属于内部循环，你可以无需关心它是如何循环的，要是并行的时候如何优化，这些你都可以不管，你只需要简简单单告诉他需要做什么处理即可
举个简单的例子：
地上有很多乒乓球，爸爸要让你儿子捡起来放到盒子里
如果是外部循环，可能这种模式
爸爸：地上还有球么
儿子：有
爸爸：那把它捡起来放到盒子里，还有么？
儿子：有
爸爸：继续捡起来放到盒子里，还有么？
儿子：有
爸爸：接着捡起来放到盒子里，还有么？
儿子：没有了
爸爸：ok，收拾好了
如果是内部循环
爸爸：把地上的球捡起来全部放到盒子里
儿子：好，完成
例子可能很牵强，但是我们作为开发者，就是爸爸，只需要告诉儿子（`JDK`）把球放进盒子这个动作就好，具体儿子怎么放，一次一个手拿一个，还是一次每个手拿一个，由它自己来思考，不需要我们去指挥，我们只关注具体需要做的事就好
所以说stream是一种内部循环，你不需要去关注下标...关注下标的话，从某种意义上来说，还是外部循环的思想在处理了，当然您的问题中，明确就是要求是关注下标了，貌似好像`stream`是没法写似的
其实不然，写肯定能写的，只是说换一种方式而已，不把下标当成循环用的元素，而是把它与具体需要循环的数字绑定起来，写出来差不多是这个样子
```
public static void main(String[] args) {
        List<Integer> list = Arrays.asList(1,3,5,7,9);

        Map<Boolean, List<Integer>> collect = IntStream.rangeClosed(1, list.size())
                                                      .boxed()
                                                      // 把数字和下标绑定起来
                                                      .map(i -> mapToEntry(i, list.get(i-1)))
                                                      // 按照下标是否能被2整除进行分组
                                                      .collect(Collectors.partitioningBy(simpleEntry -> Integer.parseInt(simpleEntry.getKey().toString()) % 2 == 0,
                                                               Collectors.mapping(Map.Entry::getValue, Collectors.toList())));
        // 偶数列表 3,9
        List<Integer> evenList = collect.get(Boolean.TRUE);
        // 奇数列表 1,5,7
        List<Integer> oddList = collect.get(Boolean.FALSE);
    }

    private static AbstractMap.SimpleEntry<Integer, Integer> mapToEntry(Integer i, Integer integer) {
        return new AbstractMap.SimpleEntry(i, integer);
    }
```


Instruction:
如何实现PHP版本共存?
## 描述
由于一个服务器多至多个项目.  有些项目对php版本有不一样的需求 如何实现每个项目对应指定的PHP版本?
## 服务器环境
- ubuntu
- Nginx
- MySQL
- php.x (N个)
ubuntu
Nginx
MySQL
php.x (N个)
## 实现效果
www.demo.com -> 对应PHP7.x
a.demo.com   -> 对应PHP5.x
b.demo.com   -> 对应PHP4.x

Output:
配置下让Nginx监听不同的端口或文件就可以实现了。大体思路如下：
因为Nginx是通过PHP-FastCGI与PHP交互的，然后，PHP-FastCGI运行后会通过文件、或本地端口两种方式进行监听，在Nginx中配置相应的FastCGI监听端口或文件即实现Nginx请求对PHP的解释。因此，Nginx中根据需求配置调用不同的PHP-FastCGI端口或文件，便实现不同版本PHP共存了。
修改php-fpm.conf，监听端口：
```
<value name="listen_address">127.0.0.1:8001</value>
```
或者
```
<value name="listen_address">/path/to/unix/socket</value>
```
修改好后，配置好php.ini相关的参数后重启一下
然后，再修改Nginx
```
location ~ .*.(php|php5)?$
    {
      fastcgi_pass 127.0.0.1:8001;
      fastcgi_index index.php;
      include fcgi.conf;
    }
```
就可以通过监听不同端口来实现，不同版本的php-fpm调用了。


Instruction:
一道原生JS的问题
```
    <div>
        <input/>
        <span></span>
    </div>

    function nodeToFragme(node){
            var flag = document.createDocumentFragment();
            var child;

            while(child = node.firstChild ){
                flag.appendChild(child);    //请问为什么能够每次插入不同的节点？
            }

            return flag ;
        }
```
为什么每次appendChild都能够插入不同的节点？不应该每次都是第一个节点么？

Output:
appendChild 成功后，会把节点从原来的节点位置移除；
当进入 while 循环的下次执行 (child=node.firstChild) 时, 这里面运算的 firstChild 已经变成了原先移除的下一个节点;
直到 node 中再也没有节点时，(child=node.firstChild) 的返回值会为「false」,这时循环就结束了，appendChild 也完成了。
附注：
https://developer.mozilla.org...


Instruction:
laravel中如何区分get数据和post数据
可能有时候会碰到这样的场景：
有一个post提交请求，请求地址为:xxx?id=10，提交的post数据为:id=20
而在控制器中，我要同时得到get和post中数据
get中的id为10，而post中的id为20
这两个id分别要如何取出来？

Output:
```
// 路由
route::any('input', 'YourController@input')

// 测试方法
public function input(Request $request)
{
    // get方法
    echo $request->get('id');
    // get方法
    echo $request->query('id');
    // get方法
    echo $request->query->get('id');
    // 有post会覆盖get improve by amu(您)
    echo $request->id;
    // 有post会覆盖get
    echo $request->input('id');
}
```
通过测试，一般情况下，如果post／get键名一样，post过来的数据，$request->xxx和$request->input('xxx')会覆盖掉get的取值。


Instruction:
www.baidu.com为什么属于二级域名？
baidu.com属于一级域名？
www.baidu.com属于二级域名？
www.google.com.hk属于三级域名？他的顶级域名是.hk还是.com呀？
tieba.baidu.com前面为什么没有www？
www.zhaopin.longfor.com前面为啥加了www，也是属于三级域名？

Output:
.com —— 根域（.com.cn .net.cn 等也属于根域）
baidu.com —— 顶级域名、一级域名
xxx.baidu.com —— 二级域名
www（World Wide Web）俗称万维网，只是大家“默认”的域名前缀，但它并不是必须的。


Instruction:
javascript字符串提取数字？
需求：要把一串字符拆分成有用的信息，字符串的格式有两种情形
1、abc10
2、123abc100
字符与数字长度不固定，提取后的结果应为:
1、['abc','10']
2、['123','abc','100']
补充需求
输出结果
1、['abc','10']
2、['abc','123','100']
这样使用的时候更方便。
当abc为某个特定的字符时，字符前面的数字与本身合并一起。如：1ab23=>['1ab','23']

Output:
```
/**
 * @param {string} str
 * @param {string|string[]} [keywords]
 * @returns {string}
 */
function match (str, keywords) {
  str = String(str)
  var ks = ''
  if (Array.isArray(keywords)) {
    ks = keywords.map(k => '\\d+' + k).join('|') + '|'
  } else if (typeof keywords === 'string') {
    ks = `\\d+${keywords}|`
  }
  var checker = new RegExp(`${ks}\\d+|\\D+`, 'g')
  return str.match(checker).sort((a, b) => !isNaN(a * 1) && isNaN(b * 1) ? 1 : -1)
}

console.log(match('123abc100')) // [ 'abc', '123', '100' ]
console.log(match('1ab23', 'ab')) // [ '1ab', '23' ]
console.log(match('ab23', 'ab')) // [ 'ab', '23' ]
console.log(match('1ab23cd244gh3', ['ab', 'cd'])) // [ '1ab', '23cd', 'gh', '244', '3' ]
```


Instruction:
与php相比，python在采集方面有哪些优势？
最新需要做采集功能，据说用python来做会比php直接用curl来写方便很多，请问主要是有哪些优势？
如果是有特定的类库的话，PHP有类似的类库可以代替么？
python大概看过hello word之类，感觉上手也算简单，如果为了采集单开一个项目用python来写值不值？

Output:
会啥用啥，
- python 和 php 数据采集方面的各自特点
- PHP或者python进行数据采集和分析，有什么比较成熟的框架？

python 和 php 数据采集方面的各自特点
PHP或者python进行数据采集和分析，有什么比较成熟的框架？
不过你有空可以深入了解了解`python`，毕竟人生苦短，不玩`python`可惜了


Instruction:
python set中的对象如何去重
定义Person对象
class Person():
```
def __init__(self,name,number):
    self.name=name
    self.number=number

```
person1=Person('yms',('123456','123'))
person2=Person('yms',('123456','123'))
将两个对象都放到set里面
set([person1,person2])
我得出的结果set里面含有2个对象，但是明显这俩个对象一样的，请问怎么去重呢?注意一下('123456','123')是个元组不是普通字符串

Output:
你需要为这个类定义`__eq__`、`__ne__`、`__hash__`这三个函数，缺一不可：
```
class Person(object):
    def __init__(self, name, number):
        self.name = name
        self.number = number

    def __eq__(self, other):
        if isinstance(other, Person):
            return ((self.name == other.name) and (self.number == other.number))
        else:
            return False

    def __ne__(self, other):
        return (not self.__eq__(other))

    def __hash__(self):
        return hash(self.name) + hash(self.number)

p1 = Person('yms', ('123456','123'))
p2 = Person('yms', ('123456','123'))
print(set([p1, p2]))

```
由于你说`number`是元组，所以我就直接对其使用`hash`函数了。这个`hash`函数是随便写的，你自己根据实际情况调整。


Instruction:
Vue img使用@路径报错，import中使用正常
1.webpack.base代码：
```
 extensions: ['.js', '.vue', '.json'],
 alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src')
    }
```
2.img报错代码：
```
       <div class="m-icon-head">
                <img src="@/assets/head.png" alt="">
            </div>
```
3.import正常代码：
index.js
import manageJob from '@/pages/jobhunter/Job/manage-job';
import loginSelect from '@/components/index/login_select';
import phoneLogin from '@/components/index/phone_login';
import passwordLogin from '@/components/index/password_login';
组件：
```
import mHeader from '@/components/header/header';
import mContent from './mine-content';

```
错误提示：GET http://localhost:8880/@/asset... 404 (Not Found)
为啥会这样？？？

Output:
- 因为`@`是webpack中定义的别名，在JS中可以使用此别名，代替`resolve('src')`指向的路径
- `import xxxxxx`是JS语法，所以可以使用`@`别名
- 而`<img src="@/assets/head.png" alt="">`标签中，src作为一个属性值，其值是字符串并非是JS，所以不能用`@`别名
- 参见https://github.com/vuejs/vue-...
- 这个方法我还没试验过，不过据上面的Issue所说，`url`地址前加`~`标记可以让解析器将地址中的别名解析出来
- Issue中提出的方案是：`<img src="~@/assets/head.png" alt="">`

因为`@`是webpack中定义的别名，在JS中可以使用此别名，代替`resolve('src')`指向的路径
`import xxxxxx`是JS语法，所以可以使用`@`别名
而`<img src="@/assets/head.png" alt="">`标签中，src作为一个属性值，其值是字符串并非是JS，所以不能用`@`别名
参见https://github.com/vuejs/vue-...
这个方法我还没试验过，不过据上面的Issue所说，`url`地址前加`~`标记可以让解析器将地址中的别名解析出来
Issue中提出的方案是：`<img src="~@/assets/head.png" alt="">`


Instruction:
Vue 怎么做scrolltop 的滚动动画
做个了需求是点击右侧的item 左边滚动到队员的位置。。
请问怎么可以在滚的时候加一些过度效果。。下面是我的代码
```
scrollToEl(name){
      let scrollPosition=0
      this.playerlist.forEach((item,index)=>{
        if(item.players_name==name){
          scrollPosition=index
        }
      })
      // this.$refs.index[scrollPosition].scrollIntoView()
      let jump=document.querySelectorAll('.pick-right-item')
      let total=jump[scrollPosition].offsetTop
      console.log(total);
      // Chrome
      document.body.scrollTop = total
    }
```
这样可以直接滚动到制定位置，但是在vue中怎么做scroll的滚动动画。。

Output: 非常遗憾的告诉你, scrollTop是js属性, 不是css属性, 所以无法使用transition或者animate去加动画。只能借助一些动画类库, 或者自己编写一个scroll滚动的效果.


Instruction:
AJAX发送POST请求，请求提交后Method从POST变成GET
代码如下：
```
$.ajax({
    type: "post",
    dataType: "json",
    url: "http://xxx",
    data: {'xxx':'xxx'},
    success: function(returnData) {}
})
```
url 是经过 nginx 重定向的 http 地址，原地址为 https 地址
AJAX 发送的是 POST 请求，请求提交后 chrome 调试工具中看到的请求 Method 从 POST 变成 GET

Output:
服务器如果返回`301`或者`302`状态码，所有请求方法都会切换成`GET`头部的`location`
如果要保证重定向后的请求方法，需要在服务端返回`307`(临时)或者`308`(永久)状态码，这两个状态码不会更改原请求方法（需要客户端支持）


Instruction:
怎么使用java8的stream合并HashMap的所有value为一个List，value的类型为Stack
怎么使用java8的stream合并HashMap的所有value为一个List，value的类型为Stack
`map = new HashMap<String, Stack<String>>;`
要求把map的value合并成`List<String>`，并使用java8的stream方法操作
Stack是java自带的容器，在这里完全可以看成是ArrayList

Output:
在写`stream`的时候，一定要心里非常清楚当前`stream`中到底是什么元素，这样你才能结合`map`,`filter`,`peek`等方法来转化你的数据
首先开始的时候还没有`stream`，数据源是一个`map`，把`map`转化为`stream`，我还是建议使用`entryset`的方式
```
// 此时stream里的元素是Map.Entry<String, Stack<String>>
map.entrySet().stream()
```
您是想要`Entry`里面的`value`，也就是`Stack<String>`，那就要把`Map.Entry<String, Stack<String>>`转化为`Stack<String>`，那这里肯定要用`map`操作啦
```
// 此时stream里的元素是Stack<String>
map.entrySet().stream().map(Map.Entry::getValue)
```
拿到了`Stack<String>`的`stream`还不够，看您的意思，是想取出`Stack`中的一个`String`的属性或者一个计算出来的值，那就是要把`Stack`转化为`String`，根据您的信息，这个`Stack`其实就是`java.util.Stack`,那这个也相当于是一个集合了，集合都会有都可以变成`stream`的，由于需要集合里的`string`对象，那就相当于要把这个`Stack`集合压平，压平的话，那就肯定要用`flatmap`啦
```
List<String> collect = map.entrySet().stream()
                                     .map(Map.Entry::getValue)
                                     .flatmap(Stack::stream)
                                     .collect(Collectors.toList());
```
这样就完整啦，当然`map`中我用的是方法引用，觉得这么写更直观一点，可以看得到当前`stream`里到底是啥类型元素，你也可以写成`lamdba`的形式啦


Instruction:
javascript中forEach,map,for of的应用场景与效率？
这裡讨论的是lodash版本的_.forEach和_.map，原生ES6 javascript的for of这三种方法。
目前我的使用思路是，如果是要遍历并改变Array并回传一个新的Array，那我就选择_.map。
至于for of 和_.forEach，我用了以下的方式测试效能:
forEach
```
let arr = [];
for(var i = 0 ; i<50000000 ; i++){
    arr.push(i);
}
var start = Date.now();
let sum = 0;
_.forEach(arr,(a)=>{
    sum += a;
});
var end = Date.now();
console.log('总数:'+sum,'毫秒数:'+(end-start));
//总数:1249999975000000 毫秒数:1530

```
for of
```
let arr = [];
for(var i = 0 ; i<50000000 ; i++){
  arr.push(i);
}
var start = Date.now();
let sum = 0;
for(let a of arr){
  sum += a;
}
var end = Date.now();
console.log('总数:'+sum,'毫秒数:'+(end-start));
//总数:1249999975000000 毫秒数:575
```
for of速度大胜_.forEach，所以在遍历Array时，我现在会使用for of而不是_.forEach。
我想问的是，这样的思路有问题吗？
_.forEach要在什麽时候使用呢？
我自己想到的_.forEach使用时机是遍历Object时，javascript原生的话应该是和for in比较。

Output:
有问题。
JS中不存在传统意义上的数组，静态语言中，数组是一段连续的内存，每一个元素都是固定字节长度的，所以通过下标可以取地址，快速找到引用值。
但是JS中的数组是对象，这导致你遍历数组时，其实是在遍历对象的key(静态语言中的HashMap)，而JS中对数组类型的遍历做了特殊处理，所以foreach遍历不到非数值类型的键，这也解释了为什么foreach比forin慢，因为多了一层判断。
但是如果你使用forin遍历数组，会带出非数字键：
```
var x = [1, 2, 3];
x.a = 'a';
x.b = 'b';
x.c = 'c';
for (let k in x)
  console.log(k)

```
即使你不会这么干，谁知道你的同伴们呢？第三方框架中呢？自定义原型链呢？
结论：ES5中遍历数组还是老老实实的foreach或者for循环.
你的例子中使用的是ES6，由于Array类型实现了Iterator接口，所以forof是安全的，但是如果通过babel编译成es5，我猜想由于需要引入Iterator的pollyfill，效率不可能比foreach高。


Instruction:
这种switch语句块中default放前面的情况怎么走
```
int c,i;
for (int i = 1; i < 3; ++i)
{
    switch (i)
    {
        default: c+=i;
        case 2: c++;break;
        case 4: c+=2;break;
    }
}
printf("%d\n", c);

```
这个代码为什么会等于3啊？这里面不是default第一次i为1的时候走default: c+=i;，第二次i等于2就走case 2: c++;break;然后就结束，最后输出c=2吗？为什么是3呢？

Output:
首先明确一下switch中的一些注意点：
## 1.
`switch` 语句体由一系列 `case` 标签和一个可选 `default` 标签组成。 `case` 语句中的两个常量表达式的计算结果不能为同一个值。 `default` 标签只能出现一次。 标记语句不是语法要求，但如果它们不存在，`switch` 语句是无意义的。默认语句（即`default`标签）无需显示在末尾；它可以显示在 switch 语句体的任何位置。 `case` 或 `default` 标签只能显示在 `switch` 语句内。
摘自：Microsoft Visual Studio 2015 c++ Switch语句官方文档
## 2.
上述所说的`case`和`default`本身就是标签，就是告诉编译器从满足这个标签开始向后执行，之后不会再判断其他标签的正确性，直到`break`语句或者`switch`语句的作用域结束。
## For this problem
STEP 1 :当`i=1`时，由于`i!=2&&i!=4`故从`default`标签后开始执行，此时执行语句`c+=i;`(我们现在就假设编译器帮你把c初始化为0，要知道并不是所有的编译器都这么友好)执行后c的值为1；
STEP 2：综合上述1，2可知由于此时没有碰到任何`break`语句也没有到`switch`语句的作用域结束（因为这个`default`语句是放在第一个的）所以它接着向后执行`case 2`后的语句（此时编译器已经不看满不满足`case`标签了）此时执行语句`c++`;执行后c的值为2；遇到`break`语句跳出`switch`语句。
STEP 3:当`i=2`时，由于i满足`case 2`的情况，所以直接从`case 2`便签后的语句开始执行，此时执行语句`c++`,执行后c的值为3，遇到`break`语句跳出`switch`语句。
STEP 4:当i=3时，跳出`for`循环输出c=3；
（上述过程为本人用 Visual Studio 2015单步调试并结合资料得出的结论）


Instruction:
if语句如何判断中文
```
<?php if (96 < ($this->category_info['id']) && 108 > ($this->category_info['id'])) { ?>
标题1
<?php } else { ?>
标题2
<?php } ?>
```
通过以上代码可以定位如果id范围在97-107之间就显示标题1的内容，否则返回2
怎么修改可以当搜索词$this->search这个变量 包含"价格"这个词的时候显示标题1
否则返回标题2

Output:
使用 strpos
```
int strpos ( string $haystack , string $needle [, int $offset = 0 ] )
```
```
strpos($this->search, '价格') === false //说明不包含价格
```


Instruction:
webpack中配置文件的module中的rules和use什么关系
module有没有rules？rules中为什么还有loader，use不是也是加载loader的吗？

Output:
rules是一个数组，指定多个Rule，Rule当中的loader是use中loader的简写，
官方的文档的话语能很清楚的说明此疑问(建议看看官方documentation，链接: https://webpack.js.org/config... )：
```
Rule.loader is a shortcut to Rule.use: [ { loader } ]

```


Instruction:
git 分支的作用
如果有A和B两个人同时在开发，通常一个feature或者bugfix会建一个新分支再合并进develop分支，那如果A和B直接在develop上（pull下代码再push，有冲突再解决）不也可以开发吗，如果考虑回滚，在develop上不也可以reset或者revert吗？
感觉同一个分支反而更简单，忽然不知道建新的feature或bugfix分支到底有什么好处？

Output:
如果你在开发新功能的时候，急需修改一个 bug 怎么办？那你要把你新功能不稳定的代码也部署了？显然不可能。所以要有 feature 分支来保证新功能开发的差不多的时候才能进入主分支的代码。那你的 bug 可以随时修改。
那么，如果你有两个 bug 是先后发现的，但是一个 bug 改好了需要上线，另一个还在改，怎么办？你把改到一般的 bug 部署上线么？显然不可能。所以你需要一个 bugfix 分支，来确保 bug 改好了代码才能回到主分支。
最后，你在开发一个新功能，到一半。突然，产品经理跟你说，我这有个新功能，明天上线！！怎么办？你要把产品暴打一顿辞职还是明天上线新功能？那你第一个一半的新功能代码怎么办？扔了？还是半成品部署上线？所以你需要多个 feature 分支来开发不同的新功能。
怎么样，主分支健壮了吧？随时随地可以部署了吧？


Instruction:
npm run dev 启动项目后报三个警告，百度查了一下也看不明白，求指点。
warning  in ./~/vue-style-loader/lib/addStylesClient.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
-
E:WebProjectUFAPPDYJJnode_modulesvue-style-loaderlibaddStylesClient.js
`Used by 4 module(s), i. e.
E:\WebProject\UFAPP\DYJJ\node_modules\vue-style-loader\index.js!E:\WebProject\UFAPP\DYJJ\node_modules\css-loader\index.js?{"minimize":false,"sourceMap":false}!E:\WebProject\UFAPP\DYJJ\node_modules\vue-loader\lib\style-compiler\index.js?{"vue":true,"id":"data-v-f7c02f2c","scoped":false,"hasInlineConfig":false}!E:\WebProject\UFAPP\DYJJ\node_modules\vue-loader\lib\selector.js?type=styles&index=0!E:\WebProject\UFAPP\DYJJ\src\App.vue`

-
E:WebProjectufappDYJJnode_modulesvue-style-loaderlibaddStylesClient.js
`Used by 1 module(s), i. e.
E:\WebProject\UFAPP\DYJJ\node_modules\vue-style-loader\index.js!E:\WebProject\UFAPP\DYJJ\node_modules\css-loader\index.js??ref--4-1!E:\WebProject\ufapp\DYJJ\node_modules\.7.0.0@normalize.css\normalize.css
`

E:WebProjectUFAPPDYJJnode_modulesvue-style-loaderlibaddStylesClient.js
```
`Used by 4 module(s), i. e.
E:\WebProject\UFAPP\DYJJ\node_modules\vue-style-loader\index.js!E:\WebProject\UFAPP\DYJJ\node_modules\css-loader\index.js?{"minimize":false,"sourceMap":false}!E:\WebProject\UFAPP\DYJJ\node_modules\vue-loader\lib\style-compiler\index.js?{"vue":true,"id":"data-v-f7c02f2c","scoped":false,"hasInlineConfig":false}!E:\WebProject\UFAPP\DYJJ\node_modules\vue-loader\lib\selector.js?type=styles&index=0!E:\WebProject\UFAPP\DYJJ\src\App.vue`
```
E:WebProjectufappDYJJnode_modulesvue-style-loaderlibaddStylesClient.js
```
`Used by 1 module(s), i. e.
E:\WebProject\UFAPP\DYJJ\node_modules\vue-style-loader\index.js!E:\WebProject\UFAPP\DYJJ\node_modules\css-loader\index.js??ref--4-1!E:\WebProject\ufapp\DYJJ\node_modules\.7.0.0@normalize.css\normalize.css
`
```
warning  in ./~/css-loader/lib/css-base.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
-
E:WebProjectUFAPPDYJJnode_modulescss-loaderlibcss-base.js
`Used by 4 module(s), i. e.
E:\WebProject\UFAPP\DYJJ\node_modules\css-loader\index.js?{"minimize":false,"sourceMap":false}!E:\WebProject\UFAPP\DYJJ\node_modules\.2.0.0-rc.17@iview\dist\styles\iview.css`

-
E:WebProjectufappDYJJnode_modulescss-loaderlibcss-base.js
`Used by 1 module(s), i. e.
E:\WebProject\ufapp\DYJJ\node_modules\css-loader\index.js?{"minimize":false,"sourceMap":false}!E:\WebProject\ufapp\DYJJ\node_modules\.7.0.0@normalize.css\normalize.css
`

E:WebProjectUFAPPDYJJnode_modulescss-loaderlibcss-base.js
```
`Used by 4 module(s), i. e.
E:\WebProject\UFAPP\DYJJ\node_modules\css-loader\index.js?{"minimize":false,"sourceMap":false}!E:\WebProject\UFAPP\DYJJ\node_modules\.2.0.0-rc.17@iview\dist\styles\iview.css`
```
E:WebProjectufappDYJJnode_modulescss-loaderlibcss-base.js
```
`Used by 1 module(s), i. e.
E:\WebProject\ufapp\DYJJ\node_modules\css-loader\index.js?{"minimize":false,"sourceMap":false}!E:\WebProject\ufapp\DYJJ\node_modules\.7.0.0@normalize.css\normalize.css
`
```
warning  in ./~/vue-style-loader/lib/listToStyles.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
-
E:WebProjectUFAPPDYJJnode_modulesvue-style-loaderliblistToStyles.js
`Used by 1 module(s), i. e.
E:\WebProject\UFAPP\DYJJ\node_modules\vue-style-loader\lib\addStylesClient.js`

-
E:WebProjectufappDYJJnode_modulesvue-style-loaderliblistToStyles.js
`Used by 1 module(s), i. e.
E:\WebProject\ufapp\DYJJ\node_modules\vue-style-loader\lib\addStylesClient.js`

E:WebProjectUFAPPDYJJnode_modulesvue-style-loaderliblistToStyles.js
```
`Used by 1 module(s), i. e.
E:\WebProject\UFAPP\DYJJ\node_modules\vue-style-loader\lib\addStylesClient.js`
```
E:WebProjectufappDYJJnode_modulesvue-style-loaderliblistToStyles.js
```
`Used by 1 module(s), i. e.
E:\WebProject\ufapp\DYJJ\node_modules\vue-style-loader\lib\addStylesClient.js`
```

Output:
There are multiple modules with names that only differ in casing.
有多个模块同名仅大小写不同
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
这可能导致在一些文件系统中产生不是预期的行为
Use equal casing.
使用唯一的写法
猜测是因为你的文件名和引用不一致，举个例，文件名是App.js，但是你引用的时候是写的app.js


Instruction:
React 如何监听路由变化重新渲染组件
```
// route.js
<Router>
  <Switch>
    <Route path="/" component={NewsList} />
    <Route path="/new" component={NewsList} />
    <Route path="/show" component={NewsList} />
    <Route path="/ask" component={NewsList} />
    <Route path="/jobs" component={NewsList} />
  </Switch>
</Router>
```
```
class NewsList extends Component {
  componentWillMount () {
    const type = this.props.location.pathname.replace('/', '') || 'top'
    this.props.dispatch(fetchListData(type))
  }

  render () {
    ...
  }
}
```
react: v15.6.1
react-router: v4.1.1
部分代码如上，现在的问题是切换路由时，组件并不会重新渲染。请问如何解决？

Output:
为什么需要重新渲染组件？实质上，你想要的只是当路由变化，请求对应路由的数据而已。
那么考虑一下React组件的生命周期钩子。第一次加载时:
```
"constructor"
"componentWillMount"
"render"
"componentDidMount"
```
当组件的props发生改变时，组件更新，会调用如下的生命周期钩子
```
"componentWillReceiveProps"
"shouldComponentUpdate"
"componentWillUpdate"
"render"
"componentDidUpdate"
```
当路由变化时，即组件的props发生了变化，会调用componentWillReceiveProps等生命周期钩子
### 那我们所需要做的只是： 当路由改变时，根据路由，也去请求一下数据就OK了，于是乎:
```
class NewsList extends Component {
  componentDidMount () {
     this.fetchData(this.props.location);
  }

  fetchData(location) {
    const type = location.pathname.replace('/', '') || 'top'
    this.props.dispatch(fetchListData(type))
  }

  componentWillReceiveProps(nextProps) {
     if (nextProps.location.pathname != this.props.location.pathname) {
         this.fetchData(nextProps.location);
     }
  }

  render () {
    ...
  }
}
```


Instruction:
Vue.prototype的问题
我用Vue在main.js中创建
```
Vue.prototype.a = 1;  这个全局的变量后；
```
在组件a中使用
```
console.log(this.a);     // => 1
this.a = 2;
```
然后从a跳到b后；
```
console.log(this.a);
```
还是1，不是2，为什么？ 怎么修改这种全局的变量啊？还是说用其他的方法设置和修改全局的变量或对象？

Output:
这个不是全局变量，而是原型。
因为每一次跳转到新的Vue页面，都是一个独立的Vue实例，实例中`this.a`从`Vue.prototype.a`而来，所以仍然是1。
如果需要设置全局变量，在`main.js`中，Vue实例化的代码里添加
```
new Vue({
    ...
    data() {
        return {
            ...,
            a: 1
            ...
        };
    },
    ...
});
```
其他所有组件中通过`$root.a`可访问此变量。


Instruction:
数据库如何判断一条数据是否被修改?
A ,B同时在一页面上访问一组数据, A针对其中一条数据做了修改. B的页面没有刷新,所以B看见的信息是在A修改之前的,这时候B也要修改这条数据. 我如何做才能提醒B,这条数据已经被修改过.
看到一个办法,修改数据之前根据这条数据最后修改的时间先将这条数据查出来(select * from xxx where updatetime = xxx and id= xxx),如果查不到说明修改过,查到了说明没有修改.
我想问问有没有更好的办法?

Output:
我记得hibernate中乐观锁用的是版本号字段实现的，每次更新成功后时候版本号字段的值加1
在更新前，先检查数据库中的版本号和页面中保存的版本号是否相同，如果版本号变大，提示用户在编辑期间已有其他用户修改了数据。
当然也可以用悲观锁，进入页面的时候使用的select ... for update锁定记录，这时候其他用户就不能同时编辑锁定的记录了。


Instruction:
关于NumPy数组操作的问题
```
['000001_2017-03-17.csv', '000001_2017-03-20.csv',
 '000002_2017-03-21.csv', '000002_2017-03-22.csv',
 '000003_2017-03-23.csv', '000004_2017-03-24.csv']
```
numpy数组，总共有几个万个元素。现在想保留每个元素前面的编号000001之类的，并且去掉重复，只保留唯一的一个编号。结果应该是`['000001','000002','000003','000004']`
除了用for语句实现外，有没有更高效的办法？

Output:
写个NumPy的吧~
python3
```
>>> import numpy as np
>>> a = np.array(['000001_2017-03-17.csv', '000001_2017-03-20.csv',
 '000002_2017-03-21.csv', '000002_2017-03-22.csv',
 '000003_2017-03-23.csv', '000004_2017-03-24.csv'])

>>> b = np.unique(np.fromiter(map(lambda x:x.split('_')[0],a),'|S6'))
>>> b
array([b'000001', b'000002', b'000003', b'000004'],
      dtype='|S6')
```
还可以这样写：`np.frompyfunc`
`'|S6'`是以6个字节存储字符串
`'<U6'`是以6个`小端序Unicode字符`存储字符串
```
>>> b = np.array(np.unique(np.frompyfunc(lambda x:x[:6],1,1)(a)),dtype='<U6')
>>> b
array(['000001', '000002', '000003', '000004'],
      dtype='<U6')
```


Instruction:
webpack rebuild 速度太慢
工程的开发环境使用`express`+`webpack-dev-middleware`+`webpack-hot-middleware`，热加载+网页的错误提示开发起来很爽。
之前webpack每次启动的build速度都比较慢，后来参照这篇文章做了优化：
开发工具心得：如何 10 倍提高你的 Webpack 构建效率
加上dll plugin和happypack等之后，构建速度一下子由120s缩短到30s以内，随着工程越来越大（12万业务代码），rebuild速度越来越慢，现在一次rebuild速度大概得12s左右，实在是不能忍受。
哪位有这方面优化经验的，还请不吝赐教。

Output:
There are quite a few conditions that can contribute to slowness. From personal experience, I have found that the best way about trying to solve it, is to Measure, Profile, and Diagnose the issue first.
When you run webpack, instead run it with node and the following flags:
`node --inspect --debug-brk ./node_modules/webpack/bin/webpack.js`
Then open up Chrome Browser and goto `chrome://inspect` and click 'Open Dedicated Node Debugger'.
This will give you debug, breakpoint, and profiling features that you can use to measure and analyze what functions and areas of webpack are taking the longest. Once you have found that out, you can start to determine exactly what is causing the issue. Here is a great post (although a little outdated for the instructions), that shows how these steps might look like
If this doesn't help, then you can try other webpack build features like DllPlugin, using `devtool: 'eval-source-map'`, look for specific loaders that have caching features, as well as our new cache-loader.


Instruction:
golang的slice问题
```
s1 := []int{1, 2, 3, 4}
s2 := []int{-1, -2, -3}

fmt.Println(append(s1[:1], s2...))

fmt.Println(s1)
```
打印的结果：
```
[1 -1 -2 -3]
[1 -1 -2 -3]

```
弄不明白的是：为什么s1的值也变了？

Output:
因为append函数并不保障slice是否被修改，也就是说append可能会修改slice，也可能不修改，所以使用append有两个原则：
append函数调用后，应该使用返回值作为结果。
1. append函数调用后，不应该再使用实参传入的slice。
2. 所以使用append函数一般都是`s = append(s,elem1)`这种用法，也就是把结果重新赋值给原来的slice。
|append函数之所以有这个表现，是因为slice的底层存储依赖于底层数组（underlying array），用你的例子来给你说明一下：
你的s1初始化的值是`[]int{1, 2, 3, 4}`，它的len和cap都是4，所以它的底层数组是一个长度为4的数组`[4]int{1,2,3,4}`。
基于slice的特点，`s1[:1]`和s1是共享底层数组的，所以`s1[:1]`这个slice的改变是会影响到underlying array的。

> If it has sufficient capacity, the destination is resliced to accommodate the new elements. If it does not, a new underlying array will be allocated.

append函数在填充elem1,elem2的时候会先判断slice的cap是否能容纳所有追加的值，这个计算方式是从slice的尾部计算的，在你的例子里，slice的尾部是第一个元素，后面的容量恰好可以满足3个元素，所以它不会申请新的底层数组，而会直接使用原有的底层数组作为存储，这也就把原本的底层数组改成了[1 -1 -2 -3],由于s1的存储依赖于这个底层数组，自然也就变成了`[1 -1 -2 -3]`。

如果把你的例子改成`append(s1[:1],1, s2...)`，或者改成`append(s1[1:2], s2...)`,你就会发现s1没有被改变，这是因为容量不能容纳所有追加元素，append会申请一个新的底层数组用来存储，也会返回一个新的slice，这不会影响到原本的底层数组，也就不会影响到原本的slice。

所以使用`s = append(s,elem1)`是一个好习惯，尽量使用这个用法。


Instruction:
react-router中嵌套的子组件拿location对象的问题
比如说一个页面有个modal组件，modal组件里面的内容写在子组件里面(ModalDetail),在这个组件里面拿不到this.props.location，求解答，除了从父组件传进去和通过window对象拿，还有什么方法

Output:
react-router v4之前的版本，有一个叫做`withRouter`的高阶组件。你在定义自己的modal组件时包一层即可。
v4版本暂时没有用过，有没有改动不清楚
```
import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
export default withRouter(ShowTheLocation)
```
包一层withRouter之后，就可以访问到你想要的属性了，你还可以进一步学习，看看里面都有些什么。


Instruction:
dockerfile 与 docker-compose的区别是什么?
docker-compose是编排镜像, 那么docker-compose是不是可以做Dockerfile的能做的事?

Output:
我所理解的docker-compose是编排容器的。例如，你有一个php镜像，一个mysql镜像，一个nginx镜像。如果没有docker-compose，那么每次启动的时候，你需要敲各个容器的启动参数，环境变量，容器命名，指定不同容器的链接参数等等一系列的操作，相当繁琐。而用了docker-composer之后，你就可以把这些命令一次性写在docker-composer.yml文件中，以后每次启动这一整个环境（含3个容器）的时候，你只要敲一个docker-composer up命令就ok了。
而dockerfile的作用是从无到有的构建镜像。
两个完全不是一码事


Instruction:
php 的 opcache 和最近的 php jit 有什么区别？
opcache 是用于缓存 zend 引擎编译生成的 opcode，下次就无需编译。
最近听说了 php jit,看了一下 jit 的概念，描述是这样的:
JIT编译（just-in-time compilation），即即时编译，狭义指某段代码即将第一次被执行时进行编译，而后则不用编译直接执行，它为动态编译的一种特例。
那 php 的 jit 和 opcache 有什么区别呢？

Output:
`源代码(人认识)->字节码(解释器认识)->机器码(硬件认识)`
来看下PHP的执行流程，假设有个a.php文件，不启用opacache的流程如下：
`a.php->经过zend编译->opcode->PHP解释器->机器码`
启用opacache的流程如下
`a.php->查找opacache缓存，如果没有则进行zend编译为opcode并缓存->opacode->PHP解释器->机器码`
启用jit的流程如下
`a.php->编译->机器码`
以后都只执行机器码，不编译，效率上高了很多


Instruction:
python redis 列表插入 速度太慢
```
pool = redis.ConnectionPool(host=host, port=port)
client = redis.StrictRedis(connection_pool=pool)

for i in range(10000):
    for j in range(30):
        client.lpush(IDLE_TASKS, json.dumps(args))

```
这种执行效率低的可怕。
需要等几十秒，才能插入完成。
请问有没更高效率的处理手法？
args 只是以一个元组内容随意(1,2,"3")之类

Output:
用 Redis 的 Pipeline ， 先在循环内生成数据，最后一次性插入
```
>>> p = r.pipeline()        --创建一个管道
>>> p.set('hello','redis')
>>> p.sadd('faz','baz')
>>> p.incr('num')
>>> p.execute()        -- 执行管道内命令
[True, 1, 1]

>>> r.get('hello')
'redis'
```
```

pool = redis.ConnectionPool(host=host, port=port)
client = redis.StrictRedis(connection_pool=pool)

p = client.pipeline()
for i in range(10000):
    for j in range(30):
        p.lpush(IDLE_TASKS, json.dumps(args))
p.execute()
```
使用管道，Redis 会将命令暂时存储，当遇到 `execute()` 时才会执行，所以上面代码只需要和 Redis 服务器通信一次即可将数据全部插入


Instruction:
如何向localStorage上的数组push数据
我想做的一个功能是向localstorage上设置一个空数组，每次点击就push当前点击的数据到localstorage的数组中，但是localstorage不允许push，我试过深拷贝localstorage的数组出来再push到深拷贝的数组中，在设置localstorage的数组为深拷贝的数组，但是也没尝试出来，请大神支招

Output:
localStorage只能存储String，要用Json对象转化下：
```
var arrayObject = [];
arrayObject.push('a','b','c');
localStorage.setItem("array",JSON.stringify(arrayObject));
var arrayObjectLocal = JSON.parse(localStorage.getItem("array"));
arrayObjectLocal.push('d','e','f');
for (i = 0; i < arrayObjectLocal.length; i++) {
    console.log(arrayObjectLocal[i]);
}
```


Instruction:
Vue v-for判断是否为第4列，然后加个横线或者第4行才显示这一个<li>
```
<ul id="right-notice">
    <li v-for="site in sites">
        <span class='time'>{{site.ntime}}</span>
        <a title='{{site.qtitle}}'>{{site.ntitle}}</a>
    </li>
    //  思路一：<li 如果是第4行，在这里加一个什么显示属性？></li>
    // 思路二，如果是第4行，在这里插入一个`<hr>`是否可行
</ul>
```
初学vue,翻了好久，没有解决问题，特来求助。望前辈们指点

Output:
```
<ul id="right-notice">
    <li v-for="(site, index) in sites">
        <span class='time'>{{site.ntime}}</span>
        <a title='{{site.qtitle}}'>{{site.ntitle}}</a>
        <hr v-if="!((index + 1) % 4)" />
    </li>
</ul>
```

1. 其中，用`(site, index) in sites`代替`site in sites`，`index`为获取到的元素顺序。
2. 这里用到了`v-if`。其中对于index值为3（第四项）,7（第八项），11（第十二项）... （4的倍数项），需要显示`hr`，对于这些值，`(index + 1) % 4`为0，所以`!((index + 1) % 4)`为`true`，显示`hr`。【这里`index`按顺序从0开始计数，所以`index + 1`为表示当前site在sites数组中是第几个，然后`(index + 1) % 4`，每满4，顺序数除以4余数都为0】

添加class的方法：（假设class名叫`underline`）
```
<ul id="right-notice">
    <li v-for="(site, index) in sites" :class="{underline: !((index + 1) % 4)}">
        <span class='time'>{{site.ntime}}</span>
        <a title='{{site.qtitle}}'>{{site.ntitle}}</a>
    </li>
</ul>
```


Instruction:
vue-router登录成功后回到登录前页面是如何实现的？
例如复制了一个链接https://segmentfault.com/ask/...
到浏览器粘贴回车 会进入登录页面  登录成功后想再回到https://segmentfault.com/ask/...这个页面

Output:
大概思路：
1.当你想进入 `http://localhost:8080/user` (该页面需要登录授权)
2.检查是否登录，如果没有登录跳转到登录页，需要将上一页的path(‘/user’)作为query存到login页地址中，如：`http://localhost:8080/login?redirect=%2Fuser`
```
if (!isLogin()) {
   this.$router.push({
    path: '/login',
    query: {redirect: 'your path'} // 如果你使用钩子函数，your path 可以替换成to.fullPath
  })
}
```
3.登录成功后，获取query中的redirect属性，然后跳转到这个地址
```
this.$router.push(this.$route.query.redirect || '/')
```
这是一种方式，你也可以用其他方式存储上一页的地址


Instruction:
js中向下取整
在js中，以前向下取整都是使用Math.floor方法，现在有看到这样的用法：或运算
 interval = interval | 0
为什么这样就可以向下取整了，这种用法和Math.floor比较，有什么好处？

Output:
注意，`|` 不是逻辑或，而是按位或 （OR）。
一些小区别。比如 `Math.floor(NaN)` 还是返回 `NaN`。但 `NaN | 0` 返回 0。
再比如 `Math.floor(Infinity)` 返回 `Infinity`，但 `Infinity | 0` 返回 0


Instruction:
vue2.0如何设置全局变量
比如资源服务器的host，后台api的host，微信第三方的host。这些host不能挨个去代码里面写吧。
其实，我就是想知道vue如何设置全局变量。总感觉放到window，localstorage，sessionstorage不太正规。

Output:
webpack 有global关键字
比如在一个a.js文件中定义全局变量：
```
global.COURSES = 'xxxxx'

```
在入口的main.js
```
import './a'

```
就可以，别的js不需要import也能用到COURSES


Instruction:
为什么Github要把代码合并请求称为pull request而不是push request？
https://stackoverflow.com/que...
我看了这里面的解释，感觉还是不够有说服力啊
我的理解是：我做了一些修改，我请求把我的修改push到你的仓库，然后你review一下我的代码，如果没问题就接受请求merge，这样的话叫做push request岂不是更合适？因为这个操作是我主动发起的。pull是仓库主向我fork的仓库发起的操作，那么pull request这种操作应该是要上游仓库主来向我发起啊，而不是我主动让上游仓库主来pull我仓库中的代码。

Output:
是这样的，这个应该分开来解释。
这个pull指的是权限主体的操作。你提交了代码，但是你没有操作上游repo的权限，你需要上游repo的主人review你的代码，然后把你的代码修改pull到他的repo中去，这是对于pull的解释。
而request则指的是发起主体的操作。也就是说，上游repo的主人虽然有repo的控制权，可以把你的代码更改pull到他自己的repo里，但是他不会主动去pull。而是需要你（发起主体）向上游repo的主人提交申请，也就是request，上游repo的主人才会去响应你的request，也就是执行你所说的review和pull的过程。
所以，pull request的理解方法是：一个通知上游repo所有者拉取代码(pull)的请求(request)。
在英语中，request一般指的是提交一个申请，需要对方对申请给予答复的。而request之前的修饰词，则是答复方的动作，当然，中文中也是一样。比如“入团申请”，你提交申请之后，需要对方允许你入团你才算是团员。所以，入团的动作不是你主动做的，而是由审核的人把你的名字加上去才算“入团”。同理“pull request”中，request是你提交的，而pull则是对方做的事情。


Instruction:
vuejs页面加载完成后执行函数
module.exports = {
```
data: function(){
    return {
        memberQrcodeState: false
    }
},
components: {memberQrcode},
created: function(){
},
beforeRouteEnter: function(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
    //$e.target.src= require("../imgs/test/232.jpg")
    next();
    return true;
},
methods: {

},
beforeRouteLeave: function(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    next();
}
```
};
在这基础上加一个页面加载完成后执行的函数！我是小白，第二天接触vuejs，希望大神指点一二

Output:
```
mounted(){
    this.init()
},
methods:{
    init(){
        console.log('hello,world')
    }
}
```
谨供参考~


Instruction:
怎么把自己fork别人的仓库中的代码更新至最新版本？
我在Github上fork了别人一个项目，然后修改之后按照正常流程提交PR，并且对方merged了。
我现在又需要对该项目进行贡献代码，但是发现对方的项目仓库也有别人更新了新代码上去，我怎么让我自己仓库中fork的这个项目代码也同步到和对方仓库一样的最新版本代码，然后我再进行贡献？

Output:
首先 把别人的仓库添加到你的上游远程，通常命名为 upstream。操作一次就可以了。
```
git remote add upstream  原作者仓库地址
```
此时再用 `git remote -v` 就可以看到一个origin是你的，另外一个upstream是原作者的。
其次 更新代码
使用`git fetch upstream` 拉去原作者的仓库更新。
使用`git checkout master` 切换到自己的`master`
使用 `git merge upstream/master`, merge或者rebase到你的master


Instruction:
JSON.parse(JSON.stringify(data))
问下JSON.parse(JSON.stringify(data))是什么情况下要用

Output:
一般用来深拷贝一个json对象吧，还可以用来去除值不具有JSON 表示形式（数字、字符串、逻辑值、数组、对象、null）的属性，也就是说像undefined和function这样的属性值。
```
a: {
    age: 1,
    name: undefined,
    time: () => {...}
}
变成：
b: {
    age: 1
}
```


Instruction:
用户余额和收入支出mysql表设计和实现方案
因为第一次做相关业务，所以经验不足，想来取点经。
1.用户余额表除了用户id和余额还应该有哪些字段？
2.收入表和支出表是分开好还是合并？
3.比如注册送100优惠券这种场景。注册成功后给余额字段加100，给明细表添加一条记录，这2个步骤放在一个事务中，还是明细表用消息队列处理等其他解决方案。

Output:
1.用户ID，余额，开始时间（创建时间），最后交易（收入，支出）改变时间，收入总额，支出总额（看情况决定是否冗余，冗余为了避免每次统计都要查库）
2.收入表和支出表看情况。如果收入来源和支出方式都有多种，适合分开，比如说收入（1.打赏，2充值，3转账），支出（1购买业务，2充值会员， 3转赠）等等
3.放在一起直接事务也可，消息队列也行，只要涉及金钱，打好日志即可。因为送钱和明细表操作都不是耗时间操作。
4.金钱计算，尽量避开浮点数，如1元应该存成100分


Instruction:
如何把数组对象相同的key值合并，并且把对应的id放到一个数组
例如旧数据：
var old = [
```
{
    id: 1,
    name: 'css',
    type: 'html'
},
{
    id: 2,
    name: 'css',
    type: 'html'
},
 {
    id: 3,
    name: 'javacript',
    type: 'code'
},
{
    id: 4,
    name: 'javacript',
    type: 'code'
}
```
]
想得到的 var new = [
```
{
    id: [1,2],
    name: 'css',
    type: 'html'
},
 {
    id: [3,4],
    name: 'javacript',
    type: 'code'
},
```
]
希望把相同name的对象合并，并且把对应的id放到一个数组

Output:
```
var hash = {};
var i = 0;
var res = [];
old.forEach(function(item) {
    var name = item.name;
    hash[name] ? res[hash[name] - 1].id.push(item.id) : hash[name] = ++i && res.push({
        id: [item.id],
        name: name,
        type: item.type
    })

});
console.log(JSON.stringify(res))
```


Instruction:
github怎么提交回退旧版本代码并更改后的文件到主分支上
可能说的不是很明白，就是我代码写着写着，发现我已经不想这么弄了，用`git reset --hard <版本号>`退回到之前的某个版本重新写，这样当我当我写完之后，想在提交到远程仓库，它就会报错
```
To https://github.com/zifenggao/wenda.git
 ! [rejected]        master -> master (non-fast-forward)
error: failed to push some refs to 'https://github.com/zifenggao/wenda.git'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
```
说我版本是之前的版本，要我合并后再提交，那我应该怎么弄，能了几遍都没搞懂。

Output:
首先，根据你的描述，既然你用到了 `git reset --hard`，那就可以推断出你已经 `add` 和 `commit` 过了。
其次，根据报错，可以推断出你已经 `push` 过了（这个推断基于只有你一个人拥有 master branch 的更改权限。
那么当你执行 `git reset --hard` 之后，历史纪录是不能跟远程的记录直接合并的。因此才会有这个报错。
举个例子，远程是 `A -> B -> C -> D`，你 `git reset --hard` 之后是 `A -> B`。这时候除非远程那边抹掉 `C` 和 `D`，否则是不能合并的。
因此，这时候，你应该使用 `git push origin master --force` 来强行覆盖远程记录。
请不要根据提示使用 `git pull`。否则，你的本地又会变成 `A -> B -> C -> D`。因为 `git pull` 相当于 `git fetch` + `git merge`
（以下内容基于上面的例子，远程是 `A -> B -> C -> D`，你想回滚到 B 那个状态）
另外对于 `git revert`。其实，`git reset --hard` 和 `git revert` 都可以实现“回滚代码”。但区别在于：
`git revert` 会把你的本地变成 `A -> B -> C -> D -> E`。其中，`E` 干的事儿是删除 `C` 和 `D`。这样做的好处在于，你 `git push origin master` 就不会有上面的报错了。但，历史线上还是会保留 `C` 和 `D` 这两个 commit。如果使用这个命令，记得要 `add` 然后 `commit`。
`git reset --hard` 会直接删掉 `C` 和 `D`，形成 `A -> B` 这样的结果。好处在于更直接更彻底。缺点在于，首先要通过 `git push origin master --force` 去强行更改。其次，一旦你后悔了，除非根据本地的 `reflog` 直接恢复 HEAD 指针，此外没有其他办法。
用哪个都是没错的，请根据自己的需要来选择。


Instruction:
输入一段不减的整数，如11111223333，怎么快速计算重复次数最多的那个数
输入
一段不减整数，如：11111223333
输出
出现次数最多的那个数字，如：本例中1的出现次数最多，输出1
输入的数字具有以下规律
1.数字为正整数，不一定从1开始
2.如果增长，则increment = 1
3.整数的总量不会超过1W，但是事先无法知道总共会输入多少整数

Output:
这题不用对所有数字计数，那样很慢。
如果增长，则increment = 1
把数字当作字符串来处理，只要找出所有增长的点的位置就可以了，然后把相邻的点的位置相减，即可得到长度。
因为不一定是从1开始，所有可能的增长的点为："12"，"23"，"34"，。。。"78"，"89"
例如：
将11111223333转为字符串，查找增长点
结果：12-位置4，23-位置6
增长点补正（加1）：12-位置5，23-位置7
初始位置补0，末尾补字符串长度len,得到
[0,5,7,11]
取相邻两点之差
[5,2,4]
所以，出现次数最多的是第一个元素，5次
除此之外，还有不需要遍历的算法：
由于increment = 1，所以看开头和结尾2个数，即可算出出现数字有几种
（如11111223333，开头为1，结尾为3，则出现的数为1到3，共3种）
那么，考虑出现N种数的情况
N=1就不用说了，等于白送答案。
先从简单的N=2说起吧，因为有些细节在N=2的情况说了，后面N>2的情况类似的细节就省略了。
2分采样
若len为奇数，取len/2处的数，这个数就是出现次数最多的数。
若len为偶数，len/2处是间隙，所以取该间隙前后2个数，这2个数相同的话，答案就是这个数，如果不同的话，答案是这两个数出现次数一样，并列最多。
N分采样，取0、len/N、2len/N、...、（N-1）len/N、len处的（N+1）个点，（由于间隙的情况太复杂，这里省略，请参考N=2的处理方法）
然后统计这（N+1）个点里面，出现次数最多的数，把出现次数最多的数叫做M1，出现第二多的叫做M2，依次类推
若 （M1的次数 - M2次数） 大于等于2，则答案为M1
若 （M1的次数 - M2次数） 小于2，那么
2N分采样(若2N>len,则len分采样)，取len/2N、3len/2N、5len/2N、。。。。、处的N个点，与前面N分法时候取的（N+1）个点组合，重新求M1，M2，。。。。
若 （M1的次数 - M2次数） 大于等于2，则答案为M1
若 （M1的次数 - M2次数） 小于2，
则4N分采样(若4N>len,则len分采样)
。。。。依次类推，8N，16N。。。。
直至找到 （M1的次数 - M2次数） 大于等于2为止。其中若变为len分采样，结束条件不需要（M1的次数 - M2次数）大于等于2，M1就是答案。
#### 小结
这个算法大部分时候是比较快的，最差的情况是N个数的各个次数都相差很小，或者都相同，那就会进入最后的len分采样，等于遍历，那还不如一开始就直接遍历比较快。
但是数据的分布越是不均匀，这个算法就越快。
#### 杂谈
写完这个算法之后，我觉得有似曾相识的感觉，大家了解通信原理的有没有一样的感觉？
如果把这段不减整数映射到频域，那么这就是递增阶梯的方波，问题就是确定其最长一段方波，如果这个方波太长，数据量太大，我们可以对其特征点采样来压缩数据，根据奈奎斯特采样定理（或者叫香农采样定理）：
当采样频率fs.max大于信号中最高频率fmax的2倍时(fs.max>2fmax)，采样之后的数字信号完整地保留了原始信号中的信息。
上文的2N分采样与此正好相似，是不是很有趣～


Instruction:
assets 和static的区别
使用 vue-cli 搭建的项目中有 assets 和 static 文件夹，一直不懂两者的区别，看到网上的说法太模糊，希望有位大神可以举例说明两者的区别。

Output:
请参考 vue-cli 的 webpack 模板的文档 - Handing Static Assets，作者知道会有人有这个疑惑，所以作了详情的解释：
You will notice in the project structure we have two directories for static assets: `src/assets` and `static/`. What is the difference between them?
简单翻译一下。
## Webpacked Assets
为了回答这个问题，我们首先需要了解Webpack如何处理静态资产。在 `*.vue` 组件中，所有模板和CSS都会被 `vue-html-loader` 及 `css-loader` 解析，并查找资源URL。例如，在 `<img src="./logo.png">`
 和 `background: url(./logo.png)` 中，`"./logo.png"` 是相对的资源路径，将由Webpack解析为模块依赖。
因为 `logo.png` 不是 JavaScript，当被视为模块依赖时，需要使用 `url-loader` 和 `file-loader`
 处理它。vue-cli 的 webpack 脚手架已经配置了这些 loader，因此可以使用相对/模块路径。
由于这些资源可能在构建过程中被内联/复制/重命名，所以它们基本上是源代码的一部分。这就是为什么建议将
 Webpack 处理的静态资源放在 `/src` 目录中和其它源文件放一起的原因。事实上，甚至不必把它们全部放在 `/src/assets`：可以用`模块/组件`的组织方式来使用它们。例如，可以在每个放置组件的目录中存放静态资源。
## "Real" Static Assets
相比之下，`static/` 目录下的文件并不会被 Webpack 处理：它们会直接被复制到最终目录（默认是`dist/static`）下。必须使用绝对路径引用这些文件，这是通过在 `config.js` 文件中的 `build.assetsPublicPath` 和 `build.assetsSubDirectory` 连接来确定的。
任何放在 `static/` 中文件需要以绝对路径的形式引用：`/static/[filename]`。如果更改 `assetSubDirectory` 的值为 `assets`，那么路径需改为 `/assets/[filename]`。


Instruction:
请问如何在html中输出字符串中的换行符
我在后台获取了一段字符串输出到前台的
标签中，但是字符串中有换行符'n'，我想同样输出换行的效果。请问应该如何处理这段字符串呢？我把'n'替换成了
还是不行，原样输出了。
谢谢大家

Output:
有两中方式，一是设置  `white-space: pre;`，空白会被浏览器保留。或者使用
```
<pre>
    我是换行字

    符串
</pre>

```
，pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。


Instruction:
python 如何将字符串转换成列表
如何将字符串如`a = "我是中国人"`，转换成列表`li =["我","是","中","国","人"]`
```
a = "我是一个中国人"
li = list(a)
print li
```
输出却是
```
['\xe6', '\x88', '\x91', '\xe6', '\x98', '\xaf', '\xe4', '\xb8', '\x80', '\xe4', '\xb8', '\xaa', '\xe4', '\xb8', '\xad', '\xe5', '\x9b', '\xbd', '\xe4', '\xba', '\xba']
```
我用JavaScript很简单的就实现了
```
var a = "我是中国人"
li = a.split("")
console.log(li) // >>>["我","是","中","国","人"]
```
不知道python应该如何实现？

Output:
可以先将字符串解编码成`unicode`, 再用`list`
```
# 第一种:
>>> a = u"我是中国人"
>>> s = list(a)
>>> print s
[u'\u6211', u'\u662f', u'\u4e2d', u'\u56fd', u'\u4eba']
>>> print s[1]
是

# 第二种
>>> a = "我是中国人"
>>> s = a.decode('utf8')
>>> s = list(a.decode('utf8'))
>>> s
[u'\u6211', u'\u662f', u'\u4e2d', u'\u56fd', u'\u4eba']
>>> print s[1]
是
```


Instruction:
为什么说promise不能取消是一个缺点
什么场景下我需要取消一个promise？
我不理解的地方：
http是无状态的，那取消是不是意味着新的请求？
还是说取消仅是本地取消，不处理之前请求的结果？

Output:
Promise 的设计就是一个状态机，pending 到 resolve / reject 的状态变换是单向且唯一的，没有所谓的 cancel 状态。cancel 的加入会带来更多的状态问题，并不适合 Promise 这一模式来处理（这类场景下，RxJS 这类 FRP 的方案应该更为适合）。
cancel 会带来什么状态问题呢？拿电商的退款来举例子。你买了一个东西（开始一个 pending 的 promise），然后东西还没收到（还没 resolve），你后悔了，点击了退款（把状态改为 cancel），但这时退款流程也不能立刻生效，需要审核（cancel 后不能立刻 reject），那这时候你发工资了，又不想退款了，又点了【取消退款】，这时候又是一个异步的状态更改（把 cancel 再 cancel 掉），而【取消退款】也是异步的，你还能取消【取消退款】的操作（把 cancel 在 cancel 掉前再 cancel 掉？）别忘了，这时候每一步状态变化还都可以对应到 resolve 和 reject 呢。好的同学们，接下来请画出流程的状态变化图，并编码实现这个支持 cancel 的 promise?
这是一道送命题啊。


Instruction:
api 使用session替代token 的利弊在哪？
补充：几种常用的验证机制
 最近写app的api，使用laravel 框架的session替代了传统的存贮到数据库的token作为校验登录用户的方法！
以下是我们目前的做法
登录后后台生产session，会往返回信息head头里写一个set_cookie
ios和安卓 会从head头里得到拿到这个cookie的东西
然后再请求需要登录的地方的时候，ios和安卓会把cookie放到head头里，让框架完成自我的校验
ps:
有人说不安全
有人说不好管理
有人说性能问题
有谁具体研究过，请帮我分析分析其利弊
我个人认为的观点：
说session不安全的，感觉有点牵强，假如真的一点不安全的话，那网站也就完全被暴露了，而且laravel的session也是有自己加密的方式，不是直接暴露的！
有人说不好管理，放在redis里了，我不太知道不好管理在哪里。
性能问题，session可以存贮的位置有很多，mysql，文件，redis，我觉得性能也不是问题。我也不知其弊端在哪里，
有谁具体研究过，请帮我分析分析其利弊
也请大家有想法的各抒己见，我们一起讨论下

Output:
在存储过等同的情况下，在只是简单运用上，我只能说session与token没有本质的区别，二者不都是一串被加密过的字符串，拿他来做校验都一样。
以上，是因为你把token拿来当作用户是不是当事人做这么一个简单的校验的情况下。
当然，如果我们抛开一些比较极端的操作，token比session也有很大的区别：
- token可以存在任何位置（cookie、local storage）
- token比session更容易跨域。
- CORS预检查时token比较更简单。
- token有更多的控制权，比如当token过期时，你可以拿通过刷新token，让用户一直保持有效登录。

token可以存在任何位置（cookie、local storage）
token比session更容易跨域。
CORS预检查时token比较更简单。
token有更多的控制权，比如当token过期时，你可以拿通过刷新token，让用户一直保持有效登录。
等……其实如果你只是单纯拿着token做一下自己网站内用户登录检验的话是无太多区别的。
但假如token指的是OAuth Token提供认证和授权这类机制的话，那么就可以把session甩开N条街了，甚至是已经完全是两种不同的概念。
假设有这么一个场景，你们用户在你们网站产生的订单，而另一家公司是专业ERP公司；而你的用户希望他的订单同时授权给这家ERP公司使用的情况下，难道你希望用户拿在你家网站的用户名和密码给这家ERP公司吗？
这时候OAuth Token就有意义了，OAuth Token的授权大概是这样的：
- ERP需要调用我们提供的登录界面。
- 用户输入用户名和密码后，我们再向ERP发送一个TOKEN。
- ERP拿TOKEN换数据。

ERP需要调用我们提供的登录界面。
用户输入用户名和密码后，我们再向ERP发送一个TOKEN。
ERP拿TOKEN换数据。
总之，如果你只是在自己网站内部上使用二者没有什么太多区别。而如果你的API是在不同终端上使用，token会更方便。


Instruction:
正则表达式如何匹配重复出现的字符串
比如说`aaabccc11fdsa`这个字符串，我要把aaa，ccc和11这种会重复两次以上的字符串匹配出来，该怎么办？如果正则表达式做不到的话，有其他什么PHP，Python内置函数可以做到吗？内置函数也没有的话只能手写算法了吗？

Output:
JS代码：
```
var s = 'aaabccc11fdsa';
var re = /(.)\1+/g;

console.log(s.match(re));
```
其中，正则表达式中`.`表示任意字符，`\1`表示第一个被匹配到的分组，`+`表示匹配前一个字符一次或一次以上。


Instruction:
vuex 中的 store 和 $store  的区别
```
<router-link to="/login">{{ $store.state.userName }}</router-link>
<router-link to="/login">{{ store.state.userName }}</router-link>
<router-link to="/login">{{ this.store.state.userName }}</router-link>
<router-link to="/login">{{ this.$store.state.userName }}</router-link>
```
一直搞不清楚 vuex 中 `store` 和 `$store` 的区别，也不知道什么时候前面应该加`this`,求大神告知。
—— thanks in advance

Output:
`$store` 是挂载在 Vue 实例上的（即Vue.prototype），而组件也其实是一个Vue实例，在组件中可使用 `this` 访问原型上的属性，template 拥有组件实例的上下文，可直接通过 `{{ $store.state.userName }}` 访问，等价于 script 中的 `this.$store.state.userName`。
至于 `{{ store.state.userName }}`，script 中的 `data` 需声明过 `store` 才可访问。