シングルページWebアプリの挙動を図で解説

シングルページアプリケーションは下図のような構成をとることが多い。

この構成の場合は、各サーバーの役割は、こうなる。

Webサーバー

　静的なファイル置き場

APIサーバー

　HTTPのアクセスを受け付ける
　リクエストを分析して適切な処理を動かす
　レスポンスを返す

DBサーバー

　データを保持する。

本稿では、各サーバー間をデータがどのようにながれていくのかを図で説明する。

画面の挙動とデータの流れ

1.ページへのアクセス

2.WebAPIの呼び出し

3.結果の返却と表示

ソースコードイメージ

APIサーバー

package main

import (
	"net/http"
	"github.com/gin-gonic/gin"
)

func main() {
	r := gin.New()
	r.GET("/book", func(c *gin.Context) {
		//パラメータの確認　(2-②の処理)
                //データベースへのクエリ発行と結果取得　(2-③、3-①の処理)
                //クエリ結果をjsonデータへ加工してレスポンス作成　(3-②の処理)
	})

	r.Run()
}

クライアント(main.js)

function onSearchButtonClicked(keyword) {
    const response = await fetch("https://aaa.com/book?n=" + keyword);(2-①、3-③の処理)

    //結果を加工して画面表示 (3-③の処理)
}