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组件
    在这里插入图片描述

9、创建首页Vue组件
  • src/components里创建IndexView.vue组件
    在这里插入图片描述

    Welcome to Vue 3 World~
  • 该代码定义了一个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 应用程序的根组件,负责整个应用的布局与整体结构,所有其他组件在其内部组织和渲染。
    在这里插入图片描述

    Vue logo
  • 此代码为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
    在这里插入图片描述

    首页

    Welcome to Spring Boot World~

  • 修改入口程序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;
      }

      @Override
      public 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”)
      @ResponseBody
      public 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.xdnf.cn/news/35773.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

记录一次老平台改造通知用户刷新页面,纯前端实现

记录一次老平台改造通知用户刷新页面&#xff0c;纯前端实现 方案概述背景现状问题本质 方案设计前提设计实现 其他补充写在最后的话抛出一个问题 方案概述 背景 前端构建完上线&#xff0c;用户还停留还在老页面&#xff0c;用户不知道网页重新部署了&#xff0c;跳转页面的时…

11.12[CQU JAVEE_EXP3][JAVA WEB]3h速成JAVA WEB;DE启动Tomcat的各种BUG;GIT

GIT 如果有四个实验&#xff0c;但希望将四个实验保存在一个远程仓库当中&#xff0c;且分别有一个文件夹来区分&#xff0c;但是在本地写实验的时候&#xff0c;希望每次只打开一个实验&#xff0c;并且做完后向远程仓库中提交&#xff0c;不会拉取远程仓库中的其它实验代码 …

PYTHON编写API

API——application programming interface 全称为应用程序开发接口&#xff0c;是不同软件系统之间相互通信的桥梁。通过API&#xff0c;开发者可以通过标准化的请求和响应机制&#xff0c;访问服务器上的数据和功能&#xff0c;而无需了解具体的内部实现细节。在python中&am…

网络基础和UDP函数的简单使用

网络发展 最开始&#xff0c;计算机是独立的个体&#xff0c;因为需求需要计算机之间交换数据&#xff0c;由局域网&#xff08;私网&#xff09;–>广域网&#xff08;公网&#xff09;&#xff0c;网络就逐渐发展起来了。 初识协议 协议就是一种约定 网络协议就是众多协…

Netty入门教程——认识Netty

Netty入门教程——认识Netty 什么是Netty&#xff1f; Netty 是一个利用 Java 的高级网络的能力&#xff0c;隐藏其背后的复杂性而提供一个易于使用的 API 的客户端/服务器框架。 Netty 是一个广泛使用的 Java 网络编程框架&#xff08;Netty 在 2011 年获得了Duke’s Choice …

调用大模型api 批量处理图像 保存到excel

最近需要调用大模型&#xff0c;并将结果保存到excel中&#xff0c;效果如下&#xff1a; 代码&#xff1a; import base64 from zhipuai import ZhipuAI import os import pandas as pd from openpyxl import Workbook from openpyxl.drawing.image import Image from io i…

Python基于TensorFlow实现BP和LSTM神经网络的空气质量预测并使用SHAP解释模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后关注获取。 1.项目背景 随着工业化进程的加速和城市化的扩展&#xff0c;空气污染成为全球面临的主要环境问题之一。空气质…

高效查找秘密武器一:位图

有这样的一个问题&#xff1a; 给40亿个不重复的无符号整数&#xff0c;没排过序。给一个无符号整数&#xff0c;如何快速判断一个数是否在这40亿个数 中。 那么我们一般会想到这样做的 1.遍历&#xff0c;时间复杂度O(n) 2.排序&#xff08;N*logN&#xff09;&#xff0c…

对于小型企业,独立站和电商平台哪个更经济?

对于小型企业来说&#xff0c;选择独立站还是电商平台&#xff0c;需要根据各自的成本优势来决定。以下是一些关键点的比较&#xff1a; 平台费用&#xff1a; 电商平台&#xff1a;通常需要缴纳一定比例的交易佣金或年费&#xff0c;例如天猫、京东等平台的保证金和佣金费用相…

带权并查集和扩展域并查集的一些整理和理解(上)

请读者在有一定并查集基础上再阅读&#xff08;至少要知道什么是带权和扩展域并查集&#xff09; 在最近做题时候&#xff0c;我遇到了一些带权并查集和扩展域并查集的题目。我觉得它们都很难写也很难想&#xff0c;尤其是带权并查集我几乎第一时间无法想到是怎么做的&#xf…

json+Tomact项目报错怎么办?

在响应请求的时候&#xff0c;如果http响应没有指定响应数据的content-type&#xff0c;浏览器就不知道按照什么格式解析响应体的数据&#xff0c;因为浏览器只知道怎样解析http的行和头&#xff0c;再从头里获取响应体的字节长度和类型&#xff0c;按照你给的长度去截流&#…

极限激光雷达点云数据集

https://arxiv.org/pdf/2307.07607v5 ‎ - AirLab 他们的数据集里面有这么多极限场景 点云数据转换 他们的激光用的velodyne,录制的格式是【velodyne_msgs/VelodyneScan】 需要把【velodyne_msgs/VelodyneScan】转化成【sensor_msgs/PointCloud2】 我编译https://github.co…

信奥常考点:二叉树的构建(已知中序和 前序或后序 的情况下)

一、题目引入 这是来自CCF-GESP C七级认证 2024年9月的题目。 我们在此不解题&#xff0c;只把树画出来。 CCF-GESP 编程能力认证 C 七级 2024年9月份详细解析-CSDN博客 二、解题过程 我们可以根据先序遍历得出根节点是A&#xff0c;然后我们得到了A的左子树[B D]&#xff08;橙…

电容的概念和基本参数

电容基本概念 电容最简单的结构可由两个相互靠近的导体平面中间夹一层绝缘介质组成&#xff0c;当在电容两个极板间加上电压时&#xff0c;电容就会储存电荷&#xff0c;所以电容是一个充放电荷的电子元器件。电容量是电容储存电荷多少的一个量值&#xff0c;平板电容的电容量…

【js逆向专题】13.jsvmp补环境篇一

目录 一.了解jsvmp技术1. js虚拟机保护方案2.jsvmp实现原理3. 模拟jsvmp执行过程 二.环境检测1. 什么是环境检测2.案例讲解 三. 项目实战1. 案例11.逆向目标2. 项目分析1.补第一个referrer2. 调试技巧13. 调试技巧24. 补充sign5. 补 length6. 参数长短补充 3. 逆向结果 2. 案例…

高质量翻译在美国推广移动应用中的重要性

美国的移动应用市场是世界上竞争最激烈、利润最高的市场之一&#xff0c;为开发者提供了接触数百万潜在用户的机会。然而&#xff0c;进入这个市场需要的不仅仅是创新技术或令人信服的想法&#xff1b;它要求与目标受众进行有效地沟通和文化契合。在这个过程中&#xff0c;高质…

[Redis#17] 主从复制 | 拓扑结构 | 复制原理 | 数据同步 | psync

目录 主从模式 主从复制作用 建立主从复制 主节点信息 从节点信息 断开主从复制关系 主从拓扑结构 主从复制原理 1. 复制过程 2. 数据同步&#xff08;PSYNC&#xff09; 3. 三种复制方式 一、全量复制 二、部分复制 三、实时复制 四、主从复制模式存在的问题 在…

【Unity高级】如何动态调整物体透明度

本文介绍了如何设置及动态调整物体的透明度。 一、手动设置的方法 我们先来看下如何手动设置物体的透明度。 物体的透明与否是通过材质来设置的。只有我们把具有透明度的材质指给物体的渲染器&#xff08;Render&#xff09;&#xff0c;物体就被设置成相应的透明度了。 看一…

相机动态/在线标定

图1 图2 基本原理 【原理1】平行线在射影变换后会交于一点。如图所示,A为相机光心,蓝色矩形框为归一化平面,O为平面中心。地面四条黄色直线为平行且等距的车道线。HI交其中两条车道线于H、I, 过G作HI的平行线GM交车道线于M。HI、GM在归一化平面上的投影分别为JK、PN,二者会…

通俗易懂理解:网络安全恶意节点的检测与哨兵节点的激活【论文+代码】

以下资料参考来自本文末尾的参考资料与代码&#xff1a; 在网络安全中&#xff0c;恶意节点检测和哨兵节点激活是确保网络稳定性、可靠性和安全性的关键技术&#xff0c;尤其是在分布式系统、物联网 (IoT)、区块链网络等环境中。下面将详细介绍这两个概念及其应用。 一、恶意…