作者:麦叔程式设计

译者:麦2叔

合作开发三个包涵资料库的单纯中文网站控制系统是Web合作开发进阶的最合适形式。

Flask是Python最炙手可热的三个Web架构众所周知,是最单纯功能强大,难进阶的架构。

本系列产品采用Python的Flask架构合作开发三个固定式的网志控制系统,相连接泽列涅90两分钟。整座该文分成3部份,那时是第「2」部份。第3部份下周日正式发布。

原计划是分成2部份,字数有点儿长,临时性换成了3部份。

第1部份的镜像:

是这时候自学Web合作开发了!1半小时用Python合作开发网志控制系统【1】

整座该文主要包括附注,第1部份囊括前5部份,那时包涵尾端的3部份:

  1. 加装flask
  2. 建立工程项目
  3. 运行你的第三个中文网站
  4. 建立三个像样的网页
  5. 用样式表美化网页
  6. 「采用模板和bootstrap」
  7. 「建立该文资料库」
  8. 「显示所有的该文」
  9. 显示一篇该文
  10. 正式发布新该文
  11. 修改该文内容
  12. 删除该文
  13. 关于麦叔页面

那时的该文信息量有点儿大,所有源代码都可以关注公众号「麦叔程式设计」,回复「fff」获得镜像。

我们开始吧!上次我们已经建立好了flask程序和三个应用了基本样式的页面:

建立博客(建立博客英文)-第1张

一、采用模板和Bootstrap

我们要继续「美化」页面。

大部份中文网站都有很多页面,这些页面都会相连接同样的菜单栏。总不能合作开发没页面的这时候都要把菜单栏写一遍吧?

这里就用到了「模板」的概念,我们建立三个模板,模板包涵了菜单等共同的部份,而具体页面只要往模板中填空就行了。

我们的网志最终的样式是这样的,它包涵了「列表」「新建」「详情」「修改」「关于麦叔」等多个页面。这些页面相连接同三个模板。

建立博客(建立博客英文)-第2张

1.下载JavaScript和CSS文件

我们需要用到jquery和bootstrap,先去我的git上下载这几个文件,下载方法:关注麦叔程式设计,回复210820。

下载完后分别放在static目录下的css和js目录下。其中js目录需要先建立出来。

建立博客(建立博客英文)-第3张

2.在templates目录下建立三个新的文件:base.html

html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"><linkrel="stylesheet"href="{{ url_for(static, filename= css/bootstrap.min.css) }}"><title>{% block title %} {% endblock %}title>head><body><navclass="navbar navbar-expand-md navbar-light bg-light"><aclass="navbar-brand"href="{{ url_for(index)}}">麦叔的网志a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="navbarNav"aria-controls="navbarNav"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon">span>button><divclass="collapse navbar-collapse"id="navbarNav"><ulclass="navbar-nav"><liclass="nav-item active"><aclass="nav-link"href="">关于麦叔a>li>ul>div>nav><divclass="container">{% block content %} {% endblock %}div><scriptsrc="{{url_for(static, filename=js/jquery.slim.min.js)}}">script><scriptsrc="{{url_for(static, filename=js/popper.min.js)}}">script><scriptsrc="{{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的变量,后面会被具体内容替换掉。
建立博客(建立博客英文)-第4张
  1. 修改index.html中的内容{% extendsbase.html%}{% block content %}

    {% block title %} 欢迎来看麦叔的网志 {% endblock %}

    {% endblock %}
  2. 第一行extends base.html表示我们要采用前面定义的base.html这个模板。要采用这个模板,就要把模板中的三个占位符(三个填空题)给填写好。
  3. 放在{% block content %}和{% endblock %}尾端的所有内容都会填写在content这个占位符中。
  4. 放在{% block title %}和{% endblock %}尾端的内容会填写在title占位符中。注意这里的title变量会被重用。它既是title占位符的内容,也是content占位符的一部份。
  5. 刷新页面,应该看到如下的效果。如果不是,仔细检查一下哪里是不是漏掉了,或者拼写错误了。这里虽然没有很大的变化,但是我们已经搭建好了模板,以后合作开发的页面内容都可以重用这个模板,而页面本身会变得很单纯。

二、建立该文资料库

网志控制系统会有很多该文,我们要把这些该文保存到资料库。

资料库有很多选择,比如MySQL, postgresql,Oracle, sqlite3等。

我们那时要采用最轻量级的资料库sqlite3,Python自带了这个库,所以不需要额外加装。

  1. 在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);
  2. 首先看看posts表是否存在,如果存在,先删除它。
  3. 建立三个名为posts的表,其中包涵id,title,content以及建立时间(created)等字段。
  4. 在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()
  5. 打开三个命令行,运行init_db.py如果没有报错,就会发现文件夹下多了database.db,这就是资料库文件。

三、展示该文列表

现在资料库里有两篇该文,我们可以采用python从资料库中获取数据,并且展现到网页上。

  1. 修改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 conn@app.route(/)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)
  2. 修改index.html之前只显示了三个标题,现在要循环blog.py中传过来的posts列表,把每一篇该文显示出来。注意for循环在页面中的写法,和python代码很类似,只不过要用{%和%}包起来。{% extends base.html %}{% block content %}

    {% block title %} 欢迎来看麦叔的网志 {% endblock %}

    {% for post in posts %}

    {{ post[title] }}

    {{ post[created] }}
    {% endfor %}{% endblock %}
  3. 刷新页面,应该可以看到这样的效果:如果不行,仔细对比一下,看看少了什么或者有没有拼写错误。

那时就到这里了,后面的部份会在下周日正式发布,到这时候也会发视频到bilibili,请保持关注。

整座该文主要包括附注,第1部份囊括前5部份,那时包涵后面的部份:

  1. 加装flask
  2. 建立工程项目
  3. 运行你的第三个中文网站
  4. 建立三个像样的网页
  5. 用样式表美化网页
  6. 采用模板和bootstrap
  7. 建立该文资料库
  8. 显示所有的该文
  9. 「显示一篇该文」
  10. 「正式发布新该文」
  11. 「修改该文内容」
  12. 「删除该文」
  13. 关于麦叔页面