来源：麦叔编程作者：麦2叔开发一个包含数据库的简单网站系统是Web开发入门的最好方式。Flask是Python最热门的两个Web框架之一，是最简单易用，容易上手的框架。本系列使用Python的Flask框架开发一个简易的博客系统，共用时约90分钟。整个文章分为3部分，今天是第「2」部分。第3部分本周日发布。❝原计划是分成2部分，篇幅有点长，临时改成了3部分。❞第1部分的链接：是时候学习Web开发了！1小时用Python开发博客系统【1】整个文章包括以下内容，第1部分涵盖前5部分，今天包含中间的3部分：安装flask创建项目运行你的第一个网站创建一个像样的网页用样式表美化网页「使用模板和bootstrap」「创建文章数据库」「显示所有的文章」显示一篇文章发布新文章修改文章内容删除文章关于麦叔页面今天的文章信息量有点大，所有源代码都可以关注公众号「麦叔编程」，回复「fff」获得链接。我们开始吧！上次我们已经创建好了flask程序和一个应用了基本样式的页面：一、使用模板和Bootstrap我们要继续「美化」页面。大部分网站都有很多页面，这些页面都会共用同样的菜单栏。总不能开发没页面的时候都要把菜单栏写一遍吧？这里就用到了「模板」的概念，我们创建一个模板，模板包含了菜单等共同的部分，而具体页面只要往模板中填空就行了。我们的博客最终的样式是这样的，它包含了「列表」，「新建」，「详情」，「修改」，「关于麦叔」等多个页面。这些页面共用同一个模板。1.下载JavaScript和CSS文件我们需要用到jquery和bootstrap，先去我的git上下载这几个文件，下载方法：关注麦叔编程，回复210820。下载完后分别放在static目录下的css和js目录下。其中js目录需要先创建出来。2.在templates目录下创建一个新的文件：base.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">
<link rel="stylesheet" href="{{ url_for('static', filename= 'css/bootstrap.min.css') }}">
<title>{% block title %} {% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="{{ url_for('index')}}">麦叔的博客</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">关于麦叔</a>
</li>
</ul>
</div>
</nav>
<div class="container">
{% block content %} {% endblock %}
</div>
<script src="{{url_for('static', filename='js/jquery.slim.min.js')}}" ></script>
<script src="{{url_for('static', filename='js/popper.min.js')}}" ></script>
<script src="{{url_for('static', filename='js/bootstrap.min.js')}}" ></script>
</body>
</html>
这里面信息量有点大，我来一个个解释：使用url_for方法引入了前面下载的1个css文件和3个js文件。之前我们创建的style.css文件就没用了，可以删除了。在开头部分的{% block title %} {% endblock %}是标题(title)占位符，相当于定义了名为title的变量，后面会被具体内容替换掉。在中间部分的{% block content %} {% endblock %}是网页内容的占位符，相当于定义了名为content的变量，后面会被具体内容替换掉。修改index.html中的内容{% extends 'base.html' %}{% block content %}<h1>{% block title %} 欢迎来看麦叔的博客 {% endblock %}</h1>{% endblock %}第一行extends 'base.html'表示我们要使用前面定义的base.html这个模板。要使用这个模板，就要把模板中的两个占位符（两个填空题）给填写好。放在{% block content %}和{% endblock %}中间的所有内容都会填写在content这个占位符中。放在{% block title %}和{% endblock %}中间的内容会填写在title占位符中。注意这里的title变量会被重用。它既是title占位符的内容，也是content占位符的一部分。刷新页面，应该看到如下的效果。如果不是，仔细检查一下哪里是不是漏掉了，或者拼写错误了。这里虽然没有很大的变化，但是我们已经搭建好了模板，以后开发的页面内容都可以重用这个模板，而页面本身会变得很简单。二、创建文章数据库博客系统会有很多文章，我们要把这些文章保存到数据库。数据库有很多选择，比如MySQL, postgresql，Oracle, sqlite3等。我们今天要使用最轻量级的数据库sqlite3，Python自带了这个库，所以不需要额外安装。在blog.py同目录下创建一个文件db.sql，里面是创建数据库表的SQL语句：DROP TABLE IF EXISTS posts;CREATE TABLE posts (id INTEGER PRIMARY KEY AUTOINCREMENT,created TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,title TEXT NOT NULL,content TEXT NOT NULL);首先看看posts表是否存在，如果存在，先删除它。创建一个名为posts的表，其中包含id，title，content以及创建时间（created)等字段。在blog.py同目录下创建文件init_db.py这是一个python代码文件，它连接到sqlite数据库，执行上面的db.sql中的语句，然后再插入两条文章。具体细节见注释：import sqlite3# 创建数据库链接connection = sqlite3.connect('database.db')# 执行db.sql中的SQL语句with open('db.sql') as f:connection.executescript(f.read())# 创建一个执行句柄，用来执行后面的语句cur = connection.cursor()# 插入两条文章cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",('学习Flask1', '跟麦叔学习flask第一部分'))cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",('学习Flask2', '跟麦叔学习flask第二部分'))# 提交前面的数据操作connection.commit()# 关闭链接connection.close()打开一个命令行，运行init_db.py如果没有报错，就会发现文件夹下多了database.db，这就是数据库文件。三、展示文章列表现在数据库里有两篇文章，我们可以使用python从数据库中获取数据，并且展现到网页上。修改blog.py，具体细节见注释import sqlite3 #引入sqlite3from flask import Flask, render_templateapp = Flask(__name__) # 创建一个函数用来获取数据库链接def get_db_connection():# 创建数据库链接到database.db文件conn = sqlite3.connect('database.db')# 设置数据的解析方法，有了这个设置，就可以像字典一样访问每一列数据conn.row_factory = sqlite3.Rowreturn [email protected]('/') def index():# 调用上面的函数，获取链接conn = get_db_connection()# 查询所有数据，放到变量posts中posts = conn.execute('SELECT * FROM posts').fetchall()conn.close()#把查询出来的posts传给网页return render_template('index.html', posts=posts) @app.route('/about')def about():return render_template('about.html')修改index.html之前只显示了一个标题，现在要循环blog.py中传过来的posts列表，把每一篇文章显示出来。注意for循环在页面中的写法，和python代码很类似，只不过要用{%和%}包起来。{% extends 'base.html' %}{% block content %}<h1>{% block title %} 欢迎来看麦叔的博客 {% endblock %}</h1>{% for post in posts %}<a href="#"><h2>{{ post['title'] }}</h2></a><span class="badge badge-primary">{{ post['created'] }}</span><hr>{% endfor %}{% endblock %}刷新页面，应该可以看到这样的效果：如果不行，仔细对比一下，看看少了什么或者有没有拼写错误。今天就到这里了，后面的部分会在本周日发布，到时候也会发视频到bilibili，请保持关注。整个文章包括以下内容，第1部分涵盖前5部分，今天包含后面的部分：安装flask创建项目运行你的第一个网站创建一个像样的网页用样式表美化网页使用模板和bootstrap创建文章数据库显示所有的文章「显示一篇文章」「发布新文章」「修改文章内容」「删除文章」「关于麦叔页面」