学习 Antd Pro 前后端分离
1.前言
最近学习reactjs ,前些年用RN开发过移动端,入门还算轻松。现在打算使用 Antd Pro 实现前后端分离。要使用Antd Pro这个脚手架,必须熟悉 umi、dva、redux-saga 等相关知识。
基础知识及目录结构可以先看官方文档 : https://pro.ant.design/docs/getting-started-cn
官方介绍:
Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 [Ant Design](http://ant.design/) 的设计价值观,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
2. 网络请求库添加钩子
钩子的目的主要是对请求头设置(如:添加 token,api服务端通过token鉴权,当然您的token格式也可以是jwt,我这里是自己加密后的字符串)和对请求返回的数据实现拦截过滤特殊处理。
antd pro 使用的是 umi-request.js 这个库,其实也是基于 fetch 封装 。 一开始用axios替换了request.js里面。后来发现umi-request 也很容添加钩子,这里在umi-request上添加。
添加拦截钩子:
提交请求格式(根据你的api服务选择):
payload(json格式提交) : 'Content-Type': 'application/json',
formData (表单格式提交) : 'Content-Type': 'application/x-www-form-urlencoded'
token:
系统用户登录后存储在
localStorage -> zone-token
返回拦截 :(request.interceptors.response):
我的api返回格式是:
{code:int,msg:string,data:object}
通过返回的code值 提示 token 过期 、token校验失败,做相应处理(跳出登录等等处理)
或其他特殊码(code)提示及处理
src\utils\request.js 调整后代码
/**
* request 网络请求工具
*/
import { extend } from 'umi-request';
import { notification } from 'antd';
import router from 'umi/router'; const codeMessage = {
200: '服务器成功返回请求的数据。',
201: '新建或修改数据成功。',
202: '一个请求已经进入后台排队(异步任务)。',
204: '删除数据成功。',
400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。',
401: '用户没有权限(令牌、用户名、密码错误)。',
403: '用户得到授权,但是访问是被禁止的。',
404: '发出的请求针对的是不存在的记录,服务器没有进行操作。',
406: '请求的格式不可得。',
410: '请求的资源被永久删除,且不会再得到的。',
422: '当创建一个对象时,发生一个验证错误。',
500: '服务器发生错误,请检查服务器。',
502: '网关错误。',
503: '服务不可用,服务器暂时过载或维护。',
504: '网关超时。',
}; /**
* 异常处理程序
*/
const errorHandler = error => {
const { response = {} } = error;
const errortext = codeMessage[response.status] || response.statusText;
const { status, url } = response; if (status === 401) {
notification.error({
message: '未登录或登录已过期,请重新登录。',
});
// @HACK
/* eslint-disable no-underscore-dangle */
window.g_app._store.dispatch({
type: 'login/logout',
});
return;
}
notification.error({
message: `请求错误 ${status}: ${url}`,
description: errortext,
});
// environment should not be used
if (status === 403) {
router.push('/exception/403');
return;
}
if (status <= 504 && status >= 500) {
router.push('/exception/500');
return;
}
if (status >= 404 && status < 422) {
router.push('/exception/404');
}
}; /**
* 配置request请求时的默认参数
*/
const request = extend({
errorHandler, // 默认错误处理
credentials: 'include', // 默认请求是否带上cookie
}); request.interceptors.request.use(async (url, options) => {
let token = localStorage.getItem("zone-token");
const headers = {
'Content-Type': 'application/json',
//'Content-Type': 'application/x-www-form-urlencoded',
'Accept': 'application/json',
}; if (token) {
headers['token'] = token;
} return (
{
url: url,
options: { ...options, headers: headers },
}
);
}) request.interceptors.response.use((response, options) => {
//拦截返回后的特殊处理
// if(response.data.code == 1000001){
// console.log(response.data.msg)
// //通过返回的code 提示 token 过期 、token校验失败,做相应跳转
// }
return response;
}); export default request;
3. 权限及登录调整
前后台整理中,后在写。。。。。
学习 Antd Pro 前后端分离的更多相关文章
- springboot + mybatis 前后端分离项目的搭建 适合在学习中的大学生
人生如戏,戏子多半掉泪! 我是一名大四学生,刚进入一家软件件公司实习,虽说在大学中做过好多个实训项目,都是自己完成,没有组员的配合.但是在这一个月的实习中,我从以前别人教走到了现在的自学,成长很多. ...
- SpringBootSecurity学习(12)前后端分离版之简单登录
前后端分离 前面讨论了springboot下security很多常用的功能,其它的功能建议参考官方文档学习.网页版登录的形式现在已经不是最流行的了,最流行的是前后端分离的登录方式,前端单独成为一个项目 ...
- 前后端分离&接口API设计学习报告
接口API设计学习报告 15331023 陈康怡 什么是API? API即Application Programming Interface.API是一种通道,负责一个程序与另一个程序的沟通.而对于w ...
- SpringBootSecurity学习(13)前后端分离版之JWT
JWT 使用 前面简单介绍了把默认的页面登录改为前后端分离的接口异步登录的方法,可以帮我们实现基本的前后端分离登录功能.但是这种基本的登录和前面的页面登录还有一个一样的地方,就是使用session和c ...
- Vue的学习总结之---Vue项目 前后端分离模式解决开发环境的跨域问题
原文:https://blog.csdn.net/localhost_1314/article/details/83623526 在前后端分离的web开发中,我们与后台联调时,会遇到跨域的问题. 比如 ...
- 前后端分离之前端项目构建(grunt+require+angular)
前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务 ...
- (转)也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)
原文链接:http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/ 随着不同终端(pad/mobile/pc)的兴起 ...
- 也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)
前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的NodeJS,试图 ...
- 前后端分离(手)-- 使用mock.js(好样的)
## 前言: 本篇博文昨天七夕写的,一天下来被虐得体无完肤,苦逼的单身狗只能学习,对!我爱学习,关掉朋友圈,并写了一篇博文发泄发泄.这次写mock.js的使用,能使前后端分离,分离,分离,重要的是说三 ...
随机推荐
- LINUX下搭建简单临时的WWW服务器
首先确定是否安装有python: python -V 如果有: cd 到你要开放的文件夹中,然后使用下面的命令可以把 当前文件夹内的所有文件 发布到 8000 端口. python -m Simple ...
- 最近学习到的Lambda表达式
前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 中秋去了躺上海,在外滩上打了个卡: 紧接着学了一下J ...
- [MySQL] 02- Optimisation solutions
前言 一.资源 MySQL 对于千万级的大表要怎么优化? - MySQL - 知乎[方法论] MySQL大表优化方案[一些优化的细节操作] MySQL大表优化方案[一些优化的细节操作] 分布式数据库下 ...
- Python3.7.4入门-0/1To Begin/数据类型与结构
0 To Begin //:向下取整除法 **:乘方 在交互模式下,上一次打印出来的表达式被赋值给变量 _ 如果不希望前置了 \ 的字符转义成特殊字符,可以使用 原始字符串 方式,在引号前添加 r 即 ...
- Springboot2.1.x配置Activiti7单独数据源问题
Springboot2.1.x配置Activiti7单独数据源问题 简介 最近基于最新的Activiti7配置了SpringBoot2. 简单上手使用了一番.发现市面上解决Activiti7的教程很少 ...
- 2019年十大开源WEB应用防火墙点评
2019年十大开源WEB应用防火墙点评 随着WEB应用的爆炸式成长和HTTPS加密的普及,针对网络应用层的攻击,像SQL注入.跨站脚本攻击.参数篡改.应用平台漏洞攻击.拒绝服务攻击等越来越多,传统的防 ...
- 自定义TabLayout的Indicator
最近项目要使用类似TabLayout的控件,其实我感觉就是TabLayout只是换了一个Indicator,先说一说TabLayout这是Android Support Design的控件要使用的同学 ...
- linux下mysql数据库操作命令
1:启动服务 service mysqld start (5.0版本是mysqld) service mysql start (5.5.7版本是mysql) 2:停止服务 service mysqld ...
- thymeleaf常用配置说明
#spring.thymeleaf.cache = true #启用模板缓存. #spring.thymeleaf.check-template = true #在呈现模板之前检查模板是否存在. #s ...
- j2ee开发之struts2框架学习笔记
Struts2框架技术重点笔记 1.Struts2 是在webwork基础上发展而来. 2.Struts2 不依赖struts API和 servlet API 3.Struts2提供了拦截器,表现层 ...