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

本文涉及的产品
RDS MySQL DuckDB 分析主实例,集群系列 4核8GB
RDS Agent(兼容OpenClaw),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 
目录
相关文章
|
9月前
|
安全 Java API
Java Web 在线商城项目最新技术实操指南帮助开发者高效完成商城项目开发
本项目基于Spring Boot 3.2与Vue 3构建现代化在线商城,涵盖技术选型、核心功能实现、安全控制与容器化部署,助开发者掌握最新Java Web全栈开发实践。
792 1
|
9月前
|
IDE 安全 Java
Lombok 在企业级 Java 项目中的隐性成本:便利背后的取舍之道
Lombok虽能简化Java代码,但其“魔法”特性易破坏封装、影响可维护性,隐藏调试难题,且与JPA等框架存在兼容风险。企业级项目应优先考虑IDE生成、Java Records或MapStruct等更透明、稳健的替代方案,平衡开发效率与系统长期稳定性。
572 115
|
9月前
|
存储 消息中间件 人工智能
【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡
【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡
560 4
|
10月前
|
人工智能 移动开发 JavaScript
类似ant design和element ui的八大Vue的UI框架详解优雅草卓伊凡
类似ant design和element ui的八大Vue的UI框架详解优雅草卓伊凡
1826 3
|
9月前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
431 15
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
448 11
|
9月前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
611 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
JavaScript 前端开发 UED
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分,涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例,如动态播放视频。性能提升方面,推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法,以优化应用性能与用户体验。
375 56
|
编解码 UED 开发者
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局,详细说明了各布局的特性及使用方法,例如线性布局中的排列、拉伸与缩放,弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询,阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求,提升用户体验。
578 55

热门文章

最新文章

推荐镜像

更多