라트노팜 차크라바티 는 현재 에릭슨에서 근무하는 소프트웨어 개발자입니다. 그는 오랫동안 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 |
$(document).on('click', '.like', function(e){ console.log('Like clicked'); var that = $(this); var URL = host + '/like/' + that.data('photoid'); ajax({ url: URL, success:function(data){ var parseData = JSON.parse(data.response); that.find('h4').html(parseData.likes); } }) }) |
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 |
router.get('/like/:id', function(req, res, next){ ImageModel.getByDocumentId(req.params.id, function(err, result){ var jsonFromDB = JSON.stringify(result); var docFromDBArr = JSON.parse(jsonFromDB); var docFromDB = docFromDBArr[0]; var likes = docFromDB.likes; // increment the like by 1 likes = likes + 1; docFromDB.likes = likes; ImageModel.save(docFromDB, function(error, result) { if(error) { return res.status(400).send(error); } res.status(200).send({likes:docFromDB.likes}); }) }) }) |
위의 경로는 클라이언트 측 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 |
/* * Get a particular document from Couchbase Server using a parameterized N1QL query */ ImageModel.getByDocumentId = function(documentId, callback) { var statement = "SELECT META(photos).id, filename, likes, tags " + "FROM `" + config.couchbase.bucket + "` AS photos " + "WHERE META(photos).id = $1"; var query = N1qlQuery.fromString(statement); db.query(query, [documentId], function(error, result) { if(error) { return callback(error, null); } callback(null, result); }); }; |
태그명으로 이미지 표시
특정 태그별로 이미지를 나열하려면 다음 작업을 수행해야 합니다:
- 앵커를 클릭할 때 태그명을 전달합니다.
- 태그명을 사용하여 이미지 필터링하기
태그 이름은 다음과 같은 간단한 jQ쿼리로 전달됩니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(document).on('click', '.showTag', function(e){ var that = $(this); var tagURL = host + '/getimages/' + that.data('tagname'); ajax({ url: tagURL, success:function(data){ var imageList = JSON.parse(data.response); renderImagesByTag (imageList); } }) }) |
그리고 해당 경로:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
router.get('/getimages/:tagname', function(req, res, next){ console.log('inside getimages by tagname'); ImageModel.getImagesByTag(req.params.tagname, function(err, result){ var jsonFromDB = JSON.stringify(result); res.send(JSON.stringify(result)); }) }) |
그리고 getImagesByTag 함수는 아래에 설명되어 있습니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
ImageModel.getImagesByTag = function(tagName, callback) { var statement = "SELECT META(photos).id, filename, likes, tags " + "FROM `" + config.couchbase.bucket + "` AS photos WHERE $1 IN tags"; var query = N1qlQuery.fromString(statement); db.query(query, [tagName], function(error, result) { if(error) { return callback(error, null); } callback(null, result); }); }; |
N1QL을 사용하여 다음 쿼리를 실행하기만 하면 됩니다:
사진갤러리에서 이 태그에 있는 파일명, 좋아요를 선택합니다;
이렇게 하면 태그가 문자열 배열인 태그명을 기준으로 필터링할 수 있습니다.
따라서 동일한 태그가 있는 이미지가 두 개 있는 경우 위의 쿼리는 두 이미지를 모두 반환해야 합니다.
여기서 두 문서 모두 공통 태그가 "블러썸." 이제 Couchbase 쿼리 워크벤치를 사용하여 쿼리를 실행하면 다음과 같은 결과를 얻을 수 있습니다:
예상대로 두 개의 레코드가 반환되는 것을 볼 수 있습니다. 이것은 사실상 getImagesByTag () 함수입니다.
문제 해결
npm 설치 중에 다음과 같은 오류가 발생하면,
Python 실행 파일 "python"을 찾을 수 없는 경우 PYTHON 환경 변수를 설정할 수 있습니다.
를 클릭한 다음 다음을 수행하여 오류를 제거합니다:
파이썬 설치
경로에 파이썬 추가
이렇게 하면 오류가 해결됩니다... 적어도 저에게는 해결되었습니다.
이 게시물은 카우치베이스 커뮤니티 글쓰기 프로그램의 일부입니다.
