前端整合
![b142b90599a9809dec50a1d039a83139.png](https://i-blog.csdnimg.cn/blog_migrate/64c5ce55d4904fcae07fc7d381968ac5.jpeg)
前端代码
![4256a2a03dac5399777b87c09c8dd01f.png](https://i-blog.csdnimg.cn/blog_migrate/4d0c844ff394a9bc8a0d9bdbc9f6d657.jpeg)
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就可以看到登录页面了.
![8dff862d68b016bbcb4ed37e9dc001b0.png](https://i-blog.csdnimg.cn/blog_migrate/98b938b0288431ec60be43f3cda16154.jpeg)
至此,前后端简单的整合就搞定了,作者也正在探索更多难点,希望朋友们能够一起成长.
总结
如果有任何问题可以在底下留言,如果大家都不能成功需要源码,可以在github上提供,因为暂时不知道反馈情况,所以还是看留言的多少来定吧!