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

登陸檢查：

建立 admin 各個子組件

5

建立 src/config 文件夾 ---- 菜單配置 menuConfig.js

• reduce 的經常使用邏輯

• 在 LeftNav.jsx 中

利用遞歸，來