반응형
node.js에서 ejs를 사용해 POST로 데이터를 넘기는 방법입니다.
관리자만 사용하기 위해 필요한 페이지를 만들기 위해 node.js에서 ejs를 사용했습니다. ( ex: 공지사항 )
FrontEnd에서 관리자 페이지를 생성 하게되면 어쩌다 url을 입력해 들어가지는 상황이나 잘못하면 누군가에 의해 뚫리는 상황이 올 수도 있습니다. 이럴때 좀 더 안전하게 사용하는 방식을 사용하기 위해 BackEnd에 ejs를 사용하게 되었습니다.
app.js
...
app.use('/api/notice', '/noticeController');
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.get("/notices", (req, res) => {
res.render(__dirname+"/views/view.ejs");
})
...ejs 파일을 렌더링 해주기 위해 사용했습니다. ( ejs를 사용하는 방법은 위 바로가기를 확인해주세요. 여기서는 전부 생략했습니다. )
./views/view.ejs
<form method="post" action="/api/notice/create">
<label for="name">이름: </label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">이메일 :</label>
<input type="email" id="email" name="email" required>
<br>
<input type="submit" value="Submit">
</form>간단하게 이름과 이메일을 보내는 formData형식입니다.
./views/view.ejs
<body>
<div>
<input type="text" id="inputName" onchange="nameChange()" />
<input type="email" id="inputEmail" onchange="emailChange()" />
<button onclick="create()">보내기</button>
</div>
</body>
<script>
let data = {
name: "",
email: ""
}
function nameChange() {
data.name = document.getElementById("inputName").value;
}
function emailChange() {
data.email = document.getElementById("inputEmail").value;
}
function create() {
fetch("/api/notice/create", {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(notice)
})
.then(res => res.json())
.then(data => {
console.log(data);
})
}
</script>fetch를 사용하여 데이터 보내주기
./api/notice/create
const router = plugins.express.Router();
router.post("/create", (req, res) => {
const item = req.body;
console.log(item);
console.log("들어왔는지 확인하기");
res.status(200).json({
code: "y"
})
})
module.exports = router;post형식으로 보냈기때문에 post형식으로 받아주고, req.body를 통해서 값을 받아오면 됩니다.
반응형
'NodeJS > NodeJS' 카테고리의 다른 글
| [ NodeJS ] Multer 사용하기 (0) | 2023.06.20 |
|---|---|
| [ NodeJS ] NodeJS에서 MySQL 다중 쿼리를 처리하는 방법 (0) | 2023.05.30 |
| [ NodeJS ] NodeJS + MySQL 연결하기 (0) | 2023.05.30 |
| [ NodeJS ] Express 정적폴더 내부 파일 불러오기 (0) | 2023.05.30 |
| [ NodeJS | EJS ] EJS 사용하기 ( Feat. json파일 불러오기 ) (0) | 2023.05.24 |
