Vue3实战:显示后台获取的用户数据

文章目录

  • 一、实战概述
  • 二、实战步骤
    • (一)创建数据库与表
    • (二)编写后端程序
      • 1、创建Spring Boot项目
      • 2、配置数据源
      • 3、创建用户实体类
      • 4、创建用户仓库接口
      • 5、创建用户服务类
      • 6、创建用户控制器
      • 7、启动应用,查看结果
    • (三)创建前端页面
    • (四)通过前端页面获取后台数据
  • 三、实战总结

一、实战概述

  • 在本实战教程中,首先构建了一个基于Spring Boot的后端应用来与MySQL数据库进行交互。通过创建test数据库和t_user表,并在Spring Boot项目中配置数据源以连接到该数据库。接着定义了User实体类映射数据库中的用户表,并使用Spring Data JPA实现自动化的CRUD操作。为了处理业务逻辑,创建了UserService接口以及其实现类,并利用UserRepository接口与数据库进行交互。然后,构建了UserController作为RESTful API控制器,暴露一个HTTP GET接口/users用于从前端获取所有用户信息。

  • 在前端部分,创建了一个简单的Vue3单页面应用。通过引入Vue3和Axios库,在组件挂载时异步请求后端APIhttp://localhost:8080/users以获取用户列表,并利用Vue响应式特性将获取的数据动态渲染到HTML页面上。当访问这个前端页面时,用户可以看到从后端获取并展示的所有用户信息列表。

  • 总之,本实战案例完整演示了如何结合前后端技术(Spring Boot + Vue3)开发一个简易的用户信息管理系统,实现了从数据库查询用户数据并在前端页面展示的功能。

二、实战步骤

(一)创建数据库与表

  • 创建test数据库和t_user
    在这里插入图片描述

(二)编写后端程序

1、创建Spring Boot项目

  • Spring Boot项目 - UserBoot
    在这里插入图片描述
  • 选择Spring Boot版本,添加相关依赖
    在这里插入图片描述
  • 单击【Create】按钮,得到初始化项目
    在这里插入图片描述

2、配置数据源

  • application.properties文件里配置数据源
    在这里插入图片描述
# 配置数据源
spring.datasource.url=jdbc:mysql://localhost:3306/test?useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=903213
spring.jpa.hibernate.ddl-auto=update

3、创建用户实体类

  • net.huawei.user里创建bean子包,在子包里创建User
    在这里插入图片描述
package net.huawei.user.bean;import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;import java.util.Date;/*** 功能:用户实体类* 作者:华卫* 日期:2024年01月22日*/
@Entity
@Table(name = "t_user")
public class User {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;private String username;private String password;private String telephone;private Date registerTime;public Long getId() {return id;}public void setId(Long 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;}public String getTelephone() {return telephone;}public void setTelephone(String telephone) {this.telephone = telephone;}public Date getRegisterTime() {return registerTime;}public void setRegisterTime(Date registerTime) {this.registerTime = registerTime;}@Overridepublic String toString() {return "User{" +"id=" + id +", username='" + username + '\'' +", password='" + password + '\'' +", telephone='" + telephone + '\'' +", registerTime=" + registerTime +'}';}
}
  • 这个 User 类是一个符合 JPA 规范的实体类,用于映射数据库表 t_user 中的数据。

    • @Entity 注解:表明该类是一个持久化实体,将被转换为数据库中的一个表。

    • @Table(name = “t_user”) 注解:指定与之对应的数据库表名为 t_user

    • 主键@Id 和 自动增长@GeneratedValue

      • @Id 注解标记了主键字段(这里是 id)。
      • @GeneratedValue(strategy = GenerationType.IDENTITY) 指定了主键生成策略为自动增长(IDENTITY),适用于支持自增主键的数据库系统。
    • 属性定义

      • id: 用户ID,Long 类型,作为表的主键。
      • username: 用户名,String 类型。
      • password: 密码,String 类型。
      • telephone: 手机号,String 类型。
      • registerTime: 注册时间,Date 类型。
    • getter 和 setter 方法:提供了每个属性的 getter 和 setter 方法,这是 Java Bean 的标准做法,以便在业务逻辑中操作这些属性。

  • 现在你已经正确设置了 User 类与数据库表 t_user 的映射关系。

4、创建用户仓库接口

  • net.huawei.user里创建repository子包,在子包里创建UserRepository接口
    在这里插入图片描述
package net.huawei.user.repository;import net.huawei.user.bean.User;
import org.springframework.data.jpa.repository.JpaRepository;/*** 功能:用户仓库接口* 作者:华卫* 日期:2024年01月22日*/
public interface UserRepository extends JpaRepository<User, Long> {
}

5、创建用户服务类

  • net.huawei.user里创建service子包,在子包里创建UserService
    在这里插入图片描述
package net.huawei.user.service;import net.huawei.user.bean.User;
import net.huawei.user.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;/*** 功能:用户服务类* 作者:华卫* 日期:2024年01月22日*/
@Service
public class UserService {@Autowiredprivate UserRepository userRepository;public List<User> getAllUsers() {return userRepository.findAll();}
}
  • 这个 UserService 类是一个在 Spring Boot 应用中用于处理用户相关服务逻辑的类。通过 @Service 注解,它被标识为一个由 Spring 容器管理的业务层组件。

    • Autowired注解@Autowired 是 Spring 提供的一个注解,用来自动装配 bean(即实例化并注入依赖)。在这里,它将 UserRepository 自动注入到 UserService 类中的 userRepository 字段,这样 UserService 就可以直接使用 userRepository 中的方法来与数据库进行交互。

    • UserRepository接口UserRepository 预计继承了 Spring Data JPA 的某个接口(如 JpaRepository<User, Long>CrudRepository<User, Long>),提供了对 User 数据库表的基本 CRUD 操作。通过注入的 userRepositoryUserService 可以执行查询、保存、更新和删除用户等操作。

    • getAllUsers()方法public List<User> getAllUsers() 方法定义了一个获取所有用户的业务逻辑。当调用此方法时,它会委托给 userRepositoryfindAll() 方法,该方法会返回数据库中所有 User 表记录对应的 User 对象列表。

  • 综上所述,UserService 类是实现用户数据访问和业务逻辑的核心部分,它利用了 Spring Data JPA 的便捷功能简化了数据库操作,并且遵循了面向服务(SOA)的设计原则,将数据库访问逻辑封装在单独的服务类中,便于维护和扩展。

6、创建用户控制器

  • net.huawei.user里创建controller子包,在子包里创建UserController
    在这里插入图片描述
package net.huawei.user.controller;import net.huawei.user.bean.User;
import net.huawei.user.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;import java.util.List;/*** 功能:用户控制器* 作者:华卫* 日期:2024年01月22日*/
@RestController
public class UserController {@Autowiredprivate UserService userService;@CrossOrigin(origins = "*", methods = {RequestMethod.GET})@GetMapping(value = "/users", produces = "application/json; charset=utf-8")public List<User> getUsers() {return userService.getAllUsers();}
}
  • 该段代码定义了一个 Spring Boot 控制器类 UserController,用于处理与用户相关的 HTTP 请求。

    1. 包声明

      • package net.huawei.user.controller; 表示该类位于 net.huawei.user.controller 包中。
    2. 类注释

      • 描述了该类的功能、作者和日期信息,方便阅读和理解。
    3. RestController注解

      • @RestController 是一个特殊的@Controller注解,表示这是一个 RESTful Web 服务控制器,返回的对象会被自动转换为 JSON 或 XML 形式响应给客户端。
    4. @Autowired注解

      • userService 字段上使用 @Autowired 注解,表明 Spring 容器需要自动注入名为 UserService 的 bean。这样,在 UserController 类中可以直接调用 UserService 提供的方法来操作用户数据。
    5. CrossOrigin注解

      • @CrossOrigin(origins = "*", methods = {RequestMethod.GET}) 允许跨域请求。这里的 “*” 表示接受任何域名发起的请求,methods 指定允许的 HTTP 方法类型(这里是 GET)。
    6. GetMapping注解

      • @GetMapping(value = "/users", produces = "application/json; charset=utf-8") 标识了处理 HTTP GET 请求的方法,当客户端访问 /users 路径时,会触发 getUsers() 方法。
      • produces 属性指定了方法返回的内容类型,这里设置为 JSON 格式,并且字符集是 UTF-8。
    7. getUsers()方法

      • 实现了从数据库获取所有用户信息的业务逻辑,通过调用 userService.getAllUsers() 方法完成。
      • 返回类型是 List<User>,表示将返回一个包含多个 User 对象的列表,这些对象将被转换为 JSON 并作为 HTTP 响应发送给客户端。
  • 综上所述,UserController 类中的 getUsers() 方法提供了一个 RESTful API,允许客户端通过 GET 请求从服务器获取所有的用户信息,并支持跨域访问,响应内容格式为 JSON。

7、启动应用,查看结果

  • 运行入口类UserBootApplication
    在这里插入图片描述
  • 访问http://localhost:8080/users
    在这里插入图片描述

(三)创建前端页面

  • D:\VueBootProjects\ShowUserInfo目录里创建get_users.html页面
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue3获取后台数据示例</title><!-- 添加Bootstrap样式库以美化表格 --><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0-beta1/css/bootstrap.min.css" rel="stylesheet"><!-- 引入Vue3 --><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.27/vue.global.prod.js"></script><!-- 引入Axios --><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>    
</head>
<body><div id="app"><table class="table table-striped table-hover"><thead><tr><th>ID</th><th>用户名</th><th>密码</th><th>电话号码</th><th>注册时间</th></tr></thead><tbody><tr v-for="user in users" :key="user.id"><td>{{ user.id }}</td><td>{{ user.username }}</td><td>{{ user.password }}</td><td>{{ user.telephone }}</td><td>{{ user.registerTime }}</td></tr></tbody></table></div><script>// 创建Vue应用实例并定义根组件const { createApp } = Vue;const app = createApp({data() {return {users: []};},async mounted() {try {const response = await axios.get('http://localhost:8080/users');this.users = response.data;} catch (error) {console.error("Error fetching users:", error);}}});// 挂载Vue应用app.mount('#app');		</script>
</body>
</html>
  • 这段代码是一个简单的 Vue3 应用程序,它通过 Axios 获取后端 Spring Boot 服务中的用户数据,并使用 Bootstrap 样式美化表格来显示这些数据。

    1. HTML头部

      • 引入了 Bootstrap 5.2.0-beta1 版本的 CSS 样式库,以美化页面元素和表格。
      • 引入 Vue3 的全局脚本文件 vue.global.prod.js 来启用 Vue3 功能。
      • 引入 Axios HTTP 库用于发送异步请求。
    2. Vue应用主体部分

      • 定义了一个带有 id="app"div 元素作为 Vue 应用的挂载点。
    3. Bootstrap样式表格

      • 使用 <table> 标签创建一个表格,并添加了 Bootstrap 类 “table”、“table-striped” 和 “table-hover”,分别表示基本样式、斑马纹行效果(奇偶行不同背景色)和鼠标悬停时高亮行的效果。
    4. 动态渲染表格内容

      • 使用 Vue 的 v-for 指令遍历 users 数组,对于数组中的每个用户对象,生成一行表格数据。
      • :key="user.id" 为 Vue 提供一个唯一标识符,以便在数据更新时优化组件重渲染。
    5. Vue应用程序实例化与配置

      • 创建一个 Vue 应用实例,并定义其根组件的数据结构和方法。
      • data 函数中初始化一个空数组 users,用于存储从后端获取的用户数据。
      • mounted 生命周期钩子函数中,使用 Axios 发送 GET 请求至 http://localhost:8080/users 接口获取用户列表。
      • 如果请求成功,则将响应数据赋值给 this.users,Vue 将自动根据数据的变化更新视图。
    6. 挂载Vue应用

      • 最后,调用 app.mount('#app') 方法将 Vue 应用挂载到 DOM 中 id 为 “app” 的元素上。
  • 当这个 HTML 页面加载并执行 JavaScript 脚本时,Vue 应用会启动并向后端服务器请求用户数据。一旦数据返回,Vue 将自动将其绑定到表格中,展示所有用户的详细信息,并且利用 Bootstrap 的样式让表格看起来更美观。

(四)通过前端页面获取后台数据

  • 打开file:///D:/VueBootProjects/ShowUserInfo/get_users.html网页
    在这里插入图片描述

三、实战总结

  • 本实战教程从零构建了一个基于Spring Boot的后端应用与Vue3前端单页应用,实现了用户信息管理系统的前后端联动功能。在后端,创建了test数据库和t_user表,并通过Spring Data JPA实现对数据库的CRUD操作;配置了数据源并定义了User实体类、UserRepository接口以及业务逻辑处理类UserService,最后通过UserController暴露RESTful API供前端调用。在前端,使用Vue3构建SPA,借助Axios库异步请求后端API获取所有用户信息,并利用Vue响应式特性动态渲染到HTML表格中展示。整个过程清晰展示了如何整合Spring Boot与Vue3技术栈开发实际项目,搭建起一个简易且功能完备的用户信息系统。

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

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

相关文章

蓝牙BLE基础知识

目录 一、初识蓝牙BLE 1.课程介绍 2.为什么需要蓝牙技术 3.蓝牙发展历史 4.蓝牙技术优势 5.蓝牙技术简介 6.学习补充 二、物理层&#xff08;Physical layer&#xff09; 1.模拟调制 2.数字调制 3.射频信道 4.学习补充 三、链路层&#xff08;link layer&#xff0…

Jmeter 设置全局请求 重点cook

原因 在使用jmeter 过程中为了方便 &#xff0c;会设置很多公众信心 比如请求头 请求cook 还会设置多个线程组 在同一个线程组中 我们只需要设置一个请求请求cook 就可以了 但是 有逆骨 就是喜欢多个线程组所以出现问题了 解决方案 设置一个全局变量 步骤 在测试计划中设…

图形用户界面(GUI)开发教程

文章目录 写在前面MATLAB GUI启动方式按钮&#xff08;Push Button&#xff09;查看属性tag的命名方式回调函数小小的总结 下拉菜单&#xff08;Pop-up Menu&#xff09;单选框&#xff08;Radio Button&#xff09;和复选框&#xff08;Check Box&#xff09;静态文本&#xf…

12.前端--CSS-背景属性

1.背景颜色 样式名称&#xff1a; background-color 定义元素的背景颜色 使用方式: background-color:颜色值; 其他说明&#xff1a; 元素背景颜色默认值是 transparent&#xff08;透明&#xff09;      background-color:transparent; 代码演示&#xff1a; 背景色…

硬件基础:组合逻辑电路

什么是组合逻辑电路 组合逻辑电路是由一些基本的逻辑门电路组成的&#xff0c;没有反馈&#xff0c;输出仅取决于输入。 组合逻辑电路是数字逻辑电路中一种重要的电路类型&#xff0c;它是由多个逻辑门&#xff08;例如与门、或门、非门等&#xff09;组成的电路。组合逻辑电路…

APUE学习之信号(Signal)

目录 一、信号 1、基本概念 2、用户处理信号的方式 3、查看信号 4、可靠信号和不可靠信号 5、信号种类 6、终止进程信号的区别 二、进程对信号的处理 1、signal&#xff08;&#xff09;函数 2、sigaction&#xff08;&#xff09;函数 3、代码演示 4、运行结果…

k8s---HPA 命名空间资源限制

目录 HPA相关知识 HPA&#xff08;Horizontal Pod Autoscaling&#xff09;Pod 水平自动伸缩&#xff0c;Kubernetes 有一个 HPA 的资源&#xff0c;HPA 可以根据 CPU 利用率自动伸缩一个 Replication Controller、 Deployment 或者Replica Set 中的 Pod 数量。 &#xff08;1…

LTD261次升级 | 小程序支持抖音客服、支持抖音登录 • 短信发送需实名认证 • 表单提交成功收邮件提醒

1、 抖音小程序新增抖音IM客服功能&#xff1b; 2、 抖音小程序支持一键登录、支持快捷授权手机号 3、 表单新增发送邮件到提交者邮箱&#xff1b; 4、 表单支持配置不自动推送客户管理&#xff1b; 5、 短信发送需实名认证签署承诺书&#xff1b; 6、 其他已知问题修复与优化&…

安装 nvm

前言&#xff1a; nvm 即 node 版本管理工具 (node version manager)&#xff0c;好处是方便切换 node.js 版本。 通过将多个 node 版本安装在指定路径&#xff0c;然后通过 nvm 命令切换时&#xff0c;就会切换我们环境变量中 node 命令指定的实际执行的软件路径。 使用场景…

数据结构笔记1

来自《Python数据结构学习笔记》&#xff08;张清云 编著&#xff09; 第一章 数据结构基础 1.逻辑结构 集合&#xff1a;结构中的数据元素除了同属于一种类型外&#xff0c;别无其他关系线性结构&#xff1a;数据元素之间一对一的关系树形结构&#xff1a;数据元素之间一对…

抖音向微信引流主要有哪几种方法-数灵通

近年来&#xff0c;随着智能设备的普及和信息技术的进步&#xff0c;短视频制作门槛逐渐降低&#xff0c;用户自创视频数量迅猛增长&#xff0c;用户规模持续扩大&#xff0c;有力推动了移动短视频的繁荣发展&#xff0c;市场规模也在不断扩张。作为当下炙手可热的短视频APP&am…

pycharm安装过程

1、安装包官网下载 PyCharm: the Python IDE for Professional Developers by JetBrains 点击下载 下拉选择社区版本 选择下载 下载完成后&#xff0c;双击exe安装。 安装完成&#xff0c;生成的桌面快捷方式 同意并继续 进入开发界面

网络安全学习 --- 小实验

题目 要求 1.防火墙线下使用子接口分别对应两个内部区域。 2.所有分区设备可以ping通网关。 过程 1.接口&#xff0c;区域配置完成。 2.配置SWL2 vlan 2 vlan 3 # interface GigabitEthernet0/0/1port link-type trunkport trunk allow-pass vlan 2 to 3 # interface Giga…

JavaWeb之JavaScript-Vue --黑马笔记

什么是JavaScript&#xff1f; JavaScript&#xff08;简称&#xff1a;JS&#xff09; 是一门跨平台、面向对象的脚本语言。是用来控制网页行为的&#xff0c;它能使网页可交互。 JavaScript 和 Java 是完全不同的语言&#xff0c;不论是概念还是设计。但是基础语法类似。 …

java数据结构与算法刷题-----LeetCode667. 优美的排列 II

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 解题思路 题目要求我们返回一个数组长度为n的数组&#xff0c;必须含有1~n…

AI 欺诈事件频出,如何重塑身份认证的安全性?

据报告表示&#xff0c;生成式人工智能每年可为世界经济注入相当于 4.4 万亿美元的资金。预计到 2030 年&#xff0c;人工智能对全球财政的潜在贡献将达到 15.7 万亿美元。人们惊叹于 AI 强大工作效率&#xff0c;期待能帮忙节省不必要的劳动力&#xff0c;但事实上 AI 出现之后…

C++类的简单学习

C语言结构体中只能定义变量&#xff0c;在C中&#xff0c;结构体内不仅可以定义变量&#xff0c;也可以定义函数 之前在数据结构学习中&#xff0c;我们用C语言方式实现的栈&#xff0c;结构体中只能定义变量&#xff1b;现在以C方式实现&#xff0c;会发现struct中也可以定义函…

C++ Qt day1

提示并输入一个字符串&#xff0c;统计该字符中大写、小写字母个数、数字个数、空格个数以及其他字符个数(要求使用C风格字符串完成) #include <iostream> #include <string.h> #include <array> using namespace std;int main() {string str;cout <<…

数据结构Java版(5)——链栈和链队列的实现

之前我们对链表进行了讲解&#xff0c;这次我们来用链表的方式来实现栈和队列两个接口&#xff0c;来加深我们对链表的理解。 一、链栈 栈的接口与顺序栈的接口相同&#xff0c;这里我们主要展示如何用我们自己写的链表来实现这个接口&#xff0c;代码展示如下&#xff1a; 接…

AI-数学-高中-8-函数奇偶性

原作者视频&#xff1a;函数】6函数奇偶性&#xff08;易-中档&#xff09;_哔哩哔哩_bilibili 示例&#xff1a; 已知奇偶性求解析式&#xff1a; 奇偶、单调函数综合示例&#xff1a;