Add longtalk ajax example

greyli · Mar 10, 2023 · 8ac3b4d · 8ac3b4d
1 parent 517074c
commit 8ac3b4d
Show file tree

Hide file tree

Showing 5 changed files with 159 additions and 0 deletions.
diff --git a/examples/longtalk/app.py b/examples/longtalk/app.py
@@ -0,0 +1,16 @@
+from jinja2.utils import generate_lorem_ipsum
+from flask import Flask, jsonify, render_template
+
+app = Flask(__name__)
+app.secret_key = os.getenv('SECRET_KEY', 'secret string')
+
+
+@app.route('/')
+def index():
+    post_body = generate_lorem_ipsum(n=3)
+    return render_template('index.html', post_body=post_body)
+
+
+@app.route('/more')
+def load_post():
+    return generate_lorem_ipsum(n=3)
diff --git a/examples/longtalk/static/favicon.ico b/examples/longtalk/static/favicon.ico
diff --git a/examples/longtalk/static/style.css b/examples/longtalk/static/style.css
@@ -0,0 +1,88 @@
+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;
+}
+
+.note {
+    padding: 5px 10px 10px;
+    border-left: solid 2px #bbb;
+    margin-bottom: 20px;
+}
+
+.note form {
+    display: inline;
+}
+
+.info {
+    color: grey;
+}
+
+.btn {
+    font-family: Arial;
+    font-size: 12px;
+    padding: 5px 8px;
+    text-decoration: none;
+    cursor: pointer;
+    background-color: white;
+    color: black;
+    border: 1px solid #999999;
+}
+
+.btn:hover {
+    text-decoration: none;
+    border: 1px solid black;
+}
+
+footer {
+    font-size: 13px;
+    color: #888;
+    border-top: 1px solid #eee;
+    margin-top: 25px;
+    text-align: center;
+    padding: 20px;
+}
diff --git a/examples/longtalk/templates/base.html b/examples/longtalk/templates/base.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    {% block head %}
+    <meta charset="utf-8">
+    <title>{% block title %}HelloFlask - AJAX 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/longtalk/templates/index.html b/examples/longtalk/templates/index.html
@@ -0,0 +1,21 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<h1>校长讲话</h1>
+<div class="body">{{ post_body }}</div>
+<button id="load">加载更多</button>
+<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+<script type="text/javascript">
+$(function() {
+    $('#load').click(function() {
+        $.ajax({
+            url: '/more',
+            type: 'get',
+            success: function(data){
+                $('.body').append(data);
+            }
+        })
+    })
+})
+</script>
+{% endblock %}