后台web端的react

在api.js里，存放着各种功能引用的方法，比如这个fakeRegister，里面传参数params，返回要要调回的地址，${HOST1}/user/register

requset会返回codemessage，如果是401或402，则是我这边的错误，可能用户名密码不正确，可能路由的路径有问题。

export async function fakeRegister(params) {
  return request(`${HOST1}/user/register`,{
  /* return request('/api/register', { */
    method: 'POST',
    body: params,
  });
}

有两个register，models里面的是方法，user里面的是页面。

user里面的register，就是react组件三步走，引入依赖，创建虚拟dom并利用render渲染，最后暴露出组件。这里面定义了userName的文本框。

models里面的register，是提交的数据值，进行验证。submit提交了两个参数，

之前关于这个username我这边读取到的总是undefined，是因为我这边忘了驼峰命名法，应该是userName! 而这个userName的定义就是在user里面定义的，因为写的是js，要用驼峰法，所以，payload.userName一定要写对才行。

 *submit({ payload }, { call, put }) {
      var params = {"password": "qyh",
        "username": "qyh"}
        payload.password='qyh';
        payload.userName='qyh';        

      const response = yield call(fakeRegister, payload);
      yield put({
        type: 'registerHandle',
        payload: response,
      });
    },
  },

上面这个写法，吧params都给写死了。

下面这个写法，让params等于payload里传过来的值。下面这个写法才是对的。上面这个写法根本无意义啊。

*submit({ payload }, { call, put }) {
      let params={
        "username":payload.userName,
        "password":payload.password
      }

      const response = yield call(fakeRegister, params);
      yield put({
        type: 'registerHandle',
        payload: response,
      });
    },
  },

*login({ payload }, { call, put }) {
      var params = {"login_type": "usernameAndPassword",
      "credentials": {
        "username": payload.userName,
        "password": payload.password
      }}
      payload.login_type = 'usernameAndPassword';
      payload.credentials = {
        "username": payload.userName,
        "password": payload.password
      };

如果返回的code是500，就是后台的问题，不是我的问题，正常返回得是200.

徐瀚师傅自己写了一个方法，叫port，用来传url前面的值。port为true的话，就是前面的url，否则就是后面的。

方法：
// 分开两个端口 参数为true的话则为9099端口
export function port(isLogin) {
  let host;
  if (!isProduction()) {
    isLogin ? host = 'http://192.168.1.103:9099' : 'http://192.168.1.103:8099';
  }
  return host;
}
// true为生产环境 false为开发环境
export function isProduction() {
  return process.env.NODE_ENV === 'production';
}

使用：
import { port } from '../utils/utils';

export async function fakeAccountLogin(params) { 

  return request(port(true)+'/login', {
    method: 'POST',
    body: params,
  });
}

export async function fakeRegister(params) {
      return request(port(true)+'/user/register',{
    method: 'POST',
    body: params,
  });
}

秒客网

后台web端的react

相关文章