 ####在工作中前端工程师，很多时候由于后端还没有那么快写好接口，我们就需要自己mock数据。json-server就可以指定一个 json 文件作为 api 的数据源，模拟服务端接口数据。 ###一、使用npm全局安装json-server： npm install -g json-server npm 在国内下载镜像慢的一匹... 要么换国内（taobao源） 以下使用cnpm更快 npm更换成淘宝镜像源以及cnpm ####1.需求由来 由于node安装插件是从国外服务器下载，受网络影响大，速度慢且可能出现异常。所以如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队（阿里巴巴旗下业务阿里云）干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。 也就是说我们可以使用阿里布置在国内的服务器来进行node安装。 ####2.使用方法 1.使用阿里定制的 cnpm 命令行工具代替默认的 npm，输入下面代码进行安装： npm install -g cnpm --registry=https://registry.npm.taobao.org 2.检测cnpm版本，如果安装成功可以看到cnpm的基本信息。 cnpm -v 3.以后安装插件只需要使用cnpm intall即可 4.永久使用 设置成全局的下载镜像站点，这样每次install的时候就不用加--registry，默认会从淘宝镜像下载，设置方法如下： 1.打开.npmrc文件（nodejs\node_modules\npm\npmrc，没有的话可以使用git命令行建一个( touch .npmrc)，用cmd命令建会报错） 2.增加 registry =https://registry.npm.taobao.org 即可。 也可以按如下方式直接在命令行设置 npm config set registry https://registry.npm.taobao.org 检测是否成功 配置后可通过下面方式来验证是否成功 npm config get registry 或 npm info express 这样，我们可以使用淘宝镜像还不用更换成cnpm,是不是很爽！虽然实际都是使用的是淘宝镜像。 最后附上淘宝镜像官网地址：http://npm.taobao.org/ 注：如果想还原npm仓库地址，只需再把地址配置成npm镜像就可以了 npm config set registry https://registry.npmjs.org/ 5.npm改成淘宝镜像与cnpm区别（20190509新增） 之前一直以为npm改成淘宝镜像后和cnpm本质是一样的，今天在研究package-lock.json时候发现，这两者还是有很大区别。 cnpm install -g json-server 状况：报错：json-server requires at least version 10 of Node, please upgrade npm 版本太低了，需要升级  代码： npm install -g n n stable ###二、创建json数据(db.json),造数据需要创建一个json数据。  任意文件下，创建一个json数据，必须在该文件夹内执行代码： eg:文件夹路径：/root/testjson/，在该空文件夹下执行完代码会生成一个新文件 db.json json-server --watch db.json 需要创建更多数据： Type s + enter at any time to create a snapshot of the database  问题： 局域网内的其他PC无法使用ip访问，更改启动时的执行代码 json-server --watch --host 0.0.0.0 --port 2000 db.json 一定要指定host 0.0.0.0才能使用ip访问，否则只有本机能localhost访问 实际操作： json-server -H 192.168.50.20 -p 8989 -w db.json -H 主机IP -p 端口，不指定 默认是3000 -w --watch 监控 如后续想要继续发布到外网访问参考 `https://blog.csdn.net/weixin_44612322/article/details/102961031` ###三、用nginx 反向代理json-server vi /etc/nginx/conf.d/bbs.colg.conf 在http 项里加入 location ~ /api/ { default_type application/json; proxy_pass http://192.168.50.20:3000; } 测试： location ~ ^/get_json { default_type application/json; return 200 '{"status":"success","result":"nginx json"}'; } Last modification：February 5th, 2021 at 10:27 am © 允许规范转载 Support 如果觉得我的文章对你有用，请随意赞赏 ×Close Appreciate the author Sweeping payments Pay by AliPay Pay by WeChat
