"잠깐만, 뭐?!"

네, 트위터에서 읽었을 때도 제 반응이었어요.
본고에서, 나는 당신에게 AlaSQL이 무엇인지 설명하고 그것이 예상대로 작동하는지 테스트할 것입니다.

AlaQSL이란 무엇입니까?

AlaSQL은 경량 클라이언트 메모리 SQL 데이터베이스입니다.JOIN, GROUP, UNION, in, ALL 및 기타 작업을 지원하는 순수한 Javascript로 작성되었습니다.
얘가 빨라요?당연히 그렇죠!Javascript의 동적 특성과
최적화 방법을 사용하다.저자에 따르면

쿼리는 컴파일 함수 캐시로 사용됩니다.

연결된 표는 사전 인덱스입니다.

WHERE 표현식 연결에 대한 사전 필터링

그것은 대부분의 웹 브라우저에서 유효합니까?물론모든 현대 버전의 크롬, 모질라, 사파리, 심지어 IE에 적용됩니다. 노드에서 사용할 수 있습니다.js도요.
NoSQL 데이터베이스를 지원합니까?맞다JSON 테이블을 만들고 JSON 객체를 사용할 수 있습니다.
자세한 내용은 AlaSQL github 저장소에서 확인할 수 있습니다.

아그순 / 알래스카 QL

알래스카 QL.js- 브라우저 및 노드의 JavaScript SQL 데이터베이스입니다.js。기존 관계식 테이블과 중첩된 JSON 데이터(NosQL)를 처리합니다.localStorage, IndexedDB 또는 Excel에서 데이터를 내보내고 저장하고 가져옵니다.

AlaSQL은 오픈 소스 프로젝트로 매달 200여만 번의 페이지 조회에 사용됩니다. 저희에게 기여해 주신 모든 것에 감사드립니다.Please help out .
문제가 있습니까?"alasql"태그를 사용하여 문의Stack Overflow.

알래스카 QL

AlaSQL-(à laSQL)[æl ɛskju: ɛl]-는 자바스크립트를 위한 소스 오픈 SQL 데이터베이스로 관계 데이터와 무모드 데이터의 조회 속도와 데이터 소스 유연성에 중점을 두고 있다.웹 브라우저 노드에서 작동합니다.js와 모바일 응용 프로그램.
라이브러리 설계:

fat 클라이언트의 BI 및 ERP 응용 프로그램에 대한 빠른 메모리 SQL 데이터 처리

몇 가지 형식의 데이터 가져오기/조작/내보내기를 통해 ETL 및 지속성 옵션

모든 주요 브라우저, 노드.js 및 모바일 어플리케이션

쿼리를 구축할 때 JavaScript의 동적 특성을 활용하여 speed 에 주목합니다.현실 세계의 해결 방안은...
View on GitHub

설치

NPM 사용:npm install --save alasqlCDN 사용:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

그뿐이야.간단하죠?

활용단어참조

먼저 alasql 코드를 가져옵니다.

// CommonJS style
var alasql = require('alasql');

// ES6 style
import * as alasql from 'alasql';

// Global variable style
window.alasql

그런 다음 SQL 작성을 시작합니다.

alasql("CREATE TABLE test (language INT, hello STRING)");
alasql("INSERT INTO test VALUES (1, 'Hello!')");
alasql("INSERT INTO test VALUES (2, 'Aloha!')");
alasql("INSERT INTO test VALUES (3, 'Bonjour!')");

const results = alasql("SELECT * FROM test WHERE language > 1");
console.log(results);

// Output:
// [{ "language":2, "hello":"Aloha!" },{ "language":3,"hello":"Bonjour!" }]

질의를 한 그룹의 객체에서 실행할 수도 있습니다.

const data = [{ id: 1, amount: 10 }, { id: 2, amount: 20 }, { id: 1, amount: 30 }];
const results = alasql('SELECT id, SUM(amount) AS total FROM ? GROUP BY id', [data]);
console.log(results);

// Output:
// [{"id":1,"total":40},{"id":2,"total":20}]

너무 좋아요, 그렇죠?

인스턴스

npx create-react-app 도구를 사용하여 새 React 응용 프로그램을 만들고 기본적인 업무 목록 응용 프로그램을 실현합니다.

import React from 'react';

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = { todo: [] };
  }

  addTodo() {
    const { todo } = this.state;
    const { inputTodo } = this.refs;

    todo.push(inputTodo.value);
    inputTodo.value = "";
    this.setState({ todo });
  }

  removeTodo(index) {
    const { todo } = this.state;

    todo.splice(index, 1);
    this.setState({ todo });
  }

  render() {
    const { todo } = this.state;

    return (
      <main className="container">
        <h1 className="mt-4">TODO List</h1>
        <div className="row mt-4">
          <form className="form-inline">
            <div className="form-group mx-sm-3 mb-2">
              <label for="inputTodo" className="sr-only">Todo</label>
              <input type="text" ref="inputTodo" className="form-control" id="inputTodo" placeholder="Todo"/>
            </div>
            <button type="button" className="btn btn-primary mb-2" onClick={ e => this.addTodo() }>Add</button>
          </form>
        </div>

        <div className="row">
          <table className="table table-bordered">
            <thead>
              <tr>
                <th>TODO</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {
              !todo.length &&
              <tr>
                <td colspan="2" className="text-center">
                  No data available
                </td>
              </tr>
              }
              {
              todo.length > 0 && todo.map((x,i) => (
              <tr>
                <td>{ x }</td>
                <td>
                  <button className="btn btn-danger" onClick={ e => this.removeTodo(i) }>
                    x
                  </button>
                </td>
              </tr>
              ))
              }
            </tbody>
          </table>
        </div>
      </main>
      );
  }
}

export default App;

결과:

그것은 마치 부적과 같지만, 만약 내가 페이지를 다시 불러온다면, 나는 모든 업무 목록을 잃어버릴 것이다.
AlaSQL을 사용하여 이러한 업무 수행을 지속시킵니다.
먼저 AlaSQL을 가져오고 componentWillMount 갈고리를 사용하여 테이블을 만듭니다.

import React from 'react';
import * as alasql from 'alasql';

class App extends React.Component {

  // Constructor ...

  componentWillMount() {
    alasql('CREATE TABLE todo (id INT AUTOINCREMENT PRIMARY KEY, text STRING)');
  }

  // Lines of code ...
}

export default App;

AlaSQL은 어셈블리를 로드할 때마다 테이블을 생성합니다.
이제 우리는 데이터베이스에서 모든 TODO를 가져오는 방법, 새로운 TODO를 삽입하는 방법, 그것들을 삭제하는 방법을 실현해야 한다.

import React from 'react';
import * as alasql from 'alasql';

class App extends React.Component {

  // Lines of code ...

  fetchTodos() {
    const result = alasql('SELECT * FROM todo');
    this.setState({ todo: result });
  }

  insertTodo(text) {
    alasql('INSERT INTO todo VALUES ?',
      [{ id: alasql.autoval('todo', 'id', true), text }]);
  }

  deleteTodo(id) {
    alasql('DELETE FROM todo WHERE id = ?', id);
  }

  // Lines of code ...
}

export default App;

보시다시피 전통적인 SQL SELECT, INSERT, DELETE를 사용하여 이 작업을 완성하십시오.alasql.autoval 테이블 ID가 자동으로 증가하므로 삽입할 다음 ID를 가져옵니다.
다음은 addTodo 및 removeTodo 방법을 재구성하고 componentDidMount 갈고리를 추가하여 데이터베이스에서 TODO를 추출합니다.

import React from 'react';
import * as alasql from 'alasql';

class App extends React.Component {

  // Lines of code...

  componentDidMount() {
    this.fetchTodos();
  }

  addTodo() {
    const { inputTodo } = this.refs;

    if (!inputTodo.value) return;

    this.insertTodo(inputTodo.value);
    this.fetchTodos();
    inputTodo.value = "";
  }

  removeTodo(id) {
    this.deleteTodo(id);
    this.fetchTodos();
  }

  // Lines of code ...
}

export default App;

마지막으로 Render 방법을 업데이트하고 새 ID 열을 추가하고 텍스트가 아닌 TODO 객체를 사용합니다.

import React from 'react';
import * as alasql from 'alasql';

class App extends React.Component {

  // Lines of code ...

  render() {
    const { todo } = this.state;

    return (
      <main className="container">
        <h1 className="mt-4">TODO List</h1>
        <div className="row mt-4">
          <form className="form-inline">
            <div className="form-group mx-sm-3 mb-2">
              <label for="inputTodo" className="sr-only">Todo</label>
              <input type="text" ref="inputTodo" className="form-control" id="inputTodo" placeholder="Todo"/>
            </div>
            <button type="button" className="btn btn-primary mb-2" onClick={ e => this.addTodo() }>Add</button>
          </form>
        </div>

        <div className="row">
          <table className="table table-bordered">
            <thead>
              <tr>
                <th>ID</th>
                <th>TODO</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {
              !todo.length &&
              <tr>
                <td colspan="3" className="text-center">
                  No data available
                </td>
              </tr>
              }
              {
              todo.length > 0 && todo.map(x => (
              <tr>
                <td>{ x.id }</td>
                <td>{ x.text }</td>
                <td>
                  <button className="btn btn-danger" onClick={ e => this.removeTodo(x.id) }>
                    x
                  </button>
                </td>
              </tr>
              ))
              }
            </tbody>
          </table>
        </div>
      </main>
      );
  }
}

export default App;

AlaSQL 사용 결과:

빌어먹을, 만약 내가 다시 페이지를 불러온다면, 나는 다시 모든 업무 사항을 잃어버릴 것이다...왜?

사실상, 우리가 사용하는 것은 AlaSQL이다. 실제로 우리는 표에 데이터를 삽입하지만, 우리는 아직 데이터베이스를 만들어서 데이터를 지속시키지 않았다.
따라서 갈고리를 수정하고 componentWillMount라는 새 데이터베이스를 만듭니다.
이 경우 로컬 저장소는 데이터베이스 엔진으로 사용됩니다.

componentWillMount() {
    alasql(`
      CREATE LOCALSTORAGE DATABASE IF NOT EXISTS todo_db;
      ATTACH LOCALSTORAGE DATABASE todo_db;
      USE todo_db;
    `);
    alasql('CREATE TABLE IF NOT EXISTS todo (id INT AUTOINCREMENT PRIMARY KEY, text STRING)');
}

구성 요소를 로드할 때마다 데이터베이스가 없으면 AlaSQL이 생성됩니다.
다음은 최종 결과입니다.

그것은 예상대로 일한다👌.
읽어주셔서 감사합니다!다음 저장소에서 이 문서의 소스 코드를 찾을 수 있습니다.

조그라몬 / alasqlreact 예시

AlaSQL을 React와 함께 사용하는 방법 예

이 항목은 Create React App 에서 안내합니다.

사용 가능한 스크립트

프로젝트 디렉토리에서 다음을 실행할 수 있습니다.

todo_데이터베이스

개발 모드로 응용 프로그램을 실행하다.
브라우저에서 보기http://localhost:3000를 엽니다.
편집할 경우 페이지가 다시 로드됩니다.
컨트롤러에서 lint 오류를 볼 수 있습니다.

npm 시작

대화식 보기 모드에서 테스트 실행 프로그램을 시작합니다.
자세한 내용은 running tests 섹션을 참조하십시오.

npm 테스트

프로덕션에 사용되는 응용 프로그램을 npm run build 폴더로 생성합니다.
그것은 생산 모델에서 정확하게 반응하고 구축을 최적화하여 최상의 성능을 얻는다.
구축이 축소되었습니다. 파일 이름은 해시를 포함합니다.
당신의 응용 프로그램은 이미 배치할 준비가 되어 있습니다!
자세한 내용은 deployment 섹션을 참조하십시오.

건축하다

주의: 이것은 단방향 조작입니다.일단 너npm run eject, 너는 돌아갈 수 없어!
구축 도구가 마음에 들지 않으면...
View on GitHub