In this multi-part tutorial, we'll create and deploy a multi-server architecture web application using Adonis for the back-end API, Nuxt for the front-end, and PostgreSQL for the database.

Part 1: Creating a front-end using NuxtJS and TailwindCSS
Part 2:
Part 3:
Part 4:
Part 5:

フレームワークとツール

フロントエンドNuxtJS and TailwindCSS/UI

バックエンドAdonisJS

データベースPostgreSQL

サーバーの提供と配備Cleavr

第1部- NuxtjsとTailWindCSSを使用したフロントエンドの作成

ローカルマシンにインストール

nuxtjsのインストールはとても簡単です.あなたのインストール手順をチェックアウトすることができますhttps://nuxtjs.org/guides/get-started/installation .
この課題については、次のコマンドを実行してnuxtをインストールします.

yarn create nuxt-app themovies

あなたのプロジェクトを何か他の名前にする場合は' themovies '.
これにより、選択した依存関係のすべてをインストールするセットアップウィザードを使用します.超便利で時間節約!メインの設定を有効にするには、UIのためのTailWinCSSとサーバーのnodejsです.
インストールが完了したら、プロジェクトにCDを入れます.cd themovies , それから実行yarn dev あなたのローカルのアプリケーションを実行します.

cd themovies
yarn dev

フロントエンドをきれいにする

お気に入りのエディタでプロジェクトを開きます.私は使用するIntelliJ .
フォルダ構造を見ると、レイアウトディレクトリとページディレクトリがあることがわかります.

インlayouts/default.vue , 素敵なレイアウトコンテナでこのページを更新しましょう.あなたがいるならばTailwindUI アカウント、アプリケーションUIセクションからコンポーネントを使用することをお勧めします.これは私の映画レビューアプリのために何をするかです.

テンプレートタグの中でdefault.vue ファイルは、既存のコンテンツをTarwinDUIからコンテンツに置き換えます.

次に、私はちょうど通過して、ロゴ、テキストのいくつかを更新して、我々が必要としない若干のものを取り除きます.

主なことを覚えて、我々はレイアウトのためのボディエリアの場所を指定する必要があります.つまり、コンテンツをダンプする領域です.
Nuxtで、あなたがしなければならないすべては単に加えるだけです<nuxt /> あなたがコンテンツを配置する場所にタグ.
さあ、見ましょうpages/index.vue . これは、<nuxt /> プレースホルダdefault.vue レイアウト.

Tailwinduiからリストコンポーネントの1つを取得し、既存のコンテンツを<template> タグを付けます.

さて、テーブルの行の内容をムービー情報に置き換えてみましょう.私は、これまでに作られる最高の映画のうちの3から情報を加えますChildren of Men , The Terminator , and The Sisterhood of the Traveling Pants .

ダイナミックな映画詳細ページを加えてください

Nuxtについての素晴らしいことの一つは、あなた自身をルートを維持することについてそんなに心配する必要はありません.Nuxtは動的にあなたのためのルートを作成しますpages ディレクトリ-すべてを行う必要が追加されます.vue ファイル.
だから、先に行くと映画の詳細については、新しいページを追加してみましょう.もちろん、それをダイナミックにしたい.動的なページを作成するには、単にファイル名の先頭にアンダースコアを追加します.
を加えましょう_title.vue にpages 次に、ムービーの詳細については別のTailWinDiiコンポーネントを追加します.
我々の映画の詳細については、以下のデータがあります.

映画タイトル

映画ポスターグラフィック

発売年

トップ俳優

ジャンル

説明

レビュー

つの最後の事.レッツゴートゥバックindex.vue そして<a href> 男性の子供のためのタグ.nuxtでは<nuxt-link to=""> の代わりに<a href> リンク用.タグを更新します

<nuxt-link to="/children-of-men" class="...">

ああ!我々のブラウザに戻って、我々の仕事をチェックしましょう.(まだ走っていることを確認してくださいyarn dev 端末で)

Voila!動く!
では、ローカルマシンにAdonis V 5をインストールし、PostgreSQLサーバをスピンして、2つを一緒にリンクします.
続いて?Githubでのパート1の進捗状況https://github.com/armgitaar/themovies/tree/part-1 .
おそらく、我々は主に今まで静的なコンテンツを作成したことに気づいています.我々は戻って来て、それを後でダイナミックにします.次に、フロントエンドに必要なデータを知るためにバックエンドAPIで動作します.