Day07 后台管理与发布文章

Day07 后台管理与发布文章

源代码: https://github.com/LToddy/blog

技术交流群:630398887(欢迎一起吹牛)

写在前面的话：如果你实在不会写页面,复制粘贴你会吧.

https://getbootstrap.com/docs/3.3/examples/theme/

这个页面是,bootstrap样式表的例样,

http://getbootstrap.com/docs/4.0/examples/

这个页面是,你进去看那个页面合适,你点进去,然后右键查看网页源代码,复制就好了,顺便说一下,别忘了把CSS也复制了.

我们来定义下我们的文章模型,文章内容放到数据库里面，然后通过查询文章标题来，在主页建立文章链接。

app/models.py

class Article(db.Model):
    __tablename__ = 'articles'
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(64))
    content = db.Column(db.Text)

文章模型很简单，一个id，一个文章标题，一个文章的内容这三个字段。
content = db.Column(db.Text),这里，回顾一下或者百度一下SQLAlchemy的列模型。

因为我们文章内容可不是几个字，而是很多上千上万字说不定，所以就不能再用简单的db.String来处理了。
我们使用db.Text这个，他对长文本做了优化.

当我们有了这个数据库的文章模型之后，为了给数据库添加数据，那么我们还需要相对应的表单：

app/admin/forms.py

class PostForm(FlaskForm):
    title = StringField('文章标题:', validators=[Required()])
    content = TextAreaField('文章内容', validators=[Required()])
    submit = SubmitField('发布')

你看注意看变量的名字，我们最可能的让表单和文章模型中的变量去相同的名字，这样方便。

OK,继续。我们有了表单，要在页面中呈现出来。

app/admin/views.py

from ..models import Article

@admin.route('/', methods=['GET', 'POST'])
def index():
    form = PostForm()
    if not current_user.is_authenticated:
        return redirect(url_for('admin.login'))
    if form.validate_on_submit():
        try:
            article = Article(title=form.title.data, content=form.content.data)
            db.session.add(article)
            form.title.data = ''
            form.content.data = ''
            flash('发布成功')
        except:
            flash('文章标题有重复')
    return render_template('admin/index.html', form=form)

这段代码也没什么难度，先去创建一个表单form，然后判断一下你是否登录了，没登录的话就会重定向到登录界面。
继续往下，让你提交表单的时候，这里用到了一个try - catch语句，其实这里原因是，我最初想把那个数据库文章模型中title字段设置成unique的，title = db.Column(db.String(64),unique=True),后来想想算了，所不定有相同标题的文章呢。然后就是从表单中获取数据,来构件新的文章，然后存到数据库里面。
flash就是用来做一个提示，方便你自己知道你都干了啥事。

OK，把我们的HTML页面也说一下。

{% extends 'admin/base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block navbar %}
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>