Python全栈(八)Flask项目实战之1.项目搭建
文章目录
- 一、项目目录创建
- 二、CMS模型定义和用户添加
- 1.CMS管理员用户模型定义
- 2.添加用户
- 三、CMS登录页面搭建
那些常见网页中的彩蛋,你都知道吗?
百度、知乎、B站你可能经常会用到,但是你知道隐藏在其中的彩蛋吗?Google、Firefox,你可能也会经常使用,但是你发现了它们的彩蛋吗?我们一起来看看吧(_)? 百度的一个彩蛋还可以教你想心仪的小姐姐表白呢O(∩_∩)O
Falsk项目实战是做一个简单的论坛平台,实现基本功能。 Github和Gitee代码同步更新: https://github.com/PythonFullStack/Flask_BBS; https://gitee.com/Python_Full_Stack/Flask_BBS。
一、项目目录创建
在真实项目中,实现前台front和后台cms分离实现,以优化整个项目的代码结构。 整个项目默认使用PyCHarm进行开发。
创建用户目录Flask_BBS,该项目所有的文件均保存在该目录中。
先创建程序主入口文件bbs.py如下:
'''
前台 front
后台 cms
公有 common
'''
from flask import Flask
from exts import db
from apps.cms.views import cms_bp
from apps.front.views import front_bp
import config
app = Flask(__name__)
app.config.from_object(config)
db.init_app(app)
app.register_blueprint(cms_bp)
app.register_blueprint(front_bp)
if __name__ == '__main__':
app.run(debug=True)
再创建静态资源文件保存目录static和模板保存目录templates。
再创建配置文件config.py如下:
# 数据库连接配置
HOSTNAME = '127.0.0.1'
PORT = 3306
USERNAME = 'root'
PASSWORD = 'root'
DATABASE = 'flask_bbs'
DB_URL = 'mysql+mysqlconnector://{}:{}@{}:{}/{}?charset=utf8'.format(USERNAME, PASSWORD, HOSTNAME, PORT, DATABASE)
SQLALCHEMY_DATABASE_URI = DB_URL
SQLALCHEMY_TRACK_MODIFICATIONS = False
再创建中间文件exts.py如下:
from flask_sqlalchemy import SQLAlchemy
db = SQLAlchemy()
再创建数据库映射迁移管理文件manage.py如下:
from flask_script import Manager
from bbs import app
from flask_migrate import Migrate, MigrateCommand
from exts import db
manager = Manager(app)
Migrate(app, db)
manager.add_command('db', MigrateCommand)
if __name__ == '__main__':
manager.run()
在项目目录右键新建Python Package为apps,下面新建Python包cms、front和common用于保存后台、前台和公有文件。
在cms和front目录下均创建表单文件forms.py、模型文件models.py和视图文件views.py文件。
cms目录下的views.py如下:
from flask import Blueprint
cms_bp = Blueprint('cms', __name__, url_prefix='/cms')
@cms_bp.route('/')
def index():
return '后台管理首页'
front目录下的views.py如下:
from flask import Blueprint
front_bp = Blueprint('front', __name__)
@front_bp.route('/')
def index():
return '前台首页'
运行主程序后,显示:
如果出现类似的效果,则项目目录基本构建完成。
二、CMS模型定义和用户添加
1.CMS管理员用户模型定义
cms目录下的models.py如下:
from exts import db
from datetime import datetime
class CMSUser(db.Model):
'''后台管理员用户类'''
__tablename__ = 'cms_user'
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
username = db.Column(db.String(30), nullable=False)
password = db.Column(db.String(30), nullable=False)
email = db.Column(db.String(50), nullable=False, unique=True)
join_time = db.Column(db.DateTime, default=datetime.now())
创建了CMSUser后台管理员用户类。
在manage.py中导入模型:
from flask_script import Manager
from bbs import app
from flask_migrate import Migrate, MigrateCommand
from exts import db
from apps.cms.models import CMSUser
manager = Manager(app)
Migrate(app, db)
manager.add_command('db', MigrateCommand)
if __name__ == '__main__':
manager.run()
此时在命令行的当前目录下依次执行python manage.py db init
、python manage.py db migrate
、python manage.py db upgrade
,执行成功后可以在数据库flask_bbs中看到cms_user表。
2.添加用户
在manage.py中添加代码来实现通过命令行添加用户:
from flask_script import Manager
from bbs import app
from flask_migrate import Migrate, MigrateCommand
from exts import db
from apps.cms.models import CMSUser
manager = Manager(app)
Migrate(app, db)
manager.add_command('db', MigrateCommand)
@manager.option('-u', '--username', dest='username')
@manager.option('-p', '--password', dest='password')
@manager.option('-e', '--email', dest='email')
def create_cms_user(username, password, email):
user = CMSUser(username=username, password=password, email=email)
db.session.add(user)
db.session.commit()
print('CMS用户添加成功')
if __name__ == '__main__':
manager.run()
此时在命令行中执行python manage.py create_cms_user -u Corley -p admin -e 123@163.com
,打印CMS用户添加成功
,此时查询数据库表cms_user:
select * from cms_user;
打印:
+----+----------+----------+-------------+---------------------+
| id | username | password | email | join_time |
+----+----------+----------+-------------+---------------------+
| 1 | Corley | admin | 123@163.com | 2020-05-18 20:26:19 |
+----+----------+----------+-------------+---------------------+
1 row in set (0.00 sec)
显然,数据插入成功,但是密码是明文,存在安全隐患,可以进一步进行优化。
删除cms_user表中数据,重新定义模型models.py如下:
from datetime import datetime
from werkzeug.security import generate_password_hash
from exts import db
class CMSUser(db.Model):
'''后台管理员用户类'''
__tablename__ = 'cms_user'
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
username = db.Column(db.String(30), nullable=False)
_password = db.Column(db.String(100), nullable=False)
email = db.Column(db.String(50), nullable=False, unique=True)
join_time = db.Column(db.DateTime, default=datetime.now())
def __init__(self, username, password, email):
self.username = username
self.password = password
self.email = email
@property
def password(self):
return self._password
@password.setter
def password(self, raw_password):
self._password = generate_password_hash(raw_password)
使用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:
select * from cms_user;
打印:
+----+----------+-------------+---------------------+------------------------------------------------------------------------------------------------+
| id | username | email | join_time | _password |
+----+----------+-------------+---------------------+------------------------------------------------------------------------------------------------+
| 2 | Corley | 123@163.com | 2020-05-18 20:42:05 | pbkdf2:sha256:150000$OtgjW9d7$6e1109428317afb0b3c093e1eb87da34c74d0a232d5cb15272737e5d218fd421 |
+----+----------+-------------+---------------------+------------------------------------------------------------------------------------------------+
1 row in set (0.00 sec)
显然,此时的密码是经过加密的数据。
三、CMS登录页面搭建
本项目的很多前端HTML页面和组件都是使用BootStrap中文网https://www.bootcss.com/提供的模板。
cms目录下的views.py如下:
from flask import Blueprint, render_template, views
cms_bp = Blueprint('cms', __name__, url_prefix='/cms')
@cms_bp.route('/')
def index():
return '后台管理首页'
class LoginView(views.MethodView):
def get(self):
return render_template('cms/cms_login.html')
cms_bp.add_url_rule('/login/', view_func=LoginView.as_view('login'))
主程序文件bbs.py如下:
'''
前台 front
后台 cms
公有 common
'''
from flask import Flask
from exts import db
from apps.cms.views import cms_bp
from apps.front.views import front_bp
import config
app = Flask(__name__)
app.config.from_object(config)
app.config['TEMPLATE_AUTO_RELOAD'] = True
db.init_app(app)
app.register_blueprint(cms_bp)
app.register_blueprint(front_bp)
if __name__ == '__main__':
app.run(debug=True)
templates目录下创建cms子目录,下面创建cms_login.html,使用https://v3.bootcss.com/examples/signin/源代码,并进行一定修改如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="{{ url_for('static', filename='cms/images/bbs-favicon.ico') }}">
<title>CMS用户登录</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{{ url_for('static', filename='cms/css/signin.css') }}" rel="stylesheet">
<![endif]-->
</head>
<body>
<div class="container">
<form class="form-signin" method="post">
<h2 class="form-signin-heading">请登录</h2>
<label for="inputEmail" class="sr-only">邮箱地址</label>
<input type="email" id="inputEmail" class="form-control" name="email" placeholder="邮箱地址" required autofocus>
<label for="inputPassword" class="sr-only">密码</label>
<input type="password" id="inputPassword" class="form-control" name="password" placeholder="密码" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me" name="remember"> 记住我
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">立即登录</button>
</form>
</div> <!-- /container -->
</body>
</html>
static目录下创建cms子目录,下面创建css目录和images目录,css目录下创建signin.css如下:
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
images目录下保存bbs-favicon.ico。
其中,signin.css和bbs-favicon.ico可以从BootStrap模板中获取,演示如下:
运行主程序,访问http://127.0.0.1:5000/cms/login/,显示:
显然,登录模板已经基本实现。
- scala 学习笔记(01) 函数定义、分支、循环、异常处理、递归
- java之log4j的配置
- scala 学习笔记(02) 元组Tuple、数组Array、Map、文件读写、网页抓取示例
- scala 学习笔记(04) OOP(上)主从构造器/私有属性/伴生对象(单例静态类)/apply方法/嵌套类
- 使用jQuery封装实用函数
- scala 学习笔记(05) OOP(中)灵活的trait
- Web Fundamentsals学习1-Multiple-Screen-Site
- Vagrant使用
- java 中的异步回调
- 澳大利亚域名管理机构多年敲竹杠?
- ASP.NET中使用HttpWebRequest调用WCF
- scala 学习笔记(06) OOP(下)多重继承 及 AOP
- Angular企业级开发(4)-ngResource和REST介绍
- CSS魔法堂:"那不是bug,是你不懂我!" by inline-block
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 打卡群2刷题总结1003——搜索旋转排序数组
- Rman备份恢复和管理
- 重做日志和日志挖掘
- 『技术随手学』解决windows与ubuntu平台 CondaHTTPError: HTTP 000 CONNECTION FAILED 问题
- DevOps编程操练:用Jenkins流水线建立代码质量预警机制
- 『技术随手学』pip conda 替换清华源 Windows与Ubuntu通用
- 回滚段undo
- 『AI实践学』测试深度学习框架GPU版本是否正确安装方法:TensorFlow,PyTorch,MXNet,PaddlePaddle
- 使用Github管理Hexo博客的源文件
- oracle的userenv和nls_lang详解
- 打卡群刷题总结0925——最佳买卖股票时机含冷冻期
- 备忘:美化pymol作图1
- 宿舍(寝室)管理系统设计与实现 | 附 演示、源码地址
- Oracle字符集检查和修改
- Vue3 DOM Diff 核心算法解析