前后端联调案例，springBoot+vue

后端

点击查看代码 
package com.itlf.springboot_01.controller;

import cn.hutool.core.io.IoUtil;
import com.itlf.springboot_01.pojo.User;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.FileInputStream;
import java.io.InputStream;
import java.nio.charset.StandardCharsets;
import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;

@RestController
public class UserController {

    @RequestMapping("/getList")
    public List<User> list(){
        //利用hutool来读取文件
        InputStream in = this.getClass().getClassLoader().getResourceAsStream("user.txt");
        ArrayList<String> arrayList = IoUtil.readLines(in, StandardCharsets.UTF_8, new ArrayList<>());

        //解析用户信息，封装为User对象
        List<User> userList = arrayList.stream().map(line -> {
            String[] split = line.split(",");
            Integer id = Integer.parseInt(split[0]);
            String name = split[1];
            Integer age = Integer.parseInt(split[2]);
            LocalDateTime updateTime = LocalDateTime.parse(split[3], DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));
            return new User(id, name, age, updateTime);
        }).collect(Collectors.toList());

        //返回数据转换为json类型
        //在http中会直接转换为json类型
        return userList;
    }
}
**简单的跨域配置（跨域指的是你浏览器访问的端口号，和你后端创建的端口号不一致）**
点击查看代码 
package com.itlf.springboot_01.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/getList")
                        .allowedOrigins("http://localhost:63342") // 允许你的前端地址
                        .allowedMethods("GET", "POST");
            }
        };
    }
}
**user对象（你必须配置返回的JSON日期格式，不然浏览器是ISO默认格式，空格会变成个T)**
点击查看代码 
package com.itlf.springboot_01.pojo;

import com.fasterxml.jackson.annotation.JsonFormat;

import java.time.LocalDateTime;

public class User {
    private Integer id;
    private String name;
    private Integer age;
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private LocalDateTime updateTime;

    public User(Integer id, String name, Integer age, LocalDateTime updateTime) {
        this.id = id;
        this.name = name;
        this.age = age;
        this.updateTime = updateTime;
    }
    public User(){}

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public LocalDateTime getUpdateTime() {
        return updateTime;
    }

    public void setUpdateTime(LocalDateTime updateTime) {
        this.updateTime = updateTime;
    }
}
**user.txt**
点击查看代码 
1,kop,26,2024-07-23 21:03:24
2,尼基,13,2021-05-24 11:30:55
**前端（vue+axios+html+css）**
点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border-collapse: separate; /* 分离边框 */
            border-spacing: 0;
            width: 100%;
        }
        th, td {
            padding: 3px;
            border-bottom: 1px solid #ddd; /* 行分隔线 */
            text-align: center;        /* 水平居中 */
            vertical-align: middle;    /* 垂直居中 */
        }
        th:not(:last-child),
        td:not(:last-child) {
            border-right: 1px solid #ddd; /* 列分隔线 */
        }

    </style>
</head>
<body id="app">
<h1 style="text-align: center">用户数据列表</h1>
<!--    表格区域-->
    <div>
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>日期</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in userList" :key="item.id">
                    <td >{{item.id}}</td>
                    <td >{{item.name}}</td>
                    <td >{{item.age}}</td>
                    <td >{{item.updateTime}}</td>
                </tr>
            </tbody>
        </table>

    </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
        data(){
            return{
                userList:[]
            }

        },
        methods:{
            async  get(){
              let result=await axios.get("http://localhost:8080/getList")
                 this.userList= result.data

          },

        },
        mounted(){
            this.get()
        }

    }).mount("#app")
</script>
</html>
posted @ 2025-06-12 23:07  lfqyj  阅读(23)  评论(0)    收藏  举报