这里不更新咯，在其他地方会坚持写：

• 博客园： https://www.cnblogs.com/wjaaron/
• 掘金：https://juejin.im/user/1116759542741672/posts

最近项目需求，做一个图片上传到阿里云oss的功能，由于之前没做过这样的功能，所以也是查阅了不少资料，边写demo边测试把基本功能完成了。现在来记录下，没做过的童鞋也可以简单参考下。我的使用场景是在vue项目中结合iview框架的上传组件来实现功能。

首先给大家一篇阿里云的文档 web端直传实践，它里面给出了三个上传的例子，如下图：

最开始我们后端让我自己看看这些例子，也没决定好用哪种方式，而我选择尝试的是第一种方式，因为不需要后端直接参与。那我就先从第一种方式开始说起，在这之前你需要开通好阿里云的对象存储功能，并新建了一个Bucket，这些我就直接略过了，给个文档：使用阿里云OSS

这几天试用了下flutter和react-native，最后决定还是先学习react-native。虽说flutter的优点有很多，再加上谷歌出品，必属精品，但是RN依旧更成熟点，而且react的语法也没有额外的学习成本。对于快速构建一个app，RN现在更合适点。

开始使用RN，总免不了一些坑。由于我在安装RN配置前，捣鼓了flutter配置，所以相对而言安装部分没遇到坑了，但也遇到其他坑。本文准备长期更新，用以记录学习中的坑。

方式一览

1. props && emit
2. v-model
3. $children && $parent
4. $listeners && $attrs
5. .sync

今年到处看到关于手写bind函数的话题，似乎面试题也趋于跟风形式。这让我有种感觉，那就是不面试的问题都不会，只要扯上面试的话，那么问题就不是问题了。不禁感叹，前端要学的越来越多了～

不扯太多，我也来试着实现一下bind，不过我觉得call和apply也可以实现下。

实现 call

关于call函数的作用，我觉得不需要太多赘述，只要关注两点：

1. 改变this指向
2. 直接调用函数

代码实现：

1
2
3
4
5
6
7
8

Function.prototype.myCall = function(context) {
    context = context || window // call函数第一个参数为this指向目标，若不传，指向window
    context.fn = this // 将要执行的函数赋值于context对象的fn属性，这样调用函数时，内部this就指向了context
    const args = [...arguments].slice(1) // 获取参数
    const result = context.fn(...args) // call函数会调用原函数，所以我们也调用此函数，注意此时函数this指向了context
    delete context.fn // 删除context对象的fn属性
    return result // 调用结果返回
}

主要是关于部署前端项目的。
经常记得不清，记录下吧。
我的服务器环境：阿里云ECS CentOS 7.3 64位

安装node

找到资源

打开nodejs中文网，点下载，找到阿里云镜像，如下图：

点开阿里云镜像，选择对应的版本，右键复制链接，如下图：

前言

redux-thunk 是一个流行的用来处理异步操作的redux中间件，作为一个新手，如果你并不知道具体哪些场景需要使用这个中间件，那么就不要用它，就像官方所说的这样：

If you’re not sure whether you need it, you probably don’t.

redux-thunk 常用来处理一些请求操作，这里以 axios 请求为例，来演示redux-thunk 的配置使用。

安装&&配置

使用npm安装即可：

1

npm install --save redux-thunk

这里要讲下它的配置，按照官方文档很简单就能配置好：

1
2
3
4
5
6
7
8
9
10
11
12
13

import { createStore, applyMiddleware } from 'redux'

// 在同级目录引入reducer
import reducer from './reducer'

// 引入redux-thunk
import thunk from 'redux-thunk'

// 创建store
const store = createStore(
    reducer,
    applyMiddleware(thunk)
)

上面的配置就是可以用的，参考文档：redux-thunk

在这里想补充一点的是多个中间件使用时怎么配置。由于我会用到 Redux DevTools 这个浏览器插件来调试 redux，这个也需要我们在代码端配置好的，现在的场景就是我要配置devtools的代码，也要配置redux-thunk 的代码，往后可能还要使用到其他中间件，所以需要了解一下它们结合的配置。好在也有文档给出示范，参考 redux-devtools-extension

我的具体配置为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import { createStore, applyMiddleware, compose } from 'redux'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(thunk),
);

const store = createStore(
	reducer,
	enhancer
)

export default store

如果需要再使用其他中间件，加到 applyMiddleware 中 thunk 后面即可。

使用

在不使用 redux-thunk 的情况下，axios 请求一般是放在 componentDidMount 这个生命周期里的，现在用到了 redux-thunk ，我们可以将请求放到 action里，我们创建一个文件 actionCreator.js，专门用来创建action所用，现在我们就来创建一个用来请求的action：

1
2
3
4
5
6
7
8
9
10

import axios from 'axios'

export function getList(){
	return ()=>{
		axios.get('https://www.easy-mock.com/mock/5ba7324d774ea0691ff86d5e/test/list')
        .then(res=>{
             console.log(res)
        })
	}
}

使用redux-thunk中间件后，创建的action可以返回一个函数，函数里执行请求操作，此时在页面组件里即可使用这个action，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// App.js文件，一个页面组件，代码不完整，仅供参考

import store from './store'
import { getList } from './store/actionCreator.js'

class App extends Component {
 // ...
 
 componentDidMount(){
    const action = getList()
    store.dispatch(action)
  }
  
  // ...
 
}

当我们dispatch这个action时，action里的函数会自动执行，可在浏览器端调试查看。但是目前提交并不会影响store状态，因为我们虽然执行了action的函数，但没有执行提交真正action的操作，所以我们需要回到actionCreator.js文件里继续完善我们的代码：

1
2
3
4
5
6
7
8
9
10
11

export function getList(){
	return (dispatch)=>{
		axios.get('https://www.easy-mock.com/mock/5ba7324d774ea0691ff86d5e/test/list')
        .then(res=>{
             dispatch({
             	type:'CHANGE_LIST',
             	data: res.data.data
             })
        })
	}
}

上面代码中，返回的函数里可以把dispatch作为参数传进去，最终通过dispatch提交真实的action。

以上就是通过redux-thunk实现axios请求的简单流程。

前言

最近对 NeteaseCloudMusicApi 这个项目很感兴趣，它是一个网易云音乐api的服务端项目，通过它的封装我们可以很好的调用网易云音乐的相关api，从而实现一个音乐播放器小应用。

虽然一直想做一个自己的音乐播放器，但也一直没动手，现在准备找工作了也不想折腾了。有时间的话，倒是想在小程序上实现下。说到小程序，就想到小程序调用接口需要是https的（开发时可以使用http），如果想上线的话，就意味着买了服务器外，还要自己配置https。没接触过https的配置，就先把这个sercice在服务端跑起来吧～

node安装 && 文件上传

关于服务器端的node安装，我一开始也是忘记的，好在我以前写过博客，直接查看 Linux环境部署Node.js。由此可见，写博客不是一点用没有的，没人看也可以自己当笔记看啊。

node安装好后，需要把 NeteaseCloudMusicApi 这个项目上传到服务器。首先把这个项目从github上拉到本地：

1

git clone git@github.com:Binaryify/NeteaseCloudMusicApi.git

拷到本地后无需执行安装操作，这些操作放到服务器上再执行。嫌弃名字长，可以重命名下，我这里命名为 music-api。接下来就是上传文件的操作了。

上传文件可以使用ftp工具，操作更方便，这里就不多说了，可以搜索到很多资料。我这里是mac环境，使用 scp 命令：

1

scp -r ~/Desktop/music-api root@39.108.161.158:/root/project

格式就是：

1

scp -r 本地文件地址 ip地址: 要上传到服务器的目录

注意：-r 参数要加上，表示递归上传，因为上传的是文件夹

上传完毕后，cd 到项目目录，执行npm install将依赖安装上，然后执行：

1

node app.js

此时项目已经启动，可以看到是在3000端口启动的，我在浏览器中输入：

1

39.108.161.158:3000

就可以看到效果了。注意要换成你的服务器ip地址。

使用pm2

如果使用node来启动程序，确实是可行的，但问题就是当你关掉终端时程序也关闭了，我们需要让服务器一直在执行这个服务，这样才能随时访问api，所以要使用pm2这样的工具来帮助我们管理服务。关于pm2更多的介绍可自行搜索。

遇到的坑

我开始用ip加端口访问服务器时被拒绝了，我以为是80端口的问题，可是经查看后，端口是正常的，之后网上各种搜还是找不到解决方法。最后才知道是防火墙没配置3000端口，要在服务器后台管理那里加上3000端口的访问权限。我是阿里云的服务器，其他的服务商平台找对应服务。

后续会尝试配置https。

前言

去年我还折腾过mongodb，后来用不到也就没碰了，这就导致了我忘的一干二净，不得不感叹，编程这东西只要不用，就会忘没了。现在我想重拾mongodb，来总结一下常用命令，主要就是增删改查。

另外，关于mongodb数据的安装配置，我就不赘述了，推荐我之前写过的两篇博客：

1. Windows下图文详解Mongodb安装及配置
2. Linux环境安装mongodb

这是我的博客园文章，还是有人看的，哈哈，不像这里都没人看。

启动数据库

如果你还不会，看完我上面推荐的就会了～
我自己目前的平台是mac，由于我是通过homebrew安装的，所以我的启动步骤是：

1
2
3

brew services start mongodb

mongo

启动后打开http://localhost:27017/

当你在浏览器页面看到下面这句，就说明启动成功了：

1

It looks like you are trying to access MongoDB over HTTP on the native driver port.

更多安装教程可以自行搜索，接下来我们就来看看一些常用命令。

创建数据库

创建之前，我们看看当前有哪些数据库，使用：

1

show dbs

接下来创建一个新的数据库：

1
2
3
4
5
6
7

// 使用这个数据库，没有则会创建
use test

// 此时还没有创建成功，只有在其中创建一个集合时，这个新数据库才会创建成功
db.user.insert({"name":"wj","age":18})

// 上面命令在test数据库里新建了一个user集合，并插入了数据，此时再执行show dbs ，已经有了test数据库

插入（增加）数据

前面已经提及了，格式如下：

1

db.集合名.insert({"name":"wj"})

注意在使用这条命令前，要切换到对应数据库，比如：

1

use test

这样新增的集合就在这个数据库下，可以使用命令：

1

show collections

来查看当前数据库下有哪些集合

删除

1. 删除当前数据库

   1	db.dropDatabase()

2. 删除集合

   1	db.集合名.drop()

3. 删除数据

   1 2 3 4

   db.集合名.remove(条件) // 比如要删除user集合下name为wj的数据，则 db.user.remove({"name":"wj"})

修改

修改前要按条件查找的，例如我要把名为小明的同学的年龄修改为3岁，那么命令如下：

1
2
3
4

db.user.update({"name":"小明"}, {$set:{"age":3}})

// 上面命令的格式
db.集合名.update({条件}, {$set:{修改的值}})

注意花括号不要写错，另外加上$set是修改，如果不加的话，就是后面的替换前面的，如：

1
2
3
4
5
6
7
8

// 修改前
{ "name":"小明"}

// 修改
db.user.update({"name":"小明"},{"age":20})

// 修改后
{ "age":20}

默认情况下，只会修改满足条件的第一条数据，如果希望修改所有满足条件的数据，加上{multi:true}，如：

1

db.user.update({"sex":"男"}, {$set:{"age":30}}, {multi:true})

查找

关于查询的方式就比较多啦。

1. 查询集合下所有数据

   1	db.user.find() //user是集合名

2. 查询 age == 20 的数据

   1	db.user.find({"age":20})

3. 查询 age > 20 的数据 （大于）

   1	db.user.find({"age":{$gt:20}})

4. 查询 age < 20 的数据 （小于）

   1	db.user.find({"age":{$lt:20}})

5. 查询 age >= 30 的数据 （大于或等于）

   1	db.user.find({"age":{$gte:20}})

6. 查询 age <= 30 的数据 （小于或等于）

   1	db.user.find({"age":{$lte:20}})

7. 查询 age >= 20 并且 age <= 30 的数据 （且）

   1	db.user.find({"age":{$gte:20,$lte:30}})

8. 查询 name 中包含 wj 的数据

   1	db.user.find({"name":/wj/})

9. 查询 name 中以 w 开头的数据

   1	db.user.find({"name":/^w/})

10. 查询指定列的数据

    1 2 3 4 5 6 7 8

    // 只查看name列 db.user.find({},{"name":1}) // 只查看age列 db.user.find({},{"age":1}) // 只查看name和age列 db.user.find({},{"name":1,"age":1})

11. 查询指定列的数据，带条件（age > 20）

    1	db.user.find({"age":{$gt:20}},{"name":1,"age":1})

12. 排序

    1 2 3 4 5

    // 按照年龄来排序 db.user.find().sort({"age":1}) // 升序 db.user.find().sort({"age":-1}) // 降序

13. 多条件查询

    1 2 3

    db.user.find({"name":"wj","age":20}) // 应该好理解，查询同时满足这两个条件的数据，前面忘记说了

14. 查询前三条数据

    1	db.user.find().limit(3)

15. 查询五条之后的数据

    1 2 3

    db.user.find().skip(5) // 好理解，跳过前5条，显示的就是五条之后的数据

16. 查询 5-10 之间的数据

    1	db.user.find().skip(5).limit(5)

17. 或 查询

    1	db.user.find({$or:[{"age":20},{"age":30}]})

18. 查询第一条数据

    1 2 3 4

    db.user.findOne() //这样也可以哦 db.user.find().limit(1)

总结

我将遇到的增删改查命令都总结出来了，可能还有漏掉的，如果有人可以告诉我，那最好不过了。不过上面列出的基本够用了，如果上面的哪条命令不可实现，请注意符号是否写对，尤其是花括号的书写。如果真是我的错误，谁能告诉我一声呢？可惜，这里没人看啊。。。。。。

前言

感觉好久没更新博客了，最近换了台新电脑，开心的同时就是要把一些数据做迁移了，其中最惦记的就是hexo博客怎么迁移，参考了网上的一些文章后，终于成功迁移，现在就把过程记录下，很简单的。

复制原电脑上的数据

复制旧电脑上的hexo数据，注意不用全部复制，只需复制以下几个：

1
2
3
4
5

_config.yml
package.json
scaffolds/
source/
themes/

把这些文件复制到新电脑上的新建文件夹里，如：hexo文件夹

安装

1. 新电脑上需先安装有node环境

2. 全局安装hexo

   1 2	// mac环境 sudo npm install -g hexo

3. 进入hexo目录，依次执行以下安装命令：

   1 2 3 4

   npm install npm install hexo-deployer-git --save npm install hexo-generator-feed --save npm install hexo-generator-sitemap --save

4. 检查：

   1 2	hexo g hexo s

   此时可访问浏览器：http://localhost:4000/ 就可以看到博客了。整个过程还是很简单的，不确定是否所有情况都可以成功，但可一试。