前端整合

前端代码

KwgcFooter.vue

<template>

<div>页面底部</div>

</template>

<script>

export default{

name:'KwgcFooter'

}

</script>

KwgcHeader.vue

<template>

<div>页面头部</div>

</template>

<script>

export default{

name:'KwgcHeader'

}

</script>

KwgcLogin.vue

<template>

<div>

<kwgc-header></kwgc-header>

<hr/>

<div>

用户名:<input type="text" v-model="loginInfoVo.username" placeholder="请输入用户名" />

<br/>

密码：<input type="password" v-model="loginInfoVo.password" placeholder="请输入密码" />

<br/>

<button v-on:click="login">登录</button>

<br/>

登录验证情况：<textarea cols="30" rows="10" v-model="responseResult"></textarea>

</div>

<hr/>

<kwgc-footer></kwgc-footer>

</div>

</template>

<script>

import kwgcHeader from '@/components/kwgc/KwgcHeader.vue'

import kwgcFooter from '@/components/kwgc/KwgcFooter.vue'

export default { name: 'KwgcLogin', // kwgcHeader、kwgcFooter组件给申明到components里面然后在template里面使用 components: { kwgcHeader, kwgcFooter }, data () { return { loginInfoVo: { username: '', password: '' }, responseResult: [] } }, methods: { login () { this.$axios .post('/login', { username: this.loginInfoVo.username, password: this.loginInfoVo.password }) .then(successResponse => { this.responseResult = JSON.stringify(successResponse.data) if (successResponse.data.code === 200) { this.$router.replace({path: '/index'}) } }) .catch(failResponse => {}) } } }</script>

kwgcHeader.vue

<template>

<div>

<kwgc-header></kwgc-header>

<hr/>

<div>

这是首页

</div>

<hr/>

<kwgc-footer></kwgc-footer>

</div>

</template>

<script>

import kwgcHeader from '@/components/kwgc/KwgcHeader.vue'

import kwgcFooter from '@/components/kwgc/KwgcFooter.vue'

export default { name: 'KwgcIndex', // kwgcHeader、kwgcFooter组件给申明到components里面然后在template里面使用 components: { kwgcHeader, kwgcFooter } }</script>

在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: '<App/>'})

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

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