# personSystem

**Repository Path**: aspilin/person-system

## Basic Information

- **Project Name**: personSystem
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-05-20
- **Last Updated**: 2024-09-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# personSystem

####项目总结
用户登录校验，umi dispatch("/userSpace/对应方法"，传入数据)
model.js 写 redux，暂存全局登录用户数据，

​			namespace：唯一命名空间用于区分不同的模型
​			state：存储数据
​			reducers：修改 state，用于处理 action 并更新 state。
​			effects：异步操作 如 API 调用。它们是 Generator 函数(后续详细学习)，可以使用 yield 关键字与 call、put、select 等 Saga 库提供的函数配合，进行异步控制流。还可以控制大数据流
例如：

```
   import { call, put } from 'umi';

   export default {
     namespace: 'user',
     state: {
        state: {
                userInfo: sessionStorage.getItem('userProfile')
                  ? JSON.parse(sessionStorage.getItem('userProfile'))
                  : null,
              },
     effects: {
       *login({ payload }, { put, call, select }) {
      // 使用call方法调用$http.userLogin函数进行用户登录验证，并解构返回的结果
      const { data, msg } = yield call($http.userLogin, payload);
      // 如果data不存在，则显示错误消息并终止函数执行
      if (!data) {
        massage.error(msg);
        return;
      }

      // 将登录成功的用户信息存储到sessionStorage中
      sessionStorage.setItem('userProfile', JSON.stringify(data));
      // 此处应有界面跳转逻辑，但代码未给出
    },
     },
     reducers: {
       save(state, action) {
         return { ...state, data: action.payload };
       },
       changeLoading(state, action) {
         return { ...state, loading: action.payload };
       },
     },
   };
```

调用的关键步骤

```
import React, { useState } from 'react';
import { useDispatch } from 'umi';

const LoginPage = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch({
      type: 'user/login',//namespace/effects中的方法
      payload: {
        username,
        password,
      },
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Username"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button type="submit">Login</button>
    </form>
  );
};

export default LoginPage;
```

后续还需配置路由，写完再写