검색

admin.Menu2.vue

1. 검색창 만들기

<input type="text" v-model="text" @keyup.enter="handleData"/>
<input type="button" @click="handleData" />

• @keyup을 써서 엔터키를 눌러도 동작(handleData호출)하게 만든다.
• 검색 버튼을 클릭했을때도 같은 동작(handleData호출)을 한다.

2. methods

async handleData() {
  const url = "/board/select";
  const headers = {"Content-Type":"application/json"};

  // /board/select?page=1&text=aaa
  const response = await this.axios.get(
    url, 
    // params로 넣으면 주소뒤에 줄줄이 붙는다
    {params  : { page : this.page, text : this.text }},
    {headers : headers}
  );
  // console.log(response.data);
  if(response.data.status === 200){
    console.log('response.data.result =>', response.data.result);
    this.ctnt = response.data.result; 
    this.total = response.data.total; // 총 게시물 수 (페이지네이션에 필요)
  }
},

• {params : { page : this.page, text : this.text }},
  : text : this.text = 검색어
• 검색어까지 백(/board/select)으로 던진다

board.js

• http://localhost:3000/board/select

1. 검색어 받기

• const text = req.query.text;
  : 검색어를 text로 정의

2. 정규표현식

const query = {title : new RegExp(text,'i')};
const result = await coll.find(query)
	.sort({_id:-1})         // 1 : 오름차순 / -1 : 내림차순
    .skip( (page-1) * 10 )  // 건너 뛸 개수
    .limit(10)              // 10개 까지만
    .toArray();             // 배열로 변환

• 정규표현식
  : const query = {title : new RegExp(text,'i')};
  : new RegExp(검색단어, ignore 대소문자무시)
• find의 조건에 정규표현식(query)을 넣는다
• 검색결과의 페이지네이션도 작동하게 만든다
  : const total = await coll.countDocuments(query);

---

정규표현식

• 이메일 정확오류, 전화번호정확검사 등 if문을 사용할 곳에 쓰인다
• if문보다 더 쉽게 사용이 가능하다
• 문법이 엄청 길다
  : 어려움
  : but 검색하면 쓸수있음