当前位置：首页 > 资讯 > 技术文档

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

时间：2021-05-02 20:56 编辑：来源：阅读：
扫一扫，手机访问

摘要：Vue-cli 使用json server在本地模拟请求数据的示例代码

[b]写在前面：[/b] 开发的时候，前后端不论是否分离，接口多半是滞后于页面开发的。所以建立一个REST风格的API接口，给前端页面提供虚拟的数据，是非常有必要的。json server 作为模拟工具，因为设置简单，容易上手。本文是做一个简单的上手介绍，有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 [b]json server 工具:[/b] 在后台还没给接口之前，使用JSON-Server搭建一台JSON服务器，将接口要返回的数据放在json文件里面。然后请求这些数据，这样我们可以先做一些东西，等后台接口好了之后直接替换就可以了，不必一直傻傻的等后端的接口。安装：

npm install json-server --save //json server
npm install axios --save //使用axios发送请求

[b]json文件：[/b] 创建一个json文件，起名叫db.json，文件放置在跟index.html平级的目录中，也可以放置在static文件夹中，db.json文件里面的内容，是一个对象。 [b]设置[/b]：位置： build/dev-server.js

//json-server 假数据
var jsonServer = require('json-server') //引入文件
var apiServer = jsonServer.create(); //创建服务器
var apiRouter = jsonServer.router('db.json') //引入json 文件 ，这里的地址就是你json文件的地址
var middlewares = jsonServer.defaults(); //返回JSON服务器使用的中间件。
apiServer.use(middlewares)
apiServer.use('/json',apiRouter)
apiServer.listen( port + 1,function(){ //json服务器端口:比如你使用8080,这里的json服务器就是8081端口
 console.log('JSON Server is running') //json server成功运行会在git bash里面打印出'JSON Server is running'
})

如图所示： [img]http://files.jb51.net/file_images/article/201711/201711020904345.png[/img] 请求接口代理：

proxyTable: {
 '/api': {
  target: 'http://localhost:8081/', // 通过本地服务器将你的请求转发到这个地址
  changeOrigin: true, // 设置这个参数可以避免跨域
  pathRewrite: {
   '/api': '/'
  }
 },
},

如下图所示： [img]http://files.jb51.net/file_images/article/201711/201711020904346.png[/img] npm run dev启动项目可以访问到你的json文件：现在服务器已经成功启动，在地址栏输入 localhost:8081，就可以看到的json文件，加上相应后缀即可访问文件里面的数据。 jsonserver服务器： [img]http://files.jb51.net/file_images/article/201711/201711020904357.png[/img] jsonserver服务器 json数据： [img]http://files.jb51.net/file_images/article/201711/201711020904358.png[/img] json数据 [b]axios请求json数据：[/b] 光看到这些数据可不行，我们还需要发起请求，请求到这些数据，然后执行各种各样的骚操作。 [b]main.js文件中：[/b]

import axios from 'axios';//引入文件
Vue.prototype.$ajax = axios;//将axios挂载到Vue实例中的$ajax上面,在项目中的任何位置通过this.$ajax使用

在组件中的使用方式，比如：

  this.$ajax({
    url:'/api/articles',//api 代理到json文件地址，后面的后缀是文件中的对象或者是数组
    method:'get',//请求方式
    //这里可以添加axios文档中的各种配置
   }).then(function (res) {
    console.log(res,'成功');
   }).catch(function (err) {
    console.log(err,'错误');
   })
//还可以像下面这么简写
 this.$ajax.get('api/publishContent').then((res) => {
  console.log(res,'请求成功')
 },(err)=>{
  console.log(err,'请求失败');
 });

[b]JSON-Server只接受GET请求，GitHub上提到：[/b] If you make POST, PUT, PATCH or DELETE requests, changes will be automatically and safely saved to db.json using lowdb. [b]文档：[/b] 附上[url=https://github.com/typicode/json-server]json server[/url]的github，和axios的中文文档，大家可以进去研究一下。 json server设置和使用起来还是蛮方便的，大家感兴趣的话，可以跟着文章设置一波。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：Vue.js实现表格动态增加删除的方法（附源码下载）
下一篇：vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）

资讯排行榜
更多>>