vuejs2-3获取api数据

1 build/dev-server.js (模拟后台对地址的处理)

//模拟后台对前台地址请求的处理
var appData = require('../data.json') // 获取data.json对象
var seller = appData.seller // 获取这个对象[seller]的内容
var goods = appData.goods // 获取这个对象[goods]的内容
var ratings = appData.ratings // 获取这个对象 [ratings]的内容

var apiRoutes = express.Router();

// 对前台/seller的处理
apiRoutes.get('/seller', function (req, res) {
  res.json({
    errno: 0,
    data: seller
  });
});

// 对前台/goods的处理
apiRoutes.get('/goods', function (req, res) {
  res.json({
    errno: 0,
    data: goods
  })
});
// 对前台/ratings的处理
apiRoutes.get('/ratings', function (req, res) {
  res.json({
    errno: 0,
    data: ratings
  });
});

app.use('/api', apiRoutes);

2 src/App.vue获取数据

<script>
  import header from 'components/header/header.vue'; // 引入header组件
  import {urlParse} from 'common/js/urlParse';
                              // 引入urlParse.js文件 window.loacation.search操作
  const ERR_OK = 0;

  export default {
    data() {
      return {
        seller: {
          id: (() => {
            let queryParam = urlParse(); // 获取地址中的查询字符串
            return queryParam.id;
          })()
        }
      };
    },
    created() {
      let url = '/api/seller?id=' + this.seller.id;
      this.$http.get(url).then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          console.log(response);
          this.seller = Object.assign({}, this.seller, response.data); // 扩展seller对象
        }
      });
    },
    components: { // 注册header组件
      'v-header': header
    }
  };
</script>

data.json数据

3 检测是否获取到数据（前台通过请求/api/seller已经获取到数据，后台并添加了errno:0表示数据可用）