【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战

本文涉及的产品
RDS MySQL DuckDB 分析主实例,基础系列 4核8GB
RDSClaw,2核4GB
RDS AI 助手,专业版
简介: 【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战

【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战

项目背景

本项目经费43000元,需求文档如下,工期25天,目前已经过了7天,时间不多了,我们需要在2月17日之前完成。

技术栈要求

前端vue.js
前端客户端框架 uniapp-x
服务端 java
后台管理 java+vue
java框架选择:若依框架

注意:整个项目以web形式存在,并且可以为后续二期开发打包app,【选择uniapp-x】
【第一次接触,问题不大,卓伊凡是全栈开发】

本项目具有典型例子,曾几何时这样的项目在没有AI的情况下至少要10个人甚至更多人才能开发,现在不需要了,由卓伊凡来为大家演示,当然了能达到卓伊凡这样的也是屈指可数的,其实也不用担心了。

项目实战:

ui图设计

由于目前国内蓝湖还没有ai的功能不是咱们不支持国产,因此关乎AI设计图ui设计我们采用figma AI

但是普通free版本的figma无法使用ai功能,于是这块我们得需要简单设计下了,根据需求我们是只需要设计用户端的,后台管理主要是管理功能,到差不差,客户端的功能梳理完成后大部分问题都可得以解决,

用户端功能需求

3.1 积分展示与查询

  • 当前积分余额
  • 积分来源
  • 积分消耗

3.2 积分来源与消耗记录

  • 积分来源类型
  • 积分消耗类型

3.3 积分转账功能

  • 选择接收用户
  • 转账数量
  • 转账备注
  • 转账确认
  • 转账记录

3.4 分佣

3.4.1 渠道包与代理设置
  • 渠道包的创建与管理
  • 代理佣金设置
3.4.2 抽佣机制(平台收入优先提取)
  • 抽佣优先
  • 用户分佣
3.4.3 抽佣触发条件与扣除规则
  • 代理亏损时才扣佣金
  • 亏损与盈利的判断

根据需求文档查看,我们需要,先做个注册登录把,再做首页,内页,转账页,分佣页面,以及统计页面,大体我们需要做这些内容。

第一步进入figma

选择#图标,打开选择frame 选择画布,我这里选择iPhone 16 promax,

第二步,我们要选择对应的按钮组件 插件 之类的,kit,因此我们登陆官方社区

https://www.figma.com/community

我登录后选择 mobile app 选项,一眼就看到了右边这两个非常的不错 ,我们选其一,感觉右边那个紫色更加高大上。

选择了紫色并且导入到了我们的设计项目中,可见一下

这里,我们再做一件事情,也就是汉化插件,在这件事情之前,先升级个专业版

这些必须要的花费是避免不了的,作为普通开发者都需要,还别说我们想做AI工程师了。

汉化一下,另外汉化插件已经发布到csdn的下载资源中了,下载搜索:
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
可以搜到,

注意,我们安装汉化插件,只能支持Chrome浏览器,浏览器 输入 chrome://extensions 进入配置

勾选开发者模式,


选择加载已解压的资源

浏览本地文件目录浏览整个我上传好的figmaCN

完成加载后关闭,重启浏览器,再次进入,已经汉化完毕

虽然只是菜单汉化了,但是已经很不错了,本篇这里到此为止

mysql数据库设计

根据目前的项目情况我们初步设计了初步的数据库情况,

数据库表设计

  1. 用户表 (users)
  • user_id (INT, PRIMARY KEY, AUTO_INCREMENT)
  • username (VARCHAR, UNIQUE)
  • password (VARCHAR)
  • email (VARCHAR, UNIQUE)
  • created_at (TIMESTAMP)
  1. 积分表 (points)
  • point_id (INT, PRIMARY KEY, AUTO_INCREMENT)
  • user_id (INT, FOREIGN KEY -> users.user_id)
  • current_points (INT)
  • last_updated (TIMESTAMP)
  1. 积分来源与消耗记录表 (points_history)
  • history_id (INT, PRIMARY KEY, AUTO_INCREMENT)
  • user_id (INT, FOREIGN KEY -> users.user_id)
  • change_type (ENUM(‘source’, ‘consume’))
  • source_type (VARCHAR, NULL)
  • consume_type (VARCHAR, NULL)
  • points_changed (INT)
  • timestamp (TIMESTAMP)
  • notes (VARCHAR, NULL)
  1. 转账记录表 (transfers)
  • transfer_id (INT, PRIMARY KEY, AUTO_INCREMENT)
  • sender_id (INT, FOREIGN KEY -> users.user_id)
  • receiver_id (INT, FOREIGN KEY -> users.user_id)
  • transfer_points (INT)
  • transfer_notes (VARCHAR)
  • transfer_timestamp (TIMESTAMP)
  • status (ENUM(‘pending’, ‘confirmed’, ‘failed’))
  1. 分佣渠道包表 (channels)
  • channel_id (INT, PRIMARY KEY, AUTO_INCREMENT)
  • channel_name (VARCHAR)
  • commission_rate (DECIMAL(5, 2))
  • created_at (TIMESTAMP)
  1. 抽佣记录表 (commission)
  • commission_id (INT, PRIMARY KEY, AUTO_INCREMENT)
  • channel_id (INT, FOREIGN KEY -> channels.channel_id)
  • user_id (INT, FOREIGN KEY -> users.user_id)
  • amount (DECIMAL(10, 2))
  • commission_type (ENUM(‘platform’, ‘user’))
  • status (ENUM(‘pending’, ‘completed’))
  • timestamp (TIMESTAMP)
  1. 线下积分同步记录表 (offline_sync)
  • sync_id (INT, PRIMARY KEY, AUTO_INCREMENT)
  • user_id (INT, FOREIGN KEY -> users.user_id)
  • sync_points (INT)
  • sync_timestamp (TIMESTAMP)
  • status (ENUM(‘pending’, ‘completed’))
  1. 积分充值记录表 (recharge)
  • recharge_id (INT, PRIMARY KEY, AUTO_INCREMENT)
  • user_id (INT, FOREIGN KEY -> users.user_id)
  • amount (DECIMAL(10, 2))
  • recharge_timestamp (TIMESTAMP)
  • status (ENUM(‘pending’, ‘completed’))
  1. 积分提取记录表 (withdrawals)
  • withdrawal_id (INT, PRIMARY KEY, AUTO_INCREMENT)
  • user_id (INT, FOREIGN KEY -> users.user_id)
  • amount (DECIMAL(10, 2))
  • withdrawal_timestamp (TIMESTAMP)
  • status (ENUM(‘pending’, ‘completed’))

这是我们对mysql的数据库设计,并且我们需要确定数据库版本,版本设定为mysql5.7+ 以上, 其次mysql版本推荐是8.0

以上是第二篇内容,篇幅有限,我们需要快马加鞭进行第三篇内容。

相关实践学习
每个IT人都想学的“Web应用上云经典架构”实战
本实验从Web应用上云这个最基本的、最普遍的需求出发,帮助IT从业者们通过“阿里云Web应用上云解决方案”,了解一个企业级Web应用上云的常见架构,了解如何构建一个高可用、可扩展的企业级应用架构。
MySQL数据库入门学习
本课程通过最流行的开源数据库MySQL带你了解数据库的世界。   相关的阿里云产品:云数据库RDS MySQL 版 阿里云关系型数据库RDS(Relational Database Service)是一种稳定可靠、可弹性伸缩的在线数据库服务,提供容灾、备份、恢复、迁移等方面的全套解决方案,彻底解决数据库运维的烦恼。 了解产品详情: https://www.aliyun.com/product/rds/mysql 
目录
相关文章
|
7月前
|
IDE 安全 Java
Lombok 在企业级 Java 项目中的隐性成本:便利背后的取舍之道
Lombok虽能简化Java代码,但其“魔法”特性易破坏封装、影响可维护性,隐藏调试难题,且与JPA等框架存在兼容风险。企业级项目应优先考虑IDE生成、Java Records或MapStruct等更透明、稳健的替代方案,平衡开发效率与系统长期稳定性。
460 115
|
7月前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
7月前
|
安全 Java API
Java Web 在线商城项目最新技术实操指南帮助开发者高效完成商城项目开发
本项目基于Spring Boot 3.2与Vue 3构建现代化在线商城,涵盖技术选型、核心功能实现、安全控制与容器化部署,助开发者掌握最新Java Web全栈开发实践。
697 1
|
8月前
|
前端开发 Java API
2025 年 Java 全栈从环境搭建到项目上线实操全流程指南:Java 全栈最新实操指南(2025 版)
本指南涵盖2025年Java全栈开发核心技术,从JDK 21环境搭建、Spring Boot 3.3实战、React前端集成到Docker容器化部署,结合最新特性与实操流程,助力构建高效企业级应用。
2569 1
|
6月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
538 137
|
7月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
629 2
|
9月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
454 0
|
9月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
647 1
|
10月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
1068 0
|
10月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能

热门文章

最新文章

推荐镜像

更多
下一篇
开通oss服务