前后端分離之前端vue

npm install --global vue-cli
vue init webpack my-project

  cd my-project

  npm install

  npm run dev

這樣就構建了一個本地vue項目

結下來，如何調用后端接口呢？

安裝 vue-resource   

npm i vue-resource --save

 

在main.js里面加入以下代碼

import VueResource from 'vue-resource'

Vue.use(VueResource) 
Vue.http.options.emulateJSON = true;  //http請求設置
Vue.http.options.headers = {
  'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' //http請求頭設置form表單提交

};

找到src\components\Hello.vue 把下面代碼替換原來的，加入了表單，點擊登錄，調用后端的接口

<template>
  <div>
    <div>
      <input
              type="text"
              placeholder="Enter your username"
              v-model="info.username"
      >
    </div>
    <div>
      <input
              type="password"
              placeholder="Enter your password"
              v-model="info.password"
      >
    </div>
    <button @click="submit()">登錄</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        info: {
          username: '',
          password: ''
        }
      }
    },
    methods: {
      submit () {
        var info = {
          data:JSON.stringify(
            {
              username: this.info.username,
              password: this.info.password
            }
          )
        }
        this.$http.post('/api/user/login', info).then(function (data) {
          console.log(data.data)
        }, function (err) {
          console.log(err)
        })
      }
    }
  }
</script>

由於后端的接口域名是是www.bobomusic.com/api/，post請求里面的接口域名其實是localhost:8080/api/, 這樣是調用不到的，怎么辦呢？

vue的config\index.js里面可以設置反向代理到后端的接口域名，打開index.js，加入如下圖里面紅色框的一段代碼

'/api': {
        target: 'http://www.bobomusic.com/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }

然后在頁面點擊登錄按鈕，調用成功，返回的數據如下圖：