Flask个人网站博客系统（全）

朋友圈已死，为了方便随时随地的记录心情、想法。我用Flask做了一个网站，功能很多，今天主要讲博客系统，"微博"和长博。

主要内容

1，环境准备

Flask + 文件系统，小站没用数据库，直接读写文件。

2，"微博"页面设计

输入框支持文字加粗、颜色、分段，插入链接、图片、视频。

3，长博页面模板

写长文章的模板，页面设计

4，文件锁

参考数据库锁，防止文件同时被多个进程写入，修改文件流程：拿锁、锁定、释放

5，点赞收藏评论功能

6，管理功能

下面是博客系统的主入口：

下面进入正题

1，环境准备

云主机，对于普通的个人小型网站，推荐配置：

CPU：1核或2核
内存：2GB或4GB
存储空间：80GB
带宽：2M~4M

提醒，带宽不要选大，多了用不完。假设页面大小为30KB，同时在线10000人，并发量1000人，需要的带宽为30KB×1000=30000KB，约等于30M。

云主机有一个公网IP，这个IP就是网站入口，可不申请域名。也可以申请，将域名和IP绑定。

网站模板，选择Flask，对小白友好。Flask安装很简单，此处略过。

安装好之后，在flask主目录下新建目录：templates、static。

templates:存放网页html文件

static:存放js,css,图片等资源文件

新建main.py文件，配置云主机内网IP。

if name == 'main':

app.run(host='内网IP',port=80)

端口默认80。如果端口被占用，把占用端口的改成其它端口。网站如果不用80端口，访问时要加上端口，太丑。

对于小网站，数据库开销大，直接文件系统或python自带的sqlite3，简单方便。

2，"微博"页面设计

微博用于日常记录，整体用HTML表格设计。

核心代码Jira，HTML完整代码链接

html 复制代码

            <tr><td colspan="10" ><hr style="height:0.2px;border:none;border-top:0.2px dashed lightgray;"></td></tr>
            {% for i in comms['w'] %}
            <tr><td colspan="10" style="text-align: left">

                {% for j in i[1][0] %}<!--文字  http://aitouzi.vip/post/2024/009  -->
                <p style="color:{{j[0]}};font-weight:{{j[5]}};font-size:{{j[6]}}px">{{j[1]}}
                        <!-- 链接 -->
                        <a href="{{j[2]}}" style="color:{{j[9]}}">{{j[3]}}</a>{{j[4]}}
                        <span style="font-size:12px;color:{{j[8]}}">{{j[7]}}</span>
                {% endfor %}

                <div style="text-align:left;margin-left:5%">
                {% for k in i[1][1] %}<!--图片 -->
                <img style="height: {{k[0]}}px;width: {{k[1]}}px" class="thum-img" src="{{k[2]}}" onclick='showBgImg(this)'>
                {% endfor %}

                {% for k in i[1][2] %}<!-- 视频 -->
                <video width="{{k[0]}}" height="{{k[1]}}" controls loop poster = '{{k[3]}}'>
                        <source src="{{k[2]}}" type="video/mp4">
                </video>
                {% endfor %}

                </div>
            </td></tr>

2.1 输入框设计

前端textarea，后端根据关键词解析，首先按img/mp4切分，再按ppp切换，在每一段中继续按关键词clr/link切分，最后再按前端结构拼起来。没有img/mp4/link，默认为空。

2.2 评论功能

点击评论，弹出输入框：

写评论，提交评论。实现方式简单，将评论追加到微博末尾，作为正文一部分。新闻的评论和底部留言不作为正文内容，位于正文下方，参考链接。

2.3 点赞收藏

点赞收藏用ajax。点赞传递一个参数type，0表示点赞，1表示收藏。收藏传两个参数type和link，link指当前网页链接。

html 复制代码

        $.ajax({
                type: 'GET',
                url: '/acc',
                dataType: 'json',
                data:{'type':0},
                success: function(res){
                    alert(res[1].status)
                },
                })
        }

3，长博文模板

准备一篇博文之后，以后每次发博就在上篇基础上修改。我用pycharm编辑，很方便。参考链接

4，文件锁

因为网站没有用数据库，读写注意参考数据库，写前先上锁，写完释放。

用一文件记录文件状态，1表示占用，0表示未占用。如果要写文件时，文件状态是1，需要等文件释放。

python 复制代码

#检查文件是否在使用，如果是则等待
def check_w8(_file):

    res = is_using(_file)
    #文件使用中，等待
    while (res == IN_USE):
        time.sleep(0.1)
        res = is_using(_file)
        #print("等待中")
    return NO_USE

修改文件流程：检查，修改文件为占用，修改文件，修改文件为释放。

5，管理功能

管理功能主要包括：系统监控、修改微博、删除隐藏微博或评论。

系统监控：监控重点模块/进程状态，出现问题发送邮件。

技术实现：CSS 画圆圈+ 心跳消息。

javascript 复制代码

//CSS
.circle {
        display: inline-block;
        margin-left: 5px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: {{clr}};
        margin-right: 5px;
    }

//Javascript 心跳消息，1分钟检查一次，异常时前端修改颜色，后端同时发邮件通知
function heartbeat() {
    $.ajax({
        url: '/heart',
        type: 'GET',
        success: function(res) {
            const circle = document.getElementById('cct');
            if (res.status == 0) {circle.style.backgroundColor = 'red';}
            else {circle.style.backgroundColor = '#00FF00';}
        },
    });
}

setInterval(heartbeat,60000)

发微博、长博、图片、视频，有评论、点赞、收藏、删除和管理功能，基本能满足个人记录需求。

以上是做网站的主要内容，如果有其他疑问，可以留言讨论。