5週目のプログラミング＜python＞

今週は二つのプロジェクトしながら、復習の時間を持つようにした。

今週はbucketとbanbookというウェブサイトを作成した。
新規プロジェクト開いてFlask, render_template, request, jsonifyなどのそれぞれをimportする。

Windowsの方のmongodbコード

from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.v7tnfvp.mongodb.net/Cluster0?retryWrites=true&w=majority')
db = client.dbsparta

改めてGETとPOST方式について復習しよう。
GET：データ読み取る事を要請すること。
POST：データの作成、変更、削除などの事を要請する時に使われる。

@app.route("/bucket", methods=["GET"])
def bucket_get():
    all_buckets = list(db.bucket.find({}, {'_id': False}))

    return jsonify({'result': all_buckets})

@app.route("/guestbook", methods=["GET"])
def guestbook_get():
    all_comments = list(db.fan.find({}, {'_id': False}))

    return jsonify({'result': all_comments})

今週作った二つのコードを見ると、データを全て持って来てresultを通じてフロント側に見せる。

function show_bucket() {
    fetch('/bucket').then(res => res.json()).then(data => {
        let rows = data['result']
        $('#bucket-list').empty()
        rows.forEach((a) => {
            let bucket = a['bucket']
            let num = a['num']
            let done = a['done']

            let temp_html = ``
            if (done == 0) {
                temp_html = `<li>
                            <h2>✅ ${bucket}</h2>
                             <button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">完了!</button>
                             </li>`}
                else {
                    temp_html= `<li>
                            <h2 class="done">✅ ${bucket}</h2>
                        </li>`}
            $('#bucket-list').append(temp_html)
        })
        alert(data["msg"]);
    })
}

function show_comment() {
        fetch('/guestbook').then((res) => res.json()).then((data) => {
            let rows = data['result']
            $('#comment-list').empty()
            rows.forEach((a) => {
                let name = a['name']
                let comment = a['comment']

                let temp_html = `<div class="card">
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <p>${comment}</p>
            <footer class="blockquote-footer">${name}</footer>
        </blockquote>
    </div>
</div>`
                $('#comment-list').append(temp_html)
            })
        })
    }

送られたresultはrowsという変数にいれ、繰り返し文を通じて欲しいデータ出力する。

@app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_receive = request.form['bucket_give']

    count = list(db.bucket.find({}, {'_id': False}))
    num = len(count) + 1

    doc = {
        'num': num,
        'bucket' : bucket_receive,
        'done' : 0
    }
    db.bucket.insert_one(doc) #

    return jsonify({'msg': '登録完了!'})

docの中は出力する項目。
データを持って来てnumの変数に入れてlenの変数で返還する。
・len：文字の数を数字で表れる関数。（数字を数える。）
lenの中のcountをした要素の数+1を数字として表れる。

・プロジェクト企画案

来週からはプロジェクトすることになった。。。
ちょっとできるか、緊張してるげと、できるだけ頑張りたいです！(｡•́︿•̀｡)

空き家というプロジェクト考えるようになったのは、まもなく日本に行く楽しみと不安がちょっとずつあったからです。
それで、初めて一人暮らしする人にも役に立つ情報と同時に部屋の見せる。簡単なウェブサイトを考えるようになりました(*´∪`)
まだ、自分の実力では多くの機能は作りにくいと思います。
それで授業を通じて学んだことを活かしてウェブサイト作成したいと思います。

プロジェクトデザインはfigmaで作成し後で追加する可能性が高いです。