※ 이 포스팅은 내용이 추가될 수 있음.
-------------------
조건
server.js와 index.html은 같은 계층에 있음
-------------------
7번까지 하고 오기
https://peamexx.tistory.com/92
👾한번 해봄 시리즈👾 REST API 혹은 mongoDB 활용전 기본과정
👾한번 해봄 시리즈👾 =할건 따로있는데 한번 손대고싶어서 일단 찍어먹어보는 시리즈 ------------------------------ 1. npm init 입력 2. npm i express mongoose 입력 express는 노드js 쉽게 쓸 수 있는..
peamexx.tistory.com
그리고 DB에 데이터넣기까지 해서 스키마 만들어놓기
https://peamexx.tistory.com/93
👾한번 해봄 시리즈👾 mongoDB를 배워보자
👾한번 해봄 시리즈👾 =할건 따로있는데 한번 손대고싶어서 일단 찍어먹어보는 시리즈 ------------------------------ 기본 셋팅 및 활용법은 여기서 https://peamexx.tistory.com/92 -----------------------..
peamexx.tistory.com
-------------------
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="/add" method="POST"> <!--method안쓰면 에러날 수 있음-->
<input type="text" name="id">
<button type="submit">click</button>
</form>
</body>
</html>이렇게 써주고
server.js
require('dotenv').config();
const express = require('express');
const app = express();
const mongoose = require('mongoose');
const userSchema = require('./schemas/userSchema');
app.use(express.urlencoded({extended: true})); // 이부분
mongoose.connect(process.env.URL, { useNewUrlParser: true, useUnifiedTopology: true }, async (err) => {
if(err) console.log(err);
else console.log('db에 연결되었습니다');
app.post('/add', (req, res) => { // 이부분
let post1 = {
id: req.body.id,
};
new userSchema(post1).save();
res.redirect('/');
});
})
app.get('/', (req, res) => res.sendFile(__dirname + '/index.html'));
app.listen(3000, () => console.log('start'))👉 express.urlencoded
body-parser라는 express 내 미들웨어 기능(별도로 npm 설치 안해줘도 된다).
이 패키지를 이용하면 본문을 해석하여 req.body에 본문을 추가해 줌(원하는 형태로 데이터를 파싱해준다).
옵션이 false면 내장된 querystring모듈을 사용하고,
true면 설치가 필요한 qs 모듈을 사용하여 쿼리 스트링을 해석한다고 함.
공부 필요.
👉 app.post~
index.html에서 내용 입력 후 button을 누르면 데이터가 DB에 쌓이게 할 것이기 때문에
app.post로 입력함.
👉 id: req.body.id
앞에 id: 부분은 스키마 부분의 key를 말하는 것이고,
body-parser를 사용했기때문에 데이터를 req.body라고 받은 후
실제로 입력할 input의 name으로 id를 입력했기때문에 뒤에 req.body.id라고 써줘야지
해당 input에 쓴 내용을 DB에 id값으로 넣어줌.
👉 res.redirect('/')
데이터 전송 후 무한루프에 걸리는데 이를 방지해줌.
이렇게 해주고 저장한 뒤, 데이터를 쓰고 버튼을 누르면 DB에 저장된다.
'나머지_개발' 카테고리의 다른 글
| 🎨 bootstrap offcanvas 사용 팁 (0) | 2021.09.13 |
|---|---|
| 스마트폰에서 local로 작업하는 vscode 화면 보기 (0) | 2021.09.08 |
| ❌🤔디버깅 멘트 만나본거, 뭐가 안될때 (0) | 2020.11.09 |
| 일하면서 만났던 문제들 정리 (0) | 2020.05.20 |
| 트렐로를 써봤다 (0) | 2020.05.20 |