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的更多相关文章

  1. 喜大普奔，两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了

    折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...

  2. 两个开源的 Spring Boot + Vue 前后端分离项目

    折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...

  3. Flask + vue 前后端分离的 二手书App

    一个Flask + vue 前后端分离的 二手书App 效果展示: https://blog.csdn.net/qq_42239520/article/details/88534955 所用技术清单 ...

  4. SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题

    原文链接:https://segmentfault.com/a/1190000012879279 当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理 ...

  5. Springboot+vue前后端分离项目，poi导出excel提供用户下载的解决方案

    因为我们做的是前后端分离项目 无法采用response.write直接将文件流写出 我们采用阿里云oss 进行保存 再返回的结果对象里面保存我们的文件地址 废话不多说,上代码 Springboot 第 ...

  6. 解决Django+Vue前后端分离的跨域问题及关闭csrf验证

      前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道   在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...

  7. beego-vue URL重定向(beego和vue前后端分离开发，beego承载vue前端分离页面部署)

    具体过程就不说,是搞这个的自然会动,只把关键代码贴出来. beego和vue前后端分离开发,beego承载vue前端分离页面部署 // landv.cnblogs.com //没有授权转载我的内容,再 ...

  8. shiro vue 前后端分离中模拟登录遇到的坑

    系统采用jeeplus框架(ssm+redis+shiro+mongodb+redis),默认是了JSP未做前后端分离,由于业务需要已经多终端使用的需求(H5.小程序等),需要实现前后端分离.但是由于 ...

  9. Keycloak快速上手指南，只需10分钟即可接入Spring Boot/Vue前后端分离应用实现SSO单点登录

    登录及身份认证是现代web应用最基本的功能之一,对于企业内部的系统,多个系统往往希望有一套SSO服务对企业用户的登录及身份认证进行统一的管理,提升用户同时使用多个系统的体验,Keycloak正是为此种 ...

  10. 一个实际的案例介绍Spring Boot + Vue 前后端分离

    介绍 最近在工作中做个新项目,后端选用Spring Boot,前端选用Vue技术.众所周知现在开发都是前后端分离,本文就将介绍一种前后端分离方式. 常规的开发方式 采用Spring Boot 开发项目 ...

随机推荐

  1. 利用Java集合实现学生信息的”增删查“

    之前学了Java中的集合,打算写一个小程序来消化一下! 那么我们知道,集合相比数组的优点就是可以动态的增加元素,这对比数组来说,十分的便捷: 并且集合为我们封装好一些方法,可以更好的做一些数据操作! ...

  2. 微信支付更新功能,商户转账到零钱 php版 (2022-10-12更新)

    <?php class WechatMerchantTransfer { /** * @notes 商家转账到零钱 * @param $batch_no //提现订单号 * @param $le ...

  3. Windows活动目录_初识

    计算机组织形式 工作组(用户本地登录时构造SID进行权限分配): 域(统一身份验证与管理) 域注意事项 实体:域控.域用户.加入域的机子. 依赖的服务:netlogon服务 强制刷新组策略gpupda ...

  4. JDBC数据库编程(java实训报告)

    文章目录 一.实验要求: 二.实验环境: 三.实验内容: 1.建立数据库连接 2.查询数据 2.1 测试结果 3.添加数据 3.1.测试结果 4.删除数据 4.1.测试结果 5.修改数据 5.1 测试 ...

  5. 纯Vue实现网页日常任务清单小功能（数据存储在浏览器）

    任务清单可以极大提高我们的工作效率.哪些事情办了.哪些事情代办.哪些是紧急需要办的事情等等. 在组件化编码实战3的基础上进一步改进.将原先的数据保存的浏览器中.就可以做到关闭网页也不会丢失数据的情况 ...

  6. Chrony时间同步服务

    概:  网络时间协议(Network Time Protocol,NTP)是用于网络时间同步的协议.提供NTP时间同步服务的软件有很多,这里采用Chrony软件来实现时间同步 chrony 的优势:  ...

  7. centos7离线安装PHP7

    环境 centos7.9 PHP7.4.30 准备工作 在编译PHP时会提示一些包版本不够或者缺少某些包,一般选择yum来安装缺少的包,但因为是离线安装,所以可以手动配置本地yum源.先看一下系统版本 ...

  8. 执行xxx.sh脚本的两种方式

    因公司测试环境的登录模式有2种,大佬们直接写了个脚本完成一键切换,看了其中的脚本文件,其中出现了send "sh out.sh\r":一直疑惑这里的sh out.sh的意思...查 ...

  9. js高级之函数高级部分

    基于尚硅谷的尚硅谷JavaScript高级教程提供笔记撰写,加入一些个人理解 github源码 博客下载 原型与原型链 prototype : 显式原型属性,它默认指向一个Object空对象(即称为: ...

  10. 2022ICPC区域赛参后感悟

    第一次参加正式的大类赛事,在某种程度上挺激动的.我呢,可以说是刚步入竞赛一年,在此期间遇见了一些志同道合的朋友,最重要的是遇见了我的队友. 开始前,我幻想过我们小队可以超常发挥,拿取学校中第一个区域赛 ...