- 后端(Python 使用 Flask)ftinc.cn
安装 Flask 和其他依赖
bash
pip install flask flask_sqlalchemy
基础 Flask 应用结构
python
app.py
from flask import Flask, request, jsonify
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)
title = db.Column(db.String(80), unique=True, nullable=False)
price = db.Column(db.Float, nullable=False)
def __repr__(self):
return f'<Game {self.title}>'
@app.route(‘/games’, methods=[‘GET’])
def get_games():
games = Game.query.all()
return jsonify([{‘id’: game.id, ‘title’: game.title, ‘price’: game.price} for game in games])
@app.route(‘/games’, methods=[‘POST’])
def add_game():
data = request.get_json()
new_game = Game(title=data[‘title’], 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. 前端(React)
安装 Create React App
bash
npx create-react-app game-store-frontend
cd game-store-frontend
npm start
使用 Axios 调用后端 API
在 React 组件中,你可以使用 Axios 来获取和发送数据到 Flask 后端。
bash
npm install axios
示例组件
jsx
// GameList.js
import React, { useState, useEffect } from ‘react’;
import axios from ‘axios’;
function GameList() {
const [games, setGames] = useState([]);
useEffect(() => {
axios.get('http://localhost:5000/games')
.then(response => {
setGames(response.data);
})
.catch(error => {
console.error("There was an error!", error);
});
}, []);
return (
<div>
<h1>Game List</h1>
<ul>
{games.map(game => (
<li key={game.id}>{game.title} - ${game.price}</li>
))}
</ul>
</div>
);
}
export default GameList;
3. 数据库
这里使用的是 SQLite,但你可以根据需要切换到 PostgreSQL 或其他数据库。在 Flask 应用中,我们已经设置了数据库 URI。
-
部署
对于生产环境,你需要考虑使用更强大的服务器(如 Gunicorn + Nginx 对于 Flask),以及数据库服务(如 PostgreSQL 托管在 AWS RDS)。 -
安全性
确保你的应用处理了常见的安全问题,如 SQL 注入、跨站脚本(XSS)、跨站请求伪造(CSRF)等。
以上是一个非常基础的示例,实际的游戏商城系统会更加复杂,包括但不限于用户认证、支付集成、库存管理、促销活动等。由于直接提供完整的游戏商城代码会涉及大量的代码和多种技术栈(如前端、后端、数据库等),我将为你概述如何使用几种流行的编程语言和技术栈来搭建一个简单的游戏商城系统的基础框架。这里我们将考虑使用 Python (Flask 或 Django 用于后端), JavaScript (React 或 Vue.js 用于前端), 和 SQLite 或 PostgreSQL 作为数据库。
- 后端(Python 使用 Flask)
安装 Flask 和其他依赖
bash
pip install flask flask_sqlalchemy
基础 Flask 应用结构
python
app.py
from flask import Flask, request, jsonify
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)
title = db.Column(db.String(80), unique=True, nullable=False)
price = db.Column(db.Float, nullable=False)
def __repr__(self):
return f'<Game {self.title}>'
@app.route(‘/games’, methods=[‘GET’])
def get_games():
games = Game.query.all()
return jsonify([{‘id’: game.id, ‘title’: game.title, ‘price’: game.price} for game in games])
@app.route(‘/games’, methods=[‘POST’])
def add_game():
data = request.get_json()
new_game = Game(title=data[‘title’], 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. 前端(React)
安装 Create React App
bash
npx create-react-app game-store-frontend
cd game-store-frontend
npm start
使用 Axios 调用后端 API
在 React 组件中,你可以使用 Axios 来获取和发送数据到 Flask 后端。
bash
npm install axios
示例组件
jsx
// GameList.js
import React, { useState, useEffect } from ‘react’;
import axios from ‘axios’;
function GameList() {
const [games, setGames] = useState([]);
useEffect(() => {
axios.get('http://localhost:5000/games')
.then(response => {
setGames(response.data);
})
.catch(error => {
console.error("There was an error!", error);
});
}, []);
return (
<div>
<h1>Game List</h1>
<ul>
{games.map(game => (
<li key={game.id}>{game.title} - ${game.price}</li>
))}
</ul>
</div>
);
}
export default GameList;
3. 数据库
这里使用的是 SQLite,但你可以根据需要切换到 PostgreSQL 或其他数据库。在 Flask 应用中,我们已经设置了数据库 URI。
-
部署
对于生产环境,你需要考虑使用更强大的服务器(如 Gunicorn + Nginx 对于 Flask),以及数据库服务(如 PostgreSQL 托管在 AWS RDS)。 -
安全性
确保你的应用处理了常见的安全问题,如 SQL 注入、跨站脚本(XSS)、跨站请求伪造(CSRF)等。
以上是一个非常基础的示例,实际的游戏商城系统会更加复杂,包括但不限于用户认证、支付集成、库存管理、促销活动等。