React项目(后台管理)(echarts图表)

2020年01月18日 阅读数:18
这篇文章主要向大家介绍React项目(后台管理)(echarts图表),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

React:后台管理

1,gitflow的工做流,使用

几我的分功能,3人。主程搭整个框架(共有模块,共有插件)
主程: 切换到dev分支,在dev分支作项目总体搭建。再上
传到远程仓库javascript

2,搭建项目环境

项目基本目录结构共有插件共有功能库共有的组件。)
预处理语言:less, sass,styleus
(区别:less基于javascript;
@:设置变量,嵌套(父级直接嵌套),简单的运算(基本不用,),mixin(样式的封装))
bootstrap中文网
默认不支持less,在config文件里webpack.config.js里sass改为less。
less的共有目录在这里插入代码片
防止样式覆盖,样式模块化:
a,文件名添加 .module
b,import AA from ‘./less’
c.标签名className= {AA.名字} (.less里的标签名字)css

vue:UI库:MintUI

ui框架 :安装:antd ( 'npm install antd)
全局引入:import ‘antd/dist/antd.css’
按需引入:须要安装【npm install babel-plugin-import插件
在config安装/configwebpack.vonfig
['import',{"library"}]
按需引入出现错误,须要回退到2.7.3版本
npm install less@2.7.3
路由 :react-router-dom
网络请求:fetch, axios
适配方式:pc 百分比+媒体查询。设两个尺寸(最大尺寸,最小尺寸)
小于860,内容宽度不变
860-1980: 百分比布局,
移动:rem+flex前端

图片懒加载,路由懒加载vue

asset:api
components:共有的组件
utils:封装的js
style:共有样式
page
admin主页
home:首页右侧展现页
login:登陆页
rootlist:管理员信息列表:java

1.查看全部管理员信息 a.请求数据 b.列表展现
2.删除管理员,只需删除uid
3.修改管理员权限
分页器:antd组件。Pagination(simple:分页器的样式。defaultCurrent:当前的页面数。total:总条数。pageSize:每页的条数。onChange:页码改变的回调,参数是改变后的页码及每页条数 。转圈圈的加载中:Spin:true是显示。Popconfirm:确认框,title:显示的文字。onConfirm:确认触发的事件,onCancel:取消的事件,oText:确认显示的文字,cancelText:取消显示的文字)node

rootadd:添加表单,管理员添加
rootupdate:修改表单信息。
react

注销功能: 插件,Dropdown:下拉菜单webpack

文件命名

一级路由是登陆界面
路由:
router.js:配置路由基本信息
重定项login登陆页面ios

page

login,登陆页面和侧边栏
admin:首页面
home管理平台的首页git

动态侧边栏,递归写嵌套,判断有没children

代码同步到主程上,
合并到dev分支
git merge ****

提交到线上
git  pull
git push  origin  dev
其余人再更新。

react-loadable:

安装:npm install react-loadable
单页面:
优势:组件开发复用,页面跳转流畅
缺点:不利于seo优化,首屏加载过慢,

路由懒加载,异步引用,异步组件:解决首屏加载过慢。
高阶组件:会传一个对象,两个参数
loader:异步加载的组件
loading:中间的过场组件
在须要的地方引入 ,
路由得须要引入这个文件的loadable
这样用的话须要在每一个文件夹下建立loadable.js
在这里插入图片描述

封装loadable:

utils下封装。
路由文件下引入loadable.js
须要用的文件改写成:const Login=loadable(()=>import(’./…))
在这里插  入图片描述

YAPI:

去哪儿: 接口平台管理工具,

登陆注册功能

登陆:
1,获取用户信息
前端正则的判断
2,调用接口,根据返回数据处理
token,权限列表
3,成功跳转到首页
4,token,
5,7天免登录
6,验证码,手机验证码,。。。。
7,

退出:
1,调用接口,将数据库的token清除掉
2,前端的token清掉

获取表单元素
1,组件来作,antd。
geFieldDecorator:用于和表单进行双向绑定
getFieldsValue:获取一组输入的值,
form表单里有rules:验证匹配
在这里插入图片描述
validateFields:校验并获取一组输入框的值是否成功.
两个参数:err:验证是否是经过,经过为null,
(推荐) 2,受控组件(value被state控制,经过onchange
进行修改)
3,非受控组件(经过ref来获取表单信息(dom元素))

axios

在npm官网上复制Interceptors
在index.js里面挂载

 React.Component.prototype.$axios=axios;
 import axios from  './utils/axios'

在axios里 全局获取token 并添加到请求里
要看后端来定 token能够添加到1. cookie 2.header 3.参数传递

服务器代理,发起请求先把服务器请求到代理服务器,代理服务器作转发。
传的数据都是接口里的大小必须同样。

图片上传

1,以文件形式,将本地的图片,上传到服务器,图片的路径保存到数据库
a,直接文件上传,(获取图片,将图片变成formdata对象,将formdata对象传给后端)
b,将图片文件数据直接上传到后端
c,由后端对数据进行处理
d,将图片文件存到静态资源路径下,将图片的相对路径存到数据库,将路径返回给前端。

2,直接将图片变成base64——至关于字符串,>经过上传的接口将图片上传到数据库。

a,获取图片
b,将本地的图片变成base64
c,经过ajax,将base64图片数据上传到数据库里
建立FileReaderder,监听对象onload,调用readAsDataURL
<input type="file"/>文件域 
node中的multer上传文件

安装:npm install express multer body-parser cors
解析post两种数据格式
在这里插入图片描述
获取文件信息
处理文件
返回数据
上传插件:npm install multer

数据放到fromdata里,修改axios头文件信息,上传。

图表echarts

安装:npm install echarts-for-react
npm install --save echarts
1,引入
2,用
getOption方法,return

挂载结束,setTimeout作个延迟。

在这里插入图片描述