ログイン画面の作成

ログイン画面は、bootstrapのカードで作成。
postを使うことで、ログイン画面で入力した値をflaskで受け取れるようにしている。

ディレクトリ構造
root
┝ flask_python.py
┝ templates
　　┝ login.html

　　

・label forの必要性
指定したlabelをクリックすると同じidをもつ入力フォームにカーソルが合うようになっている。
ex.< label for id='id'>id< /label>
< input type="text" class="form-control" id="id" name="id" value="{{id}}">
これらが紐づいて、textにカーソルを合わなくても、idを押すとtextを入力することができる。

---

---

・<　small class="form-text text-muted">について
文字を小さくするのと、"text-muted"で文字を灰色にできる

---

login.html

{% extends "layout.html" %}

{% block title %}
Login
{% endblock %}

{% block headline %}
{{title}}
{% endblock %}

{% block content %}
{% if err %}
<p class="alert alert-warning">
{% else %}
<p class="alert">
{% endif %}
{{ message }}</p>

<div class="card">
    <div class="card-header">
        <h4 class="card-title">
            Login Form:
        </h4>
    </div>
    <div class="card-body">
        <form method="post" action="/login">
            <div class="form-group">
                <label for="id">id</label>
                <input type="text" class="form-control" id="id" name="id" value="{{id}}">
                <small class="form-text text-muted">
                    ※IDを入力してください
                </small>
            </div>
            <div class="form-group">
                <label for="pass">password</label>
                <input type="password" class="form-control" id="pass" name="pass">
                <small class="form-text text-muted">
                    ※Passwordを入力してください
                </small>
            </div>
            <div class="form-group">
                <input type="submit" value="Login">
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block footer %}
copyright 2019 Login.
{% endblock %}

以下は、flask側での処理
今回のログイン画面はこちらで設定したidとパスワードを知っているユーザーだけ、入れるようにしている。
また、画像認識を行なっていた時に作成したもので,kerasなどをimportしている

---

・session['id'] = idについて
セッションの'id'キーにidという値を保存している
これでクライアントごとに、idを保管することができる

---

flask_python.py

from flask import Flask, render_template, request, session, redirect,url_for
import os
from werkzeug.utils import secure_filename
from keras.preprocessing.image import load_img, img_to_array
from pic_reco import recognition


app = Flask(__name__)
app.secret_key = b'random string...'

# 画像のアップロード先のディレクトリ
UPLOAD_FOLDER = './static'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

@app.route('/login', methods=['GET'])
def login_get():
    return render_template('login.html',
                           title='Login',
                           err=False,
                           message='IDとPasswordを入力してください',
                           id='')

@app.route('/login', methods=['POST'])
def login_post():
    id = request.form.get('id')
    pswd = request.form.get('pass')
    if id == 'tsubomi':
        if pswd == '0426':
            session['login'] = True
        else:
            session['login'] = False
    else:
        session['login'] = False
    if session['login']:
        session['id'] = id
        return redirect('/')
    else:
        return render_template('login.html',
                               title='Login',
                               err=False,
                               message='IDかpasswordが違います',
                               id='')
#logout
@app.route('/logout', methods=['GET'])
def logout():
    session.pop('id', None)
    session.pop('login')
    return redirect('/login')

if __name__ =='__main__':
    app.debug = True
    app.run(host='localhost')