not404

起源#

未知表白墙を宝塔ソフトウェアストアで見つけました。これは MBUI（Material Design User Interface）デザインで、モバイルに適しています。公式ドキュメントMDUI - Material Design スタイルのフロントエンドフレームワークを見つけて、メッセージボードを試してみました。

フロントエンドのレンダリングを行い、バックエンドの API がデータを提供します。時間があまりないため（断片的な時間はほとんどないため、1 日経つと以前に書いたことを忘れてしまいます）、

バックエンドには Flask（Python に精通している）を使用しました。以前に試したことがあり、比較的簡単です。

実装#

1. データベースの設計（最初はコメントを作るつもりはなかったので、データベースのテーブルを何度も変更しました）、カードテーブルとコメントテーブル
   | カードテーブルのフィールド | 注釈 | コメントテーブルのフィールド | 注釈 |
   |-|-|-|-|
   |id | カードの一意の識別子、自動増分 | id | コメントの一意の識別子、自動増分 |
   |name | カード名 | cid | 所属するカードの ID|
   |avatar | カード作成者のアバター（任意）|depth | コメントのネストの深さ |
   |title | カードのタイトル | parent_id | 親コメントの ID|
   |data | カードの内容 | name | コメント者の名前 |
   |imgurl | カードのトップ画像（任意）|content | コメントの内容 |
   |time | カードの作成時間 | time | コメントの投稿時間 |
   |type | カードのタイプ（noimg/withimg）|||
   |comment_count | カードのコメント数 |||

cid はコメントテーブルと card テーブルを対応させるために使用され、cid はどのカードに属しているかを判断します。

後で、depth（コメントの深さ）は使用されないことがわかりました。親コメントの ID（parent_id）だけで多段階のコメントを実現できます。

カードテーブルにコメントのカウントフィールドを追加し、コメントテーブルを毎回選択する必要がないようにしました。

2. Python-Flask の部分では、データベースの作成、削除、検索の関数を事前に書いて、直接 JSON データを返します。

Flask API の部分では、作成、削除、検索のルートを実装し、簡単なフィルタリング（セキュリティの問題）を行います。

3. テスト用の API が正常に動作した後、フロントエンドの作成を開始しました。クライアント側でレンダリングするため、テンプレートの構文はほとんど使用しませんでした（JS ファイルのインポート部分を除く）。そのため、テンプレートフォルダからフロントエンドファイルを取り出した後、いくつかのパスを変更するだけで使用できるようになりました。

フロントエンドの実装方法は非常に原始的で、データを Ajax で取得し、HTML 文字列に結合し、処理された DOM ノードを挿入するだけです。

管理ページ以外には、フロントエンドは 1 つのファイルしかありません。左側のいくつかのタブと記事の詳細ページはすべて同じページにあり、JQ の表示 / 非表示を使用して切り替えます。欠点は、変更やメンテナンスが困難であり、書き終わった後でも自分自身が覚えていないため、新しいページを追加する場合は多くの断片的な場所を変更する必要があります。

結果#

カードの作成、各カードのコメント、カードの削除（パスワードの確認）

2 種類のカード：画像付きカード、画像なしカード

コメントのネスト

1. カードにはタイトル、時間、内容、画像（オプション）、アバターが含まれます。

2. カードの詳細ページのコメント

3. カードの編集と追加

画像 404 の置き換え、onerr 関数、置き換え失敗関数

ホームページと詳細ページの切り替えやリフレッシュ時にページの位置を記憶して自動的にジャンプする
コンテンツの追加時にリフレッシュせずに一時的に表示する

問題：#

1. すべてのページが 1 つのページにあるため、異なるカードをどのように区別しますか？リフレッシュすると、メインページに戻ってしまいますし、共有リンクもすべてメインページのリンクです。

2. API リクエストの制限がないため、攻撃を受ける可能性があります。頻度を制限するのがベストです。

3. XSS 攻撃、SQL インジェクション（おそらく、大なり小なりなどをフィルタリングする予定です）

4. ログインシステムがなく、いいねを実現するのが難しいです。情報を送信する際に認証がないため、後でキャプチャの検証を追加する予定です。

5. コメントはカードの削除に追随していません（コメントは後から追加されました）

解決策#

ページのマーキングを追加
JS は URL にパラメータを追加します、例：http://127.0.0.1:5500/?card=28
パラメータ付きでアクセスすると、JS はカードの ID を読み取り、自動的に詳細ページにジャンプします

TODO#

• バリデーションの追加など（時間が必要）

• コメントの削除
• キャプチャ

結論#

一部の機能を実装するのに 2 日かかりました。今後も穴埋めをします。
フロントエンドの実装方法は非常に原始的で、多くの時間がかかりました。Flask フレームワークには詳しくなく、ルーティング機能しか使用していません。フロントエンドは試行錯誤中であり、フレームワークなどは学びません。

gitee

プレビュー#

以下は readme の一部です（手抜き）

管理#

無限ネストコメント#

デモ#