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
<!doctype html>
<title>Flaskr</title>
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<div class=page>
<h1>Flaskr</h1>
<div class=metanav>
{% if not session.logged_in %}
<a href="{{ url_for('login') }}">log in</a>
{% else %}
<a href="{{ url_for('logout') }}">log out</a>
{% endif %}
</div>
{% for message in get_flashed_messages() %}
<div class=flash>{{ message }}</div>
{% endfor %}
{% block body %}{% endblock %}
</div>
show_entries.html
{% extends "layout.html" %}
{% block body %}
{% if session.logged_in %}
<form action="{{ url_for('add_entry') }}" method=post class=add-entry>
<dl>
<dt>Title:
<dd><input type=text size=30 name=title>
<dt>Text:
<dd><textarea name=text rows=5 cols=40></textarea>
<dd><input type=submit value=Share>
</dl>
</form>
{% endif %}
<ul class=entries>
{% for entry in entries %}
<li><h2>{{ entry.title }}</h2>{{ entry.text|safe }}
{% else %}
<li><em>Unbelievable. No entries here so far</em>
{% endfor %}
</ul>
{% endblock %}
login.html
login.html
{% extends "layout.html" %}
{% block body %}
<h2>Login</h2>
{% if error %}<p class=error><strong>Error:</strong> {{ error }}{% endif %}
<form action="{{ url_for('login') }}" method=post>
<dl>
<dt>Username:
<dd><input type=text name=username>
<dt>Password:
<dd><input type=password name=password>
<dd><input type=submit value=Login>
</dl>
</form>
{% endblock %}
The Last
做完以上步驟就可以在近端完成我們的網頁,再來配合下一篇章所講的內容將近端完成的網頁推回遠端,
即可完成。
Last updated