vue学习笔记四:在vue项目里面使用mock数据
首先需要在自己的项目下面npm install mockjs --save-dev由于我的项目使用的是axios在本地模拟,所以需要npm install axios --save-dev上面两部分都完成,那就开始搭建了下面是我的项目结构为了进行本地的数据模拟,我在src下面建立了一个文件夹,命名为api,从图上可以看到有三个文件分别为config.js...
·
首先需要在自己的项目下面
npm install mockjs --save-dev
由于我的项目使用的是axios在本地模拟,所以需要
npm install axios --save-dev
上面两部分都完成,那就开始搭建了
下面是我的项目结构
为了进行本地的数据模拟,我在src下面建立了一个文件夹,命名为api,从图上可以看到有三个文件分别为
config.js getdata.js mock.js
config.js对应的代码如下:
import axios from 'axios'
//配置api地址
const baseUrl = 'http://localhost:8081'
//axios设置key都是默认的不允许改动的
const $ajax = axios.create({
baseURL:baseUrl,
timeout:5000
})
export default $ajax
mock.js对应的代码如下:
const Mock = require('mockjs')
const base = 'http://localhost:8081'
Mock.mock(base+'/api/login','get',{
"code":"success",
})
Mock.mock(base+'/api/forgetpassword','get',{
'name':'@name',
'age|1-100':100,
'color':'@color'
})
Mock.mock(base+'/api/threemonth','get',{
"code":"success",
"data":{
"bid_amount":"554749745.00",
"bid_user":"13918"
}
})
getdata.js对应的代码如下:
import $ajax from './config'
/*登录接口*/
export const login = data => $ajax.get('/api/login',data)
/*忘记密码 */
export const forgetpassword = data =>$ajax.get('/api/forgetpassword',data)
/*近三个月数据统计 */
export const threemonth = data =>$ajax.get('/api/threemonth',data)
这些配置好后,在main.js里面引入
require('./api/mock')
下面的截图为在login.vue里面的引入以及使用
这些都完成后,启动项目
npm run dev
打开浏览器控制台:
over
更多推荐
已为社区贡献21条内容
所有评论(0)