基于Flask的文章内容管理系统(CMS)

本文旨在：

1. 开发思路

① 搭建开发环境
② 构建项目目录
③ 开发前端模板
④ 设计数据模型
⑤ 编写后端逻辑
⑥ 测试部署上线

2. 搭建开发环境

使用Virtualenv创建虚拟化环境：

3. 构建项目目录

4. 开发前端模板

运行项目，保证每个模板（页面）可以被正常访问：

登录页面：

注册页面：

发布文章页面：

编辑(修改/更新)文章页面：

文章列表页面：

5. 设计数据模型

models.py:

# coding:utf8
# @Time : 2020/7/2 上午1:27
# @Author : Erics
# @File : models.py
# @Software: PyCharm
from flask_sqlalchemy import SQLAlchemy  # pip install flask_sqlalchemy

from create_app import app

app.config["SQLALCHEMY_DATABASE_URI"] = "mysql+pymysql://root:123456@localhost:3306/article_cms?charset=UTF8MB4"
app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = True
db = SQLAlchemy(app)


class User(db.Model):
    __tablename__ = "user"  # 指定表名，也可以不加这行代码SQLAlchemy会自动生成表名
    id = db.Column(db.Integer, primary_key=True)  # 编号
    name = db.Column(db.String(20), nullable=False, unique=True)  # 账号
    pwd = db.Column(db.String(100), nullable=False)  # 密码
    addtime = db.Column(db.DateTime, nullable=False)  # 注册时间


class Article(db.Model):
    __tablename__ = "article"
    id = db.Column(db.Integer, primary_key=True)  # 编号
    title = db.Column(db.String(100), nullable=False)  # 标题
    logo = db.Column(db.String(100), nullable=False)  # 封面
    content = db.Column(db.Text, nullable=False)  # 内容
    addtime = db.Column(db.DateTime, nullable=False)  # 发布时间
    user_id = db.Column(db.Integer, nullable=False)  # 作者id
    cate_id = db.Column(db.Integer, nullable=False)  # 分类id


class Cate(db.Model):
    id = db.Column(db.Integer, primary_key=True)  # 编号
    title = db.Column(db.String(10), unique=True)  # 分类名称


if __name__ == '__main__':
    # 如果表已存在就不会再创建
    db.create_all()  # 创建所有的表

执行该脚本创建的数据表如下，

用户表：

mysql> desc user;
+---------+--------------+------+-----+---------+----------------+
| Field   | Type         | Null | Key | Default | Extra          |
+---------+--------------+------+-----+---------+----------------+
| id      | int          | NO   | PRI | NULL    | auto_increment |
| name    | varchar(20)  | NO   | UNI | NULL    |                |
| pwd     | varchar(100) | NO   |     | NULL    |                |
| addtime | datetime     | NO   |     | NULL    |                |
+---------+--------------+------+-----+---------+----------------+

文章表：

mysql> desc article;
+---------+--------------+------+-----+---------+----------------+
| Field   | Type         | Null | Key | Default | Extra          |
+---------+--------------+------+-----+---------+----------------+
| id      | int          | NO   | PRI | NULL    | auto_increment |
| title   | varchar(100) | NO   |     | NULL    |                |
| logo    | varchar(100) | NO   |     | NULL    |                |
| content | text         | NO   |     | NULL    |                |
| addtime | datetime     | NO   |     | NULL    |                |
| user_id | int          | NO   |     | NULL    |                |
| cate_id | int          | NO   |     | NULL    |                |
+---------+--------------+------+-----+---------+----------------+

文章分类表：

mysql> desc cate;
+-------+-------------+------+-----+---------+----------------+
| Field | Type        | Null | Key | Default | Extra          |
+-------+-------------+------+-----+---------+----------------+
| id    | int         | NO   | PRI | NULL    | auto_increment |
| title | varchar(10) | YES  | UNI | NULL    |                |
+-------+-------------+------+-----+---------+----------------+

6. 编写后端逻辑

（1）注册功能：




（2）登录：


（3）退出登录：

（3）发布文章


文章数据已添加：

mysql> select *from article\G;
*************************** 1. row ***************************
     id: 1
  title: 北京大兴两地区降级为低风险地区
   cate: 5
user_id: 1
   logo: 202007042224467ee93719712c41b0b9d53e9fe97a9bfe.jpeg
content: <p><span style="font-family: -apple-system-font, "Helvetica Neue", "PingFang SC", 
"Hiragino Sans GB", "Microsoft YaHei", sans-serif; font-size: 19px; text-align: justify; background-
color: rgb(255, 255, 255);">【北京大兴两地区降级为低风险地区 】北京青年报记者从国务院客户端疫情风险查询小程序上了解到，截至7月4日15时，大
兴区天宫院街道、清源街道降级为低风险地区。（北京青年报记者 蒲长廷） </span></p><p><img src="https://pics3.baidu.com/feed/fc1f4134970a304ee6967f40cfef4c80c8175c86.jpeg?token=19dff0695d0e5dcec7cca1e35961b7dc"/></p>
addtime: 2020-07-04 22:24:46

（4）文章列表展示

（5）编辑文章：

（6）删除文章：

（7）访问权限控制：只有成功登录的用户才能访问内部，否则跳转到登录页面。

7. 系统参考源码

github：https://github.com/erics1996/article_cms

欢迎star，欢迎推送你的代码帮助完善这个小案例哦！