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

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS PostgreSQL,高可用系列 2核4GB
RDS MySQL Serverless 高可用系列,价值2615元额度,1个月
简介: 【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 
目录
相关文章
|
28天前
|
前端开发 Java API
2025 年 Java 全栈从环境搭建到项目上线实操全流程指南:Java 全栈最新实操指南(2025 版)
本指南涵盖2025年Java全栈开发核心技术,从JDK 21环境搭建、Spring Boot 3.3实战、React前端集成到Docker容器化部署,结合最新特性与实操流程,助力构建高效企业级应用。
373 1
|
1月前
|
JavaScript Java 微服务
现代化 Java Web 在线商城项目技术方案与实战开发流程及核心功能实现详解
本项目基于Spring Boot 3与Vue 3构建现代化在线商城系统,采用微服务架构,整合Spring Cloud、Redis、MySQL等技术,涵盖用户认证、商品管理、购物车功能,并支持Docker容器化部署与Kubernetes编排。提供完整CI/CD流程,助力高效开发与扩展。
287 63
|
2月前
|
安全 JavaScript Java
java Web 项目完整案例实操指南包含从搭建到部署的详细步骤及热门长尾关键词解析的实操指南
本项目为一个完整的JavaWeb应用案例,采用Spring Boot 3、Vue 3、MySQL、Redis等最新技术栈,涵盖前后端分离架构设计、RESTful API开发、JWT安全认证、Docker容器化部署等内容,适合掌握企业级Web项目全流程开发与部署。
135 0
|
2月前
|
人工智能 安全 Java
掌握Java反射:在项目中高效应用反射机制
Java反射是一种强大功能,允许程序在运行时动态获取类信息、创建对象、调用方法和访问字段,提升程序灵活性。它在框架开发、动态代理、注解处理等场景中广泛应用,如Spring和Hibernate。但反射也存在性能开销、安全风险和代码复杂性,应谨慎使用。
|
Web App开发 JavaScript 前端开发
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
233 2
|
10月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
156 1
JavaScript中的原型 保姆级文章一文搞懂
|
10月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
97 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
344 5
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
189 3

推荐镜像

更多