Vue-cli使用json服务器在本地模拟请求数据的示例代码

写在前面：

开发时，无论前端和后端是否分离，界面大多滞后于页面开发。因此，非常有必要建立一个REST风格的API接口，为首页提供虚拟数据。作为一个模拟工具，json server易于设置和使用。本文是简单的介绍。有需要的朋友可以参考一下。喜欢的可以点赞或者关注，希望对大家有所帮助。

Json服务器工具：

在后台给出接口之前，用json-Server搭建一个json服务器，把接口要返回的数据放在JSON文件中。然后请求数据，这样我们就可以先做一些事情，在后端接口准备好之后直接替换，而不是一直等待后端接口。

安装：

Npm安装json-server-save//json服务器NPM安装axios-save//使用axios发送请求JSON文件：

创建一个名为db.json的json文件。该文件被放在与index.html相同的目录中，或者在一个静态文件夹中。db.json文件中的内容是一个对象。

设置：

位置：build/dev-server.js

//json-server虚拟数据var JSON server=require(' JSON-server ')//导入文件var apiServer=jsonserver . create()；//创建server var API router=json server . router(' db . json ')//导入JSON文件，其中地址就是你的JSON文件的地址var中间件=JSON server . defaults()；//返回JSON服务器使用的中间件。使用(中间件)apiserver.use ('/JSON '，apirouter) apiserver.listen(端口1，function () {//JSON server端口：例如如果使用8080，这里的JSON server就是8081端口console.log ('JSON server正在运行')//JSON server会在git bash中打印' json server正在运行' }，如图所示：

请求接口代理：

代理表： { '/API ' : { Target : ' http://LocalHost 33608081/'，//通过本地服务器将您的请求转发到此地址更改源： True，//设置此参数以避免跨域路径重写3360 {'/API' :'/。

npm运行开发启动项目可以访问您的json文件：

现在服务器已经成功启动，在地址栏输入localhost:8081，就可以看到json文件，并添加相应的后缀来访问文件中的数据。

Jsonserver服务器：

Jsonserver服务器

Json数据：

Json数据

Axios请求json数据：

我们不能只看到这些数据。我们还需要发起请求，请求这些数据，然后执行各种操作。

在main.js文件中：

从“axios”导入axios；//导入文件Vue.prototype. $ ajax=axios//在Vue实例中的$ajax上挂载axios，并使用这个。$ajax，例如：

这个。$ Ajax ({url:'/API/articles '，//API代理到json文件地址，其后面的后缀是文件中的对象或数组method:'get '，//request method//axios文档中的各种配置可以在这里添加})。然后(函数(res) {console.log (res })。catch(function(err){ console . log(err，' error ')；})//这个。$ Ajax.get ('API/publishcontent ')。然后((RES)={console.log (RES，'请求成功')}，(err)={ console.log(err，'请求失败')；});JSON-Server只接受GET请求，GitHub说：

如果您发出POST、PUT、PATCH或DELETE请求，更改将使用lowdb自动安全地保存到db.json。

文档：

附件是json服务器的github和axios的中文文档。你可以进去研究一下。

Json服务器的设置和使用非常方便。如果你感兴趣，可以用文章设置一个波浪。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。