> For the complete documentation index, see [llms.txt](https://cda2018.gitbook.io/group3/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cda2018.gitbook.io/group3/cheng-mei-zhou-du/week7-9/flask.md). # Flask 學習利用網站創建軟件—Flask在近端做出一個屬於自己的網頁。 可以做到的功能有： * 登入登出(只有一組帳號密碼) * 輸入title以及text ### step 0. creating the folders ``` /flaskr /flaskr /static /templates ``` 創建一個可以讓我們放置文件的文件夾 這個除了可以使用PYTHON，也能用CSS跟JAVA 這裡我們使用的是PYTHON ### step 1. database schema ``` drop table if exists entries; create table entries ( id integer primary key autoincrement, title text not null, 'text' text not null ); ``` 建立數據庫模式，將以上內容放進flaskr裡面的schema.sql. 裡面包含entries，表裡面的每一行都有一個id/title/text id為會自動遞增的整數，也是主鍵 title跟text為一串不為空的值 ### step 2. application setup code 在有了數據庫模式之後，我們必須建立應用模組：flaskr.py 並放置在flaskr目錄裡 首先在flaskr.py輸入 ``` # all the imports import os import sqlite3 from flask import Flask, request, session, g, redirect, url_for, abort, \ render\_template, flash app = Flask(__name__) # create the application instance :) app.config.from_object(__name__) # load config from this file , flaskr.py # Load default config and override config from an environment variable app.config.update(dict( DATABASE=os.path.join(app.root_path, 'flaskr.db'), SECRET_KEY='development key', USERNAME='admin', PASSWORD='default' )) ``` 上面的有輸入帳號密碼的地方，就是們前面提到的只有一組帳號密碼可被使用 介紹一下database path: 因為操作程式的時候，可能會同一個過程中進行多個應用，但在WEB應用裡面沒有這個概念 所以我們可以用"app.root\_path"來取得應用路徑，配合"os.path"模式，讓我們可以輕鬆找到文件 在此我們' 數據庫放在目錄下 ``` app.config.from_envvar('FLASKR_SETTINGS', silent=True) ``` 最後要加上一個模式使我們可以連結到數據庫 ``` def connect_db(): """Connects to the specific database.""" rv = sqlite3.connect(app.config['DATABASE']) rv.row_factory = sqlite3.Row return rv ``` #### ### step 3. installing flaskr as a package 安裝一個flaskr組件 首先需要先給我們的模式一個結構 ``` /flaskr /flaskr __init__.py /static /templates flaskr.py schema.sql setup.py MANIFEST.in ``` 再來如下 ``` from setuptools import setup setup( name='flaskr', packages=['flaskr'], include_package_data=True, install_requires=[ 'flask', ], ) graft flaskr/templates graft flaskr/static include flaskr/schema.sql from .flaskr import app pip install --editable . export FLASK_APP=flaskr export FLASK_DEBUG=true flask run ``` ### step 4.database connections 建立一個數據庫的連接 ``` def get_db(): """Opens a new database connection if there is none yet for the current application context. """ if not hasattr(g, 'sqlite_db'): g.sqlite_db = connect_db() return g.sqlite_db @app.teardown_appcontext def close_db(error): """Closes the database again at the end of the request.""" if hasattr(g, 'sqlite_db'): g.sqlite_db.close() ``` ### step 5.creating the database flasKr是一個由數據庫系統驅動的應用程式 所以我們需要一個模式來告訴它如何儲存資訊 ``` sqlite3 /tmp/flaskr.db < schema.sql def init_db(): db = get_db() with app.open_resource('schema.sql', mode='r') as f: db.cursor().executescript(f.read()) db.commit() @app.cli.command('initdb') def initdb_command(): """Initializes the database.""" init_db() print('Initialized the database.') flask initdb Initialized the database. ``` ### step 6.the view functions 建立完數據庫並確定可以使用後，需要一些視圖功能 需要以下四個: * **show entries 顯示條目** 顯示所有數據庫裡面所儲存的資訊 ``` @app.route('/') def show_entries(): db = get_db() cur = db.execute('select title, text from entries order by id desc') entries = cur.fetchall() return render_template('show_entries.html', entries=entries) ``` * **add new entry 新增條目** 讓登入的使用者可以新增條目 ``` @app.route('/add', methods=['POST']) def add_entry(): if not session.get('logged_in'): abort(401) db = get_db() db.execute('insert into entries (title, text) values (?, ?)', [request.form['title'], request.form['text']]) db.commit() flash('New entry was successfully posted') return redirect(url_for('show_entries')) ``` * **login & logout 登入以及登出** 讓使用者登入以及登出，帳號密碼需使用創建者設定的 只有一組帳號密碼 ``` @app.route('/login', methods=['GET', 'POST']) def login(): error = None if request.method == 'POST': if request.form['username'] != app.config['USERNAME']: error = 'Invalid username' elif request.form['password'] != app.config['PASSWORD']: error = 'Invalid password' else: session['logged_in'] = True flash('You were logged in') return redirect(url_for('show_entries')) return render_template('login.html', error=error) @app.route('/logout') def logout(): session.pop('logged_in', None) flash('You were logged out') return redirect(url_for('show_entries')) ``` ### step 7.the templates 如果我們使成始開始啟動，可能會讓flask找不到模板 這裡的模板是使用jinja2語法並且默認一個自動啟用功能 以下是需要使用的模板 * **layout.html** ``` Flaskr

Flaskr

{% if not session.logged_in %} log in {% else %} log out {% endif %}
{% for message in get_flashed_messages() %}
{{ message }}
{% endfor %} {% block body %}{% endblock %}
``` * **show\_entries.html** ``` {% extends "layout.html" %} {% block body %} {% if session.logged_in %}
Title:
Text:
{% endif %} {% endblock %} login.html ``` * **login.html** ``` {% extends "layout.html" %} {% block body %}

Login

{% if error %}

Error: {{ error }}{% endif %}

Username:
Password:
{% endblock %} ``` ### The Last 做完以上步驟就可以在近端完成我們的網頁，再來配合下一篇章所講的內容將近端完成的網頁推回遠端， 即可完成。