写一个盲盒模拟器

最近想写一个小程序,随便写一个玩吧,先想了下功能:

1.有很多盲盒,可以选择模拟开启

2.自定义盲盒,我们可以自定义制作盲盒自己玩

3.用户界面,记录盲盒历史,可以给坏越提意见

所用技术栈: vue3 nodejs mysql uniapp express

后端数据处理:

先设计了两个数据表

1.存放盲盒分类,存放盲盒类别和盲盒的类别图片路径

(关于静态图片挂载的可以看我之前关于express的介绍)

2.存放盲盒细项,根据请求的盲盒类别来select对应盲盒细项

excel设计:

数据库部署:

接口编写调试:

先select全部,确认接口是通的

前端axios测试接口

前端模板我是在王进老师的咸虾米壁纸这个小程序上来的,重构组件和后端,可以省去琢磨css花费的时间(王进老师讲的小程序课堂确实挺好的,0基础的萌新要学习的可以看看~)

咸虾米壁纸&模版使用:

这块对js和html基础稍微好点的应该难度不大,其实布局也比较简单,css可以在后边再雕琢雕琢(其实是我的css有点稀烂哈哈)

前端定义跳转组件:

这边准备做一个组件用于盲盒的开启和基本信息的展示

当点击抽奖后根据中奖率来计算会得到什么奖品,渲染对应奖品信息,这边使用uni-pupop弹窗实现

这样就基本完成了一个盲盒模拟器了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/22775.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

django 旅游服务系统-计算机毕业设计源码88939

摘 要 旅游服务系统采用采用django框架、python语言、以及Mysql数据库等技术。系统主要分为管理员和用户两部分,管理员管理主要功能包括:首页、轮播图(轮播图管理)、公告信息管理(公告信息)、资源管理&…

开源模型应用落地-LangSmith试炼-入门初体验-监控和自动化(五)

一、前言 在许多应用程序中,特别是在大型语言模型(LLM)应用程序中,收集用户反馈以了解应用程序在实际场景中的表现是非常重要的。 LangSmith可以轻松地将用户反馈附加到跟踪数据中。通常最好提供一个简单的机制(如赞成和反对按钮)来收集用户对应用程序响…

for循环

基本语法 语法: for ( /*初始表达式*/; /*条件表达式*/; /*增量表达式*/ ) {//循环代码逻辑; }第一个空(初始表达式): 一般声明一个临时变量,用来计数用。 第二个空(条件表达式): …

迎接未来:2024年养老新趋势展望

随着全球人口结构的变化和科技的不断进步,养老服务业正在经历前所未有的变革。2024年,我们预见到几个关键的养老新趋势将重塑我们对老年生活的认知和支持方式。以下是对这一年养老新趋势的深入分析与建议: 1. 智慧养老的普及 随着物联网、大…

实体关系图三种对应关系

数据库三种关系,一对一,一对多最普遍。多对多需要拆表。 数据库一对一、一对多、多对多关系_一对多关系-CSDN博客

neo4j入门并使用案例说明

1、neo4j是什么 Neo4j是一个高性能的NoSQL图形数据库,它将结构化数据存储在网络(在数学角度称为图)上,而不是传统的表中。Neo4j是一个嵌入式的、基于磁盘的、具备完全的事务特性的Java持久化引擎。它因其高性能、轻量级、易嵌入和…

2024前端面试准备-HTMLCSS

重头回顾一下知识 HTML面试题 1.怎么理解HTML语义化 让人更容易读懂(增加代码可读性),让搜索引擎更容易读懂(SEO) 2.默认情况下哪些是块元素,哪些是内联元素 块元素: display:block/table; 有dev、h1、h2、table、ul、ol、p等. 内联元素: display:inline/inline-block;有span、…

React Router v5 和 v6 中,路由对象声明方式有什么区别?

一、在React Router 6.x开始&#xff0c;路由对象的声明需要引用RouteObject。 import { RouteObject } from react-router-dom;const routes: RouteObject[] [{path: /,element: <Home />},{path: /about,element: <About />},// ... ];二、一些老项目使用的是R…

大模型时代的具身智能系列专题(九)

NYU Lerrel Pinto团队 Lerrel Pinto是NYU Courant的计算机科学助理教授&#xff0c;也是用机器人和人工智能实验室(CILVR小组)的一员。在加州大学伯克利分校读博士后&#xff0c;在CMU机器人研究所读博士&#xff0c;在印度理工学院古瓦哈蒂读本科。研究目标是让机器人在我们生…

Linux 35.5 + JetPack v5.1.3@FUEL编译安装

Linux 35.5 JetPack v5.1.3FUEL编译安装 1. 源由2. 编译&安装Step 1&#xff1a;依赖库安装Step 2&#xff1a;建立工程Step 3&#xff1a;编译工程Step 4&#xff1a;安装工程 3. 问题汇总3.1 fuel_planner/exploration_manager - dw3.2 fuel_planner/plan_env - OpenCV库…

前后端分离项目中Spring Boot返回的时间与前端相差8个小时

概述 今天在做一个前后端分离项目时,发现从后端获取的时间与从数据库获取的时间相差八个小时&#xff0c;最终排查后发现由于Springboot使用本地时区导致&#xff0c;修改SpringBoot时区后解决 环境 MySQL8SpringBoot 原因排查 发现从后端获取的数据总是比前端快八个小时 …

找不到d3dx9_43.dll怎么修复?这个几种修复方法轻松解决

在计算机使用过程中&#xff0c;我们常常会遇到一些错误提示&#xff0c;其中之一就是“d3dx943.dll丢失”。这个问题通常会导致某些游戏或应用程序无法正常运行。为了解决这个问题&#xff0c;我总结出了以下五种解决方法&#xff0c;希望能对遇到类似问题的朋友们有所帮助。 …

【Leetcode Python】70.爬楼梯

麻烦大家要自己去leetcode看题目 第一个思路 用递归会超时 return self.climbStairs(n - 1) self.climbStairs(n - 2)第二个思路 滚动数组思想 class Solution(object):def climbStairs(self, n):""":type n: int:rtype: int"""if(n<2)…

Android Camera APP预览画面镜像及旋转处理

Android Camera APP开发调试中经常会遇到预览画面镜像或者旋转处理。网上可以找到很多种方案&#xff0c;本文介绍最简单的实现方案&#xff0c;来达到镜像预览画面和画面旋转的效果。 整体来说画面的镜像和旋转大概有三种方案&#xff1a; 第一种方案&#xff1a;从Camera底层…

2.1 QT随手简记(三)

新建QT工程 1.方法 第一种&#xff1a;点击new project按钮&#xff0c;弹出对话框&#xff0c;新建即可 第二种&#xff1b;点击文件菜单&#xff0c;选择新建文件或者工程 2.QT工程文件介绍 (1).pro文件 --》QT工程配置文件 QT …

QNX 7.0.0开发总结

1 QNX编译 1.1 基本概念 QNX可以直接使用Linux Makefile编译库和二进制&#xff0c;在Makefile文件中指定CCaarch64-unknown-nto-qnx7.0.0-g&#xff0c;或者CCx86_64-pc-nto-qnx7.0.0-g&#xff0c;保存退出后&#xff0c;运行source /qnx_sdk_path/qnxsdp-env.sh&#xff0c;…

前端canvas绘图,利用canvas在图片上面绘制标记以及给canvas添加点击事件。

前端canvas绘图&#xff0c;利用canvas在图片上面绘制标记以及给canvas添加点击事件。 需要实现的效果如下图: 首先需要一个承载的核心画布 <canvas id"canvas" width"800" height"600"></canvas>全部代码&#xff1a; <!DOCT…

程序员职业素养的探索与实践

在数字化飞速发展的今天&#xff0c;程序员作为技术创新的核心力量&#xff0c;其职业素养的重要性愈发凸显。那么&#xff0c;对于程序员而言&#xff0c;什么样的职业素养是至关重要的呢&#xff1f;在我的职业生涯中&#xff0c;我深刻体会到&#xff0c;除了扎实的技术功底…

LabVIEW减压阀和温控阀综合测试系统

在使用LabVIEW开发阀门测试软件时&#xff0c;特别是针对减压阀和温控阀&#xff0c;测试内容和注意事项包括以下方面&#xff1a; 测试内容 压力测试&#xff1a; 入口压力&#xff1a;测量阀门在不同入口压力下的表现。 出口压力&#xff1a;确保减压阀能够将出口压力控制在…

k8s系列-使用containerd下载镜像并导入

1. 使用 containerd 下载镜像 首先&#xff0c;确保 containerd 已经安装并运行。然后使用 ctr 命令来拉取镜像&#xff1a; sudo ctr image pull docker.io/rancher/rancher-webhook:v0.4.32. 导出镜像 将拉取的镜像导出为 tar 文件&#xff1a; sudo ctr image export ra…