vue-cli项目中怎么使用mock数据
2017-09-27 14:50
796 查看
在vue项目中, mock数据可以使用 node 的 express模块搭建服务
1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件
2.在build目录下的 dev-server.js的文件作如下更改
var appData = require('../test/data.json') // 获取数据 var apiRoutes = express.Router(); //get请求 apiRoutes.get('/seller',function(req,res){ res.send({ appData }); }); app.use('/api',apiRoutes);
3. 在.vue做请求, 就可以成功获取data.json的数据了, 下面使用 axios 进行请求
axios.get('/api/seller',{ params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
请求成功, 获取到数据
4. 如过要做post请求, 需要对 dev-server.js 文件做对应的修改
apiRoutes.post('/seller',function(req,res){ res.send({ appData }); });
这样就可以在vue 项目中进行模拟 ajax 请求了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 详解vue-cli项目中怎么使用mock数据
- 【vue2.0】解决使用vue-cli生成项目后项目地址自动添加#号的问题
- vue-cli构建项目使用 less
- vue2.0实战之使用vue-cli搭建项目(2)
- Vue.js学习之路—使用vue-cli搭建项目
- 用vue-cli构建了项目之后在webstorm开发,用npm run dev跑本地服务,经常修改之后在浏览器刷新没反应,偶尔才会有刷新,需要重新跑一遍npm run dev才会更新,这是怎么回事呢?
- vue学习笔记(一)使用npm,webpack,vue-cli搭建vue项目
- vue2.0新手填坑攻略之使用vue-cli搭建vue项目开发环境到项目发布
- vue-cli 构建的项目中如何使用 Less
- Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
- 使用 vue-cli 可以快速创建 vue 项目
- vue-cli项目使用scss
- 前后端分离的j2ee的web项目,使用vue方式,即{{}}方式批量传入前端参数,遇到一个一个问题,页面上一开始有{{}},怎么处理?
- vue-cli+webpack在生成的项目中使用bootstrap方法(一)
- 如何使用vue-cli生成项目
- vue2.0项目实战(2)使用 vue-cli 搭建项目
- 使用vue-cli搭建vue项目简单教程
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
- vue-cli+webpack在生成的项目中使用bootstrap实例代码
- vue-cli的使用,创建项目,教程,上手,vue脚手架的使用