起源#
從寶塔軟件商店看到未知表白牆，是 MBUI（ Material Design User Interface）設計，適合移動端，找到官方文檔MDUI - Material Design 樣式的前端框架，試試留言牆，
想做個前端渲染，後端 api 提供數據的。由於時間不是很多（零散的時間相當於沒有，過一天我就忘了之前寫的啥）
後端用 flask（只熟悉 python），之前試過，比較方便
實現#
- 先設計數據庫（一開始沒想做評論，數據表改了好幾次），card 表和評論表
|card 表字段 | 註釋 | 評論表字段 | 註釋 |
|-|-|-|-|
|id | 卡片唯一標識，自動遞增 | id | 評論唯一標識，自動遞增 |
|name | 卡片名 | cid | 所屬卡片的 id|
|avatar | 卡片創建者頭像 (非必需)|depth | 評論嵌套深度 |
|title | 卡片標題 | parent_id | 父級評論的 id|
|data | 卡片內容 | name | 評論者名 |
|imgurl | 卡片頂圖 (非必需))|content | 評論內容 |
|time | 卡片創建時間 | time | 評論發表時間 |
|type | 卡片類型 (noimg/withimg)|||
|comment_count | 卡片評論數 |||
評論表 cid 與 card 表 id 對應，cid 判斷是屬於哪個 card 的評論
後來發現 depth（評論深度）沒有用到，只通過 parent_id（上級評論 id）就可以實現多級評論
card 表添加評論計數字段，避免每次都要 select count 評論表
- python-flask 部分先寫好了數據庫增刪查的函數，直接 return 的 json 數據
flask api 部分實現增刪查的路由，簡單的過濾（安全問題的由來）
- 測試號 pi 接口都正常後開始寫前端，由於是客戶端渲染，幾乎沒有用模板語法（除了 js 文件引用部分，）, 所以把前端文件從模板文件夾拿出來後只需要改幾個路徑就能用，
前端實現方法很原始，用 ajax 獲取數據拼接到 HTML 字符串中，然後把處理好的 dom 節點插入，
除了 admin 頁面，前端只有一個文件，左側的幾個 tab 和文章詳情頁都在一個頁面，通過 JQ 的顯示隱藏來實現切換，缺點是難以修改維護，寫完後自己也記不得，如果想新增頁面，得改很多零散的地方，
結果#
創建 card，每個 card 的評論，card 的刪除（密碼驗證）
兩種 card：帶圖 card, 無圖 card
評論嵌套
-
card 包含標題，時間，內容，圖片（非必填），頭像
-
card 詳情頁評論
-
card 編輯添加
圖片 404 替換，onerr 函數，替換失效函數
主頁詳情頁切換或者刷新時記住頁面位置自動跳轉
添加內容不刷新臨時顯示
問題：#
-
都在一個頁面，不同 card 如何區分，刷新後豈不是回到主界面了，分享鏈接也都是主頁鏈接
-
由於沒有做 api 請求限制，存在被攻擊可能，最好限制一下頻率
-
xss 攻擊，sql 注入（maybe，打算過濾大於小於號等）
-
沒有登錄系統，點贊難以實現，提交信息時沒有鑒權，日後加上驗證碼驗證
-
評論沒有跟隨 card 刪除，（評論後來加的）
解決#
添加頁面標記
js 會在 url 後加參數如http://127.0.0.1:5500/?card=28
帶參數訪問時 js 讀取 card 的 id 自動跳轉到詳情頁面
TODO#
- 添加驗證，等 (需要時間)
- [x] 評論刪除
- [x] 驗證碼
總結#
花了 2 天實現部分功能，以後填坑
前端實現方式很原始，花費大量時間，對 flask 框架不熟悉，只用了它的路由功能，前端在摸索，框架什麼的是不會學的
預覽#
下面是 readme 的一部分（偷個懶）