mock数据的应用

mock数据

vue本地开发 自己写mock数据

• 引入假数据
• 配置假数据
• 访问假数据

---

引入假数据

在目录下的static（数据多的情况下） 或者 根目录（数据少的情况下）下引入json数据

配置假数据

在bulid目录下的dev-server.js文件中配置

“`
const app = express()
//my ON
let appData = require(‘../data’)

let seller = appData.seller
let goods = appData.goods
let ratings = appData.ratings
let apiRouters = express.Router()

apiRouters.get(‘/seller’,function(reg,res){
res.json({
errno: 0,// 数据正常返回0
data: seller
})
})

apiRouters.get(‘/goods’,function(reg,res){
res.json({
errno: 0,
data: goods
})
})

apiRouters.get(‘/ratings’,function(reg,res){
res.json({
errno: 0,
data: ratings
})
})

app.use(‘/api’,apiRouters)

// my END“`

访问假数据

安装vue-resource （作用 同ajax）
localhost：8080/aip/goods

扫描二维码关注公众号，回复： 4413667 查看本文章

created () {
this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
this.$http.get('./api/goods').then((result) => {
result = result.body
if (result.errno === ERROK) {
this.goods = result.data
/* console.log(this.goods) */
// 数据加载完毕让 better-scroll 起作用 因为异步要放在$nextTick()中
this.$nextTick(() => {
this._initScroll()
this.__calculateHeight()
})
}
})
}

---

浏览器兼容

1.vue应用了许多es6的语法因此 不兼容IE8及以下浏览器