GoとVueを使用して単一ページのアプリを構築します

この記事は、もともとOkta Developerブログで公開されていましたが、Vue.jsとGo BackEndを使用して安全なシングルページアプリケーション（SPA）の構築を示しています。 認証のためにOktaをレバレバルし、データの持続性のためにMongoDBをレバレッジします。 スパを使用すると、ユーザーはGitHubを検索してオープンソースプロジェクトを検索したり、お気に入りにしたり、メモを追加したりできます。

SPAは、豊富な相互作用と高速フィードバックを備えたユーザーエクスペリエンスを強化します。 ただし、認証や国家管理などの分野でフロントエンドの課題を提示します。 vue.jsはこのプロセスを簡素化します

vue.jsハイライト：

簡単な学習曲線と漸進的な採用。

• プロジェクトのセットアップが合理化されます。
• vue-cli強力なコミュニティサポート。
• 柔軟なコンポーネントベースのアーキテクチャ。

アプリケーションアーキテクチャ：

このチュートリアルでは、vue.jsのフロントエンドを作成し、州管理用のVuex、材料設計コンポーネント用のVuetify、およびナビゲーション用のVueルーターを作成します。 Go BackEndはREST APIを提供し、JSON Web Tokens（JWTS）およびOpenID Connect（OIDC）を介した安全な認証にOktaのGo JWT Verifierを使用します。 MongoDBはアプリケーションデータを保存します

プロジェクトのセットアップ：

ディレクトリ構造：

プロジェクトは、同じプロジェクトディレクトリ内のGo BackEndとvue.js Frontendで編成されています。
1. vue.jsアプリケーションを足場。 vue-clivuetify統合：
vuetifyが追加されて、材料設計コンポーネントを使用してUIを強化します。
2. OKTA認証：無料のOKTA開発者アカウントを使用してOIDCアプリケーションを作成し、安全なユーザー認証と管理を提供します。 Okta Vue SDKは統合を簡素化します

ルーティングとコンポーネント：

アプリケーションは、ログイン用のルート、メインダッシュボード（

）、および個々のプロジェクトの詳細（）を定義します。 認証は、OKTAのを使用して実施されます。 コンポーネントは、ユーザーの相互作用、データ表示、およびGo BackEndとの通信を処理します。

/me /repo/:idauthRedirectGuardgo backend：

Go BackEndは、データの持続性にMongodbを使用します。

structは、好まれたプロジェクトを表します。

レイヤーは、リポジトリと対話するビジネスロジックを処理します。 HTTPハンドラーは、認証にOKTAのJWT Verifierミドルウェアを使用してAPIリクエストを管理します。 アプリケーションの実行：

a Makefileは、Mongodbを管理するためにDocker Composeを利用して、ビルドと実行のプロセスを簡素化します。

さらなる学習：

この記事は、vue.jsおよびGoの追加リソースへのリンクで終了します。これには、PWASおよび認証に関するOktaのチュートリアルを含みます。

この書き換えバージョンは、より簡潔な言語とより明確なセクションの見出しを使用して、読みやすさと流れを改善しながら、元のコンテンツの意味を維持します。 画像は元の形式と位置のままです

以上がGoとVueを使用して単一ページのアプリを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。