vue2.0模拟后台数据交互

import VResource from ‘vue-resource‘

Vue.use(VResource);

var express = require(‘express‘)

//express 配置server
var apiServer = express()
var bodyParser = require(‘body-parser‘)
apiServer.use(bodyParser.urlencoded({ extended: true }))
apiServer.use(bodyParser.json())
var apiRouter = express.Router()
var fs = require(‘fs‘)
apiRouter.route(‘/:apiName‘) //接口路径
  .all(function (req, res) {
    fs.readFile(‘./data.json‘, ‘utf8‘, function (err, data) {  //读取接口文件
      if (err) throw err
      var data = JSON.parse(data)
      if (data[req.params.apiName]) {
        res.json(data[req.params.apiName])
      }
      else {
        res.send(‘no such api name‘)
      }

    })
  })

apiServer.use(‘/api‘, apiRouter);
apiServer.listen(3000, function (err) {
  if (err) {
    console.log(err)
    return
  }
  console.log(‘Listening at http://localhost:‘ + 3000 + ‘\n‘)
})

//配置转化：从3000 => 8080
    //这下面就是要加的代码！！！！！
    proxyTable:{
      ‘/api‘:‘http://localhost:3000/‘
    },

// Various Dev Server settings
    host: ‘localhost‘, // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    //配置转化：从3000 => 8080
    //这下面就是要加的代码！！！！！
    proxyTable:{
      ‘/api‘:‘http://localhost:3000/‘
    },

{
  "newsList": [
    {
      "title": "数据统计",
      "url": "http://starcraft.com"
    },
    {
      "title": "数据预测",
      "url": "http://warcraft.com"
    },
    {
      "title": "流量分析",
      "url": "http://overwatch.com"
    },
    {
      "title": "广告发布",
      "url": "http://hearstone.com"
    }
  ]
}

export default {
    data(){
      return{
        newsList: []
      }
    },
    mounted(){
      this.getDatas();
    },
    methods:{
      getDatas(){
        let _this = this;
        this.$http.get(‘api/newsList‘).then((res)=>{
          _this.newsList = res.data;
        }).catch((err)=>{

        })
      }
    }
  }