后端 - Python (Flask)ftinc.cn
首先,你需要安装 Flask。如果你还没有安装,可以通过 pip 安装:
bash
pip install flask
然后,创建一个 Python 文件,比如 app.py,编写以下代码:
python
from flask import Flask, jsonify, request
app = Flask(name)
假设的游戏列表
games = [
{“id”: 1, “name”: “游戏A”, “price”: 99.99},
{“id”: 2, “name”: “游戏B”, “price”: 149.99},
{“id”: 3, “name”: “游戏C”, “price”: 49.99}
]
@app.route(‘/games’, methods=[‘GET’])
def get_games():
return jsonify(games)
@app.route(‘/games/int:game_id’, methods=[‘GET’])
def get_game(game_id):
game = next((item for item in games if item[“id”] == game_id), None)
if game:
return jsonify(game)
else:
return jsonify({“error”: “Game not found”}), 404
if name == ‘main’:
app.run(debug=True)
前端 - HTML/CSS/JavaScript
在 Flask 项目的同级目录下,创建一个 index.html 文件:
html
游戏商城
加载游戏<script>
$(document).ready(function() {
$('#loadGames').click(function() {
$.get('/games', function(data) {
var list = $('#gamesList');
list.empty();
data.forEach(function(game) {
list.append('<p>游戏名称: ' + game.name + ', 价格: $' + game.price.toFixed(2) + '</p>');
});
});
});
});
</script>
运行和测试 确保 Flask 应用正在运行(通过 Python 的 app.run())。 在浏览器中打开 index.html 文件。 点击“加载游戏”按钮,页面会显示从 Flask 应用获取的游戏列表。 扩展 这只是一个非常基础的示例。在实际的游戏商城项目中,你可能需要添加用户认证、支付接口、数据库支持(如 SQLAlchemy)、更复杂的路由管理、前端框架(如 React, Vue)等。
此外,如果你希望用其他语言和技术栈,如 Node.js(后端)和 React/Vue(前端),基本原理相同,但实现细节会有所不同。创建一个游戏商城的完整代码涉及到前端和后端的开发,这里我将分别用几种常见的编程语言和技术栈给出一个非常基础的示例框架。我们将用 Python(后端,使用 Flask 框架)和 HTML/CSS/JavaScript(前端)来构建这个示例。
后端 - Python (Flask)
首先,你需要安装 Flask。如果你还没有安装,可以通过 pip 安装:
bash
pip install flask
然后,创建一个 Python 文件,比如 app.py,编写以下代码:
python
from flask import Flask, jsonify, request
app = Flask(name)
假设的游戏列表
games = [
{“id”: 1, “name”: “游戏A”, “price”: 99.99},
{“id”: 2, “name”: “游戏B”, “price”: 149.99},
{“id”: 3, “name”: “游戏C”, “price”: 49.99}
]
@app.route(‘/games’, methods=[‘GET’])
def get_games():
return jsonify(games)
@app.route(‘/games/int:game_id’, methods=[‘GET’])
def get_game(game_id):
game = next((item for item in games if item[“id”] == game_id), None)
if game:
return jsonify(game)
else:
return jsonify({“error”: “Game not found”}), 404
if name == ‘main’:
app.run(debug=True)
前端 - HTML/CSS/JavaScript
在 Flask 项目的同级目录下,创建一个 index.html 文件:
html
游戏商城
加载游戏<script>
$(document).ready(function() {
$('#loadGames').click(function() {
$.get('/games', function(data) {
var list = $('#gamesList');
list.empty();
data.forEach(function(game) {
list.append('<p>游戏名称: ' + game.name + ', 价格: $' + game.price.toFixed(2) + '</p>');
});
});
});
});
</script>
运行和测试 确保 Flask 应用正在运行(通过 Python 的 app.run())。 在浏览器中打开 index.html 文件。 点击“加载游戏”按钮,页面会显示从 Flask 应用获取的游戏列表。 扩展 这只是一个非常基础的示例。在实际的游戏商城项目中,你可能需要添加用户认证、支付接口、数据库支持(如 SQLAlchemy)、更复杂的路由管理、前端框架(如 React, Vue)等。
此外,如果你希望用其他语言和技术栈,如 Node.js(后端)和 React/Vue(前端),基本原理相同,但实现细节会有所不同。