Python进阶项目--只因博客（bootstrap+flask+mysql）

前言

1.全民制作人们大家好，我是练习时长两年半的个人练习生只因坤坤，
喜欢唱，跳，rap，篮球，music......
在今后的节目中，我还准备了很多我自己作词、作曲、编舞的原创作品，
期待的话，请多多为我投票吧😎
2. 只因博客：不是ikun请勿进，谢谢~~
3. Python进阶项目，总体框架为"bootstrap+flask+mysql"，
	适合Flask框架入门学习使用💖，
    本博客未使用restful技术，可以实现一些博客的基本功能，
    咋从配置虚拟环境开始~~
4. 最后，关注我，一定能学会Flask框架，学不学无所谓hhh🎉🎉🎉

只因首页效果图

1. 配置虚拟环境

1.1 具体步骤

# 打开cmd
1. 安装virtualenv (windows操作系统)
	pip install virtualenv virtualenvwrapper-win

2. workon查看虚拟环境
	workon

3. mkvirtualenv创建新的虚拟环境
	mkvirtualenv flask2env

4. rmvirtualenv删除虚拟环境
	rmvirtualenv flask2env

5. 进入虚拟环境
	workon flask1env

6. 在虚拟环境中安装flask2
	pip install flask==2.2.3
    
7. 打开Pycharm专业版,创建Flask个人博客并配置好虚拟环境flask1env

1.2 Pycharm虚拟环境的配置

2. 安装插件

2.1 Flask的ORM

Flask使用Python自带的ORM: SQLAlchemy
针对于Flask的支持,安装插件: flask-sqlalchemy
命令: pip install flask-sqlalchemy

2.2 数据迁移

命令: pip install flask-migrate

2.3 插件代码

from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate

db = SQLAlchemy()
migrate = Migrate()

def init_exts(app):
    db.init_app(app=app)
    migrate.init_app(app=app, db=db)

3.flask博客基本框架

3.1 app.py

from App import create_app

app = create_app()

if __name__ == '__main__':
    app.run(debug=True)

3.2 init.py

from flask import Flask
from .views.views import blog
from .views.views_admin import admin
from .exts import init_exts
# __init__.py ：初始化文件，创建Flask应用

def create_app():
    app = Flask(__name__)
    # 1. 注册蓝图
    app.register_blueprint(blueprint=blog) # 博客前端页面
    app.register_blueprint(blueprint=admin) # 博客后台管理

    # 2. 配置数据库
    # db_uri = 'sqlite:///sqlite3.db'  # sqlite配置
    db_uri = 'mysql+pymysql://root:cocair@localhost:3306/blogdb'  # mysql的配置
    app.config['SQLALCHEMY_DATABASE_URI'] = db_uri
    app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False  # 禁止对象追踪修改

    # 3. 初始化插件
    init_exts(app=app)

    return app

3.3 views.py

from flask import Blueprint
from ..models.models import * # ..引用堂兄弟文件

# 蓝图
blog = Blueprint('blog', __name__)

@blog.route('/')
def index():
    return 'index'

3.4 views_admin.py

from flask import Blueprint
from ..models.models_admin import *

# 蓝图
admin = Blueprint('admin', __name__)

@admin.route('/')
def index():
    return 'index'

3.5 models.py

from ..exts import db

class User(db.Model):
    __tablename__ = 'tb_user'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    name = db.Column(db.String(30), unique=True, index=True)
    age = db.Column(db.Integer, default=1)

3.6 models_admin.py

from ..exts import db

class User(db.Model):
    __tablename__ = 'tb_user'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    name = db.Column(db.String(30), unique=True, index=True)
    age = db.Column(db.Integer, default=1)

此时初始的Flask框架就搭建好啦~~
不能理解的小伙伴可以看看这几篇博客🍩🍩🍩

Flask入门和视图–01
Flask会话技术和Flask模板语言–02
Flask模型基础–03

4.设计数据库

敲黑板！！🎮看此片段时建议先看看这篇博客图🎫
Flask数据迁移详细步骤

初始的框架搭建好后，就需要开始数据库的设计👌~~
	1.models.py(用户端数据库)
    	分类数据库：CategoryModel
        文章数据库：ArticleModel
        相册数据库：PhotoModel
    其中分类数据库与文章数据库是一对多关系
    2.models_admin.py(管理员端数据库)
    	管理员数据库：AdminUserModel

4.1 models.py

from ..exts import db

# 分类 : 文章 ==> 1 : N
# 分类
class CategoryModel(db.Model):
    __tablename__ = 'tb_category'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    name = db.Column(db.String(30), unique=True)
    describe = db.Column(db.Text(), default="describe")
    # 2.设置联系&懒加载
    articles = db.relationship("ArticleModel", backref="category", lazy="dynamic")


# 文章
class ArticleModel(db.Model):
    __tablename__ = 'tb_article'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    name = db.Column(db.String(30), unique=True)
    key = db.Column(db.String(255), default="keyword")
    content = db.Column(db.Text(), default="content")
    img = db.Column(db.Text(), default="img")
    # 1.(N): 设置外键category_id
    category_id = db.Column(db.Integer, db.Foreignkey(CategoryModel.id))

# 相册
class PhotoModel(db.Model):
    __tablename__ = 'tb_photo'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    url = db.Column(db.Text(30)) # 由于考虑到文件路径过长,所以使用Text()
    name = db.Column(db.String(255), unique=True)
    describe = db.Column(db.Text(), default="describe")

4.2 models_admin.py

from ..exts import db

class AdminUserModel(db.Model):
    __tablename__ = 'tb_admin user'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    name = db.Column(db.String(30), unique=True, index=True)
    passwd = db.Column(db.String(30))

4.3 数据迁移

1.数据迁移命令:
	1. 在cmd或Terminal先进入项目目录:
	2. 然后输入命令:
		flask db init  
		创建迁移文件夹migrates, 只调用一次
    	flask db migrate  生成迁移文件
    	flask db upgrade  执行迁移文件中的升级
    	flask db downgrade  执行迁移文件中的降级
        
2.如果执行flask db init报错😢：
ValueError: the greenlet library is required to use this function.
则需要执行：pip install greenlet即可

4.4 Mysql Workben

4.41 添加测试数据

tb_admin user

tb_category

tb_article

tb_photo

1. 测试数据量少时，建议直接在数据库里添加...
2. images/photos是原先就加载在模板(templates)文件下的模板，所以此处路径为/static/home/photos/***.jpeg
3. 前端static、templates模块，在文章末我会给出链接...

5. 编码实现–功能端

只展示核心代码~~
源码我会放在文章末的链接🌹🌹🌹

5.1 views

5.11 blog_index

# 博客_首页
@blog.route('/')
@blog.route('/index/')
def blog_index():
    photos = PhotoModel.query.limit(6)
    categorys = CategoryModel.query.all()
    articles = ArticleModel.query.all()
    commends = articles[0:4] # 用切片取到前4张
    return render_template('home/index.html'
                           , photos=photos
                           , categorys=categorys
                           , articles=articles
                           , commends=commends
                           )

5.12 blog_photos

@blog.route('/photos/')
def blog_photos():
    photos = PhotoModel.query.all()
    return render_template('home/photos.html'
                           , photos=photos
                           )

5.13 blog_route

# 博客_我的日记
@blog.route('/article/')
def blog_article():
    articles = ArticleModel.query.all()
    return render_template('home/article.html', articles=articles)

5.14 blog_about

# 博客_关于我
@blog.route('/about/')
def blog_about():
    photos = PhotoModel.query.limit(6)
    categorys = CategoryModel.query.all()
    return render_template('home/about.html'
                           , photos=photos
                           , categorys=categorys
                           )

5.2 templates

5.21 index.html

<main class="r_box">
        <ul>
            {% for article in articles %}
                <li>
                    <i><a href="#"><img src="{{ article.img }}"></a></i>
                    <h3><a href="#">{{ article.name }}</a></h3>
                    <p> {{ article.content }} </p>
                </li>
            {% endfor %}
        </ul>
    </main>

5.22 article.html

<main class="r_box">
        <ul>
            {% for article in articles %}
            <li>
                <i><a href="#"><img src="{{ article.img }}"></a></i>
                <h3><a href="#"> {{ article.name }} </a></h3>
                <p> {{ article.content }} <p>
            </li>
            {% endfor %}
        </ul>
    </main>

5.3 只因博客效果图🎉🎉🎉

6.编码实现–后台管理系统

此后只展示后端代码啦~~
前端只展示核心代码(太长了...)

6.1 登录 & 注销

6.11 登录装饰器

# 装饰器：登录验证
def login_required(fn):
    @wraps(fn)
    def inner(*arg, **kwargs):
        # 判断是否登录
        # 获取cookie，得到登录的用户
        user_id = request.cookies.get("user_id",None)
        if user_id:
            # 登录过进入后台管理系统
            user = AdminUserModel.query.get(user_id)
            request.user =user
            return fn(*arg, **kwargs)
        else:
            # 如果没有登录，则跳转登录页面
            return redirect('/admin/login')
    return inner

不理解装饰器，可以参考此篇博客💣💣
好的…本来想附上链接的…发现忘记写了🙄😅
不过不要急，后期，一定补上（考研党，谅解一下…）
简单说下，装饰器就是一个代码复用模板，这里因为登录验证代码每个功能实现中都需用到，所以直接封装复用，格式为在需要用到此模块的视图函数上加@login_required

6.12 views_admin.py

# 后台管理--首页
@admin.route('/admin/')
@admin.route('/admin/index/')
@login_required
def admin_index():
    user = request.user
    categorys = CategoryModel.query.filter()
    articles = AdminUserModel.query.filter()
    photos = PhotoModel.query.filter()
    # 登录成功，跳转首页
    return render_template("admin/index.html"
                           , username=user.name
                           , categorys=categorys
                           , articles=articles
                           , photos=photos)
"""
    未加登录装饰器
    user_id = request.cookies.get("user_id",None)
    if user_id:
        user = AdminUserModel.query.get(user_id)
        categorys = CategoryModel.query.filter()
        articles = AdminUserModel.query.filter()
        photos = PhotoModel.query.filter()
        # 登录成功，跳转首页
        return render_template("admin/index.html"
                               , username=user.name
                               , categorys=categorys
                               , articles=articles
                               , photos=photos
                               )
    else:
        # 返回登录页面
        return redirect("/admin/login")
"""

# 后台管理--登录
@admin.route('/admin/login/', methods=["GET","POST"])
def admin_login():
    if request.method == "GET":
        return render_template("admin/login.html")
    elif request.method == "POST":
        username = request.form.get("username") #request.form.get()
        userpwd = request.form.get("userpwd")
        user = AdminUserModel.query.filter_by(name=username, passwd=userpwd).first()
        if user:
            # 登录成功
            response = redirect("/admin/index/")
            # set_cookie(参数新名字\参数\cookie保存时间)
            response.set_cookie("user_id", str(user.id), max_age=1 * 24 * 3600)
            return response
        else:
            return "Login false"

# 后台管理--注销
@admin.route('/admin/logout/')
def admin_logout():
    response = redirect("/admin/login/")
    response.delete_cookie("user_id")
    return response

6.12 index.html

{# 如果用户登录了就显示用户名，如果没有登录就显示登录按钮 #}
{% if username %}
    <li><a href="#"> 欢迎您: {{ username }} </a></li>
    <li><a href="/admin/logout/"> 注销 </a></li>
{% else %}
	<li><a href="/admin/login/"> 登录 </a></li>
{% endif %}
...

6.13 后台管理 登录页面&首页

6.2 分类管理

6.21 后台管理–分类

# 后台管理--分类
@admin.route('/admin/category/')
@login_required # 登录装饰器
def admin_category():
    user = request.user
    categorys = CategoryModel.query.all()
    return render_template("admin/category.html"
                           , username=user.name
                           , categorys=categorys)

6.22 后台管理–添加分类

# 后台管理--添加分类
@admin.route('/admin/addcategory/', methods=['GET','POST'])
@login_required
def admin_addcategory():
    if request.method == "POST":
        # 添加分类
        name = request.form.get("name")
        describe = request.form.get("describe")
        category = CategoryModel()
        category.name = name
        category.describe = describe
        try:
            db.session.add(category)
            db.session.commit()
        except Exception as e:
            print("e:",e)
            db.session.rollback()
        return redirect("/admin/category/")
    else:
        return '请求方式错误！'

6.23 后台管理–删除分类

views_admin.py

# 后台管理--删除分类
@admin.route('/admin/del_category/', methods=['GET','POST'])
@login_required
def admin_del_category():
    if request.method == "POST":
        # 删除分类
        id = request.form.get("id")
        category = CategoryModel.query.get(id)
        try:
            db.session.delete(category)
            db.session.commit()
        except Exception as e:
            print("e:",e)

        return jsonify({'code' : 200, 'msg' : '删除成功!'})
    else:
        return jsonify({'code' : 400, 'msg' : '请求方式错误!'})

**category.html (javascript)

<script>
    //是否确认删除
    $(function () {
        $("#main table tbody tr td a").click(function () {
            var that = $(this);
            var id = that.attr("cid"); //对应id
            if (event.srcElement.outerText === "删除") {
                if (window.confirm("此操作不可逆，是否确认？")) {

                    // Ajax请求： 前后端分离
                    // 点击删除按钮:
                    $.post('/admin/del_category/', {'id': id}, function(data){
                        console.log(data.msg)
                        if (data.code == 200) {
                            location.reload()
                        }
                    })
                }
            }
        })
    });
</script>

6.24 修改分类

后台管理–修改分类

# 后台管理--修改分类
@admin.route('/admin/updatecategory/<id>/', methods=['GET','POST'])
@login_required
def admin_update_category(id):
    if request.method == "GET":
        category = CategoryModel.query.get(id)
        return render_template("admin/category_update.html"
                               , category=category
                               , username=request.user.name)
    elif request.method == "POST":
        name = request.form.get("name")
        describe = request.form.get("describe")
        category = CategoryModel.query.get(id)
        category.name = name
        category.describe = describe
        try:
            db.session.commit()
        except Exception as e:
            print("e",e)
            db.session.rollback()

        return redirect("/admin/category/")
    else:
        return "请求方式错误"

修改分类的页面

修改分类的逻辑

修改分类的逻辑(这里比较绕,解释一下~~)✨✨✨
1. category.html页面中点击修改,此时会通过jinjia2模板中的{{ category.id }}(前端代码里有,自行下载一下~~)传输给给后端数据(id),回到views_admin.py中
2. 当request.method收到get的请求,便会执行category = CategoryModel.query.get(id),通过此代码会查找数据库中为id的对象给category赋值,然后传入category_update.html页面
3. 通过前端category_update.html页面,修改新值后,此时再通过前端提交,回到views_admin.py中
4. 执行elif request.method == "POST":后的代码

6.3 文章管理

6.31 文章管理

# 后台管理--分类
@admin.route('/admin/category/')
@login_required
def admin_category():
    user = request.user
    categorys = CategoryModel.query.all()
    return render_template("admin/category.html"
                           , username=user.name
                           , categorys=categorys)

6.32 删除文章

逻辑解释

1. 删除文章并不需要新创建h5
2. 只需用到javascript技术即可🐾

删除文章

# 后台管理--删除分类
@admin.route('/admin/del_category/', methods=['GET','POST'])
@login_required
def admin_del_category():
    if request.method == "POST":
        # 删除分类
        id = request.form.get("id")
        category = CategoryModel.query.get(id)
        try:
            db.session.delete(category)
            db.session.commit()
        except Exception as e:
            print("e:",e)

        return jsonify({'code' : 200, 'msg' : '删除成功!'})
    else:
        return jsonify({'code' : 400, 'msg' : '请求方式错误!'})

javascript

<script>
    //是否确认删除
    $(function () {
        $("#main table tbody tr td a").click(function () {
            var that = $(this);
            var id = that.attr("aid");  //对应id
            if (event.srcElement.outerText == "删除") {
                if (window.confirm("此操作不可逆，是否确认？")) {
                    // 删除文章
                    $.post('/admin/delarticle/', {'id': id}, function (data){
                        console.log(data.msg)
                        if (data.code == 200) {
                            location.reload()
                        }
                        else {
                            alert(data.msg)
                        }
                    })
                }
            }
        });
    });
</script>

展示

6.33 添加文章

# 后台管理--添加文章
@admin.route('/admin/addarticle/', methods=["GET","POST"])
@login_required
def admin_add_article():
    if request.method == "GET":
        categorys = CategoryModel.query.all()
        return render_template("admin/article_add.html"
                               , username=request.user.name
                               , categorys=categorys
                               )
    elif request.method == "POST":
        name = request.form.get("name")
        keywords = request.form.get("keywords")
        content = request.form.get("content")
        category = CategoryModel.query.get("category")
        img = request.files.get("img")

        # 图片存储路径
        img_name = f'{time.time()}-{img.filename}' # 加时间戳，因为图片可能会重复
        img_url = f'/static/home/uploads/{img_name}'

        # 添加文章
        try:
            article = ArticleModel()
            article.name = name
            article.key = keywords
            article.content = content
            article.category_id = category
            article.img = img_url
            db.session.add(article)
            db.session.commit()
        except Exception as e:
            db.session.rollback()
            db.session.flush()
            print("e:",e)
        else:
            # 如果上面添加到数据库成功,那么手动将图片存入本地
            img_data = img.read()
            with open(f'App/{img_url}', 'wb') as fp:
                fp.write(img_data)
                fp.flush()

        return redirect('/admin/article/')

对图片进行添加时注意两个操作
	1.保存文件的路径时建议加上时间戳，因为加上时间戳可以防止同名相册的存在
	2.除此之外，还需要写入文件的操作

6.34 更新文章

# 后台管理-修改文章
@admin.route('/admin/updatearticle/<id>/', methods=['GET', 'POST'])
@login_required
def admin_update_article(id):
    article = ArticleModel.query.get(id)

    if request.method == 'GET':
        categorys = CategoryModel.query.all()
        return render_template('admin/article_update.html',
                           username=request.user.name,
                           categorys=categorys,
                           article=article
                      )
    elif request.method == 'POST':
        # 修改文章
        name = request.form.get('name')
        keywords = request.form.get('keywords')
        content = request.form.get('content')
        category = request.form.get('category')
        img = request.files.get('img')

        # 图片存储路径
        img_name = f'{time.time()}-{img.filename}'
        img_url = f'/static/home/uploads/{img_name}'

        # 修改文章
        try:
            article.name = name
            article.keyword = keywords
            article.content = content
            article.img = img_url  # 图片路径
            article.category_id = category

            db.session.commit()
        except Exception as e:
            db.session.rollback()
            db.session.flush()
            print('e:', e)
        else:
            # 如果上面添加到数据库成功,那么手动将图片存入本地
            img_data = img.read()
            with open(f'App/{img_url}', 'wb') as fp:
                fp.write(img_data)
                fp.flush()

        return redirect('/admin/article/')

7. 源码链接

所以说，为什么关注又取关了呢？💔
难道不是ikun了吗？！😢😢
hhh，开个小玩笑😉，切记玩梗归玩梗，学习才是为主！！
关注我，一定能会Flask框架，学不会无所谓~~
本源码还有瑕疵，恳请大家在评论区点评（接受一切质疑，批评）🚀🚀
源码链接在这里哈~~

源码+只因典藏图+sql文件