SpringBoot+Vue⼊门：项⽬前后端分离之实现简单登录demo
前⾔
此demo是参考某位⼤佬的，我觉得他写的不错，便写下来了
1.demo功能描述
1. 输⼊正确的⽤户名（zzc）和密码（123），则服务器验证正确后，前端页⾯⾃动跳转到⾸页localhost:8008/index
2. 若输⼊不正确的⽤户名和密码，则会在输⼊框显⽰后端验证后的错误信息
2.demo技术栈描述
1. 前端技术栈：
编程语⾔：html、css、js
开发⼯具：Atom
发开框架：vue + axios + router
包管理⼯具：npm
打包⼯具：webpack
2. 后端技术栈
编程语⾔：java
开发⼯具：Eclipse
发开框架：springboot
包管理⼯具：maven资源库
打包⼯具：maven
3.demo开发流程概要
1. 前端开发流程概要
安装node.js并初始化Vue项⽬
在Vue项⽬中开发页⾯头、页⾯尾公共组件
开发登录界⾯组件
开发⾸页界⾯组件
⽹络请求（跨域：由后台实现）、页⾯路由开发
2. 后台开发流程概要
安装jdk8并配置好环境变量
创建springboot项⽬
开发登录控制器
⽀持跨域
3. 运⾏项⽬流程
使⽤webpack将Vue项⽬打包
将打包的Vue项⽬集成到springboot项⽬中
使⽤maven将springboot打包成jar⽂件
使⽤jdk运⾏jar包来启动demo项⽬服务，访问地址查看效果
4.demo开发流程详情
前端开发内容
结构预览
安装node.js并初始化Vue项⽬开发页⾯头、页⾯尾公共组件Header.vue页⾯头代码
<template>
<div class="header">
页⾯头部
</div>
</template>
<script>
export default {
name: 'Header'
}
}
</script>
Footer.vue页⾯尾代码
<template>
<div class="footer">
页⾯尾部
</div>
</template>
<script>
export default {
name: 'Footer'
}
</script>
开发登录页⾯组件
Login.Vue登录页⾯代码
<template>
<div class="login">
<Header />
<hr>
<div>
⽤户名：<input type="text" v-model="username" placeholder="请输⼊⽤户名" />{{username}}<br>密码：<input type="password" v-model="password" placeholder="请输⼊密码" />{{password}}<br>      <button @click="login">登录</button><br>
登录验证情况：<input type="text" v-model="result" />{{result}}
</div>
<hr>
<Footer />
</div>
</template>
<script>
import Footer from '@/components/commons/Footer'
import Header from '@/components/commons/Header'
import qs from 'qs'
export default {
name: 'login',
data () {
return {
username: '',
password: '',
result: ''
}
},
components: {
Footer,
Header
},
methods: {
login () {
if (this.username === '') {
alert('⽤户名不能为空')
springboot架构图
return
}
if (this.password === '') {
alert('密码不能为空')
}
var url = 'localhost:80/login'
console.log(url)
this.$axios.post(url, qs.stringify({
username: this.username,
password: this.password
}))
.then(res => {
console.log(res)
console.log(res.data)
if (res.data.data === '登陆成功') {
this.$place({path: '/index'})
} else {
}
})
.catch(error => {
console.log(error)
})
}
}
}
</script>
请求路由，页⾯路由开发
main.js主⼊⼝代码
import Vue from'vue'
import App from'./App'
import router from'./router'
import Axios from'axios'
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 Index from'@/components/home/Index' import Login from'@/components/manager/Login'
Vue.use(Router)
export default new Router({
routes:[
{
path:'/',
redirect:'/login'
},
{
path:'/index',
name:'index',
component: Index
},
{
path:'/login',
name:'login',
component: Login
}
]
})
单独运⾏Vue项⽬查看效果
后台开发内容
结构预览
开发登录控制器，⽀持跨域
@Controller
@CrossOrigin
public class SystemController{
@RequestMapping(value="/login", method=RequestMethod.POST) @ResponseBody
public Map<String, Object>login(String username, String password){  Map<String, Object> map =new HashMap<String, Object>();
if(null != username && null != password){
if("zzc".equalsIgnoreCase(username)){
if("123".equalsIgnoreCase(password)){
map.put("data","登陆成功");
}else{
map.put("data","⽤户名或者密码错误");
}
}else{
map.put("data","⽤户名或者密码错误");
}
}else{
map.put("data","⽤户名或者密码不能为空");
}
return map;
}
}
配置服务器端⼝（80）
server:
port:80
启动springboot项⽬
运⾏完整项⽬
前端服务启动，后台服务启动，然后输⼊⽤户名和密码
1.运⾏失败

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。