TaffyDB – 브라우저용 JavaScript 데이터베이스-JS 튜토리얼-php.cn

TaffyDB – 브라우저용 JavaScript 데이터베이스

PHPz

풀어 주다： 2023-08-25 13:45:18

앞으로

1137명이 탐색했습니다.

TaffyDB – 适用于浏览器的 JavaScript 数据库

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 코드가 포함된 줄은 명명된 < 的技术的行。 b>link을 사용하여 여러 메서드를 연결하는 곳입니다. 먼저 name 속성을 기준으로 데이터를 정렬한 다음 정렬된 데이터에서 첫 번째 요소를 선택하고 마지막으로 해당 요소에서 name 속성을 추출합니다. < /p>

위 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 文件，您将在终端。