文章目錄

三、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 [email protected]，打印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 [email protected]，打印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/，顯示：

顯然，登錄模板已經基本實現。

Python全棧（八）Flask項目實戰之1.項目搭建

文章目錄

一、項目目錄創建

二、CMS模型定義和用戶添加

1.CMS管理員用戶模型定義

2.添加用戶

三、CMS登錄頁面搭建

druid數據源 xml配置

Python全棧（八）Flask項目實戰之8.CMS後臺輪播圖管理

Python全棧（八）Flask項目實戰之7.前臺註冊和登錄功能

那些在Flask開發中不得不注意的坑

Python全棧（八）Flask項目實戰之6.前臺註冊功能開發

C語言經典習題100例（十）46-50

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結