前端整合

前端代码

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上提供,因为暂时不知道反馈情况,所以还是看留言的多少来定吧!

未完待续,你的鼓励是我前进的动力^_^