在学习vue.js的过程中,我们需要开放的API来模拟数据,也可以是自己手写的简单的json格式的数据,那我们怎么把数据连接添加到vue项目中呢?这也是我们前端开发vue项目和后端连接起来的关键。
一、定义数据和引入数据看教学视频的时候,老师教我们实在dev-server.js文件中定义数据和引入数据,可是我新建的项目中找不到这个文件?原来,更新了!!!新版本的vue项目中没有dev-server.js文件了,被webpack.dev.config.js代替了,所以我们现在是要在webpack.dev.config.js文件中定义数据和引入数据。
例如:
const portfinder = require('portfinder')
//在着这里开始定义数据和引入数据
const express = require('express')
const app = express()
var appData = http://www.srcmini.com/require('../data.json')//加载本地数据文件
var apiRoutes = express.Router()//创建路由
app.use('/api', apiRoutes)//’/api’是路由得路径
二、mock数据通过第一步定义好数据和引入数据后,我们现在要对数据文件做返回数据的操作,同样也是在webpack.dev.config.js文件中,找到devServer:{ },我们把数据的获取写在里面。我们要用get()方法获得返回的数据,get()携带连个参数,第一个是路由得路径,第二个是返回数据的方法。
例如:
devServer: {
//开始mock数据
before(app) {
app.get('/api/appData', function(req,res) {
res.json({
errno: 0,
data: appData
})//接口返回json数据,上面配置的数据appData就赋值给data请求后调用
})
},
最后可以试一下,是不是取得了返回了json格式的数据,由于我是本地的项目,所以我的地址是http://localhost:8085/api/appData。
【文件目录中没有dev-server.js文件如何mock数据】通过这个方法,我们在开发vue项目的时候,直接拿到数据连接就可以独自完成整个项目了。
推荐阅读
- 如何使用JavaScript从html输入数组获取值()
- C语言简明教程(十九)(高级数据结构和算法详解)
- C语言简明教程(十八)(预处理指令和C函数库完整详解)
- C语言简明教程(十七)(位操作之二进制、字节、按位操作和位字段)
- 微信小程序开发工具——像web页面那样简单开发
- vue项目中引入element-ui框架的流程和注意事项
- vue开发的手机网页如何在手机测试查看
- 好用的vue开发工具和插件——力荐篇
- vue开发微信小程序图标如何引入的问题——已解决