
React后台管理系统全记录
文章平均质量分 88
使用React函数组件+react全家桶来完成一个项目的记录全过程
韩振方
一只进击的前端 Rookie
展开
-
基于React.js的后台管理系统开发全过程(八)
前言最近几天补习了一下mongoDB的基础知识,之前因为没用到,所以一些命令都差不多忘了。昨天也是零零碎碎的写了一些代码,今天才正式实现了一些功能。正文一.预览效果之前这个页面一直是个摆设,没有怎么具体实现效果,前天也是实现了数据库的通信和注册。先看效果。目前数据库里是没有数据的。点击注册会提示注册成功。重复注册会提升用户名已经存在。可以看到数据库内已经多了一条数据,也就是刚刚注册的那个信息。二.实现勾选同意阅读和注册按钮的互动1.这个比较简单,首先设置一个状态,来定义按钮的原创 2022-04-27 23:22:28 · 1185 阅读 · 0 评论 -
基于React.js的后台管理系统开发全过程(七)
夏天好热啊~本文章推荐开放空调阅读😊👉便携式迷你小空调由于采用了黑科技,手机听筒放在脸庞可以有微风吹过,电脑端暂时没有实现,后续会继续优化~.tips:这个空调我的文章中也有哦~一.思考优化组件上一章节虽然我们完成了退出登录的设计,但是这个按钮似乎只能用来退出登陆,返回到登陆页面。如果我其它地方也要用到这一类弹框的效果的话,非常不方便,于是思考把这个组件给封装成真正随时可以调用的组件。将昨天引入到这个弹出对话框的组件内部的logOut方法还放回到<dashBoard/>里面,我们原创 2022-04-24 10:14:59 · 369 阅读 · 0 评论 -
基于React.js的后台管理系统开发全过程(五)
夏天好热啊~本文章推荐开放空调阅读😊👉便携式迷你小空调由于采用了黑科技,手机听筒放在脸庞可以有微风吹过,电脑端暂时没有实现,后续会继续优化~.tips:这个空调我的文章中也有哦~以下是正文:一.进一步优化用户体验目前已经实现了用户第一次访问localhost:3000会自动跳转到首页但是左边的首页确并没有在初次渲染的时候被选中,可以看到并没有变为antd选中时的蓝色这个解决也很简单,antd有封装好的API直接使用即可。在<Menu>组件使用现有的API即可。defaul原创 2022-04-19 22:55:42 · 426 阅读 · 0 评论 -
基于React.js的后台管理系统开发全过程(四)
一.实现左侧导航栏的二级路由前言:原本打算是不使用antd,只想用Material UI来完成左侧导航列表的折叠伸缩效果的,结果试了一上午,只能感叹不得不承认还是antd封装的后台管理系统完善。虽然使用MaUI也完成了相关的一些搭配,不过它封装的效果不够完善,它是利用<collapes>单独的组件搭配<ListItem>的onclick事件控制某个状态的变化操作<collapes>中的in属性的变化,来完成折叠伸缩的效果,但是很坑的是如果你想把整个左边菜单栏用数组原创 2022-04-18 22:43:04 · 794 阅读 · 0 评论 -
基于React.js的后台管理系统开发全过程(三)
开始记录过程的时候切记不要着急马上动手敲代码,稍微回顾一下之前使用到的知识,可以让你的思路越发的清晰。回顾一下,上一篇所用到的知识。基于React.js的后台管理系统开发全过程(二)1.如何解决跨域问题2.路由表的配置3.window对象下的,localStorage.getItem/setItem/removeItem方法的使用 接下来是正文:一.优化用户体验前面我们已经完成了,对主页面的刷新,不会丢失用户登录信息的功能。接下来让我们思考下面一个场景,我关闭浏览器,输入localhos..原创 2022-04-17 19:13:13 · 892 阅读 · 0 评论 -
基于React.js的后台管理系统开发全过程(二)
一.封装各个类型的请求方法在Api文件夹下创建一个ajax.js文件来准备对axios完成二次封装。在这里假设我们只用到post和get请求ok,我们完成了最基本的二次封装。这样使用起来好像和直接使用axios并没有什么区别,让我们继续包装一下。在Api文件夹下再创建一个index.js文件,来存放我们后续可能需要的各种类型的请求方法。二.解决跨域问题当浏览器向服务器发起请求时,即使存在跨域问题,服务器依旧是会响应请求,并返回数据给浏览器,但当浏览器拿到数据后发现存在跨域问题了,这时候浏览原创 2022-04-16 16:41:23 · 642 阅读 · 0 评论 -
基于React.js的后台管理系统开发全过程(一)
声明:该文章组件全部为函数组件,仅作为记录自己使用react全家桶来开发后台管理平台的记录日志,故文章内容可能会以自己的视角来书写,比如说省略了某些知识,跳过了某些关键的点。故该文章不作为教程发布。请读者选择性观看一.前期工作准备1.git创建仓库2.create-react-app xxx3.连接仓库4.创建分支并且切换分支二.项目基本结构的创建根据实际项目的大概基本配置来完成自己src文件夹下的基础构造,未来如有需求可以再添加。三.主页登陆页面的实现路由工作准备,BrowserRo原创 2022-04-09 06:54:53 · 1268 阅读 · 0 评论