-
[react] 스프링부트 프로젝트 연동하기2: 글쓰기react+vue 2022. 10. 13. 16:06
java
- Conroller
@CrossOrigin @RequestMapping(value = "/book",method = RequestMethod.POST) public ResponseEntity<?> book(@RequestBody Book book){ return new ResponseEntity<>(bookService.saveBook(book),HttpStatus.CREATED); }
react
- view
import React, { useState } from 'react'; import { Form,Button } from "react-bootstrap"; import { useNavigate } from 'react-router-dom'; const SaveForm = () => { const navigate = useNavigate(); const [book, setBook] = useState({ title: "", author:"" }); const changeValue = (e) => { setBook({ ...book, [e.target.name]: e.target.value }); }; const submitBook = (e) => { e.preventDefault(); fetch("<http://localhost:3333/book>", { method: "post", headers: { "Content-Type":"application/json;charset=utf-8" }, body: JSON.stringify(book), }).then(res => { if (res.status == 201) { return res.json(); } else { return null; } }).then(res => { if (res != null) { alert("저장 완료"); navigate("/"); } else { alert("저장 실패"); } }); }; return ( <div> <Form onSubmit={submitBook}> <Form.Group className="mb-3" controlId="formBasicEmail"> <Form.Label>Title</Form.Label> <Form.Control type="text" placeholder="Enter Title" name ="title"onChange={changeValue} /> </Form.Group> <Form.Group className="mb-3" controlId="formBasicPassword"> <Form.Label>Author</Form.Label> <Form.Control type="text" name="author"placeholder="Enter Author"onChange={changeValue} /> </Form.Group> <Button variant="primary" type="submit"> Submit </Button> </Form> </div> ); }; export default SaveForm;
'react+vue' 카테고리의 다른 글
[vue]뷰 개발환경 준비 (0) 2022.11.09 [react]Use PascalCase for React components, or lowercase for HTML elements. (0) 2022.10.27 [react] 스프링부트 프로젝트 연동 (0) 2022.10.13 [react] Redux (0) 2022.10.11 [react] Flux (0) 2022.10.11