給与明細WEBアプリ開発アプリ編 #Vue.js

挨拶:このWEBアプリの開発は私がエンジンニアになって初めて携わった開発です。
以前はインフラ編を紹介しました。今回はアプリケーション本体を紹介します。
まだまだ勉強不足なところがありますので気になったところがあればお気軽にご指摘頂けたら幸いです。

作成経緯:会社の友人に頼まれて開発したアプリケーションです。
初めてアプリケーションを開発するため最初はflaskとjinja2で画面だけ作成しました。
しかし本番ではよくバックエンドとフロントエンドを分けて開発、運用することが多いと聞き
私も自分のアプリケーションをフロントエンドとバックエンドを分けました。
こっちのほうがセキュリティ面も改善できると思います。

構成:
フロントエンド:Vue.js+nginx
バックエンド:Flask+Gunicron+nginx
データペース:MySQL

このようにそれぞれのサーバーの間はjsonを使って通信しています。

from flask import jsonify

例えばこのようにフロント側からバック側にjsonデータを送信します。

const response = await this.$axios.post(get,delete)('http://localhost:8000/api/path

処理したデータを逆に今度バック側がこのようにjsonを使ってフロント側に送信します。

return jsonify(employee_pay_slips=employee_pay_slips, months=months, email=email)

実装した機能は
1.ログイン、ログアウト
これを実現するためにはFlaskのライブラリFlask-JWTを使用しています。

from flask_jwt_extended import JWTManager, create_access_token, jwt_required, get_jwt_identity

Flask-JWTを使用することにより認証トークンが作成され、こちらの認証トークンを使って
ユーザーの認証を行います。

2.csvファイルのデータをデータペースに保存
こちらを実現するにはFlaskのライブラリpandasを使用しています。

import pandas as pd

3.ステートレスの観点からファイルの保存はローカルではなくs3に保存しています。
こちらを実現するにはFlaskのライブラリboto3を使用しています。

import boto3

 client = boto3.client(
         's3',
         aws_access_key_id = os.getenv("AWS_ACCESS_KEY_ID"),
         aws_secret_access_key = os.getenv("AWS_SECRET_ACCESS_KEY"),
         region_name = os.getenv("AWS_DEFAULT_REGION"),
 )
key = 'test/test.csv'
bucket_name = 'bucket_name'
client.upload_file(filepath, bucket_name, key)

file_url = f's3://{ bucket_name }/{ key }'
df = pd.read_csv(file_url)

4.データペースの一連の操作はSQLAlchemyを使用しています。

from flask_sqlalchemy import SQLAlchemy
from sqlalchemy import create_engine, text

5.api通信を行うためにflask-corsを使用しています。

from flask_cors import CORS, cross_origin

例えばcross_originを使用して指定のドメインにapiを送信するなど使用しています。

6.そのたの機能
パスワードの暗号化、トークンの使用期限設定、環境変数の使用など

from werkzeug.security import generate_password_hash, check_password_hash
from datetime import timedelta
from dotenv import load_dotenv
import os

ページは7つのページを作成しました。

│   App.vue
│   main.js
│   router.js
└───components
        AdminLogin.vue
        MasterPage.vue
        MyPage.vue
        ReplacePass.vue
        TopPage.vue
        UserLogin.vue
        UserSignup.vue

このように以下のページがあります。

・トップ画面
・一般ユーザログイン画面
・一般ユーザ画面、
・マスターログイン画面、
・マスターページ画面、
・パスワード更新画面、
・csvファイルをアップする画面

一般ユーザーとマスターユーザーを完全に切り分けてます。

総括:このアプリケーションの作成は勉強の時間を入れてトータルで4か月かかりました。
いろいろ修正もありましたが作って楽しかったです。実際の現場はもっと複雑なものを
作っていると思いますがこれからもたくさん勉強していち早く一人前のエンジンニアになりたいです。
これからも自分が勉強したことをシェアしていきたいと思います。