大家好,又见面了,我是你们的朋友全栈君。
一、构建项目
使用vue-cli创建项目:
然后导入编辑器(我使用的是webstorm),先进行启动下,看能否访问到localhost:8080。
能访问到表示使用vue-cli创建项目正常。
二、进行前端代码编写
记得添加修改config下 的index.js文件
前端页面代码:
Footer.vue
<template>
<div>
页面尾部
</div>
</template>
<script>
export default {
name: "footer"
}
</script>
<style scoped>
</style>
Header.vue
<template>
<div>
页面头部
</div>
</template>
<script>
export default {
name: "header"
}
</script>
<style scoped>
</style>
Index.vue
<template>
<div>
<blog-header></blog-header>
<hr/>
<div>
这是首页,嘻嘻嘻。
</div>
<hr/>
<blog-footer></blog-footer>
</div>
</template>
<script>
import Header from '@/components/common/Header'
import Footer from '@/components/common/Footer'
export default {
name: "index",
// Header/Footer组件给申明到components里面然后在template里面使用
components: { Header, Footer }
}
</script>
<style scoped>
</style>
Login.vue
<template>
<div>
<header></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/>
<footer></footer>
</div>
</template>
<script>
import Header from '@/components/common/Header'
import Footer from '@/components/common/Footer'
export default {
name: "login",
// Header、Footer组件给申明到components里面然后在template里面使用
components: { Header, Footer },
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>
<style scoped>
</style>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/manage/Login'
import Index from '@/components/home/Index'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/index',
name: 'Index',
component: Index
},
{
path: '/manage',
redirect: '/login'
},
{
path: '/login',
name: 'Login',
component: Login
}
]
})
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'
// 引用axios,并设置基础URL为后端服务api地址
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8443/api'
// 将API方法绑定到全局
Vue.prototype.$axios = axios
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
中途启动的项目可能会报错:
停掉项目,在项目中安装axios,再重新启动项目。
基本上就是这个页面:
三、后端代码编写
后端使用springboot。
由于我的开发环境用的是IntelliJ IDEA 2017.3.3,创建Spring Boot项目时参考另一篇博文“idea快速搭建springboot项目 ”http://www.cnblogs.com/pengyan-9826/p/8093099.html。 但这里要注意的是,原文人家用MyBatis了,咱这里测试前后端分离,先不用勾选MyBatis,要不还得配置数据库,否则项目启动会报错:
创建相关类:
后端写好了,把前端打包生成的dist目录里的文件拷贝到后端项目的static目录下。运行一下,发现启动的是8080端口。想起来Vue那指定的是8443了,得修改一下项目中的application.properties文件:
把打包的vue项目放到resources文件夹下,css和js文件夹在static下,index.html在最外面的
四、运行
启动idea,输入localhost:8843即可进行跳转
登录成功进行跳转:
失败:
到此,springboot+vue前后端连接上,后面再连接上数据库,替换成数据库数据。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/147168.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...