[video(video-2jwWp550-1589937184219)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=883233031)(image-https://ss.csdn.net/p?http://i0.hdslb.com/bfs/archive/bb74ff31534a488eaa818a4e7a23d1176c439440.jpg)(title-那些常见网页中的彩蛋，你都知道吗？)]
(image-https://ss.csdn.net/p?http://i0.hdslb.com/bfs/archive/bb74ff31534a488eaa818a4e7a23d1176c439440.jpg)(title-%E9%82%A3%E4%BA%9B%E5%B8%B8%E8%A7%81%E7%BD%91%E9%A1%B5%E4%B8%AD%E7%9A%84%E5%BD%A9%E8%9B%8B%EF%BC%8C%E4%BD%A0%E9%83%BD%E7%9F%A5%E9%81%93%E5%90%97%EF%BC%9F){kind=link}
百度、知乎、B站你可能经常会用到，但是你知道隐藏在其中的彩蛋吗？Google、Firefox，你可能也会经常使用，但是你发现了它们的彩蛋吗？我们一起来看看吧(^_^)？ 百度的一个彩蛋还可以教你想心仪的小姐姐表白呢O(∩_∩)O
Flask项目实战是做一个简单的论坛平台，实现基本功能。
Github和Gitee代码同步更新： https://github.com/PythonWebProject/Flask_BBS； https://gitee.com/Python_Web_Project/Flask_BBS。
一、项目目录创建
在真实项目中，实现前台front和后台cms分离实现，以优化整个项目的代码结构。 整个项目==默认使用PyCHarm==进行开发。
创建用户目录Flask_BBS，该项目所有的文件均保存在该目录中。
先创建程序主入口文件bbs.py如下：
1''' 2前台 front 3后台 cms 4公有 common 5''' 6 7from flask import Flask 8from exts import db 9from apps.cms.views import cms_bp 10from apps.front.views import front_bp 11import config 12 13 14app = Flask(__name__) 15app.config.from_object(config) 16db.init_app(app) 17 18app.register_blueprint(cms_bp) 19app.register_blueprint(front_bp) 20 21 22if __name__ == '__main__': 23 app.run(debug=True)
再创建静态资源文件保存目录static和模板保存目录templates。
再创建配置文件config.py如下：
1# 数据库连接配置 2HOSTNAME = '127.0.0.1' 3PORT = 3306 4USERNAME = 'root' 5PASSWORD = 'root' 6DATABASE = 'flask_bbs' 7DB_URL = 'mysql+mysqlconnector://{}:{}@{}:{}/{}?charset=utf8'.format(USERNAME, PASSWORD, HOSTNAME, PORT, DATABASE) 8 9SQLALCHEMY_DATABASE_URI = DB_URL 10SQLALCHEMY_TRACK_MODIFICATIONS = False 11
再创建中间文件exts.py如下：
1from flask_sqlalchemy import SQLAlchemy 2 3db = SQLAlchemy()
再创建数据库映射迁移管理文件manage.py如下：
1from flask_script import Manager 2from bbs import app 3from flask_migrate import Migrate, MigrateCommand 4from exts import db 5 6manager = Manager(app) 7Migrate(app, db) 8 9manager.add_command('db', MigrateCommand) 10 11if __name__ == '__main__': 12 manager.run() 13
在项目目录右键新建Python Package为apps，下面新建Python包cms、front和common用于保存后台、前台和公有文件。
在cms和front目录下均创建表单文件forms.py、模型文件models.py和视图文件views.py文件。
cms目录下的views.py如下：
1from flask import Blueprint 2 3cms_bp = Blueprint('cms', __name__, url_prefix='/cms') 4 5@cms_bp.route('/') 6def index(): 7 return '后台管理首页'
front目录下的views.py如下：
1from flask import Blueprint 2 3front_bp = Blueprint('front', __name__) 4 5@front_bp.route('/') 6def index(): 7 return '前台首页'
运行主程序后，显示：
如果出现类似的效果，则项目目录基本构建完成。
二、CMS模型定义和用户添加
1.CMS管理员用户模型定义
cms目录下的models.py如下：
1from exts import db 2from datetime import datetime 3 4class CMSUser(db.Model): 5 '''后台管理员用户类''' 6 __tablename__ = 'cms_user' 7 id = db.Column(db.Integer, primary_key=True, autoincrement=True) 8 username = db.Column(db.String(30), nullable=False) 9 password = db.Column(db.String(30), nullable=False) 10 email = db.Column(db.String(50), nullable=False, unique=True) 11 join_time = db.Column(db.DateTime, default=datetime.now())
创建了CMSUser后台管理员用户类。
在manage.py中导入模型：
1from flask_script import Manager 2from bbs import app 3from flask_migrate import Migrate, MigrateCommand 4from exts import db 5from apps.cms.models import CMSUser 6 7manager = Manager(app) 8Migrate(app, db) 9 10manager.add_command('db', MigrateCommand) 11 12 13if __name__ == '__main__': 14 manager.run() 15
此时在命令行的当前目录下依次执行python manage.py db init、python manage.py db migrate、python manage.py db upgrade，执行成功后可以在数据库flask_bbs中看到cms_user表。
2.添加用户
在manage.py中添加代码来实现通过命令行添加用户：
1from flask_script import Manager 2from bbs import app 3from flask_migrate import Migrate, MigrateCommand 4from exts import db 5from apps.cms.models import CMSUser 6 7manager = Manager(app) 8Migrate(app, db) 9 10manager.add_command('db', MigrateCommand) 11 12 13@manager.option('-u', '--username', dest='username') 14@manager.option('-p', '--password', dest='password') 15@manager.option('-e', '--email', dest='email') 16def create_cms_user(username, password, email): 17 user = CMSUser(username=username, password=password, email=email) 18 db.session.add(user) 19 db.session.commit() 20 print('CMS用户添加成功') 21 22 23if __name__ == '__main__': 24 manager.run() 25
此时在命令行中执行python manage.py create_cms_user -u Corley -p admin -e 123@163.com，打印CMS用户添加成功，此时查询数据库表cms_user：
1select * from cms_user;
打印：
1+----+----------+----------+-------------+---------------------+ 2| id | username | password | email | join_time | 3+----+----------+----------+-------------+---------------------+ 4| 1 | Corley | admin | 123@163.com | 2020-05-18 20:26:19 | 5+----+----------+----------+-------------+---------------------+ 61 row in set (0.00 sec) 7
显然，数据插入成功，但是密码是明文，存在安全隐患，可以进一步进行优化。
删除cms_user表中数据，重新定义模型models.py如下：
1from datetime import datetime 2from werkzeug.security import generate_password_hash 3from exts import db 4 5 6class CMSUser(db.Model): 7 '''后台管理员用户类''' 8 __tablename__ = 'cms_user' 9 id = db.Column(db.Integer, primary_key=True, autoincrement=True) 10 username = db.Column(db.String(30), nullable=False) 11 _password = db.Column(db.String(100), nullable=False) 12 email = db.Column(db.String(50), nullable=False, unique=True) 13 join_time = db.Column(db.DateTime, default=datetime.now()) 14 15 def __init__(self, username, password, email): 16 self.username = username 17 self.password = password 18 self.email = email 19 20 @property 21 def password(self): 22 return self._password 23 24 @password.setter 25 def password(self, raw_password): 26 self._password = generate_password_hash(raw_password) 27
使用generate_password_hash()对密码进行hash加密。
此时再依次执行python manage.py db migrate、python manage.py db upgrade、python manage.py create_cms_user -u Corley -p admin -e 123@163.com，打印CMS用户添加成功，再查询数据库表cms_user：
1select * from cms_user;
打印：
1+----+----------+-------------+---------------------+------------------------------------------------------------------------------------------------+ 2| id | username | email | join_time | _password | 3+----+----------+-------------+---------------------+------------------------------------------------------------------------------------------------+ 4| 2 | Corley | 123@163.com | 2020-05-18 20:42:05 | pbkdf2:sha256:150000$OtgjW9d7$6e1109428317afb0b3c093e1eb87da34c74d0a232d5cb15272737e5d218fd421 | 5+----+----------+-------------+---------------------+------------------------------------------------------------------------------------------------+ 61 row in set (0.00 sec) 7
显然，此时的密码是经过加密的数据。
三、CMS登录页面搭建
本项目的很多前端HTML页面和组件都是使用BootStrap中文网https://www.bootcss.com/提供的模板。
cms目录下的views.py如下：
1from flask import Blueprint, render_template, views 2 3cms_bp = Blueprint('cms', __name__, url_prefix='/cms') 4 5@cms_bp.route('/') 6def index(): 7 return '后台管理首页' 8 9 10class LoginView(views.MethodView): 11 def get(self): 12 return render_template('cms/cms_login.html') 13 14 15cms_bp.add_url_rule('/login/', view_func=LoginView.as_view('login'))
主程序文件bbs.py如下：
1''' 2前台 front 3后台 cms 4公有 common 5''' 6 7from flask import Flask 8from exts import db 9from apps.cms.views import cms_bp 10from apps.front.views import front_bp 11import config 12 13 14app = Flask(__name__) 15app.config.from_object(config) 16app.config['TEMPLATE_AUTO_RELOAD'] = True 17db.init_app(app) 18 19app.register_blueprint(cms_bp) 20app.register_blueprint(front_bp) 21 22 23if __name__ == '__main__': 24 app.run(debug=True)
templates目录下创建cms子目录，下面创建cms_login.html，使用https://v3.bootcss.com/examples/signin/源代码，并进行一定修改如下：
1<!DOCTYPE html> 2<html lang="zh-CN"> 3<head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 8 <meta name="description" content=""> 9 <meta name="author" content=""> 10 <link rel="icon" href="{{ url_for('static', filename='cms/images/bbs-favicon.ico') }}"> 11 12 <title>CMS用户登录</title> 13 14 <!-- Bootstrap core CSS --> 15 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 16 17 <!-- Custom styles for this template --> 18 <link href="{{ url_for('static', filename='cms/css/signin.css') }}" rel="stylesheet"> 19 <![endif]--> 20</head> 21 22<body> 23 24<div class="container"> 25 26 <form class="form-signin" method="post"> 27 <h2 class="form-signin-heading">请登录</h2> 28 <label for="inputEmail" class="sr-only">邮箱地址</label> 29 <input type="email" id="inputEmail" class="form-control" name="email" placeholder="邮箱地址" required autofocus> 30 <label for="inputPassword" class="sr-only">密码</label> 31 <input type="password" id="inputPassword" class="form-control" name="password" placeholder="密码" required> 32 <div class="checkbox"> 33 <label> 34 <input type="checkbox" value="remember-me" name="remember"> 记住我 35 </label> 36 </div> 37 <button class="btn btn-lg btn-primary btn-block" type="submit">立即登录</button> 38 </form> 39 40</div> <!-- /container --> 41 42 43</body> 44</html> 45
static目录下创建cms子目录，下面创建css目录和images目录，css目录下创建signin.css如下：
1body { 2 padding-top: 40px; 3 padding-bottom: 40px; 4 background-color: #eee; 5} 6 7.form-signin { 8 max-width: 330px; 9 padding: 15px; 10 margin: 0 auto; 11} 12.form-signin .form-signin-heading, 13.form-signin .checkbox { 14 margin-bottom: 10px; 15} 16.form-signin .checkbox { 17 font-weight: normal; 18} 19.form-signin .form-control { 20 position: relative; 21 height: auto; 22 -webkit-box-sizing: border-box; 23 -moz-box-sizing: border-box; 24 box-sizing: border-box; 25 padding: 10px; 26 font-size: 16px; 27} 28.form-signin .form-control:focus { 29 z-index: 2; 30} 31.form-signin input[type="email"] { 32 margin-bottom: -1px; 33 border-bottom-right-radius: 0; 34 border-bottom-left-radius: 0; 35} 36.form-signin input[type="password"] { 37 margin-bottom: 10px; 38 border-top-left-radius: 0; 39 border-top-right-radius: 0; 40}
images目录下保存bbs-favicon.ico。
其中，signin.css和bbs-favicon.ico可以从BootStrap模板中获取，演示如下：
运行主程序，访问http://127.0.0.1:5000/cms/login/，显示：
显然，登录模板已经基本实现。
本文原文首发来自博客专栏Python全栈，由本人转发至https://www.helloworld.net/p/gbAHa3hzOF2P，其他平台均属侵权，可点击https://blog.csdn.net/CUFEECR/article/details/106201961查看原文，也可点击https://blog.csdn.net/CUFEECR浏览更多优质原创内容。