每日一题：不翼而飞的余额

作者:江月迟迟

发表于:2024-12-10

字数统计:889 字

预计阅读3分钟

介绍

小蓝开发了一个 web3 钱包，用于在浏览器中管理以太坊账户。为了方便用户使用，小蓝决定将钱包分为两个页面：

• 存款页面，用于用户存款。
• 钱包页面，用于查看账户余额。

但是小蓝遇到了问题，两个页面显示的账户余额不一致。现在，小蓝需要你的帮助。

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

├── component
│   ├── DepositPage.js
│   └── WalletPage.js
├── css
├── index.html
├── js
│   └── store.js
└── lib

其中:

• index.html 是主页面。
• css 是存放项目样式的文件夹。
• lib 是存放项目项目依赖文件夹。
• component/WalletPage.js 是钱包主页面组件。
• component/DepositPage.js 是存款页面组件。
• js/store.js 是 pinia 状态管理库。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/19791/despoit.zip && unzip despoit.zip && rm despoit.zip

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：

目标

完善 index.html、js/store.js 和 component/DepositPage.js 中的代码。实现以下效果：

1. 找到 index.html 中的 TODO 部分，为项目配置 history 模式路由，浏览器中访问 / 的时候显示 WalletPage 组件，访问 /deposit 的时候显示 DepositPage 组件。

tips: 目标 1 完成后点击 deposit 按钮或底部的导航的 deposit 导航文字，均会跳转到 DepositPage 存款页面。

1. 找到 DepositPage.js 中的 TODO 部分，在 DepositPage 页面中的 （id = deposit-balance）元素正确显示钱包余额（store 中的 balance）。
2. 完善 js/store.js 和 component/DepositPage.js中的 TODO 部分，在 DepositPage 页面中，在输入框（input）输入数字（只考虑正整数），点击 “Deposit” 按钮（button）后，余额 = 现在的余额 + 输入框中输入的金额，在 DepositPage 页面正确显示钱包余额（两个页面的余额相同）。初始余额为 23。

完成后效果如下：

规定

• 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成判题无法通过。
• 满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

判分标准

• 本题完全实现题目目标得满分，否则得 0 分。

总通过次数: 179 | 总提交次数: 260 | 通过率: 68.8%

题解

const { createRouter, createWebHashHistory } = VueRouter;  // TODO：待补充代码，在此引入路由相关 API 

const router = createRouter({
     // TODO:待补充代码，为项目配置 history 模式的路由
     history: createWebHashHistory(),
     routes: [
      { path: '/', component: WalletPage },
      { path: "/deposit", component: DepositPage },
     ]
})

<!-- TODO：待补充代码，在 # deposit-balance 中正确显示钱包余额  -->  
<span id="deposit-balance">{{ store.balance }}</span>

// TODO：待补充代码，完善点击存款按钮事件
    function deposit() {
     store.balance = store.balance + depositAmount.value
    }
    return {
      depositAmount,
      store,
      deposit
    }