jpa一对多关系映射+vue显示
jpa一对多关系。简单来说，一对多就是有个学生（student）有多个成绩单（grade）
@OneToMany
@JoinColumn(name = "sid",referencedColumnName = "sid",insertable = false,updatable = false)
private Set<Score> score;
public Set<Score> getScore() {
return score;
}
public void setScore(Set<Score> score) {
this.score = score;
}
这个是MySQL中的stud ent表中的内容，
package com.sdbairui.demo.Entity;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import org.hibernate.validator.constraints.Length;
import org.springframework.format.annotation.DateTimeFormat;
import javax.persistence.*;
import javax.validation.constraints.NotBlank;
import java.io.Serializable;
import java.util.Date;
import java.util.Set;
@Table
@Entity(name = "student") // 这是一个标记注释，表明这个类是一个实体。这个注释必须放在类名称上。
@JsonIgnoreProperties(value = "hibernateLazyInitializer")
public class Student implements Serializable {
@Id // 此注释位于持有持久标识属性的特定字段上。该字段被视为数据库中的主键。
@GeneratedValue(strategy = GenerationType.IDENTITY)
private int sid;
//后端设置名字限制
// @Column标记表示所持久化属性所映射表中的字段
// unique属性表示该字段是否为唯一标识
// nullable属性表示该字段是否可以为null值
@Column(unique = true, nullable = false)
// 可以为String数据类型的属性判断是否为空
@NotBlank(message = "名字不为空")
// 限制字符长度区间
@Length(message = "名字长度在1-10之间", min = 1, max = 10)
private String sname;
//后端设置性别限制
private int sex;
@JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
@DateTimeFormat(pattern = "yyyy-MM-dd")
private Date birthday;
private String classes;
// 这个是多对一
// @ManyToOne
//// name="sid": 这个是(学生)Person表中的sid,cid是(班级)classes表的
// @JoinColumn(name = "sid", referencedColumnName = "sid", insertable = false, updatable = false)
@OneToMany
@JoinColumn(name = "sid",referencedColumnName = "sid",insertable = false,updatable = false)
private Set<Score> score;
public Set<Score> getScore() {
return score;
}
public void setScore(Set<Score> score) {
this.score = score;
}
public int getSid() {
return sid;
}
public void setSid(int sid) {
this.sid = sid;
}
public int getSex() {
return sex;
}
public void setSex(int sex) {
this.sex = sex;
}
public String getSname() {
return sname;
}
public void setSname(String sname) {
this.sname = sname;
}
// @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
public Date getBirthday() {
return birthday;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
public String getClasses() {
return classes;
}
public void setClasses(String classes) {
this.classes = classes;
}
}
下面这个是score（成绩表）表中的内容
package com.sdbairui.demo.Entity;
import javax.persistence.*;
@Table
@Entity(name = "score")
public class Score {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private int ssid;
private int coid;
private float grade;
private int sid;
@ManyToOne
// name="sid": 这个是(学生)Person表中的sid,cid是(班级)classes表的
@JoinColumn(name = "coid", referencedColumnName = "coid", insertable = false, updatable = false)
private Course course;
public float getGrade() {
return grade;
}
public void setGrade(float grade) {
this.grade = grade;
}
public Course getCourse() {
return course;
}
public void setCourse(Course course) {
this.course = course;
}
public int getCoid() {
return coid;
}
public void setCoid(int coid) {
this.coid = coid;
}
public int getSid() {
return sid;
}
public void setSid(int sid) {
this.sid = sid;
}
public int getSsid() {
return ssid;
}
public void setSsid(int ssid) {
this.ssid = ssid;
}
}
下面这个是course（科目表）的内容
package com.sdbairui.demo.Entity;
import javax.persistence.*;
@Table
@Entity(name = "course")
public class Course {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private int coid;
private String cname;
public int getCoid() {
return coid;
}
public void setCoid(int coid) {
this.coid = coid;
}
public String getCname() {
return cname;
}
public void setCname(String cname) {
this.cname = cname;
}
}
编写完成后，启动postman。观看程序是否跑起来，如一下内容就是我的跑起来的内容
{
"data": {
"content": [
{
"sid": 7,
"sname": "王娴儿",
"sex": 2,
"birthday": "2020-06-10",
"classes": "1802",
"score": [
{
"ssid": 6,
"coid": 2,
"grade": 89.0,
"sid": 7,
"course": {
"coid": 2,
"cname": "PHP"
}
}
]
},
{
"sid": 4,
"sname": "梦儿",
"sex": 2,
"birthday": "2020-06-23",
"classes": "1903",
"score": [
{
"ssid": 4,
"coid": 4,
"grade": 53.0,
"sid": 4,
"course": {
"coid": 4,
"cname": "UI"
}
}
]
},
{
"sid": 3,
"sname": "蒙恬",
"sex": 1,
"birthday": "2020-06-23",
"classes": "1902",
"score": [
{
"ssid": 3,
"coid": 3,
"grade": 78.0,
"sid": 3,
"course": {
"coid": 3,
"cname": "前端"
}
}
]
},
{
"sid": 2,
"sname": "山珍",
"sex": 1,
"birthday": "2020-06-09",
"classes": "1901",
"score": [
{
"ssid": 5,
"coid": 4,
"grade": 47.0,
"sid": 2,
"course": {
"coid": 4,
"cname": "UI"
}
}
]
},
{
"sid": 1,
"sname": "王明",
"sex": 2,
"birthday": "2020-06-24",
"classes": "1904",
"score": [
{
"ssid": 1,
"coid": 1,
"grade": 52.0,
"sid": 1,
"course": {
"coid": 1,
"cname": "java"
}
},
{
"ssid": 2,
"coid": 2,
"grade": 45.0,
"sid": 1,
"course": {
"coid": 2,
"cname": "PHP"
}
}
]
}
],
"pageable": {
"sort": {
"sorted": true,
"unsorted": false,
"empty": false
},
"offset": 0,
"pageNumber": 0,
"pageSize": 5,
"unpaged": false,
"paged": true
},
"totalElements": 5,
"totalPages": 1,
"last": true,
"number": 0,
"size": 5,
"sort": {
"sorted": true,
"unsorted": false,
"empty": false
},
"numberOfElements": 5,
"first": true,
"empty": false
},
"code": "0",
"msg": "获取学生列表成功"
}
当出现这个的时候就证明你已成功完成了一对多的表连接了，下面我们就在vue中将内容通过浏览器中显示出来
<table border="1">
<button v-on:click="getStudentDate()">返回</button>
<button v-on:click="insert()">添加</button>
<tr>
<td colspan="9">
姓名 <input type="text" name="name" v-model="like.sname">
<!-- 电话：<input type="text" name="telephone" v-model="like.telephone">-->
<button v-on:click="getStudentDate()">查询</button>
</td>
</tr>
<tr>
<td>
序列号码
<button @click="checkAll" v-model="checked">全选</button>
</td>
<td>学生姓名</td>
<td>学生性别</td>
<td>入学时间</td>
<td>成绩表</td>
<td>学生班级</td>
<td>数据操作</td>
</tr>
<tr v-for="(item,index) in list">
<td>
<input type="checkbox" v-model="checkModel" :value="item.sid">
</td>
<td>{{item.sname}}</td>
<td>
<div v-if="item.sex==1">
男
</div>
<div v-else>
女
</div>
</td>
<td>{{item.birthday}}</td>
<td>
<ul>
<li v-for="vo in item.score">{{vo.course.cname}} : {{vo.grade}}分</li>
</ul>
</td>
<td>{{item.classes}}</td>
<td>
<button v-on:click="del(item.sid,index)">删除</button>
<button v-on:click="update(item.sid)">修改</button>
</td>
</tr>
</table>
完成之后在，浏览器中观察
