- 前端 (HTML/CSS/JavaScript)sidaotech.com
index.html
html
游戏商城
<script src="script.js"></script>
style.css
css
body {
font-family: Arial, sans-serif;
}
#game-list {
margin-top: 20px;
}
.game-item {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
script.js
javascript
// 假设从后端API获取游戏数据
fetch(‘/api/games’)
.then(response => response.json())
.then(data => {
const gameList = document.getElementById(‘game-list’);
data.forEach(game => {
const item = document.createElement(‘div’);
item.className = ‘game-item’;
item.innerHTML = <h2>${game.name}</h2><p>价格: ${game.price}</p>
;
gameList.appendChild(item);
});
})
.catch(error => console.error(‘Error:’, error));
2. 后端 (Python Flask)
app.py
python
from flask import Flask, jsonify
import sqlite3
app = Flask(name)
DATABASE = ‘game_store.db’
def get_db_connection():
conn = sqlite3.connect(DATABASE)
conn.row_factory = sqlite3.Row
return conn
@app.route(‘/api/games’)
def get_games():
conn = get_db_connection()
cur = conn.cursor()
cur.execute(‘SELECT * FROM games’)
games = cur.fetchall()
conn.close()
return jsonify([dict(row) for row in games])
if name == ‘main’:
app.run(debug=True)
3. 数据库 (SQLite)
你需要在SQLite中创建一个数据库和表。这通常可以通过SQLite的命令行工具或使用Flask应用中的代码来完成。
SQLite 命令行示例
sql
CREATE TABLE games (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL,
price REAL NOT NULL
);
INSERT INTO games (name, price) VALUES (‘游戏A’, 49.99);
INSERT INTO games (name, price) VALUES (‘游戏B’, 39.99);
注意事项
确保你安装了Flask (pip install flask).
你需要创建一个SQLite数据库文件(在这个例子中是game_store.db),并插入一些示例数据。
前端JavaScript中的API URL (/api/games) 需要与后端Flask路由相匹配。
这只是一个非常基础的示例,实际项目中可能需要考虑安全性(如CSRF保护、HTTPS等)、错误处理、性能优化等方面。由于创建一个完整的游戏商城系统涉及多个方面(如前端展示、后端逻辑、数据库管理等),并且不同编程语言有不同的应用场景和优势,这里我将为你提供一个简化的示例框架,涵盖前端(HTML/CSS/JavaScript)、后端(Python 使用 Flask 框架)以及数据库(SQLite)的基本概念。
- 前端 (HTML/CSS/JavaScript)
index.html
html
游戏商城
<script src="script.js"></script>
style.css
css
body {
font-family: Arial, sans-serif;
}
#game-list {
margin-top: 20px;
}
.game-item {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
script.js
javascript
// 假设从后端API获取游戏数据
fetch(‘/api/games’)
.then(response => response.json())
.then(data => {
const gameList = document.getElementById(‘game-list’);
data.forEach(game => {
const item = document.createElement(‘div’);
item.className = ‘game-item’;
item.innerHTML = <h2>${game.name}</h2><p>价格: ${game.price}</p>
;
gameList.appendChild(item);
});
})
.catch(error => console.error(‘Error:’, error));
2. 后端 (Python Flask)
app.py
python
from flask import Flask, jsonify
import sqlite3
app = Flask(name)
DATABASE = ‘game_store.db’
def get_db_connection():
conn = sqlite3.connect(DATABASE)
conn.row_factory = sqlite3.Row
return conn
@app.route(‘/api/games’)
def get_games():
conn = get_db_connection()
cur = conn.cursor()
cur.execute(‘SELECT * FROM games’)
games = cur.fetchall()
conn.close()
return jsonify([dict(row) for row in games])
if name == ‘main’:
app.run(debug=True)
3. 数据库 (SQLite)
你需要在SQLite中创建一个数据库和表。这通常可以通过SQLite的命令行工具或使用Flask应用中的代码来完成。
SQLite 命令行示例
sql
CREATE TABLE games (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL,
price REAL NOT NULL
);
INSERT INTO games (name, price) VALUES (‘游戏A’, 49.99);
INSERT INTO games (name, price) VALUES (‘游戏B’, 39.99);
注意事项
确保你安装了Flask (pip install flask).
你需要创建一个SQLite数据库文件(在这个例子中是game_store.db),并插入一些示例数据。
前端JavaScript中的API URL (/api/games) 需要与后端Flask路由相匹配。
这只是一个非常基础的示例,实际项目中可能需要考虑安全性(如CSRF保护、HTTPS等)、错误处理、性能优化等方面。