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

 更新时间:2018年07月03日 17:01:30   作者:学前端的小新  
这篇文章主要介绍了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中模拟数据的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Vue父子组建的简单通信之控制开关Switch的实现

    Vue父子组建的简单通信之控制开关Switch的实现

    这篇文章主要介绍了Vue父子组建的简单通信之控制开关Switch的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Vue AST源码解析第一篇

    Vue AST源码解析第一篇

    这篇文章主要为大家详细介绍了Vue AST源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue-resource post数据时碰到Django csrf问题的解决

    vue-resource post数据时碰到Django csrf问题的解决

    这篇文章主要介绍了vue-resource post数据时碰到Django csrf问题的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-03-03
  • Vue.js表单控件实践

    Vue.js表单控件实践

    这篇文章主要为大家详细介绍了Vue.js表单控件实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Vue3中Suspense异步加载组件的问题

    Vue3中Suspense异步加载组件的问题

    在我们日常开发中,有些组件里面加载非常慢,导致我们路由跳转的时候回出现卡顿情况,这篇文章主要介绍了Vue3: Suspense异步加载组件,需要的朋友可以参考下
    2023-12-12
  • vue使用canvas实现移动端手写签名

    vue使用canvas实现移动端手写签名

    这篇文章主要为大家详细介绍了基于vue使用canvas实现移动端手写签名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • Vue实现文字上下滚动动画的示例代码

    Vue实现文字上下滚动动画的示例代码

    这篇文章主要为大家详细介绍了如何使用Vue实现超酷文字上下滚动动画,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下
    2024-03-03
  • 在Vue当中同时配置多个路由文件的方法案例代码

    在Vue当中同时配置多个路由文件的方法案例代码

    这篇文章主要介绍了在Vue当中同时配置多个路由文件的方法,包含具体代码,本文分步骤结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • Mint UI实现A-Z字母排序的城市选择列表

    Mint UI实现A-Z字母排序的城市选择列表

    这篇文章主要为大家详细介绍了Mint UI实现A-Z字母排序的城市选择列表,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 详解VScode编辑器vue环境搭建所遇问题解决方案

    详解VScode编辑器vue环境搭建所遇问题解决方案

    这篇文章主要介绍了VScode编辑器vue环境搭建所遇问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论