[英]How can i use list of collections in another collection using Spring boot, mongodb and React.js?
I'm beguiner with reactjs,spring boot and MongoDB I have a question it's my first question in this platform How can i use list of collections in another collection using Spring boot, mongodb and axios?? 例如我有两个 collections
学生:
ID
名
姓
度 []
和
度数:
ID
笔记
学生
在学生集合中,我有一个学位列表,如何将其放在一个表视图中? 喜欢
名字 | 姓氏 |注
使用 axios
应用截图
我将 react.js 用于前端,Spring 引导后端和 Mongodb 数据库。
代码:
楷模
学生
package com.example.models;
import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.DBRef;
import org.springframework.data.mongodb.core.mapping.Document;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;
import java.util.ArrayList;
import java.util.Collection;
@Document(collection = "students")
@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class Student {
@Id
String id;
String firstname;
String lastname;
@DBRef
private Collection<Degree> degrees =new ArrayList<>();
}
程度
package com.example.models;
import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.DBRef;
import org.springframework.data.mongodb.core.mapping.Document;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;
@Document(collection = "degrees")
public class Degree {
@Id
String id;
String note;
@DBRef
public Student student;
}
存储库
学位库
package com.example.repositories;
import com.example.models.Degree;
import org.springframework.data.mongodb.repository.MongoRepository;
public interface DegreeRepository extends MongoRepository<Degree, String> {
@Override
void delete(Degree deleted);
}
学生资料库
package com.example.repositories;
import com.example.models.Student;
import org.springframework.data.mongodb.repository.MongoRepository;
public interface StudentRepository extends MongoRepository<Student, String> {
@Override
void delete(Student deleted);
}
学生控制器
package com.example.controllers;
import com.example.models.Student;
import com.example.repositories.StudentRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import java.util.Optional;
@RestController
public class StudentController {
@Autowired
StudentRepository studentRepository;
@RequestMapping(method=RequestMethod.GET, value="/students")
public Iterable<Student> student() {
return studentRepository.findAll();
}
@RequestMapping(method=RequestMethod.POST, value="/students")
public Student save(@RequestBody Student student) {
studentRepository.save(student);
return student;
}
@RequestMapping(method=RequestMethod.GET, value="/students/{id}")
public Optional<Student> show(@PathVariable String id) {
return studentRepository.findById(id);
}
@RequestMapping(method=RequestMethod.PUT, value="/students/{id}")
public Student update(@PathVariable String id, @RequestBody Student student) {
Optional<Student> optstudent = studentRepository.findById(id);
Student s = optstudent.get();
if(student.getFirstname() != null)
s.setFirstname(student.getFirstname());
if(student.getLastname() != null)
s.setLastname(student.getLastname());
studentRepository.save(s);
return s;
}
@RequestMapping(method=RequestMethod.DELETE, value="/students/{id}")
public String delete(@PathVariable String id) {
Optional<Student> optstudent = studentRepository.findById(id);
Student student = optstudent.get();
studentRepository.delete(student);
return "";
}
}
成分
创建.js
import React, { Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
class Create extends Component {
constructor() {
super();
this.state = {
firstname: '',
lastname: ''
};
}
onChange = (e) => {
const state = this.state
state[e.target.name] = e.target.value;
this.setState(state);
}
onSubmit = (e) => {
e.preventDefault();
const { firstname, lastname } = this.state;
axios.post('/students', { firstname, lastname })
.then((result) => {
this.props.history.push("/")
});
}
render() {
const { firstname, lastname } = this.state;
return (
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Add Student
</h3>
</div>
<div class="panel-body">
<h4><Link to="/"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Students List</Link></h4>
<form onSubmit={this.onSubmit}>
<div class="form-group">
<label for="isbn">First Name:</label>
<input type="text" class="form-control" name="firstname" value={firstname} onChange={this.onChange} placeholder="First Name" />
</div>
<div class="form-group">
<label for="title">Last Name:</label>
<input type="text" class="form-control" name="lastname" value={lastname} onChange={this.onChange} placeholder="Last Name" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
);
}
}
export default Create;
应用程序.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
class App extends Component {
constructor(props) {
super(props);
this.state = {
students: []
};
}
componentDidMount() {
axios.get('/students')
.then(res => {
this.setState({ students: res.data });
console.log(this.state.students);
});
}
render() {
return (
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Students List
</h3>
</div>
<div class="panel-body">
<h4><Link to="/create"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add Student</Link></h4>
<table class="table table-stripe">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Note</th>
</tr>
</thead>
<tbody>
{this.state.students.map(c =>
<tr>
<td><Link to={`/show/${c.id}`}>{c.firstname}</Link></td>
<td>{c.lastname}</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import App from './App';
import './App.css';
import Create from './components/Create';
ReactDOM.render(
<Router>
<div>
<Route exact path='/' component={App} />
<Route path='/create' component={Create} />
</div>
</Router>,
document.getElementById('root')
);
我没有研究过 React,所以我对语法不太确定。 但是你可以试试下面的代码。
{this.state.students.map(c =>
<tr>
<td><Link to={`/show/${c.id}`}>{c.firstname}</Link></td>
<td>{c.lastname}</td>
<td>{c.map(d => <p>{d.note}</p>)</td>
</tr>
)}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.