SpringBoot之前后端分离

今天尝试写一个基于SpringBoot+Vue的前后端分离的简单登陆的例子。

SpringBoot采用IDEA集成环境开发

Vue采用Vscode集成环境开发

这个简单的例子，基本上把前面几周研究的技术都复习了一遍。例如

数据库，RestFul接口，注解，Vue等等。也算对一周工作的总结吧。http通信采用axios这个库。

先上一个效果图：

html页面如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue前后端示例</title>
</head>
<body><h1>登陆测试</h1><div ><label>用户名</label><input  id="user" v-model ="user"></input></div><div id="psw"><label>密码</label><input  v-model ="psw" type="password"></input></div><div><button id="login" v-on:click ="handleLogin">登陆</button></div><script type="text/javascript" src="vue.js"></script><script type="text/javascript" src="axios.min.js"></script><script type="text/javascript" src="main.js"></script>
</body>
</html>

js如下：

var user_Vue =new Vue({el:'#user',data: {user: '111'}
})var psw_Vue =new Vue({el:'#psw',data: {psw: '111'}
})
var app =new Vue({el:'#login',methods:{handleLogin:function(){var data = {user,psw};data.user =user_Vue.user;data.psw = psw_Vue.psw;axios.defaults.baseURL = 'http://127.0.0.1:8080/'axios.post('/app/login', data).then(function (res) {alert(JSON.stringify(res.data));}).catch(function (err) {alert(err.message);});}}})

后端就实现了一个login接口。

现在又突发奇想，能不能把前后端都给tomcat托管呢？

进行尝试中。。。

尝试了一下，把war文件和前端的index.html都放在webapps/ROOT下面记得是大写的ROOT

就可以完美使用了

测试结果

SpringBoot之前后端分离相关推荐

springboot前后端分离后权限原理浅谈
1. 需求描述最近在梳理springboot前后端分离后的权限管理问题.前段时间,已经把shiro的实现和spring security 的实现进行了初步的了解.如果深入细节,一个篇幅怕是不够.本文 ...
B站云E办Vue+SpringBoot前后端分离项目——MVC三层架构搭建后台项目
本项目来源B站云E办,笔记整理了项目搭建的过程和涉及的知识点.对于学习来说,不是复制粘贴代码即可,要知其然知其所以然.希望我的笔记能为大家提供思路,也欢迎各位伙伴的指正. 项目前端学习笔记目录 B站云 ...
SpringBoot后台管理+Uniapp（混合APP）前端之酒店住宿+景点下单管理系统（SpringBoot前后端分离）
酒店住宿+景点下单管理系统(SpringBoot前后端分离) 之 SpringBoot后台管理+Uniapp(混合APP)前端 SpringBoot前后端分离项目-Thymeleaf模板引擎景区旅游管 ...
基于SpringBoot前后端分离的众筹系统（附源码）
基于SpringBoot前后端分离的众筹系统源码下载链接: https://download.csdn.net/download/weixin_47367099/85441573 一.运行步骤 1.环 ...
新手摸爬滚打：vue+springboot前后端分离项目演示（三）——axios实现前后端交互
导语:路漫漫其修远兮,吾将上下而求索前篇: 新手摸爬滚打:vue+springboot前后端分离项目演示(一)--vue cli创建vue2项目新手摸爬滚打:vue+springboot前后端分离 ...
SpringBoot前后端分离项目中如何制作前端jar包（类似swaggerUI前端jar包制作方法）
SpringBoot前后端分离项目中如何制作前端jar包(类似swaggerUI前端jar包制作方法) 可用于SpringBoot引用的前端UI的Jar包,类似于SwaggerUI包 WABJAR介绍 ...
基于vue springboot 前后端分离的电影院会员管理系统
基于vue springboot 前后端分离的电影院会员管理系统文章目录基于vue springboot 前后端分离的电影院会员管理系统前言一.主要功能二.运行截图 1.前端package. ...
Android+SpringBoot前后端分离实现登录注册
Android+SpringBoot前后端分离实现登录注册一.登录 1.界面设计 2.Android端 (1)布局文件(activity_login) (2)java文件(LoginActivity ...
七个开源的 SpringBoot 前后端分离项目，Star过千，快去收藏夹吃灰吧！
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 微信公众号:江南一点雨前后端分离已经在慢慢走进各公司的技 ...
springboot前后端分离项目MultipartFile获取前端传的file为null问题
[问题描述] springboot+vue 前后端分离项目,在对接上传文件功能时,一直显示文件为空. [分析] 查找了很多博客,解决方法五花八门,但原因应该还是 springboot自带的org.sp ...

SpringBoot之前后端分离

SpringBoot之前后端分离相关推荐

最新文章

热门文章