项目需求：
实现前后端分离：vue+后端接口(hap)
- vue.js安装
测试命令：
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"/>
