こちらの記事の続きです。
Chap.03 追加、更新、削除編
最初に実行結果の動画をあげておきます。
サーバのサンプルコード
一応、サンプルを追加、更新、削除に分割して用意したのですが、 前回の内容がわかれば読める気がするので、 全ての処理が含まれるサンプルコードを紹介しようと思います。
実行方法は前回と同じく以下のようになっています。
cd backend-for-new-media-art/chap05-update/node-server
npm install
npm run db:init
npm start
前回は GET http://localhost:3000/balls
しかルーティングしていませんでしたが、
このサンプルコードでは以下のようにルーティングしています。
POST /balls
: 円の情報を追加するDELETE /balls/:id
: 指定したIDの円の情報を削除する:id
には削除対象の円のIDを入れる
PUT /balls/:id
: 指定したIDの円の情報を更新する:id
には更新対象の円のIDを入れる
ここでHTTPリクエストメソッドについて少し説明しておきます。
HTTPリクエストにはメソッドという情報があります。
例えば GET http://localhost:3000/balls
と
POST http://localhost:3000/balls
は同じURLですが、
HTTPメソッドが異なるので別物のリクエストになります。
このように、同じURLだとしても、メソッドを使い分けることで 「サーバに対してどのようなリクエストを出すのか?」 ということを表現します。
詳細はこちらをご確認ください。
https://developer.mozilla.org/ja/docs/Web/HTTP/Methods
Copy
const express = require('express') const app = express() app.use(express.json()) const port = 3000 const sqlite3 = require('sqlite3') const db = new sqlite3.Database('./db.sqlite') app.get('/balls', (req, res) => { db.serialize(() => { db.all('select * from balls', (err, row) => { if (err) { console.error(err) } res.json({ balls: row, }) }) }) }) app.post('/balls', (req, res) => { console.log(req.body) const x = req.body.x const y = req.body.y const r = req.body.r db.run('insert into balls(x, y, r) values (?, ?, ?)', [x, y, r], (err) => { if (console.error(err)) { console.error(err) } res.status(201).json({ success: true, }); }) }) app.delete('/balls/:id', (req, res) => { console.log(req.body) db.run('delete from balls where id = ?', [req.params.id], (err) => { if (console.error(err)) { console.error(err) } res.status(201).json({ success: true, }); }) }) app.put('/balls/:id', (req, res) => { console.log(req.body) db.run('update balls set x = ?, y = ? where id = ?', [req.body.x, req.body.y, req.params.id], (err) => { if (console.error(err)) { console.error(err) } res.status(201).json({ success: true, }); }) }) app.listen(port, () => { console.log(`http://localhost:${port}`) })
サンプルスケッチ
こちらをスケッチの操作方法は以下のようになっています。
- 作成: キーボードの
c
を押すとマウスの座標に円が追加される - 削除: 円にマウスが載っている状態でキーボードの
d
を押すと円が削除される - 更新: 円をドラッグ&ドロップすると円の座標が更新される
Copy
import http.requests.*; String API_URL = "http://localhost:3000/balls"; ArrayList<Ball> balls; void setup() { size(640, 480); balls = new ArrayList<Ball>(); loadBalls(); } void draw() { background(0); for (Ball ball : balls) { ball.draw(); } } void keyPressed() { if (key == 'c') { PostRequest post = new PostRequest(API_URL); post.addHeader("Content-Type", "application/json"); JSONObject ball = new JSONObject(); ball.setFloat("x", (float)mouseX / width); ball.setFloat("y", (float)mouseY / height); ball.setFloat("r", random(1)); post.addData(ball.toString()); post.send(); balls.clear(); loadBalls(); } else if (key == 'd') { for (Ball ball : balls) { if (dist(mouseX, mouseY, ball.x, ball.y) < ball.r) { DeleteRequest delete = new DeleteRequest(API_URL + "/" + ball.id); delete.addHeader("Content-Type", "application/json"); delete.send(); break; } } balls.clear(); loadBalls(); } } void loadBalls() { GetRequest get = new GetRequest(API_URL); get.send(); JSONObject result = parseJSONObject(get.getContent()); JSONArray ballsData = result.getJSONArray("balls"); for (int i = 0; i < ballsData.size(); i++) { JSONObject ballData = ballsData.getJSONObject(i); Ball ball = new Ball( ballData.getInt("id"), ballData.getFloat("x") * width, ballData.getFloat("y") * height, ballData.getFloat("r") * 9 + 1 ); balls.add(ball); } }
次の記事では、 前回の記事で少し触れたリレーションを扱おうと思います。