一、使用mock模拟后台数据
1、安装
npm install mockjs -S
2、在项目建立相应文件
3、img.json文件的代码如下:
{
"img": [
{
"url": "http://pic15.nipic.com/20110628/1369025_192645024000_2.jpg"
},
{
"url": "http://k.zol-img.com.cn/sjbbs/7692/a7691515_s.jpg"
},
{
"url": "http://pic37.nipic.com/20140113/8800276_184927469000_2.png"
},
{
"url": "http://pic29.nipic.com/20130530/12174133_162640398000_2.jpg"
},
{
"url": "http://pic37.nipic.com/20140110/17563091_221827492154_2.jpg"
},
{
"url": "http://b.hiphotos.baidu.com/lvpics/w=1000/sign=9b38971c908fa0ec7fc7600d16a758ee/c8ea15ce36d3d5394fe85aec3b87e950342ab0cc.jpg"
},
{
"url": "http://pic40.nipic.com/20140412/18428321_144447597175_2.jpg"
},
{
"url": "http://imgsrc.baidu.com/imgad/pic/item/72f082025aafa40f7f284840a164034f79f01944.jpg"
},
{
"url": "http://pic1.win4000.com/wallpaper/c/565bdafb046a5.jpg"
},
{
"url": "http://pic1.win4000.com/wallpaper/2018-06-13/5b2079cbaa1ea.jpg"
},
{
"url": "http://pic1.win4000.com/wallpaper/3/589ac4fd2341d.jpg"
}
]
}
4、mock.js代码如下:
const Mock = require("mockjs")
Mock.mock("/api/img","get",require("./json/img.json"))
5、在main.js添加一下代码
require('./mock/mock')
6、在App组件里面使用axios请求数据
export default {
name: 'App',
mounted(){
this.axios.get('/api/img')
.then(function(res){
console.log(res);
})
.catch(function(err){
//console.log(err);
})
}
}
说到使用axios请求数据,这里给大家说一下如何在vue-cli里面使用axios
两种方法,一种直接把axios挂载到vue构造函数的prototype属性上,组件中通过this.axios来拿到axios
第二种方法就是通过vue-axios来全局使用axios,组件中也是通过this.axios来拿到axios
第一种:
npm install axios -S
在main.js中添加:
import axios from 'axios'
Vue.prototype.axios = axios
在组件中使用this.axios
第二种方法:
npm install vue-axios -S
在main.js中添加:
import Vueaxios from 'vue-axios'
Vue.use(Vueaxios,axios)
在组件中使用this.axios
二、在项目建立一个json文件,然后在webpack.dev.conf.js里面配置
1、建立img1.json文件,代码和上面的img.json文件一样
2、VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-template 中已经去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替,所以 配置本地访问在webpack.dev.conf.js里配置即可。
然后在webpack.dev.conf.js文件里面,在const portfinder = require('portfinder')下面添加以下代码:
const express = require("express")
const imgdata = require("../img1.json")
const img = imgdata.img
const app = express()
const Routers = express.Router()
app.use("/api",Routers)
然后找到devServe,在里面添加以下代码:
before(app){
app.get("/api/img1",function(req,res){
res.json({
errno: 0,
data: img
});
})
}
最后保存webpack.dev.conf.js文件
3、在App组件里面请求数据,代码如下面所示:
mounted(){
this.axios.get('/api/img1')
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
})
}