美文网首页
HAP_Vue实现前后端分离(调用hap后台接口)

HAP_Vue实现前后端分离(调用hap后台接口)

作者: 灯下驼贼 | 来源:发表于2018-10-26 15:08 被阅读0次
项目需求:
  实现前后端分离: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"/>

相关文章

  • HAP_Vue实现前后端分离(调用hap后台接口)

    vue.js安装 下载:https://nodejs.org/en/ 输入以下命令npm -g install n...

  • 前后端分离

    前后端分离的好坏? 前后端分离的主要概念就是:后台只需提供API接口,前端调用AJAX实现数据呈现!!!完美啊。后...

  • HAP_hap调用soap接口

    接口地址: hap定义接口: 接口: 构建请求报文,你也可以不用分离出来,直接写在下面的接口实现类中 接口实现: ...

  • 大前端Vue框架的开发流程介绍与实践

    前后端分离开发是目前流行的大趋势,所谓前后端分离,仅从技术层面讲主要是指前端通过调用后端提供的接口实现页面的交互逻...

  • Java接口开发经验之谈

    前言:现在开发中常使用前后端分离,后台开发使用springMVC框架进行后台接口的开发。经过最近的开发对接口开发有...

  • 六大接口管理平台,总有一款适合你的!

    前后端分离绕不开的接口测试 先聊一聊前端和后端分离的优点。前后端分离优点如下: 真正的实现前后端解耦,前端服务器使...

  • AJAX数据模拟之Mock

    出现的原因 1、开发进度的不同 2、前后端分离 优势 1、前后端分离—–定义好接口文档之后,前端人员不用再等待后台...

  • mock

    出现的原因 1、开发进度的不同2、前后端分离 优势 1、前后端分离—–定义好接口文档之后,前端人员不用再等待后台的...

  • mock

    出现的原因 1、开发进度的不同2、前后端分离 优势 1、前后端分离—–定义好接口文档之后,前端人员不用再等待后台的...

  • HAP_hap调用rest接口

    接口: 实现接口:

网友评论

      本文标题:HAP_Vue实现前后端分离(调用hap后台接口)

      本文链接:https://www.haomeiwen.com/subject/sjnktqtx.html