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

临文乍了了，彻卷兀若无。这篇文章主要讲述react_app 项目开发 _后台服务器端-node相关的知识，希望能为你提供帮助。
后台服务器端
负责处理前台应用提交的请求，并向前台返回 json 数据
前台应用负责
展现数据与用户交互
发 ajax 请求与后台应用交互
yarn add axios
/src/api/ajax.js

/* 自定义封装 axios ---- https://github.com/axios/axios 返回值： Promise 对象 */ export default function ajax(url, data=https://www.songbingjia.com/android/{}, method="GET"){ /****自定义封装 Promise 对象 ****/ returnnew 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{...} }