当前位置:首页 > 技术分析 > 正文内容

是时候学习Web开发了,1小时用Python开发一个博客系统

ruisui883个月前 (02-10)技术分析16

来源:麦叔编程

作者:麦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程序和一个应用了基本样式的页面:

一、使用模板和Bootstrap

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

大部分网站都有很多页面,这些页面都会共用同样的菜单栏。总不能开发没页面的时候都要把菜单栏写一遍吧?

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

我们的博客最终的样式是这样的,它包含了「列表」「新建」「详情」「修改」「关于麦叔」等多个页面。这些页面共用同一个模板。

1.下载JavaScript和CSS文件

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

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

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



  
    
    
    
    {% block title %} {% endblock %}
  
  
    
    
{% block content %} {% endblock %}

这里面信息量有点大,我来一个个解释:

  • 使用url_for方法引入了前面下载的1个css文件和3个js文件。之前我们创建的style.css文件就没用了,可以删除了。
  • 在开头部分的{% block title %} {% endblock %}是标题(title)占位符,相当于定义了名为title的变量,后面会被具体内容替换掉。
  • 在中间部分的{% block content %} {% endblock %}是网页内容的占位符,相当于定义了名为content的变量,后面会被具体内容替换掉。
  1. 修改index.html中的内容{% extends 'base.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 #引入sqlite3
    from flask import Flask, render_template
    app = Flask(__name__)
    # 创建一个函数用来获取数据库链接
    def get_db_connection():
    # 创建数据库链接到database.db文件
    conn = sqlite3.connect('database.db')
    # 设置数据的解析方法,有了这个设置,就可以像字典一样访问每一列数据
    conn.row_factory = sqlite3.Row
    return 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. 关于麦叔页面

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/1848.html

标签: aria-expanded
分享给朋友:

“是时候学习Web开发了,1小时用Python开发一个博客系统” 的相关文章

react hooks自定义组件居然能这样做

前言  这里写一下如何封装可复用组件。首先技术栈 react hooks + props-type + jsx封装纯函数组件。类组件和typeScript在这不做讨论,大家别白跑一趟。接下来会说一下封装可复用组件的思路,比如一个新手应该怎么去封装,都需要有哪些东西。  然后说一些复杂组件需要的功能,...

10分钟搞定gitlab-ci自动化部署

gitlab-ci 是持续集成工具/自动化部署工具,类似 jenkins。持续集成 是将代码集成到共享存储库并尽可能早地自动构建/测试每个更改的实践 - 通常一天几次。概述在编码完成时都会进行打包发布过程,如果每次都手动操作这一步骤就会浪费时间,效率低下。所以就有了持续集成。准备事项请提前安装以下软...

一次Java内存占用高的排查案例,解释了我对内存问题的所有疑问

问题现象7月25号,我们一服务的内存占用较高,约13G,容器总内存16G,占用约85%,触发了内存报警(阈值85%),而我们是按容器内存60%(9.6G)的比例配置的JVM堆内存。看了下其它服务,同样的堆内存配置,它们内存占用约70%~79%,此服务比其它服务内存占用稍大。那为什么此服务内存占用稍大...

Vue实战篇|使用路由管理用户权限(动态路由)

权限控制是后台管理系统比较常见的需求,如果我们需要对某些页面的添加权限控制的话,那我们可以在路由管理中的权限做一些校验,没有通过权限校验的给出相应的提示或者直接跳转到报错页面。跟着我一起来学vue实战篇路由管理权限吧!权限校验函数getCurrentAuthority()函数用于获取当前用户权限,一...

vue 开发规范

项目运行指南(#项目运行指南)开发本地环境(#开发本地环境)开发相关插件/工具(#开发相关插件工具)开发规范(#开发规范)vue(#vue)【数据流向】(#数据流向)【慎用全局注册】(#慎用全局注册)【组件名称】(#组件名称)【组件中的 CSS】(#组件中的-css)【统一标签顺序】(#统一标签顺序...

精品微信小程序在线考试系统+后台管理系统|前后...

《微信小程序在线考试系统+后台管理系统|前后分离VUE》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等本系统包含微信小程序前台和Java做的后台管理系统,该后台采用前后台前后分离的形式使用Java+VUE微信小程序——前台涉及技术:WXML 和 WXSS、JavaScript...