harperdbは、データを格納するために使用できるスケーラブルなSQLとNOSQLデータベースです.
我々は、結合のようなより複雑なものを含む質問をすることができます.
そのAPIの汎用性とレポートやデータ解析を作成するのに便利です.
これは、直接クエリの代わりにHTTPリクエストを介してデータベースを制御することができます.
この記事では、HarperDB、Express、およびVueとシンプルなWebアプリケーションを作成する方法を見ていきます.

始める

最初にPostman HTTPクライアントをインストールします.
それから、我々は郵便配達人収集をダウンロードしますhttps://examples.harperdb.io/?version=latest .
それはどのような機能が利用可能であり、それらを使用するコマンドを発行する方法を見ることができます.
次に、ノード12.16.1をインストールしてharperdbをインストールします.
我々がNVMを使うならば、我々は走ることができますnvm install 12.16.1 .
次に、実行してそのバージョンに切り替えます.

nvm use 12.16.1

次にharperdbを実行します.

npm install -g harperdb

実行して実行します.

harperdb run

アプリの作成

次に、ExpressとVueでプロジェクトを作成します.
それは私たちは、作成、更新、および犬に関するデータを削除できるようになるでしょう.
そのためには、プロジェクトフォルダを作成しますbackend and frontend フォルダ.
にbackend フォルダを実行します

npx express-generator

にbackend フォルダ.
それから、我々はcors フロントエンドにAPIを使用するミドルウェアaxios harperdbへの実行について

npm i cors axios

同じフォルダーで.
にfrontend フォルダを実行します

npx vue create .

Vueプロジェクトを作成するには
我々は、デフォルトのオプションを使用します.

バックエンド

今、我々はバックエンドで働くことができます.
harperdbと対話するには、HTTPリクエストを作成します.
名前の変更user.js にroutes フォルダdog.js .
でapp.js , 書き込みます.

var createError = require('http-errors');  
var express = require('express');  
var path = require('path');  
var cookieParser = require('cookie-parser');  
var logger = require('morgan');  
var cors = require('cors')var indexRouter = require('./routes/index');  
var dogsRouter = require('./routes/dogs');var app = express();

// view engine setup  
app.set('views', path.join(__dirname, 'views'));  
app.set('view engine', 'jade');app.use(logger('dev'));  
app.use(express.json());  
app.use(express.urlencoded({ extended: false }));  
app.use(cookieParser());  
app.use(express.static(path.join(__dirname, 'public')));  
app.use(cors())
app.use('/', indexRouter);  
app.use('/dogs', dogsRouter);// catch 404 and forward to error handler  
app.use(function(req, res, next) {  
  next(createError(404));  
});

// error handler  
app.use(function(err, req, res, next) {  
  // set locals, only providing error in development  
  res.locals.message = err.message;  
  res.locals.error = req.app.get('env') === 'development' ? err : {};

// render the error page  
  res.status(err.status || 500);  
  res.render('error');  
});

module.exports = app;

加えるdogs によるルート

var dogsRouter = require('./routes/dogs');

および

app.use('/dogs', dogsRouter);

そして、以下のようにCORSミドルウェアを追加します.

var cors = require('cors')

および

app.use('/dogs', dogsRouter);

次はdog.js , 我々のルートを作成します.
そのために、

var express = require('express');  
var router = express.Router();  
const axios = require('axios');

const HDB_ENDPOINT = 'http://localhost:9925';  
const TOKEN = 'Basic SERCX0FETUlOOnBhc3N3b3Jk';  
const headers = {  
  Authorization: TOKEN,  
  Accept: '*/*',  
  'Accept-Encoding': 'gzip, deflate, br',  
  'Connection': 'keep-alive',  
  'Content-Type': 'application/json'  
}

router.get('/', async (req, res) => {  
  try {  
    const { data } = await axios.post(HDB_ENDPOINT, {  
      "operation": "sql",  
      "sql": `SELECT * FROM dev.dog`  
    }, {  
      headers  
    })  
    res.json(data);  
  } catch (error) {  
    console.log(error)  
  }});

router.get('/:id', async (req, res) => {  
  const { id } = req.params;  
  const { data } = await axios.post(HDB_ENDPOINT, {  
    "operation": "sql",  
    "sql": `SELECT * FROM dev.dog where id = ${id}`  
  }, {  
    headers  
  })  
  res.json(data);  
});

router.post('/', async (req, res) => {  
  const { dog_name, owner_name, age, weight_lbs } = req.body;  
  const { data } = await axios.post(HDB_ENDPOINT, {  
    "operation": "insert",  
    "schema": "dev",  
    "table": "dog",  
    "records": [  
      {  
        dog_name, owner_name, age, weight_lbs  
      }  
    ]  
  }, {  
    headers  
  })  
  res.json(data);  
});

router.put('/:id', async (req, res) => {  
  const { id } = req.params;  
  const { dog_name, owner_name, age, weight_lbs } = req.body;  
  const { data } = await axios.post(HDB_ENDPOINT, {  
    "operation": "update",  
    "schema": "dev",  
    "table": "dog",  
    "records": [  
      {  
        id,  
        dog_name, owner_name, age, weight_lbs  
      }  
    ]  
  }, {  
    headers  
  })  
  res.json(data);  
});

router.delete('/:id', async (req, res) => {  
  try {  
    const { id } = req.params;  
    const { data } = await axios.post(HDB_ENDPOINT, {  
      "operation": "sql",  
      "sql": `DELETE FROM dev.dog WHERE id = '${id}'`  
    }, {  
      headers  
    })  
    res.json(data);  
  } catch (error) {  
    res.json(error)  
  }  
});

module.exports = router;

を返します.
我々にはget SELECTコマンドを発行するルート.
ヘッダはトークン、エンコーディング、およびcontent-type ヘッダ.
トークンはPostPersonサンプルからあり、HarperDBのローカルバージョンと対話することができます.
我々は、トークンでDBと認証します.
我々が生産でそれを使っているならば、我々はトークンを設定可能にしなければなりません.
次に、SQLコマンドでHTTPリクエストを作成してデータを取得したり削除したりすることで、コマンドを発行します.
を作成し、更新するには、我々はちょうど追加または更新するデータを送信します.
The operation リクエストペイロードのプロパティはharperdbに何をすべきかを教えます.

フロントエンド

フロントエンドをビルドするには、DogForm.vue ファイルをcomponents フォルダ.
フォームにコードを追加します.
以下を追加します.

<template>  
  <div>  
    <form @submit.prevent="submit">  
      <div>  
        <label>Dog Name</label>  
        <input v-model="dog.dog_name" name="dogName" type="text" />  
      </div>  
      <div>  
        <label>Owner Name</label>  
        <input v-model="dog.owner_name" name="ownerName" type="text" />  
      </div>  
      <div>  
        <label>Age</label>  
        <input v-model="dog.age" name="age" type="number" />  
      </div>  
      <div>  
        <label>Weight</label>  
        <input v-model="dog.weight_lbs" name="weight" type="number" />  
      </div>  
      <div>  
        <input type="submit" value="save" />  
        <button type="button" @click="remove">remove</button>  
      </div>  
    </form>  
  </div>  
</template>

<script>  
const axios = require("axios");  
const APIURL = "http://localhost:3000/dogs";

export default {  
  name: "DogForm",  
  props: {  
    dog: {  
      type: Object,  
      default: () => ({})  
    }  
  },  
  data() {  
    return {};  
  },  
  methods: {  
    async submit() {  
      const { dog_name, owner_name, age, weight_lbs, id } = this.dog;  
      if (!id) {  
        await axios.post(APIURL, {  
          dog_name,  
          owner_name,  
          age,  
          weight_lbs  
        });  
      } else {  
        await axios.put(`${APIURL}/${id}`, {  
          dog_name,  
          owner_name,  
          age,  
          weight_lbs  
        });  
      }  
      this.$emit("submitted");  
    }, 

    async remove() {  
      const { id } = this.dog;  
      await axios.delete(`${APIURL}/${id}`);  
      this.$emit("submitted");  
    }  
  }  
};  
</script>

フォームを追加して、ドッグデータエントリを追加、編集、または削除します.
The props はtype オブジェクトがデフォルト値であるオブジェクト.
オブジェクトの既定値を指定するためにオブジェクトを返す関数が必要です.
それから私たちはsubmit ない場合にPOSTリクエストを作成するメソッドid , これは新しいことを意味します.
それが生産アプリなら、いくつかのフォームの検証を追加する必要があります.
があるならばid , 次に、既存のエントリを更新します.
また、我々はremove エントリを削除するメソッドです.
をクリックすると削除されます.
すべてのメソッドはSubmitイベントを出力しますApp.vue .
インApp.vue , 以下の通りです.

<template>  
  <div id="app">  
    <DogForm @submitted="getDogs" />  
    <DogForm v-for="dog of dogs" :key="dog.id" :dog="dog" @submitted="getDogs" />  
  </div>  
</template>

<script>  
import DogForm from "./components/DogForm.vue";  
const axios = require("axios");  
const APIURL = "http://localhost:3000/dogs";

export default {  
  name: "App",  
  components: {  
    DogForm  
  },  
  data() {  
    return {  
      dogs: []  
    };  
  },  
  beforeMount() {  
    this.getDogs();  
  },  
  methods: {  
    async getDogs() {  
      const { data } = await axios.get(APIURL);  
      this.dogs = data;  
    }  
  }  
};  
</script>

我々はDogForm エントリの入力と編集.
彼らはsubmitted イベントは、新しいデータが取得されます.
我々はgetDogs GETリクエストでデータを取得する方法.

アプリを実行

我々は、ポストマンコレクションに移動し、犬のスキーマとテーブルを作成します.
コレクション内のクイックスタート例フォルダーに移動し、' create dev schema 'と' create do table 'リクエストを表示します.
その後、我々は実行npm start にbackend Expressのアプリを起動するフォルダ.
そして走るnpm run dev にfrontend フロントエンドのアプリケーションを実行するフォルダ.
次のようになります.

そして、我々は我々が望むものを入力することができます.

結論

我々は簡単にHarperDBを使用してデータベース駆動アプリケーションを作成することができます.
唯一の違いは、直接コマンドを発行するのではなく、HTTPリクエストでデータベースにコマンドを送ることです.