react_app 项目开发 (6)_后台服务器端-node
后台服务器端
负责处理前台应用提交的请求,并向前台返回 json 数据
前台应用 负责
展现数据与用户交互
发 ajax 请求与后台应用交互
yarn add axios
/src/api/ajax.js
/*
自定义封装 axios ---- https://github.com/axios/axios
返回值: Promise 对象
*/
export default function ajax(url, data={}, method="GET"){
/**** 自定义封装 Promise 对象 ****/
return new Promise((resolve, reject)=>{
let promiseAxios;
if(method === "GET"){
promiseAxios = axios,get(url, {params: data});
}else if(method === "POST"){
promiseAxios = axios.post(url, data);
}else{
throw new Error("方法 method 错误");
}
promiseAxios.then(result=>{
resolve(result);
}).catch(error=>{
console.log(error);
message.error("请求出错了");
throw new Error("请求出错了");
});
});
} /****
async function login(){
const result= await ajax(
"/login",
{uName: 'Tom', uPWD: '112233'},
"POST"
);
if(result.statue === 0){...}else{...}
}
****/
/src/api/login.js
import requestLogin from "xxx"
...
this.props.form.validateFields(()=>{
if(error){ }else{
const result = await requestLogin(values);
}
})
... /**** 以上写法意味着 ajax 需要进一步封装 /src/api/index.js
import ajax from "./ajax"
// export function requestLogin(data){
// return ajax(“/login”, data, "POST");
// } export default const requsetAPI = {
login(data){
return ajax(“/login”, data, "POST");
},
addUser(data){
return ajax(“/manage/user/add”, data, "POST");
},
}
****/
保存 用户登录 状态
- 会话保存到内存 sessionStorage
- 永久保存到硬盘 localStorage
06_jsonp、cors、"proxy" 代理 解决跨域问题 ---- 只有 ajax 跨域才会有问题
proxy 有两个作用: 拦截到请求,然后转发到 另一个目标地址
中间件就是一个函数,进行处理后,控制继续还是不继续。
http-proxy-middleware 代理中间件 被前端广泛使用,而后台多用 nginx
配置 前端应用的 package.json ---- webpack-dev-server 提供的功能
07_登录检查用户状态 从内存读 会 从 localStorage 中读 的效率更高
减少从 localStorage 中读: 只是存入 localStorage
登录检查:
5
创建 src/config 文件夹 ---- 菜单配置 menuConfig.js
- reduce 的常用逻辑
- 在 LeftNav.jsx 中
利用递归,来
react_app 项目开发 (6)_后台服务器端-node的更多相关文章
- react_app 项目开发 (5)_前后端分离_后台管理系统_开始
项目描述 技术选型 react API 接口 接口文档,url,请求方式,参数类型, 根据文档描述的方法,进行 postman 测试,看是否能够得到理想的结果 collections - 创建文件取项 ...
- react_app 项目开发 (3)_单页面设计_react-router4
(web) 利用 react-router4 实现 单页面 开发 SPA 应用 ---- (Single Page Web Application) 整个应用只有 一个完整的页面 单击链接不会刷新页面 ...
- react_app 项目开发 (7)_难点集合
/src/App/Admin/Header 布局 import {Row, Col} from "antd" <div className="header_box& ...
- react_app 项目开发 (4)_ React UI 组件库 ant-design 的基本使用
最流行的开源 React UI 组件库 material-ui 国外流行(安卓手机的界面效果)文档 ant-design 国内流行 (蚂蚁金服 设计,一套 PC.一套移动端的____下拉菜单.分页.. ...
- react_app 项目开发 (8)_角色管理_用户管理----权限管理 ---- shouldComponentUpdate
角色管理 性能优化(前端面试) 需求:只要执行 setState(), 就会调用 render 重新渲染.由于有时调用了 setState,但是并没有发生状态的改变,以致于不必要的刷新 解决: 重写 ...
- react_app 项目开发 (9)_数据可视化 ECharts
数据可视化 ECharts yarn add echarts echarts-for-react
- react_app 项目开发
react_app 项目开发 npm install -g create-react-app npm root -g // 查看安装包位置 创建项目 create-react-app m ...
- react_app 项目开发_遇到的坑
1. favicon.ico <link rel="shortcut icon" type="image/x-icon" href="./fav ...
- com.panie 项目开发随笔_数据字典(2017.2.24)
(一) 做一个网站,第一步需要考虑的是从哪个地方开始下手.首先,每一个功能肯定有最基本的增删改查功能,而此功能一般都分为两个页面. 1) 列表显示页面.用列表来展示数据库中的数据,多用于分页显示.该页 ...
随机推荐
- vue开发常用插件
dependencies axios // 用于请求数据 better-scroll // 用于处理页面列表的滚动,下拉刷新等 fastclick // 用于处理移动设备点击会有300毫秒延迟的问题 ...
- windows 下 bat 计划任务删除保留时间内文件
date windows 打印时间戳 年:echo %date:~,% 月:echo %date:~,% 日:echo %date:~,% 星期:echo %date:~,% 小时:echo %t ...
- django登录
一. form表单使用注意事项: 1. action="" 提交地址, method='post' 请求方式 2. input 标签要有name属性才能被获取 3. 有一个inpu ...
- js限制字符串长度,超出的部分补...
value?(value.length>12?(value.substring(0,12))+"...":value):""
- 边缘检测之Canny
1. 写在前面 最近在做边缘检测方面的一些工作,在网络上也找了很多有用的资料,感谢那些积极分享知识的先辈们,自己在理解Canny边缘检测算法的过程中也走了一些弯路,在编程实现的过程中,也遇到了一个让我 ...
- IDEA 在同一目录创建多个项目
以往的Eclipse.NetBeans等开发工具不同,IDEA的Project相当与Eclipse的Workspace,而Module相当于Project. 下边就给出Eclipse与IDEA的概念的 ...
- VMWare 鼠标无法点击 的问题
今日发现在VMWare虚拟机中点击鼠标没有反应,但是鼠标hover.键盘都是正常的. 还表现为,如果从外部环境激活鼠标,然后移至虚拟机区域,快速双击,则可以捕获为单击. 这个问题在网络上未见有明确解释 ...
- json server服务器
json文件可以理解为数据库 一.json-server快速搭建RESTAPI 安装: sudo cnpm install -g json-server 启动(使用): json-server指向js ...
- min-max容斥 hdu 4336 && [BZOJ4036] 按位或
题解: 之前听说过这个东西但没有学 令$max(S)$表示S中编号最大的元素,$min(S)$表示编号中最小的元素 $$max(S)=\sum{T \in S} {(-1)}^{|T|+1} min( ...
- [转]sourcetree 安装-Windows
https://blog.csdn.net/weialemon/article/details/78833419 sourcetree官网地址:https://www.sourcetreeapp.co ...