后台服务器端

负责处理前台应用提交的请求,并向前台返回 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

登录检查:

创建 admin 各个子组件

5

创建 src/config 文件夹 ---- 菜单配置 menuConfig.js

  • reduce 的常用逻辑

  • 在 LeftNav.jsx 中

利用递归,来

react_app 项目开发 (6)_后台服务器端-node的更多相关文章

  1. react_app 项目开发 (5)_前后端分离_后台管理系统_开始

    项目描述 技术选型 react API 接口 接口文档,url,请求方式,参数类型, 根据文档描述的方法,进行 postman 测试,看是否能够得到理想的结果 collections - 创建文件取项 ...

  2. react_app 项目开发 (3)_单页面设计_react-router4

    (web) 利用 react-router4 实现 单页面 开发 SPA 应用 ---- (Single Page Web Application) 整个应用只有 一个完整的页面 单击链接不会刷新页面 ...

  3. react_app 项目开发 (7)_难点集合

    /src/App/Admin/Header 布局 import {Row, Col} from "antd" <div className="header_box& ...

  4. react_app 项目开发 (4)_ React UI 组件库 ant-design 的基本使用

    最流行的开源 React UI 组件库 material-ui 国外流行(安卓手机的界面效果)文档 ant-design 国内流行 (蚂蚁金服 设计,一套 PC.一套移动端的____下拉菜单.分页.. ...

  5. react_app 项目开发 (8)_角色管理_用户管理----权限管理 ---- shouldComponentUpdate

    角色管理 性能优化(前端面试) 需求:只要执行 setState(), 就会调用 render  重新渲染.由于有时调用了 setState,但是并没有发生状态的改变,以致于不必要的刷新 解决: 重写 ...

  6. react_app 项目开发 (9)_数据可视化 ECharts

    数据可视化 ECharts yarn add echarts echarts-for-react

  7. react_app 项目开发

    react_app 项目开发 npm install -g create-react-app npm root -g        // 查看安装包位置 创建项目 create-react-app m ...

  8. react_app 项目开发_遇到的坑

    1. favicon.ico <link rel="shortcut icon" type="image/x-icon" href="./fav ...

  9. com.panie 项目开发随笔_数据字典(2017.2.24)

    (一) 做一个网站,第一步需要考虑的是从哪个地方开始下手.首先,每一个功能肯定有最基本的增删改查功能,而此功能一般都分为两个页面. 1) 列表显示页面.用列表来展示数据库中的数据,多用于分页显示.该页 ...

随机推荐

  1. Jenkins-在windows上安装及其部署

    Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能.其主要功能:1.持续的软件版本发布/测试项目. ...

  2. GDB使用记录

    ref:http://sunyongfeng.com/201506/programmer/tools/gdb.html 简介 GDB,GNU Debugger,特性如下: GDB具备各种调试功效,可对 ...

  3. 二维、三维 Laplace 算子的极坐标表示

    (1) 设 $(r,\theta)$ 是 $\bbR^2$ 的极坐标, 即 $$\bex x=r\cos\theta,\quad y=r\sin \theta. \eex$$ 证明 Laplace 算 ...

  4. tf.py_func

    在 faster  rcnn的tensorflow 实现中看到这个函数 rois,rpn_scores=tf.py_func(proposal_layer,[rpn_cls_prob,rpn_bbox ...

  5. 1.在虚拟机中安装Linux中的CentOS7系统

    1. 虚拟机的创建:如下图,可在右侧窗口中创建新的虚拟机,也可以在文件菜单中新建虚拟机,或者使用快捷键新建 这里选择“自定义(高级) ”,然后进入“下一步”设置 这里是选择虚拟机硬件的美容性的,默认就 ...

  6. Django 多数据库支持

    很多时候,需要去其他数据库查询数据,都将会面临多数据库支持问题. 1.在settings文件内添加多数据库连接 DATABASES = { 'default': { 'ENGINE': 'django ...

  7. Python 官方中文教程(简)

    Python 官方教程 前言 这是一次系统学习Python官方教程的学习笔记 整个教程一共16章, 在学习过程中记录自己不知道的和一些重要的知识, 水平有限, 请指正. Python3.7 官方教程. ...

  8. QML ListView json

    1.main.cpp #include <QGuiApplication> #include <QQmlApplicationEngine> #include <QQml ...

  9. OpenCV中Mat总结

    一.数字图像存储概述 数字图像存储时,我们存储的是图像每个像素点的数值,对应的是一个数字矩阵. 二.Mat的存储 1.OpenCV1基于C接口定义的图像存储格式IplImage*,直接暴露内存,如果忘 ...

  10. kafka知识点详解

    第一部分:kafka概述 一.定义(消息引擎系统) 一句话概括kafka的核心功能就是:高性能的消息发送与高性能的消息消费. kafka刚推出的时候是以消息引擎的身份出现的,它具有强大的消息传输效率和 ...