라트노팜 차크라바티 는 현재 에릭슨에서 근무하는 소프트웨어 개발자입니다. 그는 오랫동안 IoT, 기계 간 기술, 커넥티드 카, 스마트 시티 분야에 집중해 왔습니다. 그는 새로운 기술을 배우고 이를 실무에 적용하는 것을 좋아합니다. 일하지 않을 때는 3살 난 아들과 함께 시간을 보내는 것을 즐깁니다.
In 이 블로그 시리즈의 1부에서 이미지 메타데이터를 Couchbase 버킷에 저장하고 검색하는 방법을 살펴봤습니다. 이 글(2부)에서는 앱의 '좋아요' 및 태그명별 표시 기능에 대해 살펴보겠습니다.
여기서 아이디어는 클라이언트 측에서 서버 측에서 실행되는 route.js와 같은 노드 컴포넌트와 상호 작용하는 HTML 및 jQuery를 사용하는 것입니다. 예를 들어, 다음 jQuery 스니펫은 클라이언트 측에 위치하며 "URL"에 대한 Ajax 호출을 수행합니다. 경로 를 서버 측의 route.js 내부에 추가합니다.
그리고 같은 는 클릭 시 노드 앱에서 새 경로가 호출되는 앵커 요소입니다. 다음은 스니펫입니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$(문서).on('클릭', '.like', 함수(e){ 콘솔.로그('좋아요 클릭'); var 그 = $(이); var URL = 호스트 + '/좋아요/' + 그.데이터('photoid'); ajax({ URL: URL, 성공:함수(데이터){ var parseData = JSON.parse(데이터.응답); 그.찾기('h4').html(parseData.좋아요); } }) }) |
URL은 '/좋아요/'와 이미지의 아이디를 추가하여 구성됩니다. 호스트 변수를 설정합니다. Ajax 호출이 성공적으로 완료되면 해당 성공 콜백이 서버 측(routes.js) 엔드포인트에서 전송된 JSON 응답을 구문 분석합니다.
이에 해당하는 경로(routes.js)는 아래와 같습니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
라우터.get('/좋아요/:아이디', 함수(req, res, 다음){ 이미지 모델.getByDocumentId(req.매개변수.id, 함수(err, 결과){ var jsonFromDB = JSON.문자열화(결과); var docFromDBArr = JSON.parse(jsonFromDB); var docFromDB = docFromDBArr[0]; var 좋아요 = docFromDB.좋아요; // 좋아요를 1씩 증가시킵니다. 좋아요 = 좋아요 + 1; docFromDB.좋아요 = 좋아요; 이미지 모델.저장(docFromDB, 함수(오류, 결과) { 만약(오류) { 반환 res.상태(400).보내기(오류); } res.상태(200).보내기({좋아요:docFromDB.좋아요}); }) }) }) |
위의 경로는 클라이언트 측 jQuery에서 호출을 처리하고 200의 HTTP 응답과 JSON 응답 본문도 전송합니다.
이 경로는 getByDocumentId 함수를 호출할 수 있습니다. 아래 그림과 같이 이 함수는 인자로 전달된 문서 ID를 기반으로 Couchbase 버킷에서 문서를 검색합니다. 문서가 성공적으로 검색되면 결과를 구문 분석하고 "좋아요" 는 1씩 증가합니다. 업데이트된 문서는 save() 함수를 호출하여 저장됩니다.
getByDocumentId 함수(recordmodel.js 파일에 정의됨):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/* * 매개변수화된 N1QL 쿼리를 사용하여 Couchbase Server에서 특정 문서 가져오기 */ 이미지 모델.getByDocumentId = 함수(documentId, 콜백) { var 문 = "SELECT META(photos).id, 파일명, 좋아요, 태그" + "FROM `" + 구성.카우치베이스.버킷 + "` AS 사진 " + "WHERE META(photos).id = $1"; var 쿼리 = N1qlQuery.fromString(문); db.쿼리(쿼리, [documentId], 함수(오류, 결과) { 만약(오류) { 반환 콜백(오류, null); } 콜백(null, 결과); }); }; |
태그명으로 이미지 표시
특정 태그별로 이미지를 나열하려면 다음 작업을 수행해야 합니다:
- 앵커를 클릭할 때 태그명을 전달합니다.
- 태그명을 사용하여 이미지 필터링하기
태그 이름은 다음과 같은 간단한 jQ쿼리로 전달됩니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(문서).on('클릭', '.showTag', 함수(e){ var 그 = $(이); var tagURL = 호스트 + '/get이미지/' + 그.데이터('tagname'); ajax({ URL: tagURL, 성공:함수(데이터){ var 이미지 목록 = JSON.parse(데이터.응답); 렌더링 이미지 태그 (이미지 목록); } }) }) |
그리고 해당 경로:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
라우터.get('/get이미지/:타그네임', 함수(req, res, 다음){ 콘솔.로그('인사이드 게티이미지 바이 타그네임'); 이미지 모델.getImagesByTag(req.매개변수.타그네임, 함수(err, 결과){ var jsonFromDB = JSON.문자열화(결과); res.보내기(JSON.문자열화(결과)); }) }) |
그리고 getImagesByTag 함수는 아래에 설명되어 있습니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
이미지 모델.getImagesByTag = 함수(태그 이름, 콜백) { var 문 = "SELECT META(photos).id, 파일명, 좋아요, 태그" + "FROM `" + 구성.카우치베이스.버킷 + "` 사진으로 $1 IN 태그"; var 쿼리 = N1qlQuery.fromString(문); db.쿼리(쿼리, [태그 이름], 함수(오류, 결과) { 만약(오류) { 반환 콜백(오류, null); } 콜백(null, 결과); }); }; |
N1QL을 사용하여 다음 쿼리를 실행하기만 하면 됩니다:
사진갤러리에서 이 태그에 있는 파일명, 좋아요를 선택합니다;
이렇게 하면 태그가 문자열 배열인 태그명을 기준으로 필터링할 수 있습니다.
따라서 동일한 태그가 있는 이미지가 두 개 있는 경우 위의 쿼리는 두 이미지를 모두 반환해야 합니다.
여기서 두 문서 모두 공통 태그가 "블러썸." 이제 Couchbase 쿼리 워크벤치를 사용하여 쿼리를 실행하면 다음과 같은 결과를 얻을 수 있습니다:
예상대로 두 개의 레코드가 반환되는 것을 볼 수 있습니다. 이것은 사실상 getImagesByTag () 함수입니다.
문제 해결
npm 설치 중에 다음과 같은 오류가 발생하면,
Python 실행 파일 "python"을 찾을 수 없는 경우 PYTHON 환경 변수를 설정할 수 있습니다.
를 클릭한 다음 다음을 수행하여 오류를 제거합니다:
파이썬 설치
경로에 파이썬 추가
이렇게 하면 오류가 해결됩니다... 적어도 저에게는 해결되었습니다.
이 게시물은 카우치베이스 커뮤니티 글쓰기 프로그램의 일부입니다.
