nuxt 项目开发之 json-server API 服务搭建

nuxt 项目开发 - json-server 服务搭建

导读

我们在项目开发过程中，是需要第三方接口渲染jokes列表的，jokes页面也是需要分页，以及搜索查询的，
所以呢，我们需要搭建一个小型服务器，来满足数据的分页，搜索查询；所以呢，我们可以选择json-server这样
的一款本地服务的工具，它可以指定某个json文件为api接口的数据源；

详细介绍

1. 好，我们来看一下这个json-server的官方文档介绍 ，github 地址如下：

 文档地址：https://github.com/typicode/json-server
 分页锚点：https://github.com/typicode/json-server#paginate

2. 接下来呢，我这里呢，爬取了一些jokes相关的数据，存放在了json文件中，所以呢，我们可以直接使用json-server来
   驱动这个json文件，模拟数据库操作的功能，创建一个微型的api服务器；好我们来安装一下 json-server ，使用这个json文件
   来启动一下这个服务；

• 安装 json-server

    cnpm install -g json-server

• 创建一个 json 文件，这里呢，我们直接使用这个 data.json 创建我们的服务，我们在命令行输入一下命令

    json-server --watch data.json --port 3002

打印如下：

 C:\Users\92809\Desktop\nuxt 详解\test>json-server --watch data.json --port 3002

  \{^_^}/ hi!

  Loading data.json
  Done

  Resources
  http://localhost:3002/author
  http://localhost:3002/jokes

  Home
  http://localhost:3002

  Type s + enter at any time to create a snapshot of the database
  Watching...

• 启动服务后，我们在浏览器来测试下，我们在浏览器输入：http://localhost:3002/jokes

• 我们来增强一下，我们让没页显示5条，我们在url后面添加 ?_limit=5 ，刷新页面，查看效果：

好的，我们的每页显示的条数已经变成5条了，接下来我们设置下&_page=x，url为 http://localhost:3002/jokes?_limit=5&_page=5 ，
好的，我们的 page 页面就变化了，所以这个分页的功能基本是可以满足我们的开发需求的，接下来呢，我们来测试下搜索查询功能，http://localhost:3002/jokes?q=why，

然后我们就把句子中带why的都查询出来了，说明搜索功是可以直接使用的；

好，到这里呢，我们的api服务功能呢，是可以满足项目开发的基本使用的；接下来呢，我们继续开发项目，用这个api接口查询出默认
的20条jokes，并使用bootstrapVue里面的card组件，遍历在首页page中；