vue开发 请求本地JSON数据

VUE开发请求本地数据的配置.webpack.dev.conf.js

1.webpack.dev.conf.js配置本地数据访问

a.在const portfinder = require('portfinder')之后加：

var appData = require('../db.json')//加载本地数据文件（db.json）

var getNewsList = appData.getNewsList//获取对应的本地数据

var login = appData.login

var getPrice = appData.getPrice

var createOrder = appData.createOrder

找到devServer{}在里面添加：

before (app) {

app.get('/api/getNewsList', (req, res) => {

res.json({
  data: getNewsList
})//接口返回json数据，上面配置的数据getNewsList就赋值给data请求后调用

}),

app.get('/api/login', (req, res) => {
  res.json({
    data: login,
  })
}),
app.get('/api/getPrice', (req, res) => {
  res.json({
    data: getPrice
  })
}),
app.get('/api/createOrder', (req, res) => {
  res.json({
    data: createOrder
  })
})

}

db.json文件目录及内容：

{

"getNewsList": [

{
  "id": 1,
  "title": "新闻条目1新闻条目1新闻条目1新闻条目1",
  "url": "http://starcraft.com"
},
{
  "id": 2,
  "title": "新闻条目2新闻条目2新闻条目2新闻条目2",
  "url": "http://warcraft.com"
},
{
  "id": 3,
  "title": "新闻条3新闻条3新闻条3",
  "url": "http://overwatch.com"
},
{
  "id": 4,
  "title": "新闻条4广告发布",
  "url": "http://hearstone.com"
}

],

"login": {

"username": "yudongdong",
"userId": 123123

},

"getPrice": {

"amount": 678

},

"createOrder": {

"orderId": "6djk979"

},

"getOrderList": {

"list": [
  {
    "orderId": "ddj123",
    "product": "数据统计",
    "version": "高级版",
    "period": "1年",
    "buyNum": 2,
    "date": "2016-10-10",
    "amount": "500元"
  },
  {
    "orderId": "yuj583",
    "product": "流量分析",
    "version": "户外版",
    "period": "3个月",
    "buyNum": 1,
    "date": "2016-5-2",
    "amount": "2200元"
  },
  {
    "orderId": "pmd201",
    "product": "广告发布",
    "version": "商铺版",
    "period": "3年",
    "buyNum": 12,
    "date": "2016-8-3",
    "amount": "7890元"
  }
]

}

}

2.组件里面：

created: function(){

this.$http.get('api/getNewsList')

.then((res) => {
  this.newsList = res.data.data
  console.log(res.data)
  console.log(res.data.data)
  console.log(this.newsList)
}, (err) => {
  console.log(err)
})

}

重新启动：npm run dev

注意：

res.data 返回的是一个对象，res.data.data返回的是一个数组

（我当时这里在页面就是不出来数据，之后..........纠结了好久才知道要这样的）

post请求：

app.post('/api/getNewsList', (req, res) => {

res.json({

data: getNewsList

})

}),