본문 바로가기
코딩/NodeJS

nodejs랑 mongodb로 검색 기능 만들기

뱁새의이중장부 2023. 1. 31. 19:05
반응형

1. 개요

  • DB에서 게시글 검색하는 기능 구현
// DB에서 한개만 찾음
collection().findOne()
// DB에서 몽땅 찾음
collection().find().toArray()
  • DB에서 몽땅 찾을 수 있는 코드 사용

2. 알고리즘

  • list.ejs에서 검색 버튼 누름
  • JS 코드를 이용해 query string을 작성하고, 서버에 보내줌
  • query string은 ‘/search?value=검색어’ 형태임
  • server.js에서는 ‘/search’라는 URL로 GET 요청 처리
  • ‘요청.query.value’는 query string으로 전달받은 데이터를 의미
  • db에서 전달받은 데이터를 collection().find().toArray()로 검색
  • 검색 결과를 ‘searchCon.ejs’파일로 전달해줌

3. 코드

(1) server.js

// 검색 기능
app.get("/search", (요청, 응답) => {
  // querystring의 값이 요청.query.value에 들어있음
  console.log(요청.query.value);
  db.collection("post")
    // db에서 제목값이 요청.query.value인 게시글을 모두 찾아줌
    .find({ 제목: 요청.query.value })
    .toArray((에러, 결과) => {
      console.log(결과)
      응답.render("searchCon.ejs", { posts: 결과 });
    });
});

(2) list.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" href="/public/main.css" />

    <title>Hello, world!</title>
  </head>
  <body>
    <%- include('nav.html') %>

    <h4 class="ml-2 my-3 text-center">서버에서 가져온 할 일 리스트</h4>

    <div class="container input-group mbb-2">
      <input class="form-control" id="search-input" />
      <button class="input-group-append btn btn-danger" id="search">
        검색
      </button>
    </div>

    <div class="container">
      <h1 class="ml-2 my-3 text-center">할 일 리스트</h1>
      <ul class="list-group">
        <% for (var i = 0; i < posts.length ; i++){ %>
        <li class="list-group-item">
          <h4>글 번호 : <%= posts[i]._id %></h4>
          <h4>할 일 제목 : <%= posts[i].제목 %></h4>
          <h4>할 일 마감 날짜 : <%= posts[i].날짜 %></h4>
          <button class="detail btn btn-danger" data-id="<%= posts[i]._id %>">
            상세
          </button>
          <button class="delete btn btn-danger" data-id="<%= posts[i]._id %>">
            삭제
          </button>
        </li>
        <% } %>
      </ul>
    </div>

    <script
      src="https://code.jquery.com/jquery-3.6.3.js"
      integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM="
      crossorigin="anonymous"
    ></script>
    <script>
      // 상세 버튼 누르면 해당 글번호의 상세 페이지로 이동
      $(".detail").click(function (e) {
        var 글번호 = e.target.dataset.id;
        location.href = "/detail/" + 글번호;
      });

      $(".delete").click(function (e) {
        // 내가 누른 요소의 data-id값을 '글번호'라는 변수에 저장
        // e.target은 지금 클릭한 것을 의미
        var 글번호 = e.target.dataset.id;
        // this는 지금 이벤트가 동작하는 곳을 의미
        var 지금누른거 = $(this);

        $.ajax({
          method: "DELETE",
          url: "/delete",
          data: { _id: 글번호 },
        })
          .done(function (결과) {
            // 브라우저 콘솔에 뜸
            console.log("성공했음");
            // 지금 누른 버튼의 부모 태그를 찾아 줌
            // fadeOut으로 해당 태그 사라지게 함
            지금누른거.parent("li").fadeOut();
          })
          .fail(function (xhr, textStatus, errorThrown) {
            console.log(xhr, textStatus, errorThrown);
          });
      });
    </script>
    <script>
      $("#search").click(function () {
        var 입력한값 = $("#search-input").val();
				// 쿼리스트링 만들어줍시다
        window.location.replace("/search?value=" + 입력한값);
      });
    </script>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

(3) searchCon.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" href="/public/main.css" />

    <title>Hello, world!</title>
  </head>
  <body>
    <%- include('nav.html') %>

    <div class="container">
      <h1 class="ml-2 my-3 text-center">검색결과</h1>
      <ul class="list-group">
        <% for (var i = 0; i < posts.length ; i++){ %>
        <li class="list-group-item">
          <h4>글 번호 : <%= posts[i]._id %></h4>
          <h4>할 일 제목 : <%= posts[i].제목 %></h4>
          <h4>할 일 마감 날짜 : <%= posts[i].날짜 %></h4>
          <button
            id="toList"
            class="btn btn-danger"
            data-id="<%= posts[i]._id %>"
          >
            목록으로
          </button>
        </li>
        <% } %>
      </ul>
    </div>

    <script
      src="https://code.jquery.com/jquery-3.6.3.js"
      integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM="
      crossorigin="anonymous"
    ></script>

    <script>
      $("#toList").click(function () {
        window.location.replace("/list");
      });
    </script>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

4. 쿼리 스트링 쉽게 만들기

      $("#search").click(function () {
        var 입력한값 = $("#search-input").val();
				// 쿼리스트링 만들어줍시다
        window.location.replace("/search?value=" + 입력한값);
      });
  • 원래 쿼리 스트링 만들때 위 코드처럼 만들었음
var 자료 = { 이름 : '값', 이름2 : '값2'}
$.param(자료)
  • 요렇게 해도 쿼리 스트링 만들 수 있음
$(폼태그).serialize()
  • 요렇게도 가능
  • form 태그 안의 모든 input태그 내용을 쿼리 스트링으로 남겨줌
반응형
저작자표시 비영리 변경금지

'코딩 > NodeJS' 카테고리의 다른 글

nodejs랑 mongodb에서 검색 기능 최적화하기(2)  (0) 2023.02.02
nodejs랑 mongodb에서 검색 기능 최적화하기(1)  (0) 2023.02.01
nodejs에서 회원가입 기능 구현하기  (0) 2023.01.30
nodejs에서 mypage 구현하기  (0) 2023.01.29
nodejs에서 Session-based 회원가입 구현하기  (0) 2023.01.28

'코딩/NodeJS' Related Articles

티스토리툴바