119、稀土掘金小册-记账本（十） 个人中心 （完结）
前言行文至此，万里长征已经快要走到头了。本章节带同学们来编写最后一个模块 —— 个人中心。 个人中心模块分几个功能点，首先是头部的用户信息展示，包括头像、用户昵称、个人签名。其次是一些账号相关的操作，如用户信息修改、密码重置等。最后是退出登录，将其放置于页面底部，并且设置二次确认弹窗，避免误触。 知识点 图片资源上传格式处理。 原生表单插件 rc-form 的使用。 底部导航栏定位。 正文头部信息展示修改 container/User/index.jsx 代码如下： 12345678910111213141516171819202122232425262728293031import React from "react";import s from "./style.module.less";con..
更多118、稀土掘金小册-记账本（九） 账单可视化
前言账单的操作部分在之前的章节已经结束了，本章节我们学习如何将账单列表，以可视化数据的新形势展示，本章节我们会通过 Echart 插件，对数据进行可视化展示。 页面布局和分析如下所示： 知识点 Echart 引入和使用。 进度条组件 Progress 的使用。 正文头部筛选和数据实现当你看到顶部的时间筛选项的时候，你会再一次体会到当初把时间筛选功能封装成公用组件的好处，于是我们打开 Data/index.jsx，添加如下代码： 1234567891011121314151617181920212223242526import React, { useEffect, useRef, useState } from "react";import { Icon, Progre..
更多117、稀土掘金小册-记账本（八） 账单详情
前言账单模块还剩最后一个小节，账单详情。账单详情页要做的事情有两个，一个是编辑当前账单操作，另一个是删除当前账单操作，我们先来观察完成后页面结构，如下所示： 这里是第一次涉及内页，所以我们需要制作一个公用的头部 Header，支持传参接收 title 信息。我们在上一章节提取的「添加账单弹窗组件」，在这里派上了用场，新增和编辑是一家，唯一的差别就是编辑的时候，需要传入当前账单的 id 给「添加账单组件」，组件内通过账单详情接口，获取账单详情，并将获取的参数用于各个字段初始化值，这就实现了组件的复用。 知识点 封装公用头部组件 复用添加账单弹窗组件 正文开始公用头部在 components 目录下新建 Header 目录，老规矩，添加两个文件 index.jsx 和 style.module.less..
更多116、稀土掘金小册-记账本（七）新增账单弹窗封装
前言回顾一下上一章节学习的内容。无限滚动列表、弹窗组件的内部控制显隐、工具方法以及常量的提取。若是你开发项目时，在潜意识里，有对这些内容进行封装的思想，那么你已经有模块化、组件化的开发理念了。在大量的工程中得出的实践，将会根深蒂固在你的开发理念里。 之前，我们是对一个小组件，如时间筛选、类型筛选等小组件进行封装。本章节，我们对一个添加模块进行封装，好处就是你在任何地方，都能使用这个添加组件，对账单进行增加操作。 我们先来看看本章节要绘制的页面和逻辑： 如上图所示，本章节要实现的需求逻辑，基本上已经绘制在图中。所有的努力，都是为了凑出这几个参数： 账单类型 账单金额 账单日期 账单种类 备注 然后将这些数据，提交给服务端进行处理，然后存储到数据库，完事。 正文上述需求整理清楚之后，我们开始本章节的制..
更多115、稀土掘金小册-记账本（六）账单列表
前言上一章节介绍的登录注册是整个项目的根基，没有拿到 token，将无法进行后续的各种操作，如账单的增删改查。所以务必将上一章节好好地阅读与揣摩，为后面的学习做好铺垫。我们直接进入本次前端实战项目的主题，账单的增删改查之列表页。 本教程已有线上地址在线地址，同学们可以在实战部分，对照着线上页面进行学习。 知识点 单项组件抽离 列表页无限滚动 下拉刷新列表 弹窗组件封装 我们先来欣赏一下最终的页面效果： 列表页编写（静态部分）按照正常的开发流程，我们先将静态页面切出来，再填入数据使其动态化。在此之前，我们已经新建好了 Home 目录，该目录便是用于放置账单列表，所以我们直接在 Home/index.jsx 新增代码。 头部统计实现列表的头部展示的内容为当月的收入和支出汇总，并且有两个列表条件过滤项..
更多