526互联

前后端分离开发实现功能实例

发布时间 2023-10-12 10:15:30作者: wakenight

前后端分离开发实现功能实例

需求：后端向前端发送一个集合，前端把数据渲染到页面上

首先定义一个PersonDto

package com.wanan.springbootdemo.dto;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * @author wanan
 * @date 2023/10/11 16:51
 * @description:
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class PersonDto {
    private int id;
    private String name;
    private int age;

}

然后进行TableController的编写

package com.wanan.springbootdemo.controller;

import com.wanan.springbootdemo.dto.PersonDto;
import com.wanan.springbootdemo.util.ResultVo;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;

/**
 * @author wanan
 * @date 2023/10/11 16:50
 * @description:前端部分为表格渲染.html,前后端分离模式
 */
@RestController
@Slf4j
@CrossOrigin
public class TableController {
    @RequestMapping("/table")
    public ResultVo<ArrayList> register(){
        ArrayList<PersonDto> persons=new ArrayList<>();
        PersonDto person1=new PersonDto(1,"张三",13);
        PersonDto person2=new PersonDto(2,"李四",12);
        PersonDto person3=new PersonDto(3,"张武",14);
        persons.add(person1);
        persons.add(person2);
        persons.add(person3);
//将封装好的persons集合存到RestVo中
        return ResultVo.success(persons);
    }
}

然后进行前端代码的编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格渲染</title>
    <!-- 引入vue -->
    <script src="../js/vue.js"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


</head>
<body>
    <!-- 一个页面只能由一个vue,所以所有的数据都要放到这个div中 -->
    <div id="root">
        <table border="1">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <tr v-for="(person,index) of persons" :key="index">
                <td>{{person.id}}</td>
                <td>{{person.name}}</td>
                <td>{{person.age}}</td>
                <td><button @click="showInfoHandler(person)">点击</button></td>
                
            </tr>
        </table>   
    </div>
    
    <script>
        // 创建一个vue对象实例
        new Vue({
            el:'#root',//el用于指定当前Vue实例为哪个容器服务,值通常是css服务器（id选择器）
            data:{//data用于存储页面渲染的数据
            //persons中内容从后端获取
                persons:[
                ],
                
            },
            methods:{
                showInfoHandler(person){
                    alert(person.name+"被点击了")
                }
                },
            mounted(){//使用最多，vue创建完成时，可以完全使用vue对象实现数据初始化工具
            axios.post("http://localhost:8080/table/").then(response=>{
                //从后端获取persons,reposonse.data就是ResultVo
                //ResultVo中包含code,message,data,三个元素，data中就是我们存放的东西
                //response.data.data相当于ResultVo.data
                        this.persons=response.data.data
                    })
           },
        })
    </script>
</body>
</html>

ResultVo

package com.wanan.springbootdemo.util;

import lombok.Data;

/**
 * @author wanan
 * @date 2023/9/25 16:49
 * @description:
 */
@Data
public class ResultVo<T> {
    private int code;//响应状态码

    private String message;//状态描述信息

    private T data; //数据类型，泛型(可以是列表对象字符串)

    public  ResultVo() {}

    public ResultVo(int code,String message){
        this.code=code;
        this.message=message;
    }

    //封装常用的静态方法
    public  static <T> ResultVo<T> success (T data){
        ResultVo<T> resultVo =new ResultVo<>();
        resultVo.setCode(200);
        resultVo.setMessage("ok");
        resultVo.setData(data);
        return resultVo;
    }
}

运行前后端文件，可以看到，后端的数据已经成功显示在了前端创建的表格中

image-20231012100646921