网站效果案例,通许画册设计网站,抖音代运营带货费用怎么收费,原创定制Flask博客点赞系统
一个基于Flask的简单博客系统#xff0c;具有文章展示和点赞功能。系统使用MySQL存储数据#xff0c;支持文章展示、点赞/取消点赞等功能。
功能特点 文章列表展示文章详情查看#xff08;模态框展示#xff09;点赞/取消点赞功能#xff08;每个IP只…Flask博客点赞系统
一个基于Flask的简单博客系统具有文章展示和点赞功能。系统使用MySQL存储数据支持文章展示、点赞/取消点赞等功能。
功能特点 文章列表展示文章详情查看模态框展示点赞/取消点赞功能每个IP只能点赞一次响应式设计支持移动端优雅的动画效果实时点赞数更新 技术栈 后端Flask数据库MySQL前端 Bootstrap 5jQueryFont Awesome 5 (心形图标) 系统要求 Python 3.6MySQL 5.7 项目结构
├── README.md
├── requirements.txt
├── schema.sql
├── app.py
├── insert_test_data.py
└── templates/└── index.html安装步骤
克隆项目到本地安装依赖包
pip install -r requirements.txt创建数据库和表
CREATE DATABASE blog_db;
USE blog_db;运行schema.sql中的建表语句
source schema.sql;修改数据库配置 在app.py中修改数据库连接信息
db_config {host: your_host,port: your_port,user: your_username,password: your_password,database: blog_db
}插入测试数据
python insert_test_data.py运行应用
python app.py 访问 http://localhost:5000 即可看到效果
文件说明
app.py: 主应用文件包含所有路由和业务逻辑schema.sql: 数据库表结构requirements.txt: 项目依赖insert_test_data.py: 测试数据生成脚本templates/index.html: 前端模板文件
数据库设计
articles表 id: 文章IDtitle: 文章标题content: 文章内容author: 作者publish_time: 发布时间likes: 点赞数 user_likes表 id: 记录IDarticle_id: 文章ID外键user_ip: 用户IPcreated_at: 点赞时间 API接口
获取文章列表
路由GET /返回渲染后的文章列表页面
获取文章内容
路由GET /article/article_id返回文章内容的JSON数据
点赞/取消点赞
路由POST /like/article_id返回更新后的点赞数和操作状态的JSON数据
注意事项 确保MySQL服务已启动检查数据库连接配置是否正确确保所需端口未被占用建议在虚拟环境中运行项目 可能的改进方向 添加用户认证系统实现文章评论功能添加文章分类和标签实现文章搜索功能添加管理后台优化移动端体验添加文章分享功能 1.requirements.txt
flask2.0.1
mysql-connector-python8.0.262.schema.sql
CREATE DATABASE blog_db;
USE blog_db;
CREATE TABLE IF NOT EXISTS articles (id INT AUTO_INCREMENT PRIMARY KEY,title VARCHAR(200) NOT NULL,content TEXT NOT NULL,author VARCHAR(100) NOT NULL,publish_time DATETIME NOT NULL,likes INT DEFAULT 0
);CREATE TABLE IF NOT EXISTS user_likes (id INT AUTO_INCREMENT PRIMARY KEY,article_id INT NOT NULL,user_ip VARCHAR(50) NOT NULL,created_at DATETIME NOT NULL,UNIQUE KEY unique_like (article_id, user_ip),FOREIGN KEY (article_id) REFERENCES articles(id)
);3.dianzan.py
from flask import Flask, render_template, jsonify, request
import mysql.connector
from datetime import datetimeapp Flask(__name__)数据库配置
db_config {host: localhost,port: port,user: your_username,password: your_password,database: blog_db
}def get_db():return mysql.connector.connect(**db_config)app.route(/)
def index():conn get_db()cursor conn.cursor(dictionaryTrue)# 获取用户IPuser_ip request.remote_addr# 获取文章列表和用户点赞状态cursor.execute(SELECT a.*, CASE WHEN ul.id IS NOT NULL THEN 1 ELSE 0 END as user_likedFROM articles aLEFT JOIN user_likes ul ON a.id ul.article_id AND ul.user_ip %sORDER BY a.publish_time DESC, (user_ip,))articles cursor.fetchall()cursor.close()conn.close()return render_template(index.html, articlesarticles)app.route(/article/int:article_id)
def get_article(article_id):conn get_db()cursor conn.cursor(dictionaryTrue)cursor.execute(SELECT content FROM articles WHERE id %s, (article_id,))article cursor.fetchone()cursor.close()conn.close()if article is None:return jsonify({error: Article not found}), 404return jsonify({content: article[content]})app.route(/like/int:article_id, methods[POST])
def like_article(article_id):conn get_db()cursor conn.cursor()user_ip request.remote_addrtry:# 检查是否已经点赞cursor.execute(SELECT id FROM user_likes WHERE article_id %s AND user_ip %s, (article_id, user_ip))existing_like cursor.fetchone()if existing_like:# 如果已经点赞则取消点赞cursor.execute(DELETE FROM user_likes WHERE article_id %s AND user_ip %s, (article_id, user_ip))cursor.execute(UPDATE articles SET likes likes - 1 WHERE id %s, (article_id,))action unlikedelse:# 如果未点赞则添加点赞cursor.execute(INSERT INTO user_likes (article_id, user_ip, created_at) VALUES (%s, %s, %s), (article_id, user_ip, datetime.now()))cursor.execute(UPDATE articles SET likes likes 1 WHERE id %s, (article_id,))action likedconn.commit()# 获取最新点赞数cursor.execute(SELECT likes FROM articles WHERE id %s, (article_id,))likes cursor.fetchone()[0]cursor.close()conn.close()return jsonify({likes: likes, action: action})except mysql.connector.Error as err:conn.rollback()cursor.close()conn.close()return jsonify({error: str(err)}), 500# 添加一个用于插入测试数据的辅助函数
def add_test_article(title, content, author):conn get_db()cursor conn.cursor()cursor.execute(INSERT INTO articles (title, content, author, publish_time, likes) VALUES (%s, %s, %s, %s, %s),(title, content, author, datetime.now(), 0))conn.commit()cursor.close()conn.close()if __name__ __main__:app.run(debugTrue)
4.insert_test_data.py
from app import get_db
from datetime import datetime, timedeltadef insert_test_data():conn get_db()cursor conn.cursor()# 准备测试数据test_articles [{title: 人工智能发展现状与未来趋势,content: 人工智能技术正在快速发展从机器学习到深度学习从计算机视觉到自然语言处理各个领域都取得了突破性进展。本文将详细介绍AI领域的最新发展动态和未来发展方向。近年来的主要突破1. 大规模语言模型的突破2. 自动驾驶技术的进展3. AI在医疗领域的应用未来展望- 更强大的多模态AI系统- 更高效的算法和架构- 更广泛的商业应用场景,author: 张智能,likes: 42},{title: 5G技术应用与产业变革,content: 5G作为新一代移动通信技术正在深刻改变着各个行业。本文将分析5G技术在工业互联网、智慧城市等领域的具体应用案例。主要应用领域1. 工业自动化2. 远程医疗3. 车联网4. 智慧城市建设产业影响- 制造业智能化转型- 服务业数字化升级- 新业态快速涌现,author: 李网络,likes: 38},{title: 区块链技术与金融创新,content: 区块链技术正在重塑金融服务业从支付结算到供应链金融带来了全新的业务模式和机遇。本文深入分析区块链在金融领域的创新应用。技术优势1. 去中心化2. 不可篡改3. 智能合约应用场景- 跨境支付- 供应链金融- 数字货币- 资产数字化,author: 王区块,likes: 25}]# 插入测试数据for article in test_articles:# 随机生成过去7天内的时间random_days timedelta(daysrandom.randint(0, 7),hoursrandom.randint(0, 23),minutesrandom.randint(0, 59))publish_time datetime.now() - random_dayscursor.execute(INSERT INTO articles (title, content, author, publish_time, likes) VALUES (%s, %s, %s, %s, %s),(article[title], article[content], article[author],publish_time, article[likes]))conn.commit()cursor.close()conn.close()print(测试数据插入成功)if __name__ __main__:import randominsert_test_data()5.templates/index.html
!DOCTYPE html
html langzh
headmeta charsetUTF-8title博客点赞系统/titlelink hrefhttps://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css relstylesheetlink relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.cssstyle.article-card {transition: transform 0.2s;cursor: pointer;}.article-card:hover {transform: translateY(-5px);box-shadow: 0 4px 15px rgba(0,0,0,0.1);}.like-btn {transition: all 0.2s;padding: 8px 12px;border-radius: 50%;width: 45px;height: 45px;display: flex;align-items: center;justify-content: center;}.like-btn:hover {transform: scale(1.1);}.like-btn .fa-heart {font-size: 1.2em;}.like-btn.liked {background-color: #ff4757;border-color: #ff4757;color: white;}.like-btn.liked:hover {background-color: #ff6b81;border-color: #ff6b81;}.like-count {font-size: 0.9em;color: #666;margin-top: 5px;}/style
/head
bodydiv classcontainer py-5h1 classtext-center mb-5博客文章/h1div classrow{% for article in articles %}div classcol-md-6 mb-4div classcard article-carddiv classcard-bodyh5 classcard-title article-title data-id{{ article.id }}{{ article.title }}/h5div classd-flex justify-content-between align-items-centerdiv classtext-mutedsmall作者: {{ article.author }}/smallbrsmall发布时间: {{ article.publish_time.strftime(%Y-%m-%d %H:%M) }}/small/divdiv classtext-centerbutton classbtn btn-outline-primary like-btn {% if article.user_liked %}liked{% endif %}data-id{{ article.id }}i class{% if article.user_liked %}fas{% else %}far{% endif %} fa-heart/i/buttondiv classlike-count mt-1 idlikes-{{ article.id }}{{ article.likes }} 赞/div/div/div/div/div/div{% endfor %}/div/div!-- 文章内容模态框 --div classmodal fade idarticleModal tabindex-1div classmodal-dialog modal-lgdiv classmodal-contentdiv classmodal-headerh5 classmodal-title文章内容/h5button typebutton classbtn-close data-bs-dismissmodal/button/divdiv classmodal-bodydiv idarticleContent/div/div/div/div/divscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js/scriptscript$(document).ready(function() {// 点赞功能$(.like-btn).click(function(e) {e.stopPropagation();const btn $(this);const articleId btn.data(id);const heartIcon btn.find(i);$.post(/like/${articleId}, function(data) {$(#likes-${articleId}).text(data.likes 赞);if (data.action liked) {btn.addClass(liked);heartIcon.removeClass(far).addClass(fas);} else {btn.removeClass(liked);heartIcon.removeClass(fas).addClass(far);}});});// 查看文章内容$(.article-title).click(function() {const articleId $(this).data(id);$.get(/article/${articleId}, function(data) {$(#articleContent).html(data.content);$(#articleModal).modal(show);});});});/script
/body
/html
