记账本React案例（Redux管理状态）

最新推荐文章于 2025-05-22 23:47:05 发布
最新推荐文章于 2025-05-22 23:47:05 发布
阅读量1.4k 收藏 18
点赞数 16
CC 4.0 BY-SA版权
文章标签： react.js 前端 vscode javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58149434/article/details/137791185

文章目录

整体架构流程

环境搭建

创建项目

技术细节

一、别名路径配置

1.路径解析配置（webpack） ，将@/解析为src/

2.路径联想配置（vsCode），使用vscode编辑器时，自动联想出来src文件夹下的子级文件目录

二、实现Mock数据

1.安装json-server插件   npm i -D json-server

2.准备一个json文件

3.在package.json文件中添加启动命令

4.访问启动命令

三、配置全局路由

1.项目中新建四个文件夹

2.在router文件中配置路由

3.想要显示二级路由页面就得在一级路由页面添加组件

4.通过浏览器可访问各级页面

四、使用antD-mobile 定制主题颜色

1.去package.json中查看antd-mobile安装包，没有安装的话使用

2.创建主题css文件并配置主题色

3.配置完成后在全局引入即可

五、Redux管理账目列表

1.使用Redux管理状态，在项目中新建仓库store，并初始化状态列表，编写同步修改状态方法以及异步获取接口方法，并导出创建action对象的函数

2.在store仓库中，利用configureStore简化store的设置和配置

3.全局注册store

4.来到我们的Layout文件下通过useEffect方式调取接口

5.到浏览器控制台可查看网络

六、实现TabBar功能

1.下载安装less        

2.来到antD官网找到TabBar标签页组件（选择基础用法相关代码）并引入到layout文件下进行改写

3.在Layout文件夹下新建index.less文件并写入相关代码

七、月度账单

1.搭建月度账单静态页面，在month文件夹下

2.点击时间打开弹窗，设置弹窗开关状态并使用，给时间区域添加点击事件

3.点击确定或者取消以及点击蒙版区域都可以关闭弹窗

4.弹窗关闭时箭头朝上，打开朝上

5.点击确定时间切换

（1）创建日期状态

（2）将获取到的时间值赋值给当前状态

6.按月分组（将相同月份的日期划分为一组）

7.月度初始化时渲染当前月的数据

8.将当前月的数据以单日为单位进行统计显示

9.将单日账单渲染在列表中

（1）准备单日列表

（2）准备渲染模板数据

（3）在DailyBill中index.js文件下引入组件并使用

10.点击切换列表进行显示

（1）控制显示隐藏并添加事件进行点击取反操作

（2）根据状态适配箭头和隐藏

11.账单类型图标组件封装

（1）撰写静态组件结构

（2）根据Props适配不同图标

八、新增账单

1.支出和切换账单

（1）定义控制支出以及收入的状态

（2）添加点击切换事件并通过classNames来控制类名显示

（3）调用封装好的common中数据billListData渲染当前页面

2.实现保存订单功能

（1）构建金额状态，编写金额改变事件，创建类型状态，撰写保存事件

（2）因为react是单向数据流，所以我们可以通过自定义事件onChange来进行双向数据绑定

（3）点击根据不同的icon类型进行改变

（4）其中需要用到接口，通过redux来管理数据状态

3.添加账单选中时的样式

4.时间选择器功能

（1）添加时间选择器展开控制状态，以及点击事件并应用

（2）撰写时间选择器取消以及确定时关闭功能

（3）默认显示当前日期，当用户选择日期时将其显示出来

小结

整体架构流程

环境搭建

1.Redux状态管理  -  @reduxjs/toolkit、react-redux

2.路由 - react-router-dom

3.时间处理 - dayjs

4. class类名处理 - classnames

5.移动端组件库 - antd-mobile

6.请求插件 - axios

创建项目

1.使用npx create-react-app 你的项目名称创建react移动端项目

2.下载此次开发所需依赖包

命令：npm i @reduxjs/toolkit react-redux react-router-dom dayjs classnames antd-mobile axios

注意：下载好依赖包后可直接到package.json包中查看相关版本信息

3.启动项目

命令：npm run srart

技术细节

一、别名路径配置

1.路径解析配置（webpack） ，将@/解析为src/

（1）安装craco

（2）项目根目录下创建配置文件craco.config.js

（3）配置文件中添加路径解析配置

（4）包文件中配置启动和打包命令 

2.路径联想配置（vsCode），使用vscode编辑器时，自动联想出来src文件夹下的子级文件目录

（1）在项目根目录文件夹下建立jsconfig.json文件

）配置

二、实现Mock数据

1.安装json-server插件   npm i -D json-server

2.准备一个json文件

代码片段：

{

    "ka":[

        {

            "type":"pay",

            "money":-99,

            "date":"2024-04-17 17:21:30",

            "useFor":"drinks",

            "id":1

        },

        {

            "type":"pay",

            "money":-88,

            "date":"2024-04-17 17:22:12",

            "useFor":"longdistance",

            "id":2

        },

        {

            "type":"pay",

            "money":-56,

            "date":"2024-04-17 17:45:30",

            "useFor":"bonus",

            "id":3

        },

        {

            "type":"pay",

            "money":-57,

            "date":"2024-04-17 17:45:30",

            "useFor":"dessert",

            "id":4

        },

        {

            "type":"pay",

            "money":-35,

            "date":"2024-04-17 17:45:30",

            "useFor":"drinks",

            "id":5

        },

        {

            "type":"pay",

            "money":-86,

            "date":"2024-04-17 17:45:30",

            "useFor":"travel",

            "id":6

        },

        {

            "type":"pay",

            "money":-28,

            "date":"2024-04-17 17:45:30",

            "useFor":"drinks",

            "id":7

        },

        {

            "type":"pay",

            "money":-45,

            "date":"2024-04-17 17:45:30",

            "useFor":"drinks",

            "id":8

        },

        {

            "type":"pay",

            "money":-44,

            "date":"2024-04-17 17:45:30",

            "useFor":"drinks",

            "id":9

        },

        {

            "type":"pay",

            "money":-71,

            "date":"2024-04-17 17:45:30",

            "useFor":"drinks",

            "id":10

        },

        {

            "type":"pay",

            "money":-69,

            "date":"2024-04-17 17:45:30",

            "useFor":"drinks",

            "id":11

        },

        {

            "type":"pay",

            "money":-38,

            "date":"2024-04-17 17:45:30",

            "useFor":"drinks",

            "id":12

        },

        {

            "type":"pay",

            "money":-25,

            "date":"2024-04-17 17:45:30",

            "useFor":"drinks",

            "id":13

        },

        {

            "type":"pay",

            "money":-65,

            "date":"2024-04-17 17:45:30",

            "useFor":"drinks",

            "id":14

        },

        {

            "type":"pay",

            "money":-43,

            "date":"2024-04-17 17:45:30",

            "useFor":"drinks",

            "id":15

        },

        {

            "type":"pay",

            "money":-57,

            "date":"2024-04-17 17:45:30",

            "useFor":"drinks",

            "id":16

        },

        {

            "type":"pay",

            "money":-68,

            "date":"2024-04-17 17:45:30",

            "useFor":"drinks",

            "id":17

        },

        {

            "type":"pay",

            "money":-12,

            "date":"2024-04-17 17:45:30",

            "useFor":"drinks",

            "id":18

        }

    ]

}

3.在package.json文件中添加启动命令

4.访问启动命令

三、配置全局路由

1.项目中新建四个文件夹

2.在router文件中配置路由

3.想要显示二级路由页面就得在一级路由页面添加<Outlet />组件

4.通过浏览器可访问各级页面

四、使用antD-mobile 定制主题颜色

官网：Ant Design Mobile - Ant Design Mobile

1.去package.json中查看antd-mobile安装包，没有安装的话使用

npm install --save antd-mobile或者yarn add antd-mobile下载安装即可

2.创建主题css文件并配置主题色

3.配置完成后在全局引入即可

最低0.47元/天 解锁文章

200万优质内容无限畅学
Node + React 实战：从0到1 实现记账本（七）
qq_44808878的博客
01-20 129
theme: channing-cyan 账单及其相关接口 前言 接口是本次实战项目的核心模块，用户可以通过账单模块记录自己日常消费和收入情况。本节需要编写五个接口： 账单列表 添加账单 修改账单 删除账单 账单详情 知识点 一套CRUD 多层级复杂数据结构的处理 egg-mysql的使用 一.新增账单接口 需要先实现新增一个账单，才能比较方便的制作后续的其他接口。...
redux的简单使用（例子演示）
TH226的专栏
10-13 4051
注意：以下每一步是按照redux由易到难的顺序逐步进行的，从初步使用到react与redux的组合使用以及解耦的顺序来的 安装redux npm install redux --save 1、redux的简单使用 1、新建store 2、获取状态 3、派发事件 下边代码简单的演示此过程 在src下新建index.js，在index中编写 import {createStore} from 'r...
React的数据Mock实现
a3337779的博客
04-29 950
在前后端分类的开发模式下，前端可以在没有实际后端接口的支持下先进行接口数据的模拟，进行正常的业务功能开发。
框架开发与原生开发的权衡：React案例分析（原生JavaScript）
最新发布
Dontla的博客
05-22 1466
React等框架适合复杂应用和大型团队协作，而原生开发在性能敏感场景和小型精简项目中更具优势。在前端开发领域，选择使用框架还是原生JavaScript进行开发一直是个值得探讨的话题。本文将以React为例，深入分析框架开发与原生开发的优劣势，探讨在不同场景下的最佳选择。直接使用原生JavaScript可以避免框架带来的额外开销，在性能要求极高的场景中更具优势。掌握原生JavaScript的基础知识比学习框架特定的概念和API更加直接。原生开发不依赖特定框架版本，避免了框架升级带来的迁移成本。
react+redux+antd-mobile 之 记账本案例
Jasmin博客
12-30 1008
记账本案例
使用redux简单例子
qq_36392571的博客
11-17 225
1、action.js 2、reducer.js 3、store.js 4、index.js 5、使用
react 之 记账本案例
12-30
在React世界中，创建一个记账本应用是一个经典的练习，它可以帮助我们理解React的基本概念、组件化编程以及状态管理。让我们深入探讨这个“react之记账本案例”。 首先，React是一个由Facebook开发并维护的...
【React系列】Redux(一)管理状态
川峰的博客
01-02 1226
上面的代码是否可以实现react组件和redux结合起来呢？当然是可以的，但是我们会发现每个使用的地方其实会有一些重复的代码：比如监听store数据改变的代码，都需要在中完成；比如派发事件，我们都需要去先拿到store， 在调用其dispatch等；能否将这些公共的内容提取出来呢？我们来定义一个connect函数：这个connect参数一：里面存放component希望使用到的State属性；参数二：里面存放component希望使用到的dispatch动作；这个connect在中的。
React记账本案例：Redux状态管理解析
资源摘要信息: "本案例是一个使用React和Redux技术栈构建的记账本应用程序。它使用antDesignMobile作为UI库，实现了应用的移动适配，为用户提供了一个直观且易于操作的界面。在此案例中，Redux用于管理应用的状态，...
Expense Tracker(记账本) - React+Koa
我的博客
03-25 303
Expense Tracker(记账本) - React+Express
react-react示例项目
08-14
这是react的示例项目, 主要用于参考npm和webpack的配置方法.
react中对redux的简易使用案例
weixin_45389051的博客
07-15 332
redux可以说是react里面非常重要的一个东西，下面来通过一个小demo来更好的理解它 加减，上下当前的数字一起改变 首先创建一个store文件，专门存放redux代码 store中创建一个index.js import {createStore} from 'redux' import reducer from './reducer.js' const store = createStore(reducer) export default store 创建一个公共方法名constants.js
react table里跳转页面_React项目---记账本项目总结
weixin_34374031的博客
01-05 170
我的钱呢?--记账薄前段时间写了一个React项目---我的钱呢?--记账薄,算是在学习完React之后有了一个更深的了解,项目我已经上传到github有兴趣的朋友可以下载下来试试.下面是效果预览,因为GitHub访问比较慢,所以我也在gitee上部署了.https://he_zhongfeng.gitee.io/where-is-my-money-website/#/add​he_zhongfe...
react-redux简单的使用以及示例
xuxiaocong123的博客
12-05 149
最后将Provider 引入到主应用中,别忘记将 store引入并且当做参数传入。然后，我们在React组件中使用。
React【Day4下+5】
weixin_63681863的博客
04-21 1140
路由的 记账本案例
Redux实例学习 - Redux套用七步骤
大灰狼的小绵羊哥哥的博客
05-14 1898
http://www.imooc.com/article/16065 今天的主题是Redux，一开始我们先看它是如何运作的，Redux并不是只能在React应用中使用，而是可以在一般的应用中使用。第一个例子是一个简单的JavaScript应用。 这个程序最后的呈现结果，就像下面的动态图片这样，重点是在于下面有个Redux DevTools，它有时光旅行调试的功能，可
Node + React 实战：从0到1 实现记账本（十）
qq_44808878的博客
01-23 121
theme: channing-cyan 前端实战：搭建前端H5开发环境 前言 React技术栈的UI组件库相比Vue，会少一些。耳熟能详的便是Antd，但是它针对的是PC端的，项目目前是一个H5的网页(不排除后期做一个 PC 端)。所以选择了Zarm。 这里再次强调，不是Zarm就比别的移动端组件库好，只是目前开发的这款记账本项目，Zarm比较适合。 知识...
【egg.js + react + zarm ui + vite2.0 全栈项目实战：从 0 到 1 实现记账本】小册学习笔记合集（完结）
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
01-28 2925
说明 说明这些文章只是笔者学习记录的笔记，仅供参考。请支持正版的小册。 目录 报错篇 执行 mysqld --install 报错：由于找不到VCRUNTIME140 1.dII, 无法继续执行代码 执行 mysqld --install 报错：Install Remove of the Service Denied 执行 mysqld --install 报错：The service already exists egg.js 项目初始化报错 ConnectionTimeoutError: Connec
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值