- 后端(Python Flask 示例)33066.cn
这里我们使用Flask框架来创建一个简单的RESTful API。
安装Flask:
bash
pip install Flask
Flask应用示例(app.py):
python
from flask import Flask, jsonify, request
from flask_sqlalchemy import SQLAlchemy
app = Flask(name)
app.config[‘SQLALCHEMY_DATABASE_URI’] = ‘sqlite:///game_store.db’
app.config[‘SQLALCHEMY_TRACK_MODIFICATIONS’] = False
db = SQLAlchemy(app)
class Game(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(80), unique=True, nullable=False)
price = db.Column(db.Float, nullable=False)
def __repr__(self):
return f'<Game {self.name}>'
@app.route(‘/games’, methods=[‘GET’])
def get_games():
games = Game.query.all()
output = []
for game in games:
game_data = {‘id’: game.id, ‘name’: game.name, ‘price’: game.price}
output.append(game_data)
return jsonify({‘games’: output})
@app.route(‘/games’, methods=[‘POST’])
def add_game():
data = request.get_json()
new_game = Game(name=data[‘name’], price=data[‘price’])
db.session.add(new_game)
db.session.commit()
return jsonify({‘message’: ‘Game added successfully’}), 201
if name == ‘main’:
db.create_all()
app.run(debug=True)
2. 前端(HTML + JavaScript 示例)
这里使用简单的HTML和JavaScript(使用Fetch API)来调用后端API。
index.html:
html
Game Store
Fetch Games<script>
async function fetchGames() {
const response = await fetch('/games');
const data = await response.json();
const gamesDiv = document.getElementById('games');
gamesDiv.innerHTML = '';
data.games.forEach(game => {
const gameElement = document.createElement('p');
gameElement.textContent = `Name: ${game.name}, Price:
$$
{game.price}`;
gamesDiv.appendChild(gameElement);
});
}
注意:
这里的代码非常基础,仅用于演示目的。
在生产环境中,你需要考虑安全性(如使用HTTPS、验证用户输入、防止SQL注入等)。
前端可以进一步使用现代JavaScript框架(如React, Vue, Angular)来构建更复杂的用户界面。
后端可以添加更多API端点,如更新游戏信息、删除游戏、用户认证和授权等。
数据库可以替换为MySQL或其他数据库系统,具体取决于你的需求和偏好。