21.01.05 템플릿에 검색어 구현 연습
2021. 1. 5. 19:03ㆍJAVA/Blog 사이트 프로젝트
<HTML>
<!-- 폰트어썸 불러오기 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<div class="body-content min-height-100vh flex flex-column">
<!-- 로고바 시작 -->
<header class="logo-bar con-min-width">
</header>
<!-- 로고바 끝 -->
<!-- 메뉴바 시작 -->
<header class="menu-bar con-min-width">
</header>
<!-- 메뉴바 끝 -->
<!-- 메인 시작 -->
<main class="flex-grow-1">
<section class="title-bar con-min-width">
</section>
<section id="search-section" class="section-1 con-min-width">
<div class="con">
<div id="article-search">
<form>
<input v-model="searchKeyword" type="text" placeholder="Search">
</form>
</div>
<div class="article-list">
<header>
<div>
<div class="article-list__cell-id">번호</div>
<div class="article-list__cell-reg-date">날짜</div>
<div class="article-list__cell-writer">작성자</div>
<div class="article-list__cell-title">제목</div>
</div>
</header>
<main>
<div v-for="article in filtered">
<div class="article-list__cell-id">{{article.id}}</div>
<div class="article-list__cell-reg-date">{{article.regDate}}</div>
<div class="article-list__cell-writer">{{article.writer}}</div>
<div class="article-list__cell-title">
<a href="'article_'+article.id +'.html'" target="_blank" class="hover-underline">{{article.title}}</a>
</div>
</div>
</main>
</div>
<div class="article-page-menu">
</div>
</div>
</section>
</main>
<!-- 메인 끝 -->
<footer class="bottom-bar con-min-width">
</footer>
</div><CSS>
#article-search{
display:flex;
justify-content:flex-end;
padding:10px;
}<JS>
const articleList = [
{
id:9,
regDate:"2020-12-12 12:12:12",
writer:"홍길동",
title:"테스트 제목1",
body:"테스트 내용 1111111111"
},
{
id:5,
regDate:"2020-12-12 10:12:12",
writer:"홍길순이",
title:"테스트 제목2",
body:"테스트 내용 222222222"
},
{
id:7,
regDate:"2020-12-12 11:12:12",
writer:"아무개",
title:"테스트 제목3",
body:"테스트 내용 3333333333"
},
{
id:2,
regDate:"2020-11-12 11:12:12",
writer:"장영실",
title:"테스트 제목4",
body:"테스트 내용 4444444444"
},
{
id:10,
regDate:"2020-12-10 12:10:12",
writer:"임꺽정",
title:"테스트 제목5",
body:"테스트 내용 55555555"
},
{
id:1,
regDate:"2020-11-12 11:12:12",
writer:"Mike",
title:"test title 6",
body:"test body 66666666"
},
{
id:15,
regDate:"2020-12-10 12:10:12",
writer:"Jackson",
title:"test title 7",
body:"test body 7777777777"
}
];
const articleListBox = new Vue({
el:"#search-section",
data:{
articleList:articleList,
searchKeyword:""
},
computed: {
filterKey:function(){
return this.searchKeyword.toLowerCase();
//가장 먼저 searchKeyword를 소문자화
//즉, filterKey = 소문자화된 searchKeyword
},
filtered:function(){
if ( this.filterKey.length == 0 ) {
return this.articleList;
//만약 filterKey가 없으면 전체 articleList 리턴
}
return this.articleList.filter((row) => {
if(row.title.toLowerCase().indexOf(this.filterKey) > -1){
//articleList의 low 중 title에 filterKey가 일치하는 것이 있으면 true 리턴
return true;
}
});
}
}
});
'JAVA > Blog 사이트 프로젝트' 카테고리의 다른 글
| 21.01.13 상세페이지 markup 입력시 오류 수정 및 private, setter, getter 도입 (0) | 2021.01.13 |
|---|---|
| 21.01.06 ajax 통신 연계 통한 블로그 게시물 검색 페이지 생성(+인덱스 게시판 디자인 개편) (0) | 2021.01.06 |
| 20.12.31 GoogleAnalytics API 도입 테스트(feat.Maven) (0) | 2020.12.31 |
| 20.12.30 Disqus api 적용 - 댓글수, 추천수 동기화 기능 추가( + 이모지 적용)(feat.jackson) (0) | 2020.12.30 |
| 20.12.27 사이트 메타태그 적용(상세페이지 내용 나오게 하기 등) (0) | 2020.12.27 |