当前位置: 首页 > article >正文

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完整代码链接 

            <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指当前网页链接。

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

3,长博文模板

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

4,文件锁

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

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

#检查文件是否在使用,如果是则等待
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 画圆圈+ 心跳消息。

//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)

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

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


http://www.kler.cn/a/398632.html

相关文章:

  • dns服务器
  • 录的视频怎么消除杂音?从录制到后期的杂音消除攻略
  • mysql中mvcc如何处理纯读事务的?
  • w039基于Web足球青训俱乐部管理后台系统开发
  • MySQL的游标和While循环的详细对比
  • 【Chapter 3】Machine Learning Classification Case_Prediction of diabetes-XGBoost
  • 大语言模型通用能力排行榜(2024年10月8日更新)
  • Qt小知识-Q_GLOBAL_STATIC
  • 鸿蒙next版开发:分析JS Crash(进程崩溃)
  • AJAX笔记 (速通精华版)
  • 智能运维:提升效率与响应速度的关键能力
  • TikZ 绘图学习笔记
  • 多目标优化算法:多目标蛇鹫优化算法(MOSBOA)求解ZDT1、ZDT2、ZDT3、ZDT4、ZDT6,提供完整MATLAB代码
  • 思科设备如何配置第二个radius服务器?
  • 基于微信小程序的校园助手+LW示例参考
  • 【3D Slicer】的小白入门使用指南九
  • 【HOT100第五天】搜索二维矩阵 II,相交链表,反转链表,回文链表
  • MATLAB实现历史模拟法计算VaR(Value at Risk)
  • [Meachines] [Hard] Yummy 任意文件下载+JWT签名绕过+SQLI+定时任务劫持+hg权限提升+rsync权限提升
  • Scala的Array(1)
  • 服务端高并发分布式结构进阶之路
  • QEMU 模拟器中运行的 Linux 系统
  • word 中长公式换行 / 对齐 | Mathtype 中长公式换行拆分 | latex 中长公式换行
  • linux笔记(防火墙)
  • 常见的压缩数据结构
  • 软考之面向服务架构SOA-通信方法