はじめに
今回は前回の記事の続きです。
今回はNode.js+EJS+tailwindcssでログインページを作成します。
今回のファイル構成
nodejs-tailwindcss/
│
├ controllers/
│ └ pageIndex.js
│
├ puclic/
│ └ styles/
│ └ style.css
│ └ tailwind.css
│
├ views/
│ └ index.ejs
│
├ index.js
├ package.json
├ postcss.config.js
├ tailwind.config.js
それでは実際にコードを書いていきましょう！
最初に、index.jsを作成しよう
index.js
//モジュールを読み込む
const express = require('express');
const ejs = require('ejs')
//コントローラーを読み込む
const pageIndexController = require('./controllers/pageIndex');
//読み込んだexpressモジュールを実体化してインスタンスにする
const app = express();
//テンプレートエンジンとしてejsを用いる
app.set('view engine', 'ejs');
//publicフォルダを使えるようにする
app.use('/public', express.static(__dirname + '/public'));
//ルーティング処理
app.get('/', pageIndexController);
//サーバーを立ち上げる
app.listen(3000, () => {
console.log('http://localhost:3000');
});
以下の記載で、publicフォルダ内のCSSが読み込めるので、
こちらの記述がない場合はCSSを使えません！
なのでこちらの記述は忘れないでくださいね。
こちらの記事を参考にしてください！
//publicフォルダを使えるようにする
app.use('/public', express.static(__dirname + '/public'));
次にルーティング処理を記述する、pageIndex.jsを作成しましょう。
次に、pageIndex.jsを作成しよう
pageIndex.js
module.exports = (req, res) => {
res.render('index');
};
これだけしか記載しないので、わざわざファイルを分けるメリットは少ないですが、
運用していく中でファイルを分けておいた方が保守がしやすいので分けるようにしましょう。
最後にindex.ejsを作成しよう
index.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>nodejs-tailwindcss</title>
<link rel="stylesheet" href="../public/styles/style.css" />
</head>
<body>
<div class="flex flex-col h-screen">
<div class="bg-gray-100 flex-auto">
<div class="flex justify-center mt-20">
<div class="w-9/12 border bg-white">
<div class="my-16 text-center">
<h2 class="text-4xl font-bold">ログイン</h2>
<form action="/form/login" method="POST" class="mt-12">
<div class="mb-3">
<input
type="email"
placeholder="you@gmail.com"
name="email"
class="text-xl w-7/12 p-3 border rounded"
/>
</div>
<div class="mb-5">
<input
type="password"
placeholder="パスワード"
name="password"
class="text-xl w-7/12 p-3 border rounded"
/>
</div>
<div class="mb-5">
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox" />
<span class="ml-2 text-sm">ログインデータを保存する</span>
</label>
</div>
<button
type="submit"
class="mb-3 text-xl w-4/12 bg-blue-800 text-white py-2 rounded hover:opacity-75"
>
ログイン
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
クラスの記載が多いのでコード自体はめちゃくちゃ長いですが、
書いている内容はシンプルです！
正直たくさんコードを書かなければ覚えられないので、
公式サイトで大まかに理解した後は、
チートシートを使うのがおすすめです。
私もまだまだ覚えられていないので、
チートシートを手元においてコーディングしています！！