crea7dossantos / sweep Goto Github PK
View Code? Open in Web Editor NEWThis is a Todo application with Nuxt on the client side and Flask on the server side
This is a Todo application with Nuxt on the client side and Flask on the server side
refresh_token
の期限が切れたときはユーザーの再認証をサインインの部分から行わせて refresh_token
を新しくするために、サインアウトさせる。
Tableを create_all
をするのでなくて、Migrationしてスキーマの状態管理などを行う。
参照- Flask + SQLAlchemyプロジェクトを始める手順
https://qiita.com/shirakiya/items/0114d51e9c189658002e
Todosのtitleの文字列チェックを行う必要がある。
アプリケーションが落ちた時などにログを解析できる様にする。したい。
SQLAlchemyを使ってデータの更新などを行う。
主な目的としてはSQLインジェクション対策など。
セッターからモーダルが非表示になった場合のストアデータの処理と、 mounted
部分で返り値を v-text-field
にセット。 save
時に validation
をかけてルールの部分にエラーが発生しない場合のみ、/update
のエンドポイントを叩き、プロフィールを変更できるようにする。
ユーザーがアカウントを作成していなく、ログインしていない時には、Todoアプリのトップ画面を表示してユーザーにアカウント作成とログインを推奨する。
監視プロパティでTodoを追加した後に空文字を入れてしまうとdangerクラスが走ってしまうバグを防ぐ。
Flaskでの認証機能がどのようになるかは分からないが認証機能を追加する
signup.vue
と signin.vue
の画面で作成していた入力フォームをVuetifyに移行する。
移行理由としては、Validataionが効いたフォームをコンポーネントで提供しているぽくこれを使えば簡単にバリデーションが効いた良い感じのフォームが使えそうな気がした。
プロフィールが二回立て続けに更新されずにモーダルが閉じたときなどに前の前の画像が設定されるなどのバグが発生する
状態管理をVuexに移行してHome画面のファイルを綺麗にする。
タイトル通り、いつTodoを追加したかが分からないので、追加した日付をトップで表示させる。
ユーザー別のデータなどのAPIを実装する
ユーザーがTodoを追加した時にいい感じのアクションを作成する
SPAで構成したいのと、今後の拡張性も含めてフロント部分をNuxtで実装する。
DBへの接続情報など、ハードコーディングしてはいけない部分もハードコーディングしてしまっているので、 .env
ファイルを作成して避ける
現在ステータスコードでエラーだけを区別しているので、エラーの内容も v-snackbar
で表示できるようにする。
レイアウトに関してまだ適当な部分が存在するので、いい感じに修正したい
sign inの処理をした時に、トークンの確認をしてトークンがあったらsign inやsign upのボタンをページから非表示にしたいのだが、読み込まれないので認証の状態に密接してレイアウトが変更されない。
この辺も状態管理の部分でどうにかなりそうな部分ではあるが。
サーバーサイド側で保存したUTC時刻のデータを、JSTに変換してからバインディングする。
ここでの問題は、画面サイズが900px以上の時はモーダルで表示したい画面はモーダルで表示し、画面サイズが小さい時は通常の用意しているページに飛ばす処理をしたい。
この辺を考慮する必要がある。
トークンが切れていてCookieに期限が切れていない refresh_token
が存在したら、トークンを新しく発行してCookieにセットする。
可能性あり。sortした時に上手くいかなかったし、なんか変。
ってかこれは日付のフォーマットした時にも感じたが、DBに格納する時に、サーバー側の日付が変わってない感じする。
axiosの処理でbaseのURLを作成する時に、通常の呼び出しと、アクセストークンをHTTPヘッダに付属する呼び出しと、リフレッシュトークンをHTTPヘッダに付属する3種類が存在するので、プラグインにそれぞれを記述し、そこから参照する。
LoginとSignInの機能を追加するためのNavigation Bar・Headerを上部に作成する。
createdの部分で、DOMがMountされる前にローカル変数に取得した user_id
を格納して、 mounted
の部分でその変数を読み込みたいのだが、 user_id
を取得する前にDOMの処理が始まってしまう。
状態管理の部分で、signinしたタイミングでどっかにユーザーの情報を格納しとかないとつらみが出てくる。
ナビゲーションバーをBulmaで作成していて、レスポンシブデザインに対応できていないので、移行する。
トークンが古くなった時と、トークンがCookieで保存されていない時の差分をJWTのデコレーターで出せるのかなど確認する。
アーリーリターンして簡潔に書ける部分があるので、Do
現在DB側で保存したデータをそのまま表示させているので、Filterのjsファイルを plugins
の中に作成し、 nuxt.config.js
で読み込み、データをバインディングする前にフォーマットにかける。
昨今のWebアプリは左側に常にメニューが表示されているものが多いので、左側にメニューを表示させる。
フォームに値が入ったままで、ページを create
がURLに付いたままリロードすると同じ値が複製されてしまう。
configファイルをルートに置いて、Migrationした結果ルートに置かれるsqliteのdbファイルを読み取れるようにする。
現在は手動で flask_todo
の配下にdbファイルを置いて読み取っているので、修正する
投稿をモーダルからも可能にする時に、非同期でPOSTされた要素の変更を行うには、一律な状態管理を行い、View側でセッターを通して変更させる必要があるので、実装する
現在Vuexでの処理をする前にエラーハンドリングを何も行っていないので、もし処理が実行されなかった時のハンドリングをする。
このアプリケーションを読み込んだ時に、ルーティングで index.vue
を読み込むようになっていて、 index.vue
で表示するコンテンツとしてデコレーターをつけたTodoページを表示させたくないので、 index.vue
で表示するコンテンツをこのアプリケーションのトップページとする。
パッケージ構成を修正して、ディレクトリに関連するファイルだけを格納し、実行ファイルを分ける
非同期で行なっているため、処理フローが煩雑になり、バグ発生の恐れが多いコードがある。
投稿一覧から特定の投稿をタップした時に、モーダルで特定の投稿を表示する。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.