前后端分离开发实现功能实例
需求：后端向前端发送一个集合，前端把数据渲染到页面上
首先定义一个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;
}
}
运行前后端文件，可以看到，后端的数据已经成功显示在了前端创建的表格中