首页 前端知识 Python Flask 从零开始开发博客网站

Python Flask 从零开始开发博客网站

2024-10-17 11:10:59 前端知识 前端哥 717 883 我要收藏

一个简单的 Flask 博客系统的开发过程。

步骤1:安装 Flask

首先,我们需要安装 Flask。可以使用 pip 命令进行安装:

pip install flask
复制

步骤2:创建 Flask 应用

在你的代码文件夹中,创建一个名为 app.py 的文件,并在其中编写以下代码:

from flask import Flask
app = Flask(__name__)
if __name__ == '__main__':
app.run(debug=True)
复制

这段代码会创建一个 Flask 应用实例,并在本地服务器上启动应用。

步骤3:创建主页路由

app.py 文件中添加一个路由,用于显示网站的主页:

@app.route('/')defindex():
return'Hello, world!'
复制

这个路由将返回一个简单的 “Hello, world!” 字符串,当用户访问网站主页时将会显示出来。

步骤4:创建博客文章路由

接下来,我们将添加一个路由,用于显示所有博客文章的列表,并提供一个界面,使用户能够添加新的博客文章。

@app.route('/posts')defposts():
return'List of all blog posts'@app.route('/posts/new')defnew_post():
return'Form to create a new blog post'
复制

这里我们定义了两个路由。第一个 /posts 路由将返回所有博客文章的列表,而第二个 /posts/new 路由则会提供一个表单,允许用户创建一个新的博客文章。

步骤5:渲染 HTML 模板

现在,我们需要为每个路由创建一个 HTML 模板。创建一个名为 templates 的文件夹,并在其中添加两个模板文件:index.htmlnew_post.html。代码如下:

index.html

<!DOCTYPE html><html><head>
<title>My Blog</title></head><body>
<h1>Welcome to my blog!</h1>
<ul>
<li><ahref="/posts">All Posts</a></li>
<li><ahref="/posts/new">New Post</a></li>
</ul></body></html>
复制

new_post.html

<!DOCTYPE html><html><head>
<title>New Blog Post</title></head><body>
<h1>Create a new blog post</h1>
<formmethod="post">
<labelfor="title">Title:</label>
<inputtype="text"name="title"><br><br>
<labelfor="content">Content:</label>
<textareaname="content"></textarea><br><br>
<inputtype="submit"value="Create">
</form></body></html>
复制

现在我们需要在路由中使用这些模板。更改 app.py 中的路由代码如下:

from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')defindex():
return render_template('index.html')
@app.route('/posts')defposts():
return render_template('posts.html')
@app.route('/posts/new')
复制

步骤7:创建博客文章页面

现在我们已经能够创建和更新博客文章了,我们需要添加一个页面来显示博客文章的详细信息。我们将在这个页面中显示文章的标题、作者、日期和内容。

app.py 文件中添加以下代码:

@app.route('/post/<int:post_id>')
def post(post_id):
post = Post.query.filter_by(id=post_id).one()
return render_template('post.html', post=post)
复制

这个函数将获取给定 post_id 的博客文章,并将其传递给 post.html 模板进行渲染。

templates 文件夹中创建一个名为 post.html 的文件,并添加以下代码:

{% extends 'base.html' %}
{% block content %}
<h2>{{ post.title }}</h2>
<p>By {{ post.author }} on {{ post.date.strftime('%Y-%m-%d') }}</p>
<p>{{ post.content }}</p>
{% endblock %}
复制

这个模板将渲染博客文章的标题、作者、日期和内容。

步骤8:创建博客首页

现在我们已经能够创建和更新博客文章,并能够显示单篇文章的详细信息,我们需要添加一个博客首页来显示所有文章的列表。我们将在这个页面中显示文章的标题、作者、日期和一部分内容。

app.py 文件中添加以下代码:

@app.route('/')
def index():
posts = Post.query.order_by(Post.date.desc()).all()
return render_template('index.html', posts=posts)
复制

这个函数将获取所有博客文章,并将它们按照日期的倒序进行排序,然后将它们传递给 index.html 模板进行渲染。

templates 文件夹中创建一个名为 index.html 的文件,并添加以下代码:

{% extends 'base.html' %}
{% block content %}
{% for post in posts %}
<div class="post">
<h2><a href="{{ url_for('post', post_id=post.id) }}">{{ post.title }}</a></h2>
<p class="date">{{ post.date.strftime('%Y-%m-%d') }}</p>
<div class="content">{{ post.content[:100] }}...</div>
</div>
{% endfor %}
{% endblock %}
复制

这个模板将渲染所有博客文章的标题、日期和一部分内容,并为每篇文章创建一个链接,指向文章的详细信息页面。

步骤9:添加样式

现在我们已经创建了博客系统的主要功能,我们需要添加一些样式来让它看起来更好看。我们将使用 Bootstrap 框架来添加样式。

static 文件夹中创建一个名为 css 的文件夹,在其中创建一个名为 main.css 的文件,并添加以下代码:

body {
font-family: Arial, sans-serif;
}
.post {
margin-bottom: 30px;
}
.post h2 {
margin-bottom: 5px;
}
.post .date {
color: #999;
margin-bottom: 5px;
}
.post .content {
margin-top: 10px;
复制

步骤10:在博客首页添加分页功能

我们需要在首页上显示多篇文章,所以需要为我们的博客系统添加分页功能。

app/main/views.py 中添加以下代码:

@main.route('/')
def index():
page = request.args.get('page', 1, type=int)
pagination = Post.query.order_by(Post.timestamp.desc()).paginate(
page, per_page=current_app.config['POSTS_PER_PAGE'],
error_out=False)
posts = pagination.items
return render_template('index.html', posts=posts, pagination=pagination)
复制

app/templates/index.html 中修改以下代码:

{% extends 'base.html' %}
{% block content %}
<div class="row">
<div class="col-md-8">
{% for post in posts %}
<div class="post-preview">
<a href="{{ url_for('.post', id=post.id) }}">
<h2 class="post-title">
{{ post.title }}
</h2>
<h3 class="post-subtitle">
{{ post.body[:100] }}...
</h3>
</a>
<p class="post-meta">Posted by {{ post.author.username }} on {{ post.timestamp.strftime('%Y-%m-%d') }}</p>
</div>
<hr>
{% endfor %}
<div class="clearfix">
<a class="btn btn-primary float-right" href="{{ url_for('.index', page=pagination.next_num) }}">Older Posts &rarr;</a>
</div>
</div>
{% include 'sidebar.html' %}
</div>
{% endblock %}
复制

我们将首页的文章列表改成了动态生成的,每页显示 POSTS_PER_PAGE 篇文章,我们还添加了一个分页链接。

现在我们需要设置每页显示的文章数量,在 config.py 中添加以下配置:

class Config:
# ...
POSTS_PER_PAGE = 10
复制

步骤11:添加文章分类和标签功能

我们需要为文章添加分类和标签,这样我们的读者就可以通过分类或标签找到他们感兴趣的文章。

首先在 app/models.py 中添加 CategoryTag 模型:

class Category(db.Model):
__tablename__ = 'categories'
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(64), unique=True)
def __repr__(self):
return '<Category %r>' % self.name
class Tag(db.Model):
__tablename__ = 'tags'
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(64), unique=True)
def __repr__(self):
return '<Tag %r>' % self.name
复制

我们还需要为 Post 模型添加外键,使得文章可以关联到分类和标签:

class Post(db.Model):
__tablename__ = 'posts'# ...
category_id = db.Column(db.Integer, db.ForeignKey('categories.id'))
tag_id = db.Column(db.Integer, db.ForeignKey('tags.id'))
复制

接下来在 app/main/forms.py 中添加以下表单:

class PostForm(FlaskForm):
title = StringField('Title', validators=[DataRequired()])
body = TextAreaField('Body', validators=[DataRequired()])
category = SelectField('Category', coerce=int, default=1)
复制

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19124.html
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!