关键词：
小白都能看懂的实战教程 手把手教你Python Web全栈开发 Flask(Python Web)实战系列之在线论坛系统 第二讲
这是小白都能看懂的实战教程 手把手教你Python Web全栈开发 的第二讲，如果文中有基础知识不太熟悉的话，可以看博主前几期的博客：
博主博客文章内容导航（实时更新）
更多优质文章推荐：
- 收藏！最详细的Python全栈开发指南 看完这篇你还不会Python全栈开发 你来打我!!!
- 一本教你如何在前端实现富文本编辑器
- 小白都能看得懂的教程 一本教你如何在前端实现markdown编辑器
- Flask学习(基本语法)
- 一文教会你Bootstrap，让你也可以快速建站
- 一文教你如何白嫖JetBrains全家桶（IDEA/PtChram/CLion）免费正版
- 小白都能看懂的实战教程 手把手教你Python Web全栈开发 (DAY 1)
- 小白都能看懂的实战教程 手把手教你Python Web全栈开发 (DAY 2)
- 小白都能看懂的实战教程 手把手教你Python Web全栈开发 (DAY 3)
- 小白都能看懂的实战教程 手把手教你Python Web全栈开发 (DAY 4)
- 小白都能看懂的实战教程 手把手教你Python Web全栈开发 (DAY 5)
- 小白都能看懂的实战教程 手把手教你Python Web全栈开发 (DAY 6)
- 小白都能看懂的实战教程 手把手教你Python Web全栈开发 (DAY 7)
本项目所有源码在GitHub开源，GitHub地址为：OnlineForumPlatform
有需要源码可以前去查看，喜欢的话可以star一下
在做完准备工作之后，我们就正式的开始开发了，在这本系列的第二讲中，博主将带领你实现在线论坛系统的导航条、注册、登录和主页功能，在实现的同时会讲解各个功能实现的原理，手把手的教你进入Python Web全栈开发，一个字一个字的代码完成本项目。
本文目录
2.1 导航栏实现
我们首先从导航栏开始开发，每个页面需要有导航栏，可以说一个非常常用的组件了。这里我们先创建一个hmtl页面base.html进行开发导航栏相关功能，将文件建立在templates文件夹中。
在这里先说明一下为什么要使用base.html这个名字，因为Jinja2模板是支持继承机制的，而导航栏又是几乎每个页面都需要使用到的一个组件，所以我们这里将导航栏这个文件base.html作为一个基类，其他所有的视图文件都继承自它，并在它的基础上进行重写相关的内容，实现各个视图的不同内容。
在创建完文件之后，由于我们这个项目前端UI部分使用Bootstrap进行快速建站，还有不会Bootstarp的同学可以看一下之前的这篇教程：什么？你还不会Bootstrap？一文教会你Bootstrap，让你也可以快速建站
我们这里选择一个3.4.0的版本，在html中引入：
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
在引用完成之后，我们先去bootstrap样式库中找一个喜欢的导航条样式，然后加入到我们的base.html中。
我们这里使用这个样式的，直接加入到base.html中：
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
插入之后我们打开网页就可以看到如下效果：
然后我们在根据我们的需求，对这个导航条进行一定的更改，并且为base.html页面划分几个block。
暂时先修改为这样，后续我们加完导航之后，还需再对各个标定的页面进行一个修改。修改之后的完整代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
% block title %
# 其他页面重写标题的地方#
% endblock %
</title>
% block css %
# 其他页面引用样式或者js的地方#
% endblock %
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="navigation_bar">
<nav class="navbar navbar-default">
<div class="container-fluid">
# 由于这里我们不需要使用商标，所以对Bran部分进行了删除#
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页<span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
查看详情
小白都能看懂的实战教程手把手教你pythonweb全栈开发(day5)(代码片段)
...劼（qíguānjié）,这个《小白都能看懂的实战教程手把手教你PythonWeb全栈开发》是一个零基础的实战教程，手把手带你开发一套系统，带你了解Pythonweb全栈开发，目前正在连续更新中，如果喜欢的话可以点... 查看详情
小白都能看懂的实战教程手把手教你pythonweb全栈开发(day6）(代码片段)
...劼（qíguānjié）,这个《小白都能看懂的实战教程手把手教你PythonWeb全栈开发》是一个零基础的实战教程，手把手带你开发一套系统，带你了解Pythonweb全栈开发，目前正在连续更新中，如果喜欢的话可以点... 查看详情
小白都能看得懂的教程看完这篇还不会生成随机验证码图片，你来打我！！！(代码片段)
...f08;IDEA/PtChram/CLion）免费正版小白都能看懂的实战教程手把手教你PythonWeb全栈开发(DAY1)小白都能看懂的实战教程手把手教你PythonWeb全栈开发(DAY2)小白都能看懂的实战教程手把手教你PythonWeb全 查看详情
手把手教你使用vuex，猴子都能看懂的教程
点击上方 高级前端进阶，回复“加群”加入我们一起学习，天天进步为什么要做这篇文集呢？市面上关于vuex的教程多如牛毛，甚至vuex被某些大神都封装出花儿来了；一方面是想从最简单最基础的地方带大家使用一下vuex，另... 查看详情
实战篇：小白都能看懂的linux安装oracle数据库详细教程(代码片段)
作者简介作者：LuciferLiu，中国DBA联盟(ACDU)成员。目前主要从事OracleDBA工作，曾从事Oracle数据库开发工作，主要服务于生产制造，汽车金融等行业。现拥有OracleOCP，OceanBaseOBCA认证，擅长Oracle数据库运维... 查看详情
小白都能看得懂的教程一本教你如何在前端实现markdown编辑器(代码片段)
小白都能看得懂的教程一本教你如何在前端实现markdown编辑器 大家好，我是亓官劼（qíguānjié），在【亓官劼】公众号、CSDN、GitHub、B站、华为开发者论坛等平台分享一些技术博文，主要包括前端开发、pyth... 查看详情
小白都能看懂的linux安装oracle数据库详细教程(代码片段)
作者简介作者：LuciferLiu，中国DBA联盟(ACDU)成员。目前主要从事OracleDBA工作，曾从事Oracle数据库开发工作，主要服务于生产制造，汽车金融等行业。现拥有OracleOCP，OceanBaseOBCA认证，擅长Oracle数据库运维... 查看详情
小白都能看懂的redis讲解--针对单个键操作集锦
1重命名键renamekeynewname可以对键重命名，下面的例子我们创建了一个key为name，value为luke的键值对。然后将name重命名为user，之后查询name就返回nil，而user是可以查到值的。127.0.0.1:6379>setnamelukeOK127.0.0.1:6379>getname"luke"127.0.0.1:6379&... 查看详情
小白都能看懂的关于mixins机制的理解(代码片段)
前言在学习Flutter源码的时候，看到各种复杂的mixin和on，为了便于后续Flutter的学习，这里有必要一起来份详细Dart的Mixin机制。什么是mixins首先看看官方文档的定义：Mixinsareawayofreusingaclass’scodeinmultipleclasshierarchie... 查看详情
小白都能看懂的关于mixins机制的理解(代码片段)
前言在学习Flutter源码的时候，看到各种复杂的mixin和on，为了便于后续Flutter的学习，这里有必要一起来份详细Dart的Mixin机制。什么是mixins首先看看官方文档的定义：Mixinsareawayofreusingaclass’scodeinmultipleclasshierarchie... 查看详情
小白都能看懂的linux系统下安装配置zabbix
实验环境：操作系统：Centos7.6服务器ip:192.168.10.100运行用户：root网络环境：InternetZabbix是一个基于web界面的提供分布式系统监控及网络功能的企业级的开源监控工具，做为一个企业运维人员来说，zabbix可以给企业和运维人员带来... 查看详情
[图解]小白都能看懂的fasterr-cnn–原理和实现细节(代码片段)
Contents [hide]1 论文原文2 介绍3 Anchors3.1 如何确定一个anchor是正样本还是负样本？4 实现细节5 调试信息6 参考资料论文原文FasterR-CNN:TowardsReal-TimeObjectDetectionwithRegionProposalNetworks介绍 FasterRCNN由RossB.Girshick在2016年提出ÿ 查看详情
小白都能看懂的分布式事务与2pc
2PC通信原理分布式事务的原子性什么是2PC2PC提交事务的过程2PC的全局提交规则2PC通信架构集中式2PC通信架构分层2PC通信架构线性2PC通信架构故障恢复站点故障报文丢失总结分布式事务的原子性一提到到事务，一般就会想到它... 查看详情
小白也能看懂的laravel核心概念讲解
自动依赖注入什么是依赖注入，用大白话将通过类型提示的方式向函数传递参数。实例1首先，定义一个类:/routes/web.phpclassBar{}假如我们在其他地方要使用到 Bar 提供的功能（服务），怎么办，直接传入参数即可：/routes/web.... 查看详情
小白都能看懂的sql零基础入门，一文带你轻松学会增删改查！(代码片段)
作者简介作者：LuciferLiu，中国DBA联盟(ACDU)成员。目前从事OracleDBA工作，曾从事Oracle数据库开发工作，主要服务于生产制造，汽车金融等行业。现拥有OracleOCP，OceanBaseOBCA认证，擅长Oracle数据库运维开发&#... 查看详情
手把手教你看懂zookeeper的选举过程(代码片段)
小白都能看懂Zookeeper的选举过程1.前提知识要点正式版ZAB协议:Zookeeper是非常重要的分布式协调组件，需要进行集群部署，集群中会以一主多从的形式进行部署。Zookeeper为了保持数据的一致性，使用了ZAB协议，这个... 查看详情
实战django--（你也能看懂的）注册与登录（带前端模板）
先是具体目录：（主要是注意templates和static的位置），其中person文件夹是上一期实战的，不用理会，login是本节实战app 项目urls.pyfromdjango.contribimportadminfromdjango.urlsimportpath,includeurlpatterns=[path(‘admin/‘,admin.site.urls),pa 查看详情