简单WEB网站

第一步：创建项目结构
在PyCharm中创建以下目录结构
my_web_app/
├── backend/ # Flask后端代码
├── frontend/ # Vue前端代码
├── venv/ # Python虚拟环境（可选）
└──requirements.txt #安装库要求文件
第二步：前端VUE和后端FLASK
1.安装FLASK
使用临时镜像源安装包
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple flask flask-cors

2.创建Flask应用（backend/app.py）
代码：

导入Flask类和jsonify函数

from flask import Flask, jsonify

导入CORS扩展，用于处理跨域请求

from flask_cors import CORS

创建Flask应用实例

__name__参数让Flask知道在哪里查找模板和静态文件

app = Flask(name)

启用CORS，允许所有域跨域访问

在开发环境中使用，生产环境应限制为特定域名

CORS(app)

定义一个路由：当访问'/api/hello'时，执行hello函数

@app.route是装饰器，将URL映射到函数

@app.route('/api/hello')
def hello():
# 返回JSON格式的响应
# jsonify函数将Python字典转换为JSON响应
return jsonify(message="Hello from Flask!")

如果这个文件被直接运行（而不是作为模块导入）

if name == 'main':
# 启动Flask开发服务器
# debug=True: 开启调试模式（代码修改后自动重启）
# port=5000: 指定服务器在5000端口运行
app.run(debug=True, port=5000)

逐行解释：
1.​from flask import Flask, jsonify​
•导入Flask框架的核心类Flask和jsonify函数
•Flask类用于创建Web应用实例
•jsonify用于将Python数据转换为JSON格式的HTTP响应
2.​from flask_cors import CORS​
•导入flask-cors扩展，解决跨域资源共享问题
•允许前端应用（运行在不同端口）访问后端API
3.​app = Flask(name)​
•创建Flask应用实例
•__name__是Python的特殊变量，表示当前模块名
•Flask使用它来确定应用的根目录
4.​CORS(app)​
•初始化CORS扩展
•允许所有域名跨域访问（开发环境使用）
•生产环境应指定特定域名：CORS(app, resources={r"/api/*": {"origins": "http://your-frontend-domain.com"}}
5.​@app.route('/api/hello')​
•装饰器，定义URL路由规则
•当用户访问http://localhost:5000/api/hello时
•Flask会调用下面的hello()函数处理请求
6.​def hello():​
•定义处理请求的函数
•函数名可以是任意名称，但应具有描述性
7.​return jsonify(message="Hello from Flask!")​
•返回JSON格式的响应
•jsonify自动设置正确的Content-Type头为application/json
•创建格式如下的响应：{"message": "Hello from Flask!"}
8.​if name == 'main':​
•Python的标准写法
•确保代码只在直接运行此文件时执行
•当文件被导入为模块时不会执行
9.​app.run(debug=True, port=5000)​
•启动Flask开发服务器
•debug=True：开启调试模式（自动重载代码，显示详细错误）
•port=5000：指定服务器监听5000端口

3.Vue前端代码（frontend/src/views/HomeView.vue）
代码：

逐行解释：
模板部分：​​

1.​