GithubHelp home page GithubHelp logo

react-admin-master's Introduction

基于React+antd实现后台模板

自己利用业余时间,基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React,页面主要还是展示页面,比较简单不涉及后台交互。

github地址:基于React+antd实现后台模板
预览地址:服务器到期,暂时没有预览地址

项目重构地址:react+koa实现登陆、聊天、留言板功能后台
重构预览地址:服务器到期,暂时没有预览地址

2019.3.19更新
今天回顾了一下项目,发现组件写的有问题,公共组件中不应该写业务逻辑,业务逻辑应该通过props或传递事件来实现;或者再用容器组件封装。
webstorm打开项目时占用内存过高,不知道是不是代码的问题。
项目的初衷是为了学习和总结,可能前期写的或多或少有些问题,但正是通过解决这些问题才能不断的提升。

2019.3.7更新
登录后浏览器后退按钮可以回到登录页,登录页不登录,通过浏览器的前进又可直接进入前台。 我在登录页componentWillMount生命周期加了判断,如果已经登录,重定向到前页面(也可以设置退出登录)

技术栈

  • react
  • antd
  • react-router
  • mobx
  • canvas
  • ES6
  • cookie

自己参考了其他优秀的插件,比如动态打字效果、背景粒子效果、shuffle(洗牌)全屏插件等,自己对有些插件封装成类使用

所有路由都需要登录才可进入,自己封装了PrivateRoute组件来实现路由认证,登录信息保存在cookie中,原本是保存在store中,但是刷新页面后登录状态丢失,所以就保存在cookie中 登录背景图太大,使用了TinyPNG进行压缩,并编写了一个loading效果

项目目录结构

assets----存储静态图片资源和共用icon图标
components----存储共用组件
routes----业务页面入口和常用模板
store----状态管理
utils----工具函数

项目截图


问题

整个demo不复杂,主要是熟悉react和路由等,在打包的过程中出现了一点小问题。我打包的文件是放在服务器二级目录下,所以打包的路径要改为相对路径,不能使用绝对路径,我在package.json中添加了homepage:'.'解决了路径问题。然后BrowserRouter加上了 basename=‘二级目录名称’ 属性,结果还是出现js路径错误,我一直以为是webpack打包的问题,找了很久才发现是因为BrowserRouter,将BrowserRouter改为HashRouter就访问正确。
使用react-router(v4)时,如果有服务器端的动态支持,建议使用 BrowserRouter,否则建议使用 HashRouter。
BrowserRouter和HashRouter其实就是前端路由的两种实现方式,一种是hash和一种是HTML5的history,网上有很介绍。
可以参考:关于react 在打包后:“找不到资源路径”的问题、部署到服务器二级目录 “打开为空白” 的问题

最后

demo是我断断续续写的,只有下班和周末有时间。写demo的目的主要是熟悉React和react-router以及antd,整个demo中参考了一些其他人的想法,如动画效果等。另外基于vue的个人项目可以看这个仿制移动端QQ音乐

其他个人项目


觉得不错的给个star鼓励支持!^_^

react-admin-master's People

Contributors

z-9527 avatar zhangyingyu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-admin-master's Issues

大佬

大佬 我把项目的文件全部复制到一个新的文件,为什么出现
Failed to compile.
./src/routes/Login/index.js
Syntax error: Unexpected token (24:0)

22 |
23 |

24 | @withRouter @Inject('appStore') @observer
| ^
25 | class Login extends React.Component {
26 | state = {
27 | showBox: 'login', //展示当前表单
截屏2022-07-07 16 51 21的副本

在原文件可以跑起来

大佬,这个图片地址无法加载了

大佬,你好,最近我也想学习一下这个antd的,可是用你的这个不能运行,报错 Failed to load resource: net::ERR_NAME_NOT_RESOLVED ,就是那几个图片文件不能加载,应该怎么处理的哦,可以告诉下吗?谢谢了!

打包后路径错误

将你的项目打包之后
生成文件:
image
放入github.io 路径有问题 显示/home下的路径
image

启动后报错

/BizCharts/umd/BizCharts.jsdoes not match the corresponding path on diskbizcharts`.
实际上检查了一下这些文件都存在,是不是因为大小写的原因?

打包之后的问题

大佬 我打包之后
Module not found: F:\react-admin-master\node_modules\BizCharts\umd\BizCharts.js does not match the corresponding path on disk bizcharts.
提示磁盘错误,找不到错误在哪里。
求指教

springText弹性文字不动

有两个问题:
1.springText弹性文字不动,不过不影响其他的。
2.作者你说的BrowserRouter导致js路径不正确加载不了的问题我也有,换了HashRouter就行。但是怎样才能使BrowserRouter正常工作呢?路径有#号确实有点奇怪不想用HashRouter。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.