前端整合

前端代碼

KwgcFooter.vue

頁面底部

KwgcHeader.vue

頁面頭部

KwgcLogin.vue

---

用戶名:

密碼：

登錄

登錄驗證情況：

---

kwgcHeader.vue

---

這是首頁

---

在main.js里配置支持跨域

main.js

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

Vue.config.productionTip = false

// 引用axios，并設置基礎URL為后端服務api地址var axios = require('axios')axios.defaults.baseURL = 'http://localhost:8443/api'// 將API方法綁定到全局Vue.prototype.$axios = axios

/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: ''})

router/index.js 頁面路由代碼：

import Vue from 'vue'

import Router from 'vue-router'

//import HelloWorld from '@/components/HelloWorld'

import KwgcLogin from '@/components/manage/KwgcLogin.vue'

import KwgcIndex from '@/components/home/KwgcIndex.vue'

Vue.use(Router)

export default new Router({ routes: [ { path: '/', redirect: '/login' }, { path: '/index', name: 'KwgcIndex', component: KwgcIndex }, { path: '/manage', redirect: '/login' }, { path: '/login', name: 'KwgcLogin', component: KwgcLogin } ]})

config/index.js 跨域支持代碼,找到文件中的proxyTable位置修改為以下內容添加請求到后端的跨域支持:

proxyTable: {

'/api': {

target: 'https://localhost:8443',

changeOrigin: true,

pathRewrite: {

'^/api': ''

}

}

},

這里可以單獨跑下前端試試頁面能不能出來!

整合步驟

之前的文章已經幫助搭建好了前端項目,現在進入項目目錄下，執行 npm run build命令進行打包，會自動生成打包后的dist目錄文件,把里面的文件全部復制到上圖中的外層static中,包括static文件夾.

接下來訪問:localhost:8080就可以看到登錄頁面了.

至此,前后端簡單的整合就搞定了,作者也正在探索更多難點,希望朋友們能夠一起成長.

總結

如果有任何問題可以在底下留言,如果大家都不能成功需要源碼,可以在github上提供,因為暫時不知道反饋情況,所以還是看留言的多少來定吧!

未完待續,你的鼓勵是我前進的動力^_^

總結

以上是生活随笔為你收集整理的vue axios 跨域_SpringBoot+Vue从零开始搭建系统(三)前后端整合二的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。