基于hyperledger fabric 联盟链 + vue cli的项目搭建完整教程（三）

三、vue项目前端搭建以及区块链后端（前后端分离）前期准备和跨域设置

1. vue 项目

前端vue项目自行设计，按照自己项目的商业计划书，我这里要做一个关于许可链的重要车辆轨迹存储DApp，并支持历史交易回溯

执行vue项目部署，删掉node_modules文件夹
执行

nvm use 10.6.0
npm install 
npm run serve

2. 区块链与vue前端跨域设置

nvm install 6.11.4
nvm use 6.11.4
npm install --save koa-bodyparser
npm install --save koa2-cors
nvm use 8.9.4

引入跨域、POST模块

const bodyParser = require('koa-bodyparser')
const cors = require('koa2-cors')
app.use(bodyParser());
app.use(cors());

在vue中配置axios，在main.js中添加

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.prototype.$http = axios
Vue.use(VueAxios,axios)

现在就可以调用区块链的接口node API了
如：

//发起插入区块链交易
      var username = "kunshen"
            this.$http({
     
              method : 'get',
              url : "http://localhost:3000/saveUser?username="+username,
              // data : username
            }).then(function(res){
     
              console.log(res);
              alert("投票交易hash tx_id: "+ res.data);
                // location.reload()
            });