Spring Boot 3 + Vue 3实战:实现用户登录功能

文章目录

  • 一、实战概述
  • 二、实战步骤​
    • (一)创建前端项目 - login-vue
      • 1、创建Vue项目
      • 2、安装axios模块
      • 3、安装vue-router模块
      • 4、安装less和less-loader模块
      • 5、运行Vue项目
      • 6、在浏览器里访问首页
      • 7、在IDEA里打开Vue项目
      • 8、创建登录Vue组件
      • 9、创建首页Vue组件
      • 10、创建路由视图
      • 11、编写应用根组件
      • 12、编写主入口脚本
      • 13、设置反向代理和跨域支持
      • 14、访问登录页面
    • (二)创建后端项目 - LoginDemo
      • 1、创建Spring Boot项目
      • 2、配置服务器端口号
      • 3、启动应用,访问首页
      • 4、创建用户实体类
      • 5、创建结果实体类
      • 6、创建登录控制器
    • (三)前后端整合测试
      • 1、启动前端项目 - login-vue
      • 2、启动后端项目 - LoginDemo
      • 3、测试用户登录功能
  • 三、实战总结

一、实战概述

  • 该实战教程旨在指导开发者通过前后端分离的方式,搭建一个结合Vue.js前端框架和Spring Boot后端框架的登录系统。首先,从创建前端项目开始,利用Vue CLI快速生成项目结构,安装axios以实现HTTP请求功能,vue-router处理路由导航,less与less-loader用于样式预处理增强前端开发体验。完成基础设置后,开发者在IDEA中打开并继续构建前端页面,分别创建登录组件、首页组件以及配置路由视图。编写应用根组件,并设置主入口脚本,同时为解决跨域问题设置了反向代理。

  • 接着进行后端项目的搭建,创建Spring Boot应用,配置服务器运行端口号,并启动服务确保能访问到后端首页。然后,为后端设计数据模型,创建用户实体类和结果实体类,以便于业务逻辑处理。最后,开发登录控制器以对接前端发送的登录请求。

  • 整合测试阶段,分别启动前端login-vue项目和后端LoginDemo项目,前端调用后端接口进行登录验证,确保用户登录功能正常运作。此实战涵盖了项目初始化、模块安装、组件开发、路由配置、实体类设计、控制器编写及跨域解决方案等关键环节,有助于开发者理解和实践前后端交互开发流程。

二、实战步骤​

(一)创建前端项目 - login-vue

  • 查看Node和npm版本
    在这里插入图片描述
  • 安装vue脚手架,执行命令:nmp install -g @vue/cli
    在这里插入图片描述

1、创建Vue项目

  • 在命令行窗口里执行命令:vue create login-vue,选择Default ([Vue 3] babel, eslint)
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

2、安装axios模块

  • Axios 是一款基于Promise的JavaScript库,主要用于浏览器和Node.js环境,提供了一种简单、高效的方式来处理前端与后端API之间的HTTP通信。它支持创建和发送GET、POST等多种HTTP请求,可处理JSON数据自动转换,并具有拦截请求/响应、取消请求、设置超时等功能。 Axios遵循Promise API设计,易于理解和使用,广泛应用于现代Web项目中进行异步数据交互。
  • 进入login-vue目录,执行命令:npm install axios --save
    在这里插入图片描述

3、安装vue-router模块

  • Vue Router是Vue.js官方的路由管理器,它通过将SPA(单页应用)的页面切分成多个组件,并实现了URL与组件间的映射关系。在Vue项目中,通过定义路由规则和嵌套路由,Vue Router能够实现视图与URL的同步切换,提供前端路由功能,支持动态路由、导航守卫等功能,为构建复杂单页应用提供了便捷的支持。
  • 执行命令:npm install vue-router@4 --save
    在这里插入图片描述

4、安装less和less-loader模块

  • Less是一种CSS预处理器,通过扩展CSS语法提供变量、嵌套规则、混合、函数等高级特性,使得样式编写更高效、模块化和易于维护。less-loader则是Webpack的一个加载器,用于将Less文件编译成浏览器可识别的CSS代码。在Vue项目中安装并配置less和less-loader后,即可在.vue文件或独立.less文件中编写Less代码,并在构建过程中自动转化为CSS样式。
  • 执行命令:npm install --save-dev less less-loader
    在这里插入图片描述

5、运行Vue项目

  • 执行命令:npm run serve
    在这里插入图片描述
  • 给出访问应用的网址
    在这里插入图片描述

6、在浏览器里访问首页

  • 访问http://local:8080
    在这里插入图片描述

7、在IDEA里打开Vue项目

  • 打开Vue项目 - login-vue
    在这里插入图片描述

8、创建登录Vue组件

  • src/components目录里,删除HelloWorld.vue组件,创建LoginView.vue组件
    在这里插入图片描述
<template><table class="login-table" border="0" cellpadding="10"><tr><td align="center">用户名</td><td><input id='username' type="text" v-model="username" placeholder="请输入用户名"/></td></tr><tr><td align="center">&nbsp;&nbsp;&nbsp;&nbsp;</td><td><input id='password' type="password" v-model="password" placeholder="请输入密码"/></td></tr><tr align="center"><td colspan="2"><button @click="handleLogin">登录</button></td></tr></table>
</template><script setup>
import {ref} from 'vue';
import {useRouter} from 'vue-router';
import axios from "axios";const router = useRouter();
const username = ref('');
const password = ref('');async function handleLogin() {try {const response = await axios.post('/api/login', {username: username.value, password: password.value});console.log(response.data.code)if (response.data.code === 200) {router.replace('/index'); // 使用后端返回的路径} else if (response.data.code === 400) {alert('用户名或密码错误!请重新登录!');username.value = '';password.value = '';document.getElementById('username').focus();}} catch (error) {console.error("Error during login:", error.message); // 添加错误处理,打印错误信息}
}
</script><style lang="less" scoped>
/* 重置table样式 */
.login-table {width: 100%;max-width: 300px;margin: 50px auto;border-collapse: collapse;border-spacing: 0;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}.login-table td {padding-bottom: 16px;padding-top: 16px;padding-right: 0px;padding-right: 8px;vertical-align: middle;text-align: left;border-bottom: 1px solid #ddd;
}.login-table input[type="text"],
.login-table input[type="password"] {width: 100%;padding: 8px;border: 1px solid #ccc;border-radius: 4px;outline: none;box-sizing: border-box;
}.login-table button {display: block;width: 100%;padding: 12px;background-color: #007bff;color: white;font-size: 16px;border: none;border-radius: 4px;cursor: pointer;text-align: center;transition: all 0.3s ease;&:hover,&:focus {background-color: #0056b3;}
}
</style>
  • 代码创建了一个登录表单,使用Vue响应式数据绑定用户输入,并在点击登录按钮时通过axios发送POST请求。根据后端返回的code进行判断:200则跳转至/index页面,400则提示错误并清空密码重置焦点。同时定义了简洁的登录界面样式。

9、创建首页Vue组件

  • src/components里创建IndexView.vue组件
    在这里插入图片描述
<template><div class="welcome-container">Welcome to Vue 3 World~</div>
</template><script>
export default {name: "IndexView"
}
</script><style scoped>
.welcome-container {padding: 20px;border: 1px solid #ccc;border-radius: 5px;background-color: #f5f5f5;text-align: center;max-width: 400px;margin: 0 auto;color: red;font-weight: bold;font-size: 30px;
}
</style>
  • 该代码定义了一个Vue组件IndexView,渲染一个居中显示的欢迎信息框,样式包括内边距、边框、背景色等,并通过CSS设置了自动水平居中布局及字体样式。

10、创建路由视图

  • src里创建router目录,在router目录里创建index.js脚本
    在这里插入图片描述
// 引入Vue3以及新的vue-router
import { createRouter, createWebHistory } from 'vue-router';
import Login from '@/components/LoginView.vue';
import Index from "@/components/IndexView.vue";// 定义路由
const routes = [{path: '/login',name: 'LoginView',component: Login},{path: '/index',name: 'IndexView',component: Index}
];// 创建路由器实例
const router = createRouter({history: createWebHistory(),routes,
});// 导出全局注册
export default router;
  • 该代码引入Vue Router并定义了登录和首页两个路由,使用createRouter创建路由器实例,配置history模式,并导出用于全局注册。

11、编写应用根组件

  • 应用Vue组件 - App.vue是 Vue.js 应用程序的根组件,负责整个应用的布局与整体结构,所有其他组件在其内部组织和渲染。
    在这里插入图片描述
<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><router-view /></div>
</template><script>
</script><style lang="less">
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}
</style>
  • 此代码为Vue应用的根组件(App.vue),包含一个logo图片和动态路由视图(<router-view/>)。样式设置字体、抗锯齿及居中对齐。

12、编写主入口脚本

  • main.js是Vue应用的主入口脚本,负责初始化Vue应用实例、注册全局组件与插件(如路由、状态管理等),并挂载到DOM指定元素。
    在这里插入图片描述
// 导入Vue3的核心API,用于创建Vue应用实例
import {createApp} from 'vue';// 导入根组件App.vue,它是整个应用程序的主视图模板
import App from './App.vue';// 导入已配置好的路由模块(index.js或router.ts等),它管理着应用内的页面跳转逻辑
import router from "@/router";// 使用createApp方法创建一个Vue应用实例,并注册全局路由配置
const app = createApp(App).use(router);// 将Vue应用挂载到HTML文档中id为'app'的元素上
// 这将把整个应用程序渲染到这个DOM元素内部
app.mount('#app');
  • 该代码导入Vue3核心API创建应用实例,引入根组件与路由配置,通过createApp初始化应用并注册路由,最后将整个应用挂载到DOM中id为’app’的元素上。

13、设置反向代理和跨域支持

  • 修改vue.config.js代码,设置反向代理和跨域支持
    在这里插入图片描述
module.exports = {// 设置在保存文件时禁用ESLint自动检查lintOnSave: false,// 配置Vue开发服务器相关选项devServer: {// 配置HTTP代理,以便在开发过程中将特定请求转发到其他服务器proxy: {// 当请求以 '/api' 开头时进行代理'/api': {// 指定目标服务器地址(例如后台API接口)target: 'http://localhost:8888',// 设置为true,允许跨域请求时重写源信息(Origin header)changeOrigin: true,// 路径重写规则,将前端应用中'/api'前缀去掉,映射到后端服务器的实际路径上pathRewrite: { '^/api': '' },}}}
}
  • 这段代码配置了Vue项目在开发环境下的行为:禁用了文件保存时的ESLint检查,并设置了一个开发服务器的代理服务。当开发环境中前端应用发起对/api开头的请求时,该请求会被代理至http://localhost:8888服务器,并通过pathRewrite规则进行路径重写,解决前后端分离开发中的跨域问题。

14、访问登录页面

  • 启动Vue项目,访问http://localhost:8080/login
    在这里插入图片描述

(二)创建后端项目 - LoginDemo

1、创建Spring Boot项目

  • 设置项目名称 LoginDemo、保存位置、语言、类型、组标识、构件名、包名、JDK版本、Java语言级、打包类型
    在这里插入图片描述

  • 单击【Next】按钮,在弹出的对话框里选择Spring Boot版本,添加项目相关依赖
    在这里插入图片描述

  • 单击【Create】按钮,得到初始化项目
    在这里插入图片描述

2、配置服务器端口号

  • 在前端项目里配置了目标服务器地址,端口是8888
    在这里插入图片描述

  • 在应用属性文件application.properties里配置服务器端口号
    在这里插入图片描述

3、启动应用,访问首页

  • resources目录里创建首页index.html
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title>
</head>
<body><h3 style="text-align: center; color: red">Welcome to Spring Boot World~</h3>
</body>
</html>
  • 修改入口程序LoginDemoApplication代码
    在这里插入图片描述
  • 启动应用程序,在浏览器里访问http://localhost:8888,查看结果
    在这里插入图片描述

4、创建用户实体类

  • 创建bean子包,在子包里创建User
    在这里插入图片描述
package net.huawei.login.bean;/*** 功能:用户实体类* 作者:华卫* 日期:2024年01月14日*/
public class User {private int id;private String username;private String password;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}@Overridepublic String toString() {return "User{" +"id=" + id +", username='" + username + '\'' +", password='" + password + '\'' +'}';}
}

5、创建结果实体类

  • 创建result子包,在子包里创建Result类,封装响应码
    在这里插入图片描述
package net.huawei.login.result;/*** 功能:结果实体类* 作者:华卫* 日期:2024年01月14日*/
public class Result {private int code;public Result(int code) {this.code = code;}public int getCode() {return code;}public void setCode(int code) {this.code = code;}
}
  • 该Java类为结果实体,包含一个表示状态码的整型变量code,通过构造函数初始化,并提供getter/setter方法,用于处理服务端响应的状态信息。

6、创建登录控制器

  • 创建controller子包,在子包里创建LoginController
    在这里插入图片描述
package net.huawei.login.controller;import net.huawei.login.bean.User;
import net.huawei.login.result.Result;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.util.HtmlUtils;/*** 功能:登录控制器* 作者:华卫* 日期:2024年01月14日*/
@Controller
public class LoginController {@CrossOrigin@PostMapping(value = "api/login")@ResponseBodypublic Result login(@RequestBody User requestUser) {// 获取用户名和密码String username = requestUser.getUsername();String password = requestUser.getPassword();// 对html标签进行转义,防止XSS攻击username = HtmlUtils.htmlEscape(username);// 判断登录是否成功if (username.equals("无心剑") && password.equals("903213")) {return new Result(200);} else {System.out.println("用户名或密码有误!");return new Result(400);}}
}
  • 该Java控制器处理登录请求,接收并校验用户提交的用户名密码,进行XSS防护,并根据预设数据判断登录是否成功,返回包含状态码的结果实体。

(三)前后端整合测试

1、启动前端项目 - login-vue

  • 在前端项目的目录里执行命令:npm run serve
    在这里插入图片描述

2、启动后端项目 - LoginDemo

  • 启动入口类LoginDemoApplication
    在这里插入图片描述

3、测试用户登录功能

  • 访问http://localhost:8080/login登录页面
    在这里插入图片描述

  • 如果输入的用户名或密码有误,弹出消息框提示用户
    在这里插入图片描述

  • 输入正确的用户名或密码(无心剑 :903213)
    在这里插入图片描述

  • 单击【登录】按钮,跳转到首页
    在这里插入图片描述

  • 操作录屏演示
    在这里插入图片描述

三、实战总结

  • 该实战通过前后端分离方式,构建基于Vue.js与Spring Boot的登录系统。前端完成项目创建、页面组件开发和路由配置;后端搭建Spring Boot服务,设计实体类并实现登录控制器。整合阶段测试用户登录功能,确保前后端交互正常。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/628862.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自动驾驶中的坐标系

自动驾驶中的坐标系 自动驾驶中的坐标系 0.引言1.相机传感器坐标系2.激光雷达坐标系3.车体坐标系4.世界坐标系4.1.地理坐标系4.2.投影坐标系4.2.1.投影方式4.2.2.墨卡托(Mercator)投影4.2.3.高斯-克吕格(Gauss-Kruger)投影4.2.4.通用横轴墨卡托UTM&#xff08;UniversalTransve…

MySQL视图索引基础练习

表定义 学生表&#xff1a;Student (Sno, Sname, Ssex , Sage, Sdept) 学号&#xff0c;姓名&#xff0c;性别&#xff0c;年龄&#xff0c;所在系 Sno为主键 课程表&#xff1a;Course (Cno, Cname,) 课程号&#xff0c;课程名 Cno为主键 学生选课表&#xff1a;SC (Sno, C…

Android 布局菜鸟 android中的布局类型和特点?

一、LinearLayout(线性布局) 1、 特点: 主要以水平或垂直方式来排列界面中的控件。并将控件排列到一条直线上。在线性布局中,如果水平排列,垂直方向上只能放一个控件,如果垂直排列,水平方向上也只能放一个控件。 2、适⽤场景: Android开发中最常见的 ⼀种布局⽅式,排列…

CUDA tips

命令行查看核函数消耗的寄存器和共享内存数量 nvcc --ptxas-options-v reduce_sum.cu nvprof 使用 由于 8.0 及以上计算能力的显卡用不了 nvprof&#xff0c;官方建议用 nsight system 和 ncu&#xff0c;但是如果只想命令行打印表格查看 kernel 概况感觉还是 nvprof 方便&am…

Android 系统启动过程纪要(基于Android 10)

前言 看过源码的都知道&#xff0c;Launcher系统启动都会经过这三个进程 init ->zygote -> system_server。今天我们就来讲解一下这三个进程以及Launcher系统启动。 init进程 准备Android虚拟机环境&#xff1a;创建和挂载系统文件目录&#xff1b;初始化属性服务&…

SAP银企直联报错排查方法与步骤-F110

银企直联的报错排查经常需要利用F110来查询。方法步骤如下&#xff1a; 1、首先要确定报错是哪天的&#xff0c;并且当天那一次跑的付款建议。需要通过表 REGUH来确认(跟据供应商编码、日期) 2、通过REGUH表的信息知道了是2024年1月16号第5个标识&#xff08;也就是第五次跑付…

Mac OS系统 SVN客户端 smartSVN 安装和基础使用

一、下载SVN客户端 官网地址&#xff0c;可以根据自己的系统下载 https://www.smartsvn.com/download/ 二、安装客户端和激活 第一步安装&#xff0c;很简单。 第二步&#xff0c;激活&#xff0c;选择激活文件 创建一个许可文件&#xff0c;例如 smartSvn.license。 内容如…

搜维尔科技:SenseGlove Nova 2力反馈技术手套,虚拟培训的沉浸感达到新高度!

SenseGlove Nova 2-虚拟培训的沉浸感达到新高度&#xff01; 通过集成主动接触反馈&#xff0c;Nova 2 使用户能够在手掌中感知虚拟现实物体的感觉。虚拟训练、研究和多人互动现在感觉比以往更加自然。这项创新增强了与整个手掌接触的任何虚拟物体的真实感。使用第一款也是唯一…

el-date-picker组件设置时间范围限制

需求&#xff1a; 如图所示&#xff0c;下图为新增的一个弹层页面&#xff0c;同时有个需求&#xff0c;日期选择需要限制一个月的时间范围&#xff08;一月默认为30天&#xff09;&#xff1a; 查看官方文档我们需要主要使用到如下表格的一些东西&#xff1a; 参数说明类型可…

Spring Cloud 微服务中 gateway 网关如何设置健康检测端点

主要是为了让 k8s 识别到网关项目已经就绪&#xff0c;但是又不想在里面通过 Controller 实现。因为在 Controller 中这样做并不是最佳实践&#xff0c;因为 Gateway 的设计初衷是专注于路由和过滤&#xff0c;而不是业务逻辑的处理。 在 Gateway 中配置健康检查端点可以通过以…

最佳实践分享:SQL性能调优

SQL性能调优是一个需要不断探索和实践的过程&#xff0c;旨在确保数据库查询的高效运行。本文将分享一些SQL性能调优的最佳实践&#xff0c;帮助您提升数据库性能&#xff0c;减少查询响应时间。 一、索引优化 索引是提高查询性能的关键。以下是一些关于索引优化的建议&#…

使用 Apache POI 更新/覆盖 特定的单元格

使用 Apache POI 更新特定的单元格 一. 需求二. 实现三. 效果 一. 需求 将以下表中第4行&#xff0c;第4列的单元格由“张宇”更新为“汤家凤”&#xff0c;并将更行后的结果写入新的Excel文件中&#xff1b; 二. 实现 使用Apache POI&#xff0c;可以精确定位到需要更改的单…

LeetCode、2336. 无限集中的最小数字(中等,小顶堆)

文章目录 前言LeetCode、2336. 无限集中的最小数字题目链接及类型思路代码题解 前言 博主所有博客文件目录索引&#xff1a;博客目录索引(持续更新) LeetCode、2336. 无限集中的最小数字 题目链接及类型 题目链接&#xff1a;2336. 无限集中的最小数字 类型&#xff1a;数据…

VC++中使用OpenCV对原图像中的四边形区域做透视变换

VC中使用OpenCV对原图像中的四边形区域做透视变换 最近闲着跟着油管博主murtazahassan&#xff0c;学习了一下LEARN OPENCV C in 4 HOURS | Including 3x Projects | Computer Vision&#xff0c;对应的Github源代码地址为&#xff1a;Learn-OpenCV-cpp-in-4-Hours 视频里面讲…

ChatGPT新出Team号 年付费

之前一直传的团队版ChatGPT终于来了&#xff0c;这个对拼单的比较合算。每人每月25美元&#xff0c;只能按年支付。 团队版比普通版多的权益有&#xff1a; ◈更多的GPT-4消息上限&#xff0c;三小时100次。 ◈可以创建与团队内部共享的GPTs。 ◈用于工作空间管理的管理员控…

圈小猫游戏HTML源码

源码介绍 圈小猫游戏html源码&#xff0c;HTMLCSSJS,记事本可以打开修改内容&#xff0c;电脑本地双击index.html即可运行&#xff0c;也可以上传到服务器上面运行&#xff0c;喜欢的同学可以拿去使用 下载地址 蓝奏云&#xff1a;https://wfr.lanzout.com/iFkVc1lb5akj CS…

Spring高手之路-Spring事务失效的场景详解

目录 前言 Transactional 应用在非 public 修饰的方法上 同一个类中方法调用&#xff0c;导致Transactional失效 final、static方法 Transactional的用法不对 Transactional 注解属性 propagation 设置不当 Transactional注解属性 rollbackFor 设置错误 用错注解 异常…

QT quick基础:组件gridview

组件gridview与android中gridview布局效果相同。下面记录qt quick该组件的使用方法。 方法一&#xff1a; // ContactModel.qml import QtQuick 2.0ListModel {ListElement {name: "1"portrait: "icons/ic_find.png"}ListElement {name: "2"por…

MYSQL第四次作业--多表查询

二、多表查询 1.创建student和score表 创建student表 创建score表。 CREATE TABLE score ( id INT(10) NOT NULL UNIQUE PRIMARY KEY AUTO_INCREMENT , stu_id INT(10) NOT NULL , c_name VARCHAR(20) , grade INT(10) ); 2.为student表和score表增加记录 向student表插入记录的…

决战排序之巅(二)

决战排序之巅&#xff08;二&#xff09; 排序测试函数 void verify(int* arr, int n) 归并排序递归方案代码可行性测试 非递归方案代码可行性测试 特点分析 计数排序代码实现代码可行性测试 特点分析 归并排序 VS 计数排序&#xff08;Release版本&#xff09;说明1w rand( ) …