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
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及以下瀏覽器