码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2019-01-15 14:15:07      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:git   efi   key   pass   from   const   开发   用户登录   ram   

后台服务器端

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

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

标签:git   efi   key   pass   from   const   开发   用户登录   ram   

原文地址:https://www.cnblogs.com/tianxiaxuange/p/10271006.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!