Skip to content
BranchesTags

Repository files navigation

绿行积分系统 - 完整使用教程

碳中和城市绿色出行积分系统，支持用户注册、登录、行程上报、积分累积与商品兑换。

📋 目录

🔧 环境要求

必需软件

  • Python 3.8+（推荐 3.9 或更高版本）
  • 现代浏览器（Chrome / Edge / Firefox 最新版）

检查 Python 版本

打开 PowerShell 或命令提示符，执行：

python --version

应显示 Python 3.8.x 或更高版本。

📦 安装步骤

第一步：打开项目目录

在 PowerShell 中进入项目文件夹：

cd C:\Users\LYT\Desktop\软件工程

第二步：创建 Python 虚拟环境

python -m venv .venv

这会在当前目录创建 .venv 文件夹，用于隔离项目依赖。

第三步：激活虚拟环境

.venv\Scripts\Activate.ps1

注意：如果遇到"无法加载文件"错误，执行以下命令后重试：

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

激活成功后，命令行前会显示 (.venv)。

第四步：安装后端依赖

pip install -r backend\requirements.txt

安装 Flask 和 Flask-CORS 库，大约需要 10-30 秒。

🚀 启动系统

启动后端服务器

在虚拟环境激活状态下，执行：

python backend\app.py

成功标志：看到以下输出表示后端已启动

 * Running on http://127.0.0.1:5000
 * Restarting with stat

保持此窗口运行，不要关闭。

打开前端页面

  1. 用文件资源管理器打开项目目录 C:\Users\LYT\Desktop\软件工程
  2. 找到 1.html 文件
  3. 右键点击 → 选择"打开方式" → 选择你的浏览器（Chrome / Edge / Firefox）

或直接双击 1.html（会用默认浏览器打开）。

📖 功能使用指南

1️⃣ 用户注册

首次使用需要先注册账号：

  1. 页面打开后，点击"注册"标签
  2. 填写注册信息：
    • 用户名：6-16 位字母或数字（例如：zhangsan123）
    • 密码：至少 8 位（例如：mypassword123）
    • 手机号：11 位手机号码（例如：13800138000）
  3. 点击"注册"按钮
  4. 看到"注册成功！欢迎加入绿色出行大家庭"提示表示成功
  5. 注册成功后会自动跳转到登录页面，右上角显示你的用户名

注意：注册成功后会自动登录并保存登录状态。

2️⃣ 用户登录

已有账号直接登录：

  1. 在"登录"标签下输入：
    • 用户名
    • 密码
  2. 点击"登录"按钮
  3. 看到"欢迎回来，xxx！"提示表示登录成功
  4. 右上角会显示"当前用户：你的用户名"

登录状态持久化：

  • 关闭浏览器后再次打开页面，会自动恢复登录状态
  • 无需重复登录

3️⃣ 行程上报（累积积分）

登录后即可上报绿色出行行程：

  1. 向下滚动到"🚗 行程上报"卡片
  2. 填写行程信息：
    • 起点：例如"人民广场"（仅作说明，不影响计分）
    • 终点：例如"徐家汇地铁站"（仅作说明，不影响计分）
    • 交通方式：选择以下之一
      • 共享单车
      • 步行
      • 公交
      • 地铁
      • 新能源车
    • 距离（km）：输入行程距离，如 3.5
  3. 点击"提交行程"按钮
  4. 看到"行程上报成功！获得 X 积分 🌟"提示
  5. 积分会自动更新到"当前总积分"和"可用积分"

积分规则：

  • 骑行 / 步行：3 积分/公里
  • 公交 / 地铁：1.5 积分/公里
  • 新能源车：1 积分/公里

示例：

  • 骑行 5 公里 → 获得 15 积分
  • 地铁 8 公里 → 获得 12 积分

4️⃣ 查看积分明细

在"📊 积分明细"卡片中：

  • 显示当前总积分
  • 表格展示最近的行程记录（日期、行为、获得积分）
  • 每次上报后会自动添加新记录到表格顶部

5️⃣ 积分商城兑换

用积分兑换奖励：

  1. 向下滚动到"🎁 积分商城"卡片
  2. 查看"可用积分"（与总积分一致）
  3. 浏览商品：
    • 共享单车月卡（200 积分，价值 30 元）
    • 环保咖啡券（150 积分，价值 25 元）
    • 绿植盆栽（80 积分，价值 15 元）
  4. 点击想兑换商品的"立即兑换"按钮
  5. 积分足够会提示"🎉 兑换成功！"
  6. 积分不足会提示"❌ 积分不足！还需要 X 积分"
  7. 兑换成功后积分会自动扣减

注意：兑换会立即扣除对应积分。

6️⃣ 退出登录

点击右上角"退出登录"按钮：

  1. 会清除本地登录状态
  2. 提示"已退出登录"
  3. 右上角变为"当前用户：未登录"
  4. 需要重新登录才能使用行程上报和兑换功能

🛠 技术说明

项目结构

软件工程/
├── 1.html                 # 前端页面
├── style.css              # 页面样式
├── script.js              # 前端逻辑（已接入后端 API）
├── backend/
│   ├── app.py            # Flask 后端服务
│   └── requirements.txt  # Python 依赖
└── README.md             # 本文档

后端 API 接口

  • POST /api/register — 用户注册
  • POST /api/login — 用户登录
  • GET /api/me — 获取当前用户信息
  • POST /api/trips — 提交行程（需登录）
  • POST /api/redeem — 兑换商品（需登录）
  • POST /api/logout — 退出登录

数据存储

  • 注意：用户初始积分（user.sum_ji）为 0。

Q4: 点击"退出登录"后积分归零

说明：这是正常现象。退出后积分显示为默认值（0），实际积分已保存在后端，重新登录后会从后端同步恢复。 2. 创建数据库（可选，亦可由程序自动创建，见环境变量）： sql CREATE DATABASE IF NOT EXISTS `greenpoints` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; 3. 配置后端环境变量（PowerShell 示例）： powershell setx DB_HOST "127.0.0.1" setx DB_PORT "3306" setx DB_USER "root" setx DB_PASSWORD "你的MySQL密码" setx DB_NAME "greenpoints" # 若需由程序自动创建数据库，设置为 1（需要有创建库权限） setx DB_CREATE_DB "1" 重新打开一个新的终端窗口后生效。

  1. 安装依赖并启动后端： 
    .venv\Scripts\Activate.ps1
pip install -r backend\requirements.txt
python backend\app.py

程序启动时会自动创建以下表（如不存在）：

CREATE TABLE `user` (
   uid CHAR(10) PRIMARY KEY,
   `password` CHAR(20),
   phone_num CHAR(20),
   sum_ji INT
);

CREATE TABLE `shop` (
   sid CHAR(10) PRIMARY KEY,
   sname CHAR(50),
   `password` CHAR(20),
   phone_num CHAR(20)
);

CREATE TABLE `points` (
   uid CHAR(10) PRIMARY KEY,
   date_time DATETIME,
   movement ENUM('骑行','地铁出行','公交出行','步行','兑换'),
   `distance` DOUBLE,
   ji INT,
   FOREIGN KEY (uid) REFERENCES `user`(uid)
);

CREATE TABLE `goods` (
   gid INT PRIMARY KEY,
   gname CHAR(50),
   sid CHAR(10),
   `count` INT,
   `value` INT,
   FOREIGN KEY (sid) REFERENCES `shop`(sid)
);

登录态持久化

  • 使用浏览器 localStorage 保存登录令牌
  • 关闭浏览器后再打开会自动恢复登录
  • 清除浏览器缓存会清空登录状态

❓ 常见问题

Q1: 运行 python backend\app.py 报错找不到模块

解决：确保已激活虚拟环境并安装依赖

.venv\Scripts\Activate.ps1
pip install -r backend\requirements.txt

Q2: 前端提示"登录失败"或"行程上报失败"

原因：后端服务未启动或已关闭 解决：检查运行后端的 PowerShell 窗口是否还在运行，如果关闭了需要重新启动：

python backend\app.py

Q3: 注册时提示"用户名已存在"

原因：该用户名已被注册过 解决：换一个用户名重新注册

Q4: 点击"退出登录"后积分归零

说明：这是正常现象。退出后积分显示为默认演示值（245），实际积分已保存在后端，重新登录后会恢复。

Q5: 刷新页面后行程记录消失了

说明：行程记录表格只展示初始示例数据 + 本次会话新增记录，未持久化到后端历史记录。积分已正确累积。

Q6: 重启后端后用户数据丢失

说明：当前版本使用内存存储，重启后端会清空所有用户和积分数据。如需持久化，请自行扩展数据库存储。

Q7: 浏览器提示"无法连接到 http://127.0.0.1:5000"

检查：

  1. 后端服务是否正在运行
  2. 防火墙是否阻止了本地端口 5000
  3. 端口 5000 是否被其他程序占用

Q8: 想在手机或其他设备访问

步骤：

  1. 修改 backend/app.py 最后一行为： 
    app.run(host="0.0.0.0", port=5000, debug=True)
  2. 修改 script.js 第 5 行，将 127.0.0.1 改为你的电脑 IP 地址
  3. 确保手机和电脑在同一局域网

🎯 快速测试流程

完整测试（5 分钟）：

  1. 启动后端 → 打开前端页面
  2. 注册账号 testuser / 密码 12345678 / 手机 13800138000
  3. 登录成功，右上角显示 testuser
  4. 上报行程：骑行 10 公里 → 获得 30 积分 → 总积分变为 275
  5. 再上报：地铁 20 公里 → 获得 30 积分 → 总积分变为 305
  6. 兑换商品：共享单车月卡（200 积分）→ 剩余 105 积分
  7. 尝试兑换环保咖啡券（150 积分）→ 提示积分不足
  8. 点击"退出登录" → 右上角变为"未登录"
  9. 重新登录 → 积分恢复为 105

📞 技术支持

如有问题，请检查：

  1. Python 版本是否符合要求（3.8+）
  2. 虚拟环境是否正确激活
  3. 后端服务是否正在运行
  4. 浏览器控制台是否有错误信息（按 F12 打开开发者工具）

祝你使用愉快！为绿色出行贡献力量 🌱

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages