API 서버 - 메뉴 CRUD 추가

express - Router

메뉴의 CRUD 를 만들기 전에 먼저 express - Router 를 API 서버에 추가하자.

개발 편의를 위해 router 디렉토리 내에 Router 관련 파일들을 모았다.

  • router/xxx.js

    • 기능 혹은 데이터 별로 js 파일을 만들고 Router 관련 코드를 구현
    import { Router } from 'express';
    
    const router = Router();
    
    ......
  • router/router.js

    • url 과 그에 따른 동작을 연결 - 사실상 url 을 정의하는 곳이라 보면 됨
    import menuRouter from './menu.js';
    
    export const initRouter = app => {
        app.use('/menu', menuRouter);
    };
  • index.html

    • Routerexpress - 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;
    };

다 구현하고 테스트시 잘 동작하는 것 확인했음 ㅎㅎ

이제 메뉴 어드민 화면을 구현해보자~.

좋은 웹페이지 즐겨찾기