API 서버 - 메뉴 CRUD 추가
express - Router
메뉴의 CRUD 를 만들기 전에 먼저 express - Router
를 API 서버에 추가하자.
개발 편의를 위해 router 디렉토리 내에 Router
관련 파일들을 모았다.
-
router/xxx.js
- 기능 혹은 데이터 별로 js 파일을 만들고
Router
관련 코드를 구현
import { Router } from 'express'; const router = Router(); ......
- 기능 혹은 데이터 별로 js 파일을 만들고
-
router/router.js
- url 과 그에 따른 동작을 연결 - 사실상 url 을 정의하는 곳이라 보면 됨
import menuRouter from './menu.js'; export const initRouter = app => { app.use('/menu', menuRouter); };
-
index.html
Router
를express - app
에 등록
import { initRouter } from './router/router.js'; initRouter(app);
이제 API 를 추가하려면 router
디렉토리 내에 js 파일을 생성하고 구현하면 된다. (물론 router/router.js
파일도 수정해야겠지)
이제 router/menu.js
파일을 생성하고 메뉴 관련 코드를 구현하자.
url 은 "/menu" 로 하고 GET, POST, PATCH, DELETE 를 추가하자.
참고로 데이터 관련 코드 - mongoose
와 연동하는 코드는 /models/xxx.js
에 추가하고 router/xx.js
에서 호출하는 식으로 구현하자.
GET /menu
전체 메뉴 데이터를 전달하는 API 이며, request body 에 query 가 있으면 query 에 해당하는 메뉴를 전달하고 query 가 없으면 전체 메뉴 데이터를 전달한다. (뭐 당장은 전체 메뉴 데이터만 필요할듯)
해당 API 는 실제 블로그 화면에서 필요할듯...
-
router/menu.js
import { get } from '../models/Menu.js'; // GET /menu router.get("/", async (req, res) => { const data = await get(req.body); res.send({data}); });
-
models/Menu.js
export const get = async query => { let data = null; try { data = await MenuModel.find(query); } catch (e) { console.error(e); } return data; };
데이터를 찾는 mongoose
API 는 https://mongoosejs.com/docs/queries.html 참조!!!
POST /menu
메뉴 데이터를 생성하는 API 이며, 어드민 화면에서만 사용...
-
router/menu.js
import { create } from '../models/Menu.js'; // POST /menu router.post("/", async (req, res) => { const success = await create(req.body); res.send({success}); });
-
models/Menu.js
export const create = async data => { let success = false; // TODO data validate 코드 추가 try { const menu = new MenuModel(data); await menu.save(); success = true; } catch (e) { console.error(e); } return success; };
DELETE /menu
메뉴 데이터를 삭제하는 API, 이것도 어드민 화면에서만 사용....
-
router/menu.js
import { remove } from '../models/Menu.js'; // DELETE /menu router.delete("/", async (req, res) => { const success = await remove(req.body); res.send({success}); });
-
models/Menu.js
export const remove = async query => { let success = false; try { await MenuModel.findOneAndDelete(query); success = true; } catch (e) { console.error(e); } return success; };
PATCH /menu
메뉴 데이터를 수정하는 API, 이것도 어드민 화면에서만 사용....
-
router/menu.js
import { patch } from '../models/Menu.js'; // POST /menu router.post("/", async (req, res) => { const success = await patch(req.body?.query, req.body?.data); res.send({success}); });
-
models/Menu.js
export const patch = async (query, data) => { let success = false; try { await MenuModel.findOneAndUpdate(query, { $set: data }); success = true; } catch (e) { console.error(e); } return success; };
다 구현하고 테스트시 잘 동작하는 것 확인했음 ㅎㅎ
이제 메뉴 어드민 화면을 구현해보자~.
Author And Source
이 문제에 관하여(API 서버 - 메뉴 CRUD 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@crazydj/블로그-직접-만들기-대작전-API-서버-메뉴-CRUD-추가저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)