react_app 项目开发 _后台服务器端-node

Posted 2021-02-03 我即狂澜，且力不可挽

后台服务器端

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

• import store from "store";
  login = async (username, password)=>{
      const result= await requestAPI.login({username, password})();
      if(result.statue === 0){
          // yarn add [email protected]
          store.set("user_key", result.data);
      }else{...}
  }

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5