Vue前后端分离实现登录的一个简单demo
1、建立一个Maven项目，并添加Spring相关依赖
2、编写Controller类相应的接口和配置类
LoginController类，编写接口的业务逻辑
package com.springboot.controller;
import org.springframework.http.HttpRequest;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
@RestController
@RequestMapping("/login")
public class LoginController {
@RequestMapping(value = {"/login_submit"}, method = RequestMethod.POST)
public boolean login(HttpServletRequest request) {
String username = request.getParameter("username");
String password = request.getParameter("password");
if (username.equals("abc") && password.equals("123456")) {
return true;
}
return false;
}
}
CorsConfig类，编写配置类用来解决跨域请求（接口是http，而axios一般请求的是https。从https到http是跨域，因此要配置跨域请求）
package com.springboot.configuration;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
* 解决跨域问题
*/
@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); //允许任何域名
corsConfiguration.addAllowedHeader("*"); //允许任何头
corsConfiguration.addAllowedMethod("*"); //允许任何方法
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); //注册
return new CorsFilter(source);
}
}
编写html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.min.js"></script>
<div id="app">
<input type="text" placeholder="请输入用户名" v-model="username" />
<br>
<input type="password" placeholder="请输入密码" v-model="password" />
<input type="button" v-on:click="login" value="登录" />
{{username}}
{{password}}
</div>
<script>
var app = new Vue({
el: "#app",
data: {
username: "",
password: ""
},
methods: {
login: function() {
let param = new URLSearchParams()
param.append('username', this.username)
param.append('password', this.password)
/*axios使用POST请求传参到接口http://localhost:8082/login/login_submit*/
axios({
method: 'post',
url: 'http://localhost:8082/login/login_submit',
data: param
}).then(
function(response) { //获取接口http://localhost:8082/login/login_submit的返回值
if (response.data == true) {
alert("登录成功");
} else {
alert("登录失败，用户名密码错误");
}
console.log(response);
},
function(err) {
alert("登录失败，用户名密码错误");
}
);
}
}
})
</script>
</body>
</html>
在Intellij Idea中启动Maven项目（即启动接口）
在HBuilder中启动html项目
Vue前后端分离实现登录的一个简单demo的更多相关文章
- 喜大普奔，两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
- 两个开源的 Spring Boot + Vue 前后端分离项目
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
- Flask + vue 前后端分离的 二手书App
一个Flask + vue 前后端分离的 二手书App 效果展示: https://blog.csdn.net/qq_42239520/article/details/88534955 所用技术清单 ...
- SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题
原文链接:https://segmentfault.com/a/1190000012879279 当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理 ...
- Springboot+vue前后端分离项目，poi导出excel提供用户下载的解决方案
因为我们做的是前后端分离项目 无法采用response.write直接将文件流写出 我们采用阿里云oss 进行保存 再返回的结果对象里面保存我们的文件地址 废话不多说,上代码 Springboot 第 ...
- 解决Django+Vue前后端分离的跨域问题及关闭csrf验证
前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道 在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...
- beego-vue URL重定向(beego和vue前后端分离开发，beego承载vue前端分离页面部署)
具体过程就不说,是搞这个的自然会动,只把关键代码贴出来. beego和vue前后端分离开发,beego承载vue前端分离页面部署 // landv.cnblogs.com //没有授权转载我的内容,再 ...
- shiro vue 前后端分离中模拟登录遇到的坑
系统采用jeeplus框架(ssm+redis+shiro+mongodb+redis),默认是了JSP未做前后端分离,由于业务需要已经多终端使用的需求(H5.小程序等),需要实现前后端分离.但是由于 ...
- Keycloak快速上手指南，只需10分钟即可接入Spring Boot/Vue前后端分离应用实现SSO单点登录
登录及身份认证是现代web应用最基本的功能之一,对于企业内部的系统,多个系统往往希望有一套SSO服务对企业用户的登录及身份认证进行统一的管理,提升用户同时使用多个系统的体验,Keycloak正是为此种 ...
- 一个实际的案例介绍Spring Boot + Vue 前后端分离
介绍 最近在工作中做个新项目,后端选用Spring Boot,前端选用Vue技术.众所周知现在开发都是前后端分离,本文就将介绍一种前后端分离方式. 常规的开发方式 采用Spring Boot 开发项目 ...
随机推荐
- java 新特性之 Stream API
强大的 Stream API 一.Stream API 的概述 Stream到底是什么呢? 是数据渠道,用于操作数据源(集合.数组等)所生成的元素序列. "集合讲的是数据,Stream讲的是 ...
- 上传数据、下载模板文件解决方案（前端：antd；后端：.Net Core WebAPI）
一.Excel 模板下载 通过静态文件下载. 将模板文件放在根目录的 public 文件夹下备用. 下载事件方法如下:(通过临时生成一个 a 标签,触发后再移除) downLoadExcelModel ...
- Windows7下驱动开发与调试体系构建——4.在x64下使用汇编代码（x86下的_asm）
目录/参考资料:https://www.cnblogs.com/railgunRG/p/14412321.html asm文件设置 在vs x64中无法使用_asm关键字,需要使用.asm文件. 按第 ...
- Qt--无边框窗口完美(FrameLess)实现,包含缩放和移动功能重写。
前言 Qt原本的窗口虽然可以通过QSS样式进行美化,但是只是对客户区有用,对于客户区是无效的.所以想做出一个比较好看的程序,还得自己重写实现无边框窗口. Qt实现无边框其实一句代码就可以,但是窗口自带 ...
- 论文笔记 - RETRIEVE: Coreset Selection for Efficient and Robust Semi-Supervised Learning
Motivation 虽然半监督学习减少了大量数据标注的成本,但是对计算资源的要求依然很高(无论是在训练中还是超参搜索过程中),因此提出想法:由于计算量主要集中在大量未标注的数据上,能否从未标注的数据 ...
- Docker容器化技术
1. 初始Docker 1.1 Docker概念 Docker概念:Docker是一个开源的应用容器引擎 诞生于2013年初,基于Go实现,dotCloud公司出品(后改名为Docker Inc) D ...
- Pwn学习随笔
Pwn题做题流程 使用checksec检查ELF文件保护开启的状态 IDApro逆向分析程序漏洞(逻辑复杂的可以使用动态调试) 编写python的exp脚本进行攻击 (若攻击不成功)进行GDB动态调试 ...
- Python用yield form 实现异步协程爬虫
很古老的用法了,现在大多用的aiohttp库实现,这篇记录仅仅用做个人的协程底层实现的学习. 争取用看得懂的字来描述问题. 1.什么是yield 如果还没有怎么用过的话,直接把yield看做成一种特殊 ...
- Atlassian Confluence 远程代码执行漏洞（CVE-2022-26134）漏洞复现
目录 免责声明: Atlassian Confluence 远程代码执行漏洞(CVE-2022-26134)漏洞复现 漏洞概述: 影响版本: 漏洞复现: 利用POC: 利用过程: 修复建议: 参考 免 ...
- Java新特性（2）：Java 10以后
您好,我是湘王,这是我的博客园,欢迎您来,欢迎您再来- 虽然到目前为止Java的版本更新还没有什么惊天动地的改变,但总是会冒出一些有趣的小玩意.前面列举了Java9和Java10的一些特色,现在接着来 ...