JAVA学习-实战1 SpringBoot实现用户列表展示
梦里梦见的到底是自己向往的过去还是逃避的现实。
要求
开发Web程序，完成用户列表的渲染展示。通过直接访问本地路径的user.html，查看列表格式的用户数据。
准备工作
工程创建：创建一个SpringBoot工程，并且勾选相关依赖
数据以及界面准备：引入资料中准备好的用户数据文件（user.txt），准备好前端静态界面
数据封装：定义一个实体类，用于封装用户信息
开始
首先文本数据内部如下（是的我知道这很奇怪但是就是很奇怪）：
接下来，创建SpringBoot工程，其中相关类类定义如下：
//UserData.java
//用户信息封装类
@Data
@NoArgsConstructor
@AllArgsConstructor
public class UserData {
public Integer ID;
public String username;
public String password;
public String name;
public Integer age;
public LocalDateTime updateTime;
}
//UserController.java
//请求处理类每一部分的作用已经标清
@RestController
public class UserController {
@RequestMapping("/list") //定义该方法的请求路径为"/list"
public List<UserData> list() throws Exception {
//1.从user.txt中读取用户数据
InputStream in = this.getClass().getClassLoader().getResourceAsStream("user.txt");
ArrayList<String> lines = IoUtil.readLines(in, StandardCharsets.UTF_8,new ArrayList<>());
//2.解析用户信息，封装为User对象 ->list集合
List<UserData> userlist = lines.stream().map(line->{
String[] parts = line.split(",");
Integer id = Integer.valueOf(parts[0]);
String username = parts[1];
String password = parts[2];
String name = parts[3];
Integer age = Integer.valueOf(parts[4]);
LocalDateTime updateTime = LocalDateTime.parse(parts[5], DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")); //字符串转化为时间的处理方法比较特殊
return new UserData(id,username,password,name,age,updateTime);
}).toList();
//3.返回为json格式返回给前端
return userlist;
}
}
InputStream in = this.getClass().getClassLoader().getResourceAsStream("user.txt");是Java 中用于从类路径（classpath）加载资源文件并获取其输入流的标准方法。
·其中this.getClass()表示访问当前类的Class对象（这个Class对象代表了当前对象运行时的类）
·getClassLoader()方法表示返回当前类的ClassLoader对象。ClassLoader 可以加载类路径（classpath）下的资源文件，如配置文件、图片、属性文件等。这通过 getResource() 和 getResourceAsStream() 方法实现。
·getResourceAsStream()方法是ClassLoader类的一个方法，它的作用是根据提供的资源名称（这里是 "user.txt"），在类路径（classpath）中查找该资源文件，如果找到了该资源文件，它会返回一个 InputStream 对象，这个流可以用来读取文件的内容。
IoUtil.readLines是JAVA工具库HuTool糊涂的一个读取工具，是使用 Hutool 工具库中的 IoUtil 类来读取输入流 in 中的内容，按行解析并返回一个 ArrayList，其中每个元素代表文件中的一行内容。
从 user.txt 文件对应的输入流 in 中，使用 UTF-8 编码格式逐行读取内容，并将每一行作为字符串存储在一个 ArrayList 中，最终将这个列表赋值给变量 lines。
使用HuTool工具时需要在POM.XML中引入对应的依赖
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.8.27</version>
</dependency>
lines.stream().map使用了JAVA中的stream流工具处理，其将lines中的数据经过map中的方法进行加工转化从而得到我们想要的数据
原始数据是一个字符串
"1,daqiao,1234567890,大乔,22,2024-07-15 15:05:45"
转换完成的数据
1,"daqiao","1234567890","大乔",22,2024-07-15 15:05:45
最后使用toList()方法进行终结操作返回list
然后开始运行，查看到的结果是这样的
前端静态界面
只能传送数据不是我们想要的最终结果，我们希望能用一个页面渲染一下，将其包装成基本的列表形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户列表数据</title>
<style>
/*定义css，美化表格*/
table{
border-collapse: collapse;
width: 100%;
margin-top: 20px;
border: 1px solid #ccc;
text-align: center;
font-size: 14px;
}
tr {
height: 40px;
}
th,td{
border: 1px solid #ccc;
}
thead{
background-color: #e8e8e8;
}
h1{ //定义h1标题
text-align: center;
font-family: 楷体;
}
</style>
</head>
<body>
<div id="app">
<h1>用户列表数据</h1>
<!--定义一个表格,包括6列,分别是: ID, 用户名, 密码, 姓名, 年龄, 更新时间-->
<table>
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>密码</th>
<th>姓名</th>
<th>年龄</th>
<th>更新时间</th>
</tr>
</thead>
<tbody>
<tr v-for="user in userList">
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.password}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.updateTime}}</td>
</tr>
</tbody>
</table>
</div>
<!--引入axios-->
<script src="js/axios.min.js"></script>
<script type="module">
import { createApp } from './js/vue.esm-browser.js'
createApp({
data() {
return {
userList: []
}
},
methods: {
async search(){
const result = await axios.get('/list');
this.userList = result.data;
}
},
mounted() {
this.search();
}
}).mount('#app')
</script>
</body>
</html>
效果如下所示：
静态数据界面核心实现如下：
数据绑定: 使用Vue.js的v-for指令循环渲染用户列表，其中要注意的时候，数据属性提取一定要和数据封装类的属性完全一致
模板语法: 通过{{}}插值语法显示用户数据
异步请求: 使用axios发起HTTP GET请求获取数据
生命周期: 在mounted钩子中自动加载数据
差不多就是这样了~~~
浙公网安备 33010602011771号