Merge pull request #290 from greyli/new-examples

Add new examples for the second edition
greyli · May 16, 2024 · 81dbf54 · 81dbf54
2 parents 6574226 + 52a528e
commit 81dbf54
Show file tree

Hide file tree

Showing 28 changed files with 860 additions and 43 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,33 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.{js,py}]
+charset = utf-8
+
+# 4 space indentation
+[*.py]
+indent_style = space
+indent_size = 4
+
+# Tab indentation (no size specified)
+[Makefile]
+indent_style = tab
+
+# Indentation override for all JS under lib directory
+[lib/**.js]
+indent_style = space
+indent_size = 2
+
+# Matches the exact files either package.json or .travis.yml
+[*.{json,yaml,yml}]
+indent_style = space
+indent_size = 2
diff --git a/.gitignore b/.gitignore
@@ -114,4 +114,6 @@ docs/_build/
 
 # Upload file
 demos/form/uploads/*
-!demos/form/uploads/.gitkeep
+!demos/form/uploads/.gitkeep
+examples/album/uploads/*
+!examples/album/uploads/.gitkeep
diff --git a/examples/c4/templates/bootstrap-flask.html → docs/book/4/snippets/c4.md b/examples/c4/templates/bootstrap-flask.html → docs/book/4/snippets/c4.md
@@ -1,15 +1,32 @@
-{% extends 'base.html' %}
-{% from 'bootstrap/form.html' import render_field, render_form, render_form_row %}
+# 第 4 章：表单
 
-{% block metas %}
-{{ super() }}
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-{% endblock %}
 
-{% block styles %}
-{{ super() }}
-<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
-{% endblock %}
+## 使用 Bootstrap-Flask 渲染表单
+
+base.html
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>HelloFlask</title>
+    {% block styles %}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
+    {% endblock %}
+</head>
+<body>
+    {% block content %}{% endblock %}
+</body>
+</html>
+```
+
+index.html
+
+```html
+{% extends 'base.html' %}
+{% from 'bootstrap5/form.html' import render_field, render_form, render_form_row %}
 
 {% block content %}
 <div class="container">
@@ -33,3 +50,4 @@ <h2>1. render_form_row</h2>
     </form>
 </div>
 {% endblock %}
+```
diff --git a/examples/album/app.py b/examples/album/app.py
@@ -0,0 +1,49 @@
+import os
+import uuid
+
+from flask import Flask, render_template, flash, session, redirect, url_for, send_from_directory
+from flask_wtf import FlaskForm
+from wtforms import SubmitField
+from flask_wtf.file import FileField, FileRequired, FileAllowed, FileSize
+
+app = Flask(__name__)
+app.config['UPLOAD_PATH'] = os.path.join(app.root_path, 'uploads')
+app.config['SECRET_KEY'] = 'dev'
+
+
+class UploadPhotoForm(FlaskForm):
+    photo = FileField('Upload Photo', validators=[
+        FileRequired(),
+        FileAllowed(['jpg', 'jpeg', 'png', 'gif']),
+        FileSize(5 * 1024 * 1024)
+    ])
+    submit = SubmitField()
+
+
+def random_filename(origin_filename):
+    ext = os.path.splitext(origin_filename)[1]
+    new_filename = f'{uuid.uuid4().hex}{ext}'
+    return new_filename
+
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+
+@app.route('/photos/<path:filename>')
+def get_photo(filename):
+    return send_from_directory(app.config['UPLOAD_PATH'], filename)
+
+
+@app.route('/upload', methods=['GET', 'POST'])
+def upload():
+    form = UploadPhotoForm()
+    if form.validate_on_submit():
+        photo = form.photo.data
+        filename = random_filename(photo.filename)
+        photo.save(os.path.join(app.config['UPLOAD_PATH'], filename))
+        flash('Upload success.')
+        session['photos'] = [filename]
+        return redirect(url_for('index'))
+    return render_template('upload.html', form=form)
diff --git a/examples/album/static/favicon.ico b/examples/album/static/favicon.ico
diff --git a/examples/album/static/style.css b/examples/album/static/style.css
@@ -0,0 +1,62 @@
+body {
+  margin: auto;
+  width: 750px;
+}
+
+nav ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #333;
+}
+
+nav li {
+  float: left;
+}
+
+nav li a {
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+nav li a:hover {
+  background-color: #111;
+}
+
+main {
+  padding: 10px 20px;
+}
+
+.alert {
+  position: relative;
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  color: #004085;
+  background-color: #cce5ff;
+  border-color: #b8daff;
+}
+
+.error {
+  color: #721c24;
+  background-color: #f8d7da;
+  border-color: #f5c6cb;
+}
+
+img {
+  max-width: 100%;
+}
+
+footer {
+  font-size: 13px;
+  color: #888;
+  border-top: 1px solid #eee;
+  margin-top: 25px;
+  text-align: center;
+  padding: 20px;
+}
diff --git a/examples/album/templates/base.html b/examples/album/templates/base.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  {% block head %}
+  <meta charset="utf-8">
+  <title>{% block title %}HelloFlask - File Upload Example{% endblock %}</title>
+  <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
+  {% block styles %}
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css' ) }}">
+  {% endblock %}
+  {% endblock %}
+</head>
+
+<body>
+  <nav>
+    <ul>
+      <li><a href="{{ url_for('index') }}">HelloFlask</a></li>
+    </ul>
+  </nav>
+  <main>
+    {% for message in get_flashed_messages() %}
+    <div class="alert">{{ message }}</div>
+    {% endfor %}
+    {% block content %}{% endblock %}
+  </main>
+  <footer>
+    {% block footer %}
+    <small> &copy; 2023 <a href="https://greyli.com">Grey Li</a> /
+      <a href="https://github.com/greyli/helloflask">GitHub</a> /
+      <a href="https://helloflask.com">HelloFlask</a>
+    </small>
+    {% endblock %}
+  </footer>
+</body>
+
+</html>
diff --git a/examples/album/templates/index.html b/examples/album/templates/index.html
@@ -0,0 +1,12 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<p><a href="{{ url_for('upload') }}">&larr; Return</a></p>
+{% if session.photos %}
+  {% for filename in session.photos %}
+  <img src="{{ url_for('get_photo', filename=filename) }}">
+  {% endfor %}
+{% else %}
+  <p>No photos uploaded yet.</p>
+{% endif %}
+{% endblock %}
diff --git a/examples/album/templates/macros.html b/examples/album/templates/macros.html
@@ -0,0 +1,13 @@
+{% macro form_field(field) %}
+{{ field.label }}<br>
+{% if field.flags.required %}
+  {{ field(required='required', **kwargs) }}<br>
+{% else %}
+  {{ field(**kwargs) }}<br>
+{% endif %}
+{% if field.errors %}
+  {% for error in field.errors %}
+  <small class="error">{{ error }}</small><br>
+  {% endfor %}
+{% endif %}
+{% endmacro %}
diff --git a/examples/album/templates/upload.html b/examples/album/templates/upload.html
@@ -0,0 +1,10 @@
+{% extends 'base.html' %}
+{% from 'macros.html' import form_field %}
+
+{% block content %}
+<form method="post" enctype="multipart/form-data">
+  {{ form.csrf_token }}
+  {{ form_field(form.photo) }}
+  {{ form.submit }}
+</form>
+{% endblock %}
diff --git a/examples/album/uploads/.gitkeep b/examples/album/uploads/.gitkeep
diff --git a/examples/c1/.flaskenv b/examples/c1/.flaskenv
diff --git a/examples/c1/app.py b/examples/c1/app.py
diff --git a/examples/longtalk/app.py b/examples/longtalk/app.py
@@ -0,0 +1,15 @@
+from jinja2.utils import generate_lorem_ipsum
+from flask import Flask, render_template
+
+app = Flask(__name__)
+
+
+@app.route('/')
+def index():
+    post_body = generate_lorem_ipsum(n=3)
+    return render_template('index.html', post_body=post_body)
+
+
+@app.route('/more')
+def more():
+    return generate_lorem_ipsum(n=3)
diff --git a/examples/longtalk/static/favicon.ico b/examples/longtalk/static/favicon.ico