喜欢的博客


喜欢这位的文章:http://www.cnblogs.com/wanqieddy/p/3836477.html#3270232

在个人博客中添加“喜欢”功能可以提升用户体验,增加用户互动性。以下是一个简单的实现步骤: ### 1. 数据库设计 首先,需要在数据库中添加一个表来记录用户对文章的喜欢情况。假设我们有一个`articles`表和一个`users`表,可以创建一个`likes`表来记录喜欢关系。 ```sql CREATE TABLE likes ( id INT AUTO_INCREMENT PRIMARY KEY, user_id INT NOT NULL, article_id INT NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (user_id) REFERENCES users(id), FOREIGN KEY (article_id) REFERENCES articles(id) ); ``` ### 2. 前端实现 在前端页面中,添加一个“喜欢”按钮,并使用JavaScript来处理点击事件。 ```html <button id="like-button" data-article-id="{{ article.id }}">喜欢</button> <span id="like-count">{{ likes_count }}</span> <script> document.getElementById('like-button').addEventListener('click', function() { const articleId = this.getAttribute('data-article-id'); fetch('/like', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRFToken': getCookie('csrftoken') }, body: JSON.stringify({ article_id: articleId }) }) .then(response => response.json()) .then(data => { document.getElementById('like-count').innerText = data.likes_count; }); }); function getCookie(name) { let cookieValue = null; if (document.cookie && document.cookie !== '') { const cookies = document.cookie.split(';'); for (let i = 0; i < cookies.length; i++) { const cookie = cookies[i].trim(); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) === (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } </script> ``` ### 3. 后端实现 在后端,创建一个API接口来处理“喜欢”请求,并更新数据库。 ```python from flask import Flask, request, jsonify from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///blog.db' db = SQLAlchemy(app) class Like(db.Model): id = db.Column(db.Integer, primary_key=True) user_id = db.Column(db.Integer, nullable=False) article_id = db.Column(db.Integer, nullable=False) created_at = db.Column(db.DateTime, default=db.func.current_timestamp()) @app.route('/like', methods=['POST']) def like(): data = request.get_json() article_id = data.get('article_id') user_id = 1 # 这里应该是当前登录用户的ID like = Like.query.filter_by(user_id=user_id, article_id=article_id).first() if like: db.session.delete(like) db.session.commit() likes_count = Like.query.filter_by(article_id=article_id).count() return jsonify({'likes_count': likes_count}) else: new_like = Like(user_id=user_id, article_id=article_id) db.session.add(new_like) db.session.commit() likes_count = Like.query.filter_by(article_id=article_id).count() return jsonify({'likes_count': likes_count}) if __name__ == '__main__': app.run(debug=True) ``` ### 4. 总结 通过以上步骤,你可以在个人博客中添加一个“喜欢”功能。这个功能不仅能提升用户体验,还能增加用户互动性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值