Flask 学习笔记 --12

github中的记录。

天啊，吃饭前几乎写完了这篇笔记。
吃完饭，用Markdown修改了一下以前的文章，下午写的东西全没了。
没事儿，再写一遍，印象更深刻，只是少了很多解释。

Version–14 ：

1 在dashboard页面添加 Add Article 链接

点击Add Article可以跳转到add_article页面

dashboard.html:

{% extends 'layout.html' %}

{% block body %}
    <h1>Dashboard</h1>
    <a href="/add_article" class="btn btn-success">Add Article</a>
{% endblock %}

2 add_article这部分的路由，视图函数代码和register部分类似，都是使用WTForms创建表单，接收用户输入数据，将用户输入数据写入mysql数据库。

mysql中的操作也类似：

for-python@ubuntu:~$ mysql -u root -p FLASKAPP
Enter password: 

mysql> SHOW TABLES;
+--------------------+
| Tables_in_FLASKAPP |
+--------------------+
| users              |
+--------------------+
1 row in set (0.00 sec)

mysql> CREATE TABLE articles (id INT(11) AUTO_INCREMENT PRIMARY KEY, title VARCHAR(200), author VARCHAR(100), body TEXT, create_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP);
Query OK, 0 rows affected (0.42 sec)

mysql> SHOW TABLES;
+--------------------+
| Tables_in_FLASKAPP |
+--------------------+
| articles           |
| users              |
+--------------------+
2 rows in set (0.01 sec)

flaskapp.py中：

class ArticleForm(FlaskForm):
    title = StringField('Title', [validators.Length(min=1, max=200)])
    body = TextAreaField('Body', [validators.Length(min=3)])

# Add Article

@app.route('/add_article', methods=['GET', 'POST'])
@is_logged_in
def add_article():
    form = ArticleForm(request.form)
    if request.method == 'POST' and form.validate_on_submit():
        title = form.title.data
        body = form.body.data

        # Create Cursor
        cur = mysql.connection.cursor()

        # Execute
        cur.execute("INSERT INTO articles(title, body, author) VALUES(%s, %s, %s)",
                    (title, body, session['username']))

        # Commit to DB
        mysql.connection.commit()

        # Close
        cur.close()

        flash('Article Created', 'success')

        return redirect(url_for('dashboard'))
    return render_template('add_article.html', form=form)

add_article.html:

{% extends 'layout.html' %}

{% block body %}
  <h1>Add Artitle</h1>
  {% from "includes/_formhelpers.html" import render_field %}
  <form method="POST",action="">
    {{ form.csrf_token }}
    <div class="form-group">
      {{render_field(form.title,class_="form-control")}}
    </div>
    <div class="form-group">
      {{render_field(form.body, class_="form-control")}}
    </div>
    <p><input type="submit" class="btn btn-primary" value="Submit"></p>
  </form>
{% endblock %}

3 然后在add_article页面输入数据，点击提交后，mysql中会有相应的记录：

从数据库中删除了几篇文章，这里新添加的文章id=6，剩余的数据和在网页中的一致的

mysql> SELECT * FROM articles;
+----+-----------+--------+---------------------------------------------------+---------------------+
| id | title     | author | body                                              | create_date         |
+----+-----------+--------+---------------------------------------------------+---------------------+
|  1 | FlaskAPP  | muhan  | This is a webapp based on python flask framework. | 2017-07-31 17:53:59 |
|  6 | SomeTitle | muhan  | The editor will be decorated later.               | 2017-07-31 20:20:27 |
+----+-----------+--------+---------------------------------------------------+---------------------+
2 rows in set (0.00 sec)

4 这个编辑器太简陋了，可以应用一个MarkDown这样的编辑器，比如CKEditor
http://ckeditor.com/download页面有JavaScript下载链接，
http://cdn.ckeditor.com/页面有用法。

layout.html 里的body标签中添加 js 地址，然后用reolace()方法，替换掉id=”editor”的文本

layout.html 中：

        <script src="//cdn.ckeditor.com/4.7.1/basic/ckeditor.js"></script>
        <script type="text/javascript">
            CKEDITOR.replace('editor')
        </script>

add_article.html中为form.body 添加了id属性：

    <div class="form-group">
      {{render_field(form.body, class_="form-control",id="editor")}}
    </div>

然后，编辑器升级了：

Version–15:

然后要实现在dashboard 页面显示添加的文章。
看起来很简洁。验证用户在登录状态——创建指针，执行mysql命令——把mysql中所有数据存储到articles变量中——将articles当作参数传入dashboard.html模板。

flaskapp.py中

@app.route('/dashboard')
@is_logged_in
def dashboard():
    cur = mysql.connection.cursor()

    result = cur.execute("SELECT * FROM articles")

    articles = cur.fetchall()

    if result > 0:
        return render_template("dashboard.html",articles=articles)

    else:
        msg = "No Articles Found"
        return render_template("dashboard.html")

    cur.close()

dashboard.html:

{% extends 'layout.html' %}

{% block body %}
  <h1>Dashboard</h1>
  <a class="btn btn-success" href="/add_article">Add Article</a>
  <hr>
  <table class="table table-striped">
    <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Author</th>
        <th>Date</th>
        <th></th>
        <th></th>
    </tr>
    {% for article in articles %}
      <tr>
        <td>{{article.id}}</td>
        <td>{{article.title}}</td>
        <td>{{article.author}}</td>
        <td>{{article.create_date}}</td>
        <td><a href="#" class="btn btn-default pull-right">Edit</a></td>
        <td><a href="#" class="btn btn-danger">Delete</a></td>
      </tr>
    {% endfor %}
  </table>
{% endblock %}

注：

1. 
   
2. 这里创建了一个表格，表格第一行有ID、Title、Author、Date标题
   
3. 剩余行，使用for循环将传入的articles参数中的数据按行输出，每行最后添加Edit 和Delete链接。（暂时Edit、Delete 没有用）

Dashboard页面效果：