項(xiàng)目需求：
  實(shí)現(xiàn)前后端分離：vue+后端接口(hap)

• vue.js安裝

下載：https://nodejs.org/en/

測(cè)試命令：
node -v
npm -v

輸入以下命令npm -g install npm，更新npm至最新版本。

npm -g install npm

安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm安裝腳手架vue-cli

cnpm install -g vue-cli

去到一個(gè)目錄下

vue init webpack 項(xiàng)目name

安裝項(xiàng)目所需的依賴包資源

cnpm install

運(yùn)行項(xiàng)目

npm run dev

• idea開(kāi)發(fā)項(xiàng)目

  
  
  image.png

• vue獲取接口數(shù)據(jù)

<script src="../../node_modules/vue/dist/vue.js"/>
<script src="../../node_modules/vue-resource/dist/vue-resource.js"/>
<template>
 <h1>hh</h1>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'

var vueResource = require('vue-resource')
Vue.use(vueResource)

export default {
  data () {
    return {
      news: [],
      error: ''
    }
  },

  created:
      function () {
        this.getData()
      },

  methods: {
    // getDate: function () {
    //   this.$nextTick(() => {
    //     this.$.ajax({
    //       type: 'get',
    //       url: 'http://localhost:8080/api/public/xxinv/outstorage/trx/querytest',
    //       data: { user_id: 1 },
    //       success: function (data) {
    //         alert(data)
    //         console.log(data)
    //       }
    //     })
    //   })
    // }
    getData: function () {
      const that=new Vue
      axios.get('http://localhost:8080/api/public/xxinv/outstorage/trx/querytest').then((response) => {
       // that.$set('news', response.body.rows)
        alert(response.body)
        console.log(response.data.rows[0].organizationName)
      }, (response) => {
        this.error = response.error_code
      })
    }
  }
}
</script>

image.png

備注：

問(wèn)題一：

image.png

問(wèn)題二：

image.png

image.png

問(wèn)題三：未引入

<script src="../../node_modules/vue/dist/vue.js"/>
<script src="../../node_modules/vue-resource/dist/vue-resource.js"/>