程序员经验分享-hwhale

React+AntDesign开发完整的考勤系统前端页面（一）

2023-11-08

一：项目准备工作

1：开发环境准备
准备好Visual Studio Code前端开发工具，下载并安装Node.js
2：项目准备
本次项目使用umi脚手架的方式创建
（1）打开开发工具打开项目文件夹并新建终端在终端里面输入命令 npm i yarn tyarn -g
使用yarn管理项目
（2）通过yarn导入umi 输入yarn global add umi
（3）同过yarn创建umi项目 yarn create umi
在创建项目的时候我们选择app并在下一步使用typescript ，选择antd这样脚手架项目便创建好了如下图所示
项目创建命令及效果图

（4）使用npm i安装umi项目
（5）项目创建成功后我们输入 umi dev让项目跑起来（如下图所示）
在这里插入图片描述
项目创建好后的目录结构如下图所示
在这里插入图片描述
最后我们访问本地地址可以看到如下图所示的画面便说明通过UMI脚手架创建的项目成功了
在这里插入图片描述
访问的页面其实就是layouts下面的index页面。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端开发技术类

ReactJS

考勤系统

antdesign

UmiJS

React+AntDesign开发完整的考勤系统前端页面（一） 的相关文章

  • React + Semantic-UI：在 UI MODAL 中使用表单

    在没有 React 的普通旧 Semantic UI 中 我已经能够毫无问题地将表单放入 Modal 中 使用 Semantic UI React 版本 我能够在模态中显示表单 但它并没有按照我期望的方式工作 例如 模态框显示后 模态框内的

  • 提及列表和表情符号顶部位置 (Draft.js)

    您能帮我如何将其位置从下到上更改吗 我想在文本顶部而不是底部显示提及列表 关于表情符号列表的同样问题 示例链接 https www draft js plugins com plugin emoji 你可以通过以下方式实现它position

  • React Router v4 与 的优点

    除了能够在 NavLink 上设置 activeClassName 和 activeStyle 之外 还有什么理由使用NavLink over Link在您的网站上不需要活动状态 类的非导航元素 即不是页眉或页脚中的主导航 上创建指向其他路

  • 从 React Native Js 代码调用 Android Native UI 组件方法

    我创建了一个 CustomView SignatureView java 它扩展了 LinearLayout 以捕获 Android Native 中的签名 并创建了SignatureCapturePackage java和Signatur

  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta

  • React 键“mods”的切片缩减器在初始化期间返回未定义。 （还原）

    减速器 index js import combineReducers from redux import mods from mods js export default combineReducers lt error comes fr

  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是

  • React - 如何在不使用构造函数的情况下访问道具

    注意 我在使用 React Native 时遇到了这个特定问题 但我想这也适用于 React 我有一个使用 React Component 构建的反应组件 我不需要设置状态 但我确实有道具 我建议的语法如下 class Header ext

  • 如何将 Select2 与 Reactjs 一起使用？

    我有这样的依赖字段

  • React 设置背景颜色与状态 rgb

    所以我根据数据库的结果生成一个表 在数据库中我保留 rgb 值 例如 75 75 75 现在当我生成列表时 我想使用保存的值设置我的 td 的背景 tbody this state boxes map box i gt tr td box

  • 如何在reactjs中访问悬停状态？

    我有一个侧面导航 里面有很多篮球队 因此 当其中一个团队悬停在上方时 我想为每个团队显示不同的内容 另外 我正在使用 Reactjs 所以如果我可以有一个可以传递给另一个组件的变量 那就太棒了 React 组件在其顶级界面中公开所有标准 J

  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注

  • yup.js 验证数字字段大于同级字段，或者可以为空

    我正在使用 Yup js 来验证一些表单字段 我有两个整数字段 Year Built Year Renovated Year Built是必填字段 Year Renovated is not 不过 装修年份可以留空如果有一个值它应该大于建造

  • 以编程方式填写reactjs表单

    我正在编写一个用户脚本 但无法填写由reactjs制作的表单 我的代码 document querySelector id username value email protected cdn cgi l email protection

  • 如何让 Django 和 ReactJS 协同工作？

    New to Django and even newer to ReactJS I have been looking into AngularJS and ReactJS but decided on ReactJS It seemed

  • className 属性是否承担 Reactjs 中 id 属性的角色？

    由于 id 属性在 Reactjs 组件中很少使用 因为 id 属性意味着组件不会被重用 那么是否使用 className 属性来代替 id 呢 如果是这样的话 那么 Reactjs 中相当于 HTML 中的 class 属性的是什么 cl

  • 如何在执行新操作时取消先前操作的执行？

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro

  • jest.mock() 在测试内部不起作用，仅在测试外部起作用

    我有一套简单的测试 在某些情况下我想模拟一个模块 而在某些情况下则不想 然而 jest mock 仅当将其置于测试之外时才有效 任何人都知道为什么会这样以及我做错了什么 这是我想要模拟的函数的实际导入 import hasSupport g

  • 如何使用 Jest 测试 React 渲染的异步数据？

    我使用 React 进行渲染 使用 Jest Jasmine 进行测试 我用旧的 Jest Jasmine 编写了测试waitsFor and runs但这些现在在 Jasmine 2 中已经消失了 我不知道如何用新的替换done asyn

  • 在 React 应用程序中简单连接到 mongodb

    我使用 create react app 创建了简单的反应应用程序 这个应用程序包含表单 验证和引导程序 没有什么花哨的东西能像魅力一样发挥作用 我还注册了 mongo 以获得免费集群 以便我可以发送一些数据 所以我有这个网址 mongod

随机推荐

  • QT QSS简单使用

    之前完成的QT程序完成逻辑控制后 界面全都使用图片填充的方式来做美化 但是使用到的组件看上去很丑 因此上网简单学习之后做总结如下 之前也未学习过CSS等知识属于纯小白 如有错误 不吝赐教 1 新建工程 略 新建一个工程用于本次demo的学习

  • 靠着这个计算机视觉目标跟踪实战项目，成功拿到商汤视觉算法工程师offer(深度学习/计算机视觉/图像处理/目标跟踪/物体检测)

    计算机视觉基本任务 开讲之前给大家准备了深度学习CV计算机视觉学习资料包 内含 两大Pytorch TensorFlow实战框架源码资料 OpenCV YOLO物体检测实战项目 计算机视觉等视频和资料以及深度学习书籍 名额有限 速速领取哦

  • Input.GetButtonDown("")的用法

    Input GetButtonDown 的用法 转载 2015 06 07 18 07 45 标签 it pic01 pic02 pic03 GetButtonDown的用法 1 通过 Edit Project settings Input

  • smtp协议源ip是服务器地址吗,什么是SMTP服务器

    什么是SMTP服务器 smtp服务器是什么 SMTP 的全称是Simple Mail Transfer Protocol 即简单邮件传输协议 它是一组用于从源地址到目的地址传输邮件的规范 通过它来控制邮件的中转方式 SMTP 协议属于TCP

  • Python 的 map、列表推导、循环效率比较

    话不多说 直接上代码 1 准备数据 三个列表 import time x x1 x2 for i in range 1000000 x append i x1 append i x2 append i 2 开始表演 2 1 for循环 st

  • docker是什么，能做什么，如何用

    Docker概述 Docker历史 docker能干嘛 Docker安装 Docker的基本组成 安装Docker 镜像加速 配置使用 回顾HelloWorld流程 底层原理 Docker为什么出现 一款产品 开发 上线 两套环境 应用环境

  • VS调试时显示FbxString内容

    在使用FBX SDK时 在VS里到了断点处 总是无法查看FBXString的字符串内容 在Watch里显示的也是一堆地址 以至于每次都得写下const char temp fbxString gt Buffer 今天竟然无意间发现在SDK根

  • ESP8266退出上电透传模式

    AT SAVETRANSLINK 1 192 168 6 110 1002 TCP 通过类似指令将TCP连接的信息写入到esp8266的Flash中去 并开启开机透传模式 及一开机就进入透传模式 此时的AT指令无效 要想重新使得AT指令有效

  • 由对称性知定点一定在x轴上_圆锥曲线解答题的经典答案：由椭圆的对称性知，定点在x轴上？...

    有很多圆锥曲线综合题要研究定点问题 答案里往往有这样一句话 由椭圆的对称性知 定点必在x轴上 或者说一句 显然定点在y轴上 看得童鞋们丈二和尚摸不着头脑 1 读者提问 一位来自广东 昵称为 h 的高三学生这样提问 左老师好 请教一个定点问题

  • 什么是AppImage

    A 什么是AppImage 在linux系统中使用AppImage 多年以来 我们一直使用 DEB packages 来管理 Debian Ubuntu的软件包 使用 RPM 管理 Fedora SUSE 的软件包 用户使用这些包管理工具可

  • 华为数字化转型之道认知篇第一章数字化转型，华为的战略选择

    第一章 数字化转型 华为的战略选择 农业经济以土地为生产资料 工业经济以石油和各类矿产为生产资料 数字经济则以数据为生产资料 数字化转型以ICT平台为生产工具 以数据为生产资料 以服务为产品 不仅能为企业的传统业务赋予新动能 也能为企业带来

  • jq匹配偶数行_jQuery中两种奇偶选择器的区别

    原标题 jQuery中两种奇偶选择器的区别 jQuery中的选择器在选择元素的时候经常用到 今天主要介绍jQuery中的奇偶选择器 jquery中的奇偶选择器要用到CSS3伪类选择器 nth child nth child 的用法 直接匹配

  • 为云服务器添加python web环境

    为云服务器添加python web环境 自用不喜勿喷 当前配置 阿里云win10云服务器 anaconda配置的python环境 操作步骤 1 参照教程配置python及Django 2 pyCharm如何运行Django https ww

  • vue标签属性及其用法

    一 Vue的特点 1 采用组件化模式 提高代码的复用率 且让代码更好维护 2 声明编码 让编码人员无需直接操作DOM 提高开发效率 3 使用学你DOM 优秀的Diff算法 尽量服用DOM节点 二 Vue模板语法有两大类 1 插值语法 功能

  • Springboot修改内置Tomcat版本

    背景 Tomcat的安全漏洞需要升级版本进行解决 如 9 0 63 gt 9 0 75 1 Pom文件Springboot的依赖配置项 2 Ctrl 右键点击红色框选 3 全局搜索 修改 修改数值 启动测试

  • C++实现——string的所有操作

    C 中string的操作 Constructors 构造函数 用于字符串初始化 Operators 操作符 用于字符串比较和赋值 append 在字符串的末尾添加文本 assign 为字符串赋新值 at 按给定索引值返回字符 begin 返

  • 基于python实现的CS通信和P2P通信

    实验要求 C S通信实现要求 两台计算机分别模拟服务器 客户端 通过编程实现服务器端 客户端程序Socket Client 服务器端程序监听客户端向服务器端发出的请求 并返回数据给客户端 不采用方式 自定义通信协议 传输文件要足够大 例如

  • Python GUI: PyCahrm结合Pyqt5开发图形化界面 详细步骤 踩坑!

    1 下载安装pythonPython官网下载地址 注意 1 1 Python版本选择并不是越新越好 后面会提到 我安装的版本是 V3 5 4 64位 1 2 安装的时候一定要勾选pip和add python to path 自动添加到环境变

  • 清华大佬耗时36个小时，终于整理出来了一份Python自学计划，学不会退出IT界

    在人工智能的风口 Python这门胶水语言越来越火 很多小伙伴也开始学习Python 但是没有一份合适的学习规划怎么能行 今天特意为大家整理了一份Python自学计划 希望可以帮助到处在迷茫期的你们 文末获取o 这份自学计划是我精心整理的

  • React+AntDesign开发完整的考勤系统前端页面（一）

    一 项目准备工作 1 开发环境准备 准备好Visual Studio Code前端开发工具 下载并安装Node js 2 项目准备 本次项目使用umi脚手架的方式创建 1 打开开发工具打开项目文件夹并新建终端在终端里面输入命令 npm i

热门标签