HAP_Vue实现前后端分离（调用hap后台接口）

项目需求：
  实现前后端分离：vue+后端接口(hap)

• vue.js安装

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

测试命令：
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

去到一个目录下

vue init webpack 项目name

安装项目所需的依赖包资源

cnpm install

运行项目

npm run dev

• idea开发项目

  
  
  

  image.png

• vue获取接口数据

<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

备注：

问题一：

image.png

问题二：

image.png

解决：执行： npm install axios

image.png

问题三：未引入

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