nuxt 使用 json-server 搭建后台
json-server是一款基于Node.js的服务器,为前端开发人员可以提供一个高仿真的RESTFul后台服务(数据原型),最让人欢欣的是,整个服务的搭建过程不需要编写任何代码,最快只需要1分钟。
配合上mock ,就可以随机生成后端数据了。
1,安装
npm install -g json-serve本来是打算使用 yarn add -g json-server 或 yarn add json-server 安装,但最后都不能正常使用。于是采用了npm 安装。
2,使用
2.1 编写数据文件。 为了测试暂时先将数据存到了 src/static/jsonData/mockTest.js
// 用mockjs模拟生成数据
const Mock = require('mockjs');
module.exports = () => {
// 使用 Mock
const data = https://www.it610.com/article/Mock.mock({"list|10": [
{
"id|+1": 1,
email: "@EMAIL",
},
],
});
// 返回的data会作为json-server的数据
return data;
};
使用mock 随机生成10个数据。
2.2 启动json-server 服务 注意:需要进入到数据文件的层级,执行以下命令
json-server --watch --host 0.0.0.0 --port 3001 mockTest.js
设置 --host 0.0.0.0 就可以使用本机IP访问。
如下图所示,表示,启动成功。
![nuxt 使用 json-server 搭建后台](https://img.it610.com/image/info9/400e9459a9664095b601f22351e898d7.jpg)
文章图片
通过本机IP就可以访问数据了
![nuxt 使用 json-server 搭建后台](https://img.it610.com/image/info9/2d051e1a74024026b44b79b3547cce57.png)
文章图片
【nuxt 使用 json-server 搭建后台】至此,就可以像正常接收API 一样,在前端接收数据了。
推荐阅读
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件
- android|android studio中ndk的使用
- 使用协程爬取网页,计算网页数据大小