TaffyDB – 브라우저용 JavaScript 데이터베이스
- PHPz앞으로
- 2023-08-25 13:45:181188검색
TaffyDB는 브라우저와 서버 측 애플리케이션에서 사용할 수 있는 가볍고 강력한 인 메모리 데이터베이스입니다. 오픈 소스이며 무료로 사용할 수 있습니다. 이 튜토리얼에서는 TaffyDB를 사용하여 일부 데이터를 저장하고, 데이터에 대해 일부 쿼리를 수행하고, 데이터에 대한 중요한 작업을 수행하는 방법을 몇 가지 예를 통해 보여줍니다.
간단한 예부터 시작해 보겠습니다
일부 데이터를 생성한 다음 해당 데이터를 브라우저에서 인쇄해 보는 아주 기본적인 예부터 시작해 보겠습니다.
우리의 첫 번째 단계는 TaffyDB를 갖는 것입니다. 이를 위해 우리에게는 다른 옵션이 있습니다. 가장 기본적인 방법은 "taffydb.js" 파일의 축소된 버전이 포함된 URL을 사용하는 것입니다.
"taffydb.js"의 코드는 이 링크에서 찾을 수 있습니다. 이 링크를 연 다음 코드를 복사하여 "taffy.js"라는 파일에 붙여넣는 것이 좋습니다. 그렇지 않으면 다음을 수행할 수 있습니다. 그냥 CDN을 사용하세요.
이제 종속성이 처리되었으므로 <script> 태그 내에 핵심 로직을 작성하는 "index.html" 파일에 집중하겠습니다. 아래 표시된 HTML 코드를 고려해보세요. </script>
예
index.html
으아악위 코드를 브라우저에서 실행하면 다음과 같은 출력이 표시됩니다.
위 코드에서는 먼저 "taffy.js" 파일을 가져온 다음 &ly;head> 태그 자체 내에 <script> 태그를 만들었습니다. <script> 태그 내에서 서로 다른 속성을 가진 여러 개체가 있는 개체 배열을 만드는 TAFFY 개체를 만듭니다. </script>
그런 다음 countries 변수의 값을 반복하고 각 변수에 대해 "name" 속성 값을 "countriesName"이라는 배열에 넣습니다.
위 코드를 브라우저에서 실행하면 다음과 같은 출력이 표시됩니다.
TaffyDB를 사용하여 레코드 삽입
위의 예에서는 객체 배열을 생성하여 TIFFY 메서드에 전달했습니다. 이제 데이터에 새 개체를 삽입하는 데 집중하겠습니다. insert() 메서드를 사용하여 이 작업을 수행할 수 있습니다. insert() 메서드에서는 선택에 따라 동일한 속성 또는 다른 속성을 전달할 수 있습니다.
아래에 표시된 코드 조각을 고려하여 다음과 같이 사용할 수 있습니다. TaffyDB의 Country 변수.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaffyDB</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
<script>
let countries = TAFFY([{
name: "India",
state: "Uttar Pradesh",
capital: "New Delhi",
}, {
name: "USA",
state: "California",
capital: "Washington DC",
}, {
name: "Germany",
state: "Berlin",
capital: "Berlin",
}]);
let countriesNames = [];
countries().each(function(r) {
countriesNames.push(r.name);
});
document.write(countriesNames);
</script>
</head>
<body>
</body>
</html>
예
index.html
업데이트된 index.html코드는 아래와 같습니다.
으아악위 코드를 브라우저에서 실행하면 다음과 같은 출력이 표시됩니다. -
TaffyDB를 사용하여 쿼리 실행
위 예시에서 쿼리를 실행했지만, 수도와 주가 동일한 값을 갖는 국가의 이름을 데이터에 저장하려는 간단한 쿼리를 다시 실행해 보겠습니다.
예
index.html
아래 표시된 index.html 코드를 고려하세요.
으아악위 HTML 코드에서는 each() 메서드를 사용하여 countries 변수의 모든 값을 반복한 다음 속성 값 "capital"과 "declare"를 비교합니다. 그런 다음 일치하는 항목이 있으면 값을 배열에 넣고 마지막으로 콘솔에 배열을 인쇄합니다.
위의 HTML 파일을 브라우저에서 실행하면 다음과 같은 결과가 나타납니다. 단말기.
이제 또 다른 쿼리를 수행해 보겠습니다. 이번에는 가장 작은 국가의 이름을 사전순으로 인쇄하려고 합니다. 위 예의 데이터에서는 '브라질'이 됩니다. 아래 표시된 HTML 코드를 고려해보세요.
예
index.html
아래 표시된 index.html 코드를 고려하세요.
으아악위 코드에서 countries().order("name").first().name 코드가 포함된 줄은 명명된 link을 사용하여 여러 메서드를 연결하는 곳입니다. 먼저 name 속성을 기준으로 데이터를 정렬한 다음 정렬된 데이터에서 첫 번째 요소를 선택하고 마지막으로 해당 요소에서 name 속성을 추출합니다.
위 HTML 파일을 브라우저에서 실행하면, 단말기.
TaffyDB를 사용하여 데이터 업데이트
update() 메소드를 사용하여 TaffyDB의 데이터를 업데이트할 수 있습니다. 이 방법에서는 객체에 존재하지 않는 속성을 전달하면 해당 속성이 추가되고, 존재하면 업데이트됩니다.
"India"라는 개체에 필드를 추가하고 financialCapital: "Mumbai"이라는 새 속성을 추가한다고 가정해 보겠습니다. 아래 표시된 HTML 코드를 고려해보세요.
예
index.html
아래 표시된 index.html 코드를 고려하세요.
으아악추가한 데이터가 데이터베이스에 추가되었는지 확인하기 위해 객체를 반복한 다음 간단한 "if-else" 조건을 사용하여 값을 인쇄합니다.
如果您在浏览器中运行上述 HTML 文件，您将在 终端。
使用“!”运算符
通过使用“!”运算符，您可以在 TaffyDB 中编写复杂的查询。考虑下面显示的 index.html 代码，其中我尝试使用“！”来打印除印度之外的所有具有该名称的国家/地区。运算符。
示例
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaffyDB</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
<script>
let countries = TAFFY([{
name: "India",
state: "Uttar Pradesh",
capital: "New Delhi",
}, {
name: "USA",
state: "California",
capital: "Washington DC",
}, {
name: "Germany",
state: "Berlin",
capital: "Berlin",
}]);
countries.insert({
name: "Brazil",
state: "State of São Paulo",
capital: "Brasília",
});
countries({
name: {
"!is": "India"
}
}).each(function(r) {
document.write(r.name + "<br>");
})
</script>
</head>
<body>
</body>
</html>
如果您在浏览器中运行上述 HTML 文件，您将在 终端。
结论
在本教程中，我们使用多个示例来演示如何在 TaffyDB 中执行 CRUD 操作。
위 내용은 TaffyDB – 브라우저용 JavaScript 데이터베이스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!