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.rhkb.cn/news/239564.html

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

相关文章

rime中州韵小狼毫 词组注释 滤镜

教程目录&#xff1a;rime中州韵小狼毫须鼠管安装配置教程 保姆级教程 100增强功能配置教程 在rime中州韵小狼毫 联想词组 滤镜一文中&#xff0c;我们通过Filter滤镜功能配置了联想词组的功能&#xff0c;这使得我们在输入一些关键词汇时&#xff0c;可以联想补充一些附加的词…

HarmonyOS开发FA应用模型下多个页面的声明方式

目录 方式1 方式2 HarmonyOS配套的IDE是DevEco Studio&#xff0c;目前的版本是3.1。官网可以直接下载 HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者 ​ 方式1 ​在DevEco Studio如果是在pages目录通过右键New->ArkTS File生成的文件&#xff0c;需要注意&…

移动硬盘无法识别处理办法

今天这里做一下总结&#xff0c;我现在手上有一个移动硬盘&#xff0c;插入win10电脑是有盘号的&#xff0c;但是 但是点击就出问题 解决办法 安装DiskGenius 下载网址在https://www.diskgenius.cn/download.php 下载之后解压安装就行&#xff0c;非常简单&#xff0c;然后…

C++力扣题目501--二叉搜索树中的众数

给你一个含重复值的二叉搜索树&#xff08;BST&#xff09;的根节点 root &#xff0c;找出并返回 BST 中的所有 众数&#xff08;即&#xff0c;出现频率最高的元素&#xff09;。 如果树中有不止一个众数&#xff0c;可以按 任意顺序 返回。 假定 BST 满足如下定义&#xf…

B端产品经理学习-版本规划管理

首先我们回顾一下用户故事&#xff0c;用户故事有如下特点&#xff1a; PRD文档的特点则如下&#xff1a; B端产品中用户角色不同&#xff0c;需求侧重也不同 决策人——公司战略需求&#xff1a;转型升级、降本增效、品牌提升等 管理负责人——公司管理需求&#xff1a;提升…

ROS2】MOMO的鱼香ROS2(六)ROS2入门篇——ROS2通信之参数与动作

ROS2通信之参数与动作 引言1 参数通信1.1 参数常用指令 2 参数之RCLPY实现2.1 创建功能包和节点2.2 编辑脚本文件parameters_basic.py2.3 编译测试 3 动作&#xff08;Action&#xff09;通信3.1 动作常用指令 3.2 自定义通信接口4 动作之RCLPY实现 引言 笔者跟着鱼香ROS的ROS…

全屏页面滚动个人简历模板源码

标题模板介绍 HTML5全屏页面滚动个人简历模板&#xff0c;响应式设计&#xff0c;自适应屏幕分辨率&#xff0c;兼容PC端 和手机移动端&#xff0c;单页面&#xff0c;多栏目&#xff0c;有工作经验、联系我、技能、关于我等栏目。 下载地址 CSDN下载

新版网易滑块

突然发现脸皮厚根本没用&#xff0c;大冬天的&#xff0c;风吹过来还是会冷。 大哥们多整件衣裳&#xff0c;好冷&#xff01;&#xff01;&#xff01;&#xff01; 网易更新了&#xff0c;这俩 dt跟f值。 dt为 这里返回的&#xff0c;忽略掉他。 data参数中的d值&#xff…

驾驭未来:从传统运维到智能化运维的转型之路

随着科技的飞速发展&#xff0c;企业的业务需求也在不断变化。为了满足这些需求&#xff0c;企业的IT架构逐渐向云原生、容器化和微服务化演进。作为支撑企业业务发展的运维人员&#xff0c;我们需要紧跟时代步伐&#xff0c;不断提升自己的技能和认知水平。 在2023年全球运维大…

python统计分析——操作案例(模拟抽样)

参考资料&#xff1a;用python动手学统计学 import numpy as np import pandas as pd from matplotlib import pyplot as plt import seaborn as snsdata_setpd.read_csv(r"C:\python统计学\3-4-1-fish_length_100000.csv")[length] #此处将文件路径改为自己的路…

计算机网络 —— 数据链路层

数据链路层 3.1 数据链路层概述 数据链路层把网络层交下来的数据构成帧发送到链路上&#xff0c;以及把收到的帧数据取出并上交给网络层。链路层属于计算机网络的底层。数据链路层使用的信道主要由以下两种类型&#xff1a; 点对点通信。广播通信。 数据链路和帧 链路&…

网络共享服务

存储类型&#xff1a;直连式&#xff08;DAS&#xff09;:距离最近&#xff0c;存储设备且直接连接到服务器上 存储区域网络&#xff08;SAN&#xff09;&#xff1a;适用于大型应用或数据库系统&#xff0c;可以使用文件的空间&#xff0c; 以及管理空间…

如何在Windows 10/11的防火墙中禁止和允许某个应用程序,这里提供详细步骤

想阻止应用程序访问互联网吗&#xff1f;以下是如何通过简单的步骤阻止和允许Windows防火墙中的程序。​ 一般来说&#xff0c;大多数用户永远不需要担心应用程序访问互联网。然而&#xff0c;在某些情况下&#xff0c;你需要限制应用程序访问互联网。 例如&#xff0c;有问题…

Linux系统使用超详细(十)~vi/vim命令①

vi/vim命令有很多&#xff0c;其实只有少数的用法对于我们日常工作中起到了很大帮助&#xff0c;但是既然我选择梳理Linux的学习笔记&#xff0c;那么一定全力把自己的理解和学习笔记的内容认真整理汇总&#xff0c;内容或许有错误&#xff0c;还请发现的C友们发现了及时指出。…

线性代数——行列式按行(列)展开

目录 一、余子式&#xff1a;将行列式某元素所在行和列的元素全去掉 剩余部分所构成的行列式&#xff0c;称为该元素的余子式 二、代数余子式 三、行列式等于它的任一行&#xff08;列&#xff09;的各元素与对应代数余子式乘积之和 四、行列式某行元素&#xff08;列&…

C++核心编程之类和对象---C++面向对象的三大特性--多态

目录 一、多态 1. 多态的概念 2.多态的分类&#xff1a; 1. 静态多态&#xff1a; 2. 动态多态&#xff1a; 3.静态多态和动态多态的区别&#xff1a; 4.动态多态需要满足的条件&#xff1a; 4.1重写的概念&#xff1a; 4.2动态多态的调用&#xff1a; 二、多态 三、多…

Elasticsearch:Search tutorial - 使用 Python 进行搜索 (四)

在本节中&#xff0c;你将了解另一种机器学习搜索方法&#xff0c;该方法利用 Elastic Learned Sparse EncodeR 模型或 ELSER&#xff0c;这是一种由 Elastic 训练来执行语义搜索的自然语言处理模型。这是继之前的文章 “Elasticsearch&#xff1a;Search tutorial - 使用 Pyth…

JDK介绍

JDK(Java Development Kit)是Sun Microsystems针对Java开发员的产品。自从Java推出以来&#xff0c;JDK已经成为使用最广泛的Java SDK&#xff08;Software development kit&#xff09;&#xff0c;JDK是一个写Java的applet和应用程序的程序开发环境。它由一个处于操作系统层之…

HTML--CSS--边框、列表、表格样式

边框样式 属性&#xff1a; border-width 边框宽度 border-style 边框外观 border-color 边框颜色 需要同时设定三个属性 border-width 边框宽度 取值为像素值 border-style 边框样式 none 无样式 dashed 虚线 solid 实线 border-color 边框颜色 如示例&#xff1a; 为div设…

C语言中关于指针的理解及用法

关于指针意思的参考&#xff1a;https://baike.baidu.com/item/%e6%8c%87%e9%92%88/2878304 指针 指针变量 地址 野指针 野指针就是指针指向的位置是不可知的&#xff08;随机的&#xff0c;不正确的&#xff0c;没有明确限制的&#xff09; 以下是导致野指针的原因 1.指针…