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)

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

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

相关推荐
Q_192849990617 分钟前
基于Spring Boot的阿坝州旅游系统
spring boot·后端·旅游
Zhu_S W1 小时前
SpringBoot项目的创建方式(五种)
java·spring boot·后端·maven·idea
我不想写昵称1 小时前
1. JasperSoft介绍与安装
java·后端·报表
全栈开发帅帅1 小时前
基于springboot+vue实现的医院急诊(病房)管理系统 (源码+L文+ppt)4-122
java·spring boot·后端
ZWZhangYu2 小时前
【MyBatis源码分析】使用 Java 动态代理,实现一个简单的插件机制
java·python·mybatis
一起学习计算机2 小时前
16、房产销售系统
java·spring boot·后端
Srlua2 小时前
基于预测反馈的情感分析情境学习
人工智能·python
Q_19284999062 小时前
基于Spring Boot的高校实验室预约系统
java·spring boot·后端
Q_19284999062 小时前
基于Spring Boot的动漫交流与推荐平台
java·spring boot·后端
计算机毕设指导63 小时前
基于Springboot华强北商城二手手机管理系统【附源码】
java·开发语言·spring boot·后端·mysql·spring·intellij idea