详解vue-cli中模拟数据的两种方法

在main.js中引入vue-resource模块，Vue.use(vueResource).

1.使用json-server(不能用post请求)

接下来找到build目录下的webpack.dev.conf.js文件，在const portfinder = require('portfinder')后面引入json-server.

/*引入json-server*/
const jsonServer = require('json-server')
/*搭建一个server*/
const apiServer = jsonServer.create()
/*将db.json关联到server*/
const apiRouter = apiServer.router('db.json')
const middlewares = jsonServer.defaults()\
apiServer.use(apiRouter)
apiServer.use(middlewares)
/*监听端口*/
apiServer.listen(3000,(req,res)=>{
 console.log('jSON Server is running')
})

现在重启服务器后浏览器地址栏输入localhost:3000能进入如下页面则说明json server启动成功了

现在找到config文件夹下的index.js文件，在dev配置中找到proxyTable:{} 并在其中配置

'/api':{
  changeOrigin:true, //示范允许跨域
  target:"http://localhost:3000", //接口的域名
  pathRewrite:{
    '^/api':'' //后面使用重写的新路径，一般不做更改
  }
}

现在可以使用localhost:8080/api/apiName 请求json数据了

在项目中通过resource插件进行ajax请求

在data (){}前使用钩子函数created:function(){

  this.$http.get('/api/newsList')
    .then(function(res){
      this.newsList = res.data //赋值给data中的newsList
    },function(err){
      console.log(err)
    })
}

2.使用express(可以使用post请求)

在项目中新建routes文件并在其中新建api.js,内容如下：

const express = require('express')
const router = express.Router()
const apiData = require('../db.json')
router.post('/:name',(req,res)=>{
  if(apiData[req.params.name]){
    res.json({
      'error':'0',
      data:apiData[req.params.name]
    })
  }else{
    res.send('no such a name')
  }
})

接下来找到build目录下的webpack.dev.conf.js文件，在const portfinder = require('portfinder')后面引入express,如下：

const express = require('express')
 const app = express()
 const api = require('../routes/api.js')
 app.use('/api',api)
 app.listen(3000)

现在找到config文件夹下的index.js文件，在dev配置中找到proxyTable:{} 并在其中配置

'/api':{
  changeOrigin:true, //示范允许跨域
  target:"http://localhost:3000", //接口的域名
  pathRewrite:{
    '^/api':'/api' //后面使用重写的新路径，一般不做更改
  }
}

重启之后，便可以post请求访问数据了.

总结

以上所述是小编给大家介绍的vue-cli中模拟数据的两种方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue新vue-cli3环境配置和模拟json数据的实例

    最近在研究学习vue,发现环境配置特麻烦,就是跟着文档步骤一步一步来,也会遇到各种想不到的坑,vue-cli3的配置比老的简洁了很多,与以往的配置也有所不同: 1.安装步骤以前是 npm install vue-cli -g 现在是: npm install -g @vue/cli 2.vue-cli2 新建项目 vue init webpack Vue-Project vuecli3新建项目,在你创建后会有一个保存当前配置的功能 vue create <project-name> vue-c

  • Vue使用json-server进行后端数据模拟功能

    正开发过程中 前后端分离或者不分离 ,接口多半是之后与页面的开发 ,所以建立rest的APL的接口 给前端提供虚拟的数据是非常必要的 所以这里我使用了json-server作为工具,支持CORS和JSONP跨域请求,支持GET, POST, PUT, PATCH 和 DELETE 方法,更提供了一系列的查询方法,如limit,order等,接下来我把我自己的上使用心写成文档 安装 首先必须有node环境(都用到json-server一定会有node环境吧)然后全局安装json-server np

  • vue-cli配置环境变量的方法

    vue-cli配置环境变量的方法

    在实际项目开发中,经常会碰到需要环境变量的情景,在vue-cli的环境下,默认已经配置了一个NODE_ENV的环境变量,当npm run dev的时候这个是development, 当npm run build 的时候这个是production.用过vue-cli开发的通常对这个都不陌生,用这个最多的基本就是我们配置ajax请求的域名头了, if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://

  • vue配置请求本地json数据的方法

    本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下: 在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加 const express = require('express') const app = express() const appData = require('../data.json') // 加载本地json文件 const seller = appDa

  • vue-resource + json-server模拟数据的方法

    本文介绍了vue-resource + json-server模拟数据,分享给大家,具体如下: 一.安装 npm install vue-resource --save npm install json-server --save 二.配置与使用vue-resource // main.js import VueResource from 'vue-resource' Vue.use(VueResource) this.$http.get('api/getNewsList') .then(fun

  • 详解vue-cli中模拟数据的两种方法

    在main.js中引入vue-resource模块,Vue.use(vueResource). 1.使用json-server(不能用post请求) 接下来找到build目录下的webpack.dev.conf.js文件,在const portfinder = require('portfinder')后面引入json-server. /*引入json-server*/ const jsonServer = require('json-server') /*搭建一个server*/ const

  • 详解git的分支与合并的两种方法

    如何将两个分支合并到一起.就是说我们新建一个分支,在其上开发某个新功能,开发完成后再合并回主线. 1.   git merge 咱们先来看一下第一种方法 -- git merge 在 Git 中合并两个分支时会产生一个特殊的提交记录,它有两个父节点.翻译成自然语言相当于:"我要把这两个父节点本身及它们所有的祖先都包含进来."下面具体解释. # 创建新分支 bugFix git branch bugFix # 切换到该分支 git checkout bugFix # 提交一次 git c

  • python向json中追加数据的两种方法总结

    目录 前言 1. list dump (不推荐) 2. json update (推荐使用) 总结 前言 json以其轻量级的数据交换格式,且易于阅读和编写而使用率很广泛,而使用json的过程中时而需要增加字段,本人验证两种方式之后将其集成梳理. 具体操作详情如下: 1. list dump (不推荐) 采用list方式,向json中添加字段.此法存在一定的问题,不推荐使用. 方法如下: (1)先创建一个列表: json_content = [] (2)将当前json文件中已有的内容读入列表中:

  • 详解vue项目中调用百度地图API使用方法

    详解vue项目中调用百度地图API使用方法

    步骤一:申请百度地图密钥: JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请  认证企业用户.百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二:在index.html中添加百度地图JavaScript API接口: <script src="http://api.map.baidu.com/api?v=1.4"

  • 详解Spring Boot 中实现定时任务的两种方式

    详解Spring Boot 中实现定时任务的两种方式

    在 Spring + SpringMVC 环境中,一般来说,要实现定时任务,我们有两中方案,一种是使用 Spring 自带的定时任务处理器 @Scheduled 注解,另一种就是使用第三方框架 Quartz ,Spring Boot 源自 Spring+SpringMVC ,因此天然具备这两个 Spring 中的定时任务实现策略,当然也支持 Quartz,本文我们就来看下 Spring Boot 中两种定时任务的实现方式. @Scheduled 使用 @Scheduled 非常容易,直接创建一个

  • 详解@angular/cli 改变默认启动端口两种方式

    因为本地希望开启两个项目,由于@angular/cli 生成项目默认是: 4200; 那么肯定会有端口冲突问题; 修改端口的两种方式: 1 修改 schema.json node_modules\@angular-devkit\build-angular\src\dev-server\schema.json { "title": "Dev Server Target", "description": "Dev Server target

  • php获取数组中重复数据的两种方法

    (1)利用php提供的函数,array_unique和array_diff_assoc来实现 复制代码 代码如下: <?php function FetchRepeatMemberInArray($array) {     // 获取去掉重复数据的数组     $unique_arr = array_unique ( $array );     // 获取重复数据的数组     $repeat_arr = array_diff_assoc ( $array, $unique_arr );    

  • Python实现栈的方法详解【基于数组和单链表两种方法】

    Python实现栈的方法详解【基于数组和单链表两种方法】

    本文实例讲述了Python实现栈的方法.分享给大家供大家参考,具体如下: 前言 使用Python 实现栈. 两种实现方式: 基于数组 - 数组同时基于链表实现 基于单链表 - 单链表的节点时一个实例化的node 对象 完整代码可见GitHub: https://github.com/GYT0313/Python-DataStructure/tree/master/5-stack 目录结构: 注:一个完整的代码并不是使用一个py文件,而使用了多个文件通过继承方式实现. 1. 超类接口代码 arra

  • 详解Vue Cli浏览器兼容性实践

    浏览器市场占有率 在处理浏览器兼容性问题之前,我们先来看一下现在的浏览器市场份额是怎样的,

  • Vue项目中打包优化的四种方法详解

    目录 前言 打包优化的目的: 性能优化的主要方向: 1.异步组件配置(路由懒加载) 2.去掉打包后的 console 3.使用CDN 4.yarn build生成dist目录 总结 前言 默认情况下,通过import语法导入的第三方依赖包,最终会全部打包到一个js文件中,会导致单文件体积过大大,在网速底下时会阻塞网页加载,影响用户体验. 打包优化的目的: 1.项目启动速度,和性能 2.必要的清理数据 3.减少打包后的体积 第一点是核心,第二点呢其实主要是清理console 性能优化的主要方向:

随机推荐