flaskで投稿掲示板作成

今回はflaskを使用し投稿掲示板を作成してみました。
ディレクトリ構成は以下のようになっています。

```
app.py
form_arrange.py
templates
 |__main_page.html
static
 |__css
     |__style.css
data
 |__save_data.json
```
コードについては[github](https://github.com/biki-cloud/write_board.git)にアップしています。
javascriptについては慣れていませんので[記事](https://kita-note.com/js-summary-of-how-to-add-elements)を参考にし作成しています。

実装画面
<img width="1315" alt="スクリーンショット 2020-07-04 16.51.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620960/187ad46a-6b14-143f-c459-ea6c4383b6d7.png">

#実装コード
```python:app.py
from flask import Flask,render_template,request , Markup
import json
import time

from form_arrange import form

app = Flask(__name__)

@app.route('/', methods=["GET" , "POST"])
def main_page():
    method = request.method
    save_json_path = "data/save_data.json"
    
    if method == "POST":
        former = form(form_input=dict(request.form) , save_json_path=save_json_path)
        
        if "clear" in dict(request.form).keys():
            former.save_json_clear()
            return render_template("main_page.html" , save_list=former.save_list, method=method)
        
        form_input = former.form_input
        former.write_save_json()
        return render_template("main_page.html" , save_list=former.save_list,form_input=form_input , method=method)
    else:
        former = form(save_json_path)
        save_list = former.save_list
        return render_template("main_page.html" , save_list=save_list, method=method)

if __name__ == "__main__":
    app.run(debug=True)
```

```python:form_arrange.py
import json
import os,sys

class form:
    def __init__(self  , save_json_path , form_input=None):
        self.save_list = self.read_save_json(save_json_path)
        self.save_json_path = save_json_path
        if form_input != None:
            self.form_input = form_input
        
    def read_save_json(self , save_json_path):
        save_list = []
        if os.path.exists(save_json_path):
            with open(save_json_path , "r") as f:
                save_list = json.load(f)
            return save_list
        else:
            with open(self.save_json_path , "w") as f:
                save_list = json.dump(save_list, f, indent=4)
            return save_list
        
    def write_save_json(self):
        self.save_list.append(self.form_input)
        with open(self.save_json_path , "w") as f:
            save_list = json.dump(self.save_list, f, indent=4)

    def save_json_clear(self):
        self.save_list = []
        with open(self.save_json_path , "w") as f:
                json.dump(self.save_list, f, indent=4)
```

```html:/templates/main_page.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>書き込み掲示板</title>
<link href="/static/css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/static/js/main.js"></script>
</head>
<body>

<div id="so_far_post_id" class="so_far_post_class">
<p>過去の投稿を表示</p>
</div>

<body onload="start()">
    <script>
    var save_list = {{ save_list|tojson }};
    function start() {
        // 追加
        for(let i = 0; i < save_list.length; i++) {
            console.log(save_list[i])
            var hoge = JSON.stringify(save_list[i]);
            var pHoge = JSON.parse(hoge);

            var newElement = document.createElement("p"); // p要素作成
            var newContent = document.createTextNode("---------------------------"); // テキストノードを作成
            newElement.appendChild(newContent); // p要素にテキストノードを追加
            newElement.setAttribute("id",i); // p要素にidを設定
            var parentDiv = document.getElementById("so_far_post_id");
            // 子要素３への参照を取得
            var childP3 = document.getElementById(i);
            parentDiv.insertBefore(newElement, childP3);

            var newElement = document.createElement("p"); // p要素作成
            var newContent = document.createTextNode("投稿 " + pHoge.write_text); // テキストノードを作成
            newElement.appendChild(newContent); // p要素にテキストノードを追加
            newElement.setAttribute("id",i); // p要素にidを設定
            var parentDiv = document.getElementById("so_far_post_id");
            // 子要素３への参照を取得
            var childP1 = document.getElementById(i);
            parentDiv.insertBefore(newElement, childP1);
            
            var newElement = document.createElement("p"); // p要素作成
            var newContent = document.createTextNode("名前 " + pHoge.name); // テキストノードを作成
            newElement.appendChild(newContent); // p要素にテキストノードを追加
            newElement.setAttribute("id",i); // p要素にidを設定
            var parentDiv = document.getElementById("so_far_post_id");
            // 子要素３への参照を取得
            var childP2 = document.getElementById(i);
            parentDiv.insertBefore(newElement, childP2);


        }
}
    </script>
</body>


<p>method name {{method}}</p>

<form method="get" action="/">
<input type="submit" value="GET">
</form>

<br>

<form method="post" action="/">
<input type="submit" name="clear" value="登録内容clear">
</form>

<form method="post" action="/">
<p>お名前</p>
<input type="text" name="name">
<p>内容</p>
<textarea name="write_text" cols="50" rows="10"></textarea>

<br><br>

<input type="submit" value="投稿する">
</form>

</body>
</html>
```

```css:/static/css/style.css
.so_far_post_class {
    float: right;
    list-style: none;
    margin: 30px;
}
```