nuxt 使用 json-server 搭建后台

A_Ghost

json-server是一款基于Node.js的服务器,为前端开发人员可以提供一个高仿真的RESTFul后台服务(数据原型),最让人欢欣的是,整个服务的搭建过程不需要编写任何代码,最快只需要1分钟。
配合上mock ,随机生成后端数据了。

1,安装

npm install -g json-server

本来是打算使用 yarn add -g json-server 或 yarn add json-server 安装,但最后都不能正常使用。于是采用了npm 安装。

2,使用

2.1 编写数据文件。

为了测试暂时先将数据存到了 src/static/jsonData/mockTest.js
最好是单独形成一个文件,并编写README。

// 用mockjs模拟生成数据
const Mock = require('mockjs');

module.exports = () => {
  // 使用 Mock
  const data = 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访问。
如下图所示,表示,启动成功。

通过本机IP就可以访问数据了

结合之前的文章 nuxt---axios封装+环境变量配置 配置一下环境变量,将接口封装一下

2.3,json-server API

json-server 提供 GET,POST, PUT, PATCH ,DELETE等请求的API。还提供排序,筛选,分页等功能。具体方法可以查看官方文档:json-server 官网
测试一下 put 方法修改一下数据:

getTempGameList() {
    this.$axios.$put("http://192.168.XX.XXX:3001/list/3",{
      id: '3',
      email: '122111.com'
    })
}

修改结果:

注:修改后的数据只在当前启动的服务下有效,当重新启动服务之后,数据会还原为原始数据。


至此,就可以像正常接收API 一样,在前端接收数据了。

参考链接:
中文json-server教程 json-server 详解

阅读 166
10 声望
0 粉丝
0 条评论
10 声望
0 粉丝
文章目录
宣传栏