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


Posted in Javascript onJuly 03, 2018

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

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

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

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启动成功了

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

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

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

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

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

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

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

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

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

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中模拟数据的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
jQuery对val和atrr("value")赋值的区别介绍
Sep 26 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
基于vue.js实现购物车
Jan 15 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
JavaScript Date对象功能与用法学习记录
Apr 28 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 #Javascript
基于React+Redux的SSR实现方法
Jul 03 #Javascript
VUE 3D轮播图封装实现方法
Jul 03 #Javascript
vue.js轮播图组件使用方法详解
Jul 03 #Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 #Javascript
解析vue data不可以使用箭头函数问题
Jul 03 #Javascript
详解Vue SPA项目优化小记
Jul 03 #Javascript
You might like
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
python开发之thread实现布朗运动的方法
2015/11/11 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
机器学习python实战之手写数字识别
2017/11/01 Python
对python判断是否回文数的实例详解
2019/02/08 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
Python多线程thread及模块使用实例
2020/04/28 Python
Python面试题集
2012/03/08 面试题
医科大学生毕业的自我评价分享
2013/11/12 职场文书
初中物理教学反思
2014/01/14 职场文书
领导干部作风建设总结
2014/10/23 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
讲文明倡议书
2015/04/29 职场文书
高中军训感想
2015/08/07 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书