1、創建初期目錄
項目環境依賴庫如下：
創建項目包含文件
主程序文件bbs.py
# -*- encoding: utf-8 -*-
"""
@File : bbs.py
@Time : 2020/5/11 9:46
@Author : chen
"""
# 項目主文件，啓動入口
# 前臺 front 管理前端界面的邏輯
# 後臺 cms 管理後端的操作
# 公有的文件 common
from flask import Flask
import config # 配置文件庫
from exts import db # 第三方庫導入db
from apps.cms.views import cms_bp # 導入後端藍圖文件
from apps.front.views import front_bp # 導入前端藍圖文件
app = Flask(__name__)
app.config.from_object(config) # 添加配置
db.init_app(app) # 綁定app
app.register_blueprint(cms_bp) # 後端藍圖文件註冊
app.register_blueprint(front_bp) # 前端藍圖文件註冊
if __name__ == '__main__':
app.run(debug=True, port=9999)
配置文件:config.py：數據庫連接固定寫法
# -*- encoding: utf-8 -*-
"""
@File : config.py
@Time : 2020/5/11 10:08
@Author : chen
"""
# 127.0.0.1
HOSTNAME = "localhost"
DATABASE = "demo_bbs"
PORT = 3306
USERNAME = "root"
PASSWORD = "root"
DB_URL = 'mysql+mysqlconnector://{}:{}@{}:{}/{}'.format(USERNAME, PASSWORD, HOSTNAME, PORT, DATABASE)
SQLALCHEMY_DATABASE_URI = DB_URL # 數據庫連接成功
# FSADeprecationWarning: SQLALCHEMY_TRACK_MODIFICATIONS adds significant overhead and will be disabled by default in the future.
# Set it to True or False to suppress this warning.'SQLALCHEMY_TRACK_MODIFICATIONS adds significant overhead and '
# 這裏是爲了解決上面的警告
SQLALCHEMY_TRACK_MODIFICATIONS = False
第三方引用文件:exts.py
# 第三方引用文件，防止互相引用報錯
from flask_sqlalchemy import SQLAlchemy
db = SQLAlchemy()
映射模型到數據庫：manage.py
# -*- encoding: utf-8 -*-
"""
@File : manage.py
@Time : 2020/5/10 17:36
@Author : chen
"""
from flask_script import Manager
from bbs import app # 需要將當前文件夾設置爲當前根目錄，纔不會報錯
from flask_migrate import Migrate, MigrateCommand
from exts import db
# 導入模型 才能映射到數據庫 導入後端的模型
from apps.cms.models import CMS_User
manage = Manager(app)
Migrate(app, db)
manage.add_command('db', MigrateCommand)
# 命令行添加後端用戶
@manage.option('-u', '--username', dest='username')
@manage.option('-p', '--password', dest='password')
@manage.option('-e', '--email', dest='email')
def create_cms_user(username, password, email):
user = CMS_User(username=username, password=password, email=email)
# 添加映射到數據庫，提交至數據庫
db.session.add(user)
db.session.commit()
print("cms後端用戶添加成功")
後臺開發文件包：apps/cms
後臺視圖文件：apps/cms/views.py
# -*- encoding: utf-8 -*-
"""
@File : views.py
@Time : 2020/5/11 9:59
@Author : chen
"""
# 藍圖文件：實現模塊化應用，應用可以分解成一系列的藍圖 後端的類視圖函數寫在這個文件
from flask import Blueprint
cms_bp = Blueprint("cms", __name__, url_prefix='/cms/') # URL前綴url_prefix
@cms_bp.route("/")
def index():
return "cms index：後端類視圖文件"
後臺模型文件：apps/cms/models.py
# -*- encoding: utf-8 -*-
"""
@File : models.py
@Time : 2020/5/11 10:00
@Author : chen
"""
# 定義後端用戶模型
from exts import db
from datetime import datetime
class CMS_User(db.Model):
__tablename__ = 'cms_user'
id = db.Column(db.Integer, primary_key=True, autoincrement=True) # 主鍵 自增
username = db.Column(db.String(150), nullable=False) # 非空
password = db.Column(db.String(150), nullable=False)
email = db.Column(db.String(50), nullable=False, unique=True) # 非空、唯一
join_time = db.Column(db.DateTime, default=datetime.now) # 默認當前時間
前臺開發文件包：apps/front
前臺視圖文件：apps/front/views.py
# -*- encoding: utf-8 -*-
"""
@File : views.py
@Time : 2020/5/11 9:59
@Author : chen
"""
# 前端的藍圖文件 類視圖函數寫在這裏
from flask import Blueprint
front_bp = Blueprint("front_bp", __name__) # 前端不用前綴，直接在首頁顯示
@front_bp.route("/")
def index():
return "front index：前端的首頁"
此時的密碼是明文狀態，現在針對密碼加密進行修改
2、密碼加密
後臺模型文件：apps/cms/models.py
# 定義後端用戶模型
from exts import db
from datetime import datetime
from werkzeug.security import generate_password_hash, check_password_hash # 導入密碼加密解密方法的庫
class CMS_User(db.Model):
__tablename__ = 'cms_user'
id = db.Column(db.Integer, primary_key=True, autoincrement=True) # 主鍵 自增
username = db.Column(db.String(150), nullable=False) # 非空
# password = db.Column(db.String(150), nullable=False)
_password = db.Column(db.String(150), nullable=False) # 密碼加密操作修改字段
email = db.Column(db.String(50), nullable=False, unique=True) # 非空、唯一
join_time = db.Column(db.DateTime, default=datetime.now) # 默認當前時間
# 修改密碼加密操作中的字段，在manage.py映射數據庫時候，使用字段還是保持相同
def __init__(self, username, password, email):
self.username = username
self.password = password # 調用該方法 返回下面的self._password數值，
self.email = email
# 密碼加密操作
@property
def password(self): # 密碼取值
return self._password
@password.setter # 密碼加密 xxx.setter需要和上面的方法名稱相同
def password(self, raw_password):
self._password = generate_password_hash(raw_password)
3、登錄前端界面製作
登錄界面的模板參考：
bootstrap登錄模板html文件
bootstrap登錄模板css文件
前端靜態資源文件：cms_login.html
<!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="../../favicon.ico">-->
<title>CMS後臺登錄界面</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- Custom styles for this template -->
<!-- <link href="signin.css" rel="stylesheet">-->
<!-- 這裏引用自己的css模板文件 模板中引用靜態資源文件使用url_for,路徑filename='cms/css/signin,css')需要相對路徑中的絕對路徑-->
<link href="{{ url_for('static', filename='cms/css/signin.css') }}" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- 添加登錄方法method="post" -->
<form class="form-signin" method="post">
<h2 class="form-signin-heading">請登錄</h2>
<label for="inputEmail" class="sr-only">郵箱</label>
<!-- 表單提交根據name="email"來接收後端數據 -->
<input type="email" id="inputEmail" name="email" class="form-control" placeholder="郵箱地址" required autofocus>
<label for="inputPassword" class="sr-only">密碼</label>
<!-- 表單提交根據name="password"來接收後端數據 -->
<input type="password" id="inputPassword" name="password" class="form-control" placeholder="填寫密碼" required>
<div class="checkbox">
<label>
<!-- 表單提交根據name="remember"來接收後端數據 -->
<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 -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
前端靜態資源文件：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;
}
修改：後臺視圖文件：apps/cms/views.py
# -*- encoding: utf-8 -*-
"""
@File : views.py
@Time : 2020/5/11 9:59
@Author : chen
"""
# 藍圖文件：實現模塊化應用，應用可以分解成一系列的藍圖 後端的類視圖函數寫在這個文件
from flask import Blueprint, render_template, views # 定義類視圖，顯示模板文件
cms_bp = Blueprint("cms", __name__, url_prefix='/cms/') # URL前綴url_prefix
@cms_bp.route("/") # 後臺界面
def index():
return "cms index：後端類視圖文件"
# 定義類視圖，顯示模板文件
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')) # view_func 命名操作名字，"/login/"路由地址
完成界面：
