在当今这个数字化时代,编程已经成为了我们生活中不可或缺的一部分,从智能手机到社交媒体平台,甚至到我们的日常生活,编程技术无处不在,本文将带领你走进编程的世界,作为一个优秀的评测编程专家,我将教你如何从零开始创建一个简单的QQ点赞网站。
我们需要了解什么是网站,网站是一个包含HTML、CSS和JavaScript等代码的文件集合,这些代码用于描述网页的结构、样式和交互,在这个过程中,我们将使用Python作为后端语言,因为它简单易学,适合初学者入门,我们还将使用Flask框架,它是一个轻量级的Web应用框架,可以帮助我们快速搭建网站。
我们将分为以下几个步骤来实现这个项目:
1、环境准备
在开始之前,我们需要确保已经安装了Python和Flask,如果没有安装,可以通过以下命令进行安装:
pip install Flask
2、创建项目结构
在你的电脑上创建一个新的文件夹,用于存放我们的项目文件,打开命令行工具,进入该文件夹,并运行以下命令初始化项目:
flask init-app
这将在当前文件夹下生成一个名为“app”的文件夹,用于存放我们的项目文件,我们需要修改项目的配置文件(app.py),以便正确设置路由和数据库。
3、配置路由和数据库
在“app”文件夹下找到“app.py”文件,打开并修改如下:
from flask import Flask, render_template, request, redirect, url_for from flask_sqlalchemy import SQLAlchemy import os app = Flask(__name__) basedir = os.path.abspath(os.path.dirname(__file__)) app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///' + os.path.join(basedir, 'db.sqlite') db = SQLAlchemy(app) class User(db.Model): id = db.Column(db.Integer, primary_key=True) username = db.Column(db.String(80), unique=True, nullable=False) likes = db.Column(db.Integer, default=0) @app.route('/') def index(): return render_template('index.html') @app.route('/like', methods=['POST']) def like(): user_id = request.form['user_id'] user = User.query.get(user_id) if user: user.likes += 1 db.session.commit() return redirect(url_for('index')) else: return "User not found" if __name__ == '__main__': app.run(debug=True)
4、创建模板文件和静态文件目录
在“app”文件夹下创建一个名为“templates”的文件夹,用于存放我们的HTML模板文件,在“app”文件夹下创建一个名为“static”的文件夹,用于存放我们的静态文件(如CSS、JavaScript等)。
5、编写HTML模板文件(index.html)
在“templates”文件夹下创建一个名为“index.html”的文件,并添加以下内容:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QQ点赞网站</title> </head> <body> <h1>欢迎来到QQ点赞网站!</h1> <form action="{{ url_for('like') }}" method="post"> <label for="user_id">请输入QQ号:</label> <input type="text" name="user_id" id="user_id" required> <button type="submit">点赞</button> </form> {% for user in users %} <div> <p>{{ user.username }}: {{ user.likes }}个赞</p> </div> {% endfor %} </body> </html>
6、运行项目并查看结果
在命令行工具中,进入“app”文件夹下的“venv”(Python虚拟环境),然后运行以下命令启动项目: