快速打造 react 后台管理系统

来源:http://www.chinese-glasses.com 作者:Web前端 人气:60 发布时间:2020-04-07
摘要:至于如何在项目中集成pretter,具体的使用方式可以参考官方文档,这里就不在叙述了 const CancelToken = axios.CancelToken//cancel token列表let sources = []const request = function (url, params, config, method)

至于如何在项目中集成pretter,具体的使用方式可以参考官方文档,这里就不在叙述了

const CancelToken = axios.CancelToken//cancel token列表let sources = []const request = function (url, params, config, method) { return new Promise => { axios[method](url, params, Object.assign({}, config, { //1.通过将执行程序函数传递给CancelToken构造函数来创建cancel token cancelToken: new CancelToken { //2.将cancel token存入列表 sources.push.then(response => { resolve }, err => { if  { console.log } else { reject.catch }) })}const post = (url, params, config = {}) => { return request(url, params, config, 'post')}const get = (url, params, config = {}) => { return request(url, params, config, 'get')}//3.导出cancel token列表供全局路由守卫使用export {sources, post, get}

项目中并没有使用eslint,只是添加了pretter为项目统一了编码风格

默认配置

echarts

// 请求列表const requestList = []axios.interceptors.request.use => { //1.将当前请求的URL添加进请求列表数组 requestList.push //2.请求开始,改变loading状态供加载动画使用 store.dispatch('changeGlobalState', {loading: true}) //3.从store中获取token并添加到请求头供后端作权限校验 const token = store.getters.userInfo.token if  { config.headers.token = token } return config}, function  { return Promise.reject

如果你没有使用npm run eject将webpack的配置暴露出来,可以直接在package.json中配置proxy

axios.defaults.timeout = 10000 //超时取消请求axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'axios.defaults.baseURL = process.env.BASE_URL 

// 创建实例时设置配置的默认值var instance = axios.create({ baseURL: 'https://api.another.com'});// 在实例已创建后修改默认值instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

相信很多小伙伴都有可能碰到开发后台管理系统这样的需求,那么我们该如何快速的完成这个需求呢

1.请求拦截器中将所有请求的url添加进请求列表变量,为取消请求及loading状态管理做准备2.请求一旦开始,就可以开启动画加载效果。3.用户登录后可以在请求头中携带token做权限校验使用。

这里并没有对baseUrl进行设置,主要是考虑到项目中可能存在不止一个url,比如图片这些资源可能存在七牛云或者阿里云这样的服务器上面,而后台接口又是另外一个url了。所以添加了一个config文件,导出各个url

1.axios cancel token API2.存入需要取消的请求列表导出给导航守卫使用3.router.js

// 下载yarn add animate.css// link标签引入link rel="stylesheet" href="animate.min.css"// 或者 import 引入import 'animate.css'
$ npm install axios

$ bower install axios

调用接口的时候就可以直接这样

全局请求配置。 get,post,put,delete等请求的promise封装。 全局请求状态管理,供加载动画等使用。 路由跳转取消当前页面请求。 请求携带token,权限错误统一管理。

if (screenfull.isEnabled) { screenfull.on('change', () = { console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No'); });}

1.响应返回后将相应的请求从请求列表中删除2.当请求列表为空时,即所有请求结束,加载动画结束3.权限认证报错统一拦截处理4.取消请求的处理需要结合其他代码说明5.由于项目后端并没有采用RESTful风格的接口请求,200以外都归为网络请求失败

当然,如果你将webpack中的配置暴露出来了,那么也可以直接在config文件中进行设置,都是可以实现同样的效果

axios.interceptors.response.use { // 1.将当前请求中请求列表中删除 requestList.splice(requestList.findIndex(item => item === response.config.url), 1) // 2.当请求列表为空时,更改loading状态 if (requestList.length === 0) { store.dispatch('changeGlobalState', {loading: false}) } // 3.统一处理权限认证错误管理 if (response.data.code === 900401) { window.ELEMENT.Message.error router.push } return response}, function  { // 4.处理取消请求 if ) { requestList.length = 0 store.dispatch('changeGlobalState', {loading: false}) throw new axios.Cancel } else { // 5.处理网络请求失败 window.ELEMENT.Message.error } return Promise.reject

跨域

axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

按钮权限,直接使用权限标识判断可否操作,隐藏或者展示即可

promise封装及取消请求

echarts相信大家不会陌生,百度的文档也很清晰,这里单独提出来主要记录开发过程中遇到的一个问题

优先级:自定义配置 > 默认配置

基本

// 引入网络请求库 https://github.com/axios/axiosimport axios from 'axios'import store from '../store'import router from '../router'// axios.defaults.timeout = 10000const requestList = []axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'axios.defaults.baseURL = process.env.BASE_URL// 自定义拦截器axios.interceptors.request.use => { requestList.push store.dispatch('changeGlobalState', {loading: true}) const token = store.getters.userInfo.token if  { config.headers.token = token } return config}, function  { return Promise.rejectaxios.interceptors.response.use { requestList.splice(requestList.findIndex(item => item === response.config.url), 1) if (requestList.length === 0) { store.dispatch('changeGlobalState', {loading: false}) } if (response.data.code === 900401) { window.$toast.error router.push } return response}, function  { requestList.length = 0 store.dispatch('changeGlobalState', {loading: false}) if ) { throw new axios.Cancel } else { window.$toast.error } return Promise.rejectconst CancelToken = axios.CancelTokenlet sources = []const request = function (url, params, config, method) { return new Promise => { axios[method](url, params, Object.assign(config, { cancelToken: new CancelToken { sources.push.then(response => { resolve }, err => { reject.catch }) })}const post = (url, params, config = {}) => { return request(url, params, config, 'post')}const get = (url, params, config = {}) => { return request(url, params, config, 'get')}export {sources, post, get}

添加一个.eslintrc.js文件或者在package.json文件中的eslintConfig对象中直接添加你需要使用的规则

请求及响应拦截器

项目实现

在前端框架中的应用也是特别广泛,不管是vue还是react,都有很多项目用axios作为网络请求库。

Create React App提供了一组最常见的错误规则,在代码运行的时候会有错误信息提示,所以Eslint规则在这里并不是必须的,如果你也想在代码书写的时候就提示错误可以进行下面这个步骤:

...import { sources } from '../service/request'...router.beforeEach => { document.title = to.meta.title || to.name //路由发生变化时取消当前页面网络请求 sources.forEach sources.length = 0 next

项目使用axios与后台进行交互,封装的部分有添加请求拦截器、响应拦截器、设置响应时间以及将token添加到请求头等功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

全屏插件

request.js完整代码:

在react-admin这个项目中,所使用的是HashRouter

我在最近的几个项目中都有使用axios,并基于axios根据常见的业务场景封装了一个通用的request服务。

作为一个SPA级应用,有很多优势(响应速度更快、良好的前后端分离等等),但是也存在很多缺陷,首次加载耗时过长就是我们不得不面对的问题

// 考虑到网站可能有好几个域名,所以单独提出来export const API = ''export const URLAPI = ''

本文将以react为切入点,记录打造一个基础管理系统模板的过程,以此加深对react技术栈以及项目实战的理解,希望对大家开发一个这样的项目有所帮助

动画

这里也简单说一下后台控制权限的案例,对于前端来说要简单很多

最后

富文本

import {API} from './api/config'import axios from './api'axios.get({ url: API + '/login'})
// 下载yarn add screenfullif (screenfull.isEnabled) { screenfull.request(); // 全屏}.exit() // 退出.toggle() // 可切换

基本功能路由懒加载面包屑导航常用UI展示echarts全屏展示登陆/注销功能axios封装简单权限管理项目结构

说明:这里对注册的路由数组进行过滤这一步进行说明,一般情况下前端路由都是提前注册好的,就算没有menu菜单导航,如果我们在地址栏直接输入路径也是可以访问的,这里进行一次过滤之后就可以避免这种情况。当然,我们也可以给每一个权限设定一个可以访问的路径数组,通过比较跳转的地址是否存在这个数组当中来进行相应的展示

这样只需要在baseUrl后面添加/api就可以了

在页面窗口变化的情况下我们可以使用

其它

路由基于react-router@5.1.1

同样的,也并没有对常用的请求比如get、post等进行封装,因为使用这些方式的时候可能会对数据做一些特定的操作,比如序列化等等,所以个人感觉意义并不是很大

用户登录,从后台获取注册时的角色(权限标识)通过权限标识,对注册的menu菜单进行过滤,渲染到页面

Router Switch !--精确匹配是不是在首页-- Route path='/' exact render={() = Redirect to='/index' /} / !-- 错误页面 -- Route path='/500' component={View500} / Route path='/login' component={Login} / Route path='/404' component={View404} / !-- UI页面 -- Route path='/' component={DefaultLayout} / /Switch/Router

后台控制

时间: 2019-10-17阅读: 90标签: 系统前言

如果觉得不错或者对你有些许的帮助,欢迎star,或者你有更好的实现方式、有趣的idea,也欢迎留言交流

这里顺便记录一下跨域问题的解决方式:

如果文章中有出现纰漏、错误之处,还请看到的小伙伴多多指教,先行谢过

首先,我们需要区分公共页面和可能的特有页面

此项目涉及的技术栈主要有 es6、react、react-router、redux、react-redux、Create React App、react-loadable、axios等,所以你可能需要提前了解这些知识,这样会对你了解这个项目有很大的帮助

权限功能基本上是后台管理项目中不可或缺的部分

登录

接下来就可以去注册路由表,再将它循环遍历到我们的视口页面上。大家可能也发现了循环遍历这个词,操作数组就意味着我们可以对它进行一系列的筛选,从而实现 路由权限 的控制(这个我们后面再说)

// 下载yarn add nprogress// 引入import NProgress from 'nprogress'// 开始加载NProgress.start();// 加载结束NProgress.done();// 移除进度条NProgress.remove();

让用户直接跳转到登录页面重新登录查看本地是否存储了用户信息,如果有就更新用户的token,让其继续操作,反之则跳转到登录页面(这个取决于你将用户信息存储在哪里)

可是当我们在点击菜单收缩展开按钮的时候并不会触发window.resize方法,其实页面盒子的宽度已经发生了变化,只是echarts的resize事件已经触发结束了,这个时候我们只需要在componentDidUpdate这个生命周期中注册一个定时器延时触发resize事件就解决了,只是别忘了在componentWillUnmount生命周期中清除掉这个定时器

还有一种情况就是用户登录之后,但是由于长时间没有操作导致token过期了,这个时候可能就会出现两种选择:

当然,这里的第二种情况很少见…

如果用户没有访问某一个页面的权限,那么使用其token请求后台数据的时候一定是不成功的,我们可以将这一个操作封装在axios请求中,通过不同的状态码进行页面跳转我就是访问了一个没有请求的页面(这个页面还不给没权限的人看),那我们就采用过滤权限数组的方式对其操作进行阻止

本文由10bet发布于Web前端,转载请注明出处:快速打造 react 后台管理系统

关键词:

最火资讯