react

✍️ Tangxt ⏳ 2021-04-07 🏷️ epic

02-antd、leancloud 登录注册、mobx

1）antd 的引入和基本使用

1、快速上手

安装：

yarn add antd

在安装过程中，报错了： Timeout error on yarn install with https://registry.npm.taobao.o rg/date-fns/download/date-fns-2.19.0.tgz

如何解决？

yarn config set network-timeout 300000

配置一下网络超时的时间就好了！

遇到 ESOCKETTIMEDOUT 这样的错误都可以这样做！

使用：

在 src/App.js 里边使用 Button 组件：

在 src/App.css 的顶部引入样式：

当然，你也可以在 src/index.js 里边导入样式： import "antd/dist/antd.css"

效果：

Button

2、CRM 大法，完成我们的需求

代码

效果：

效果

2）引入 antd 的 form 表单实现注册页面

注册页面

💡：这个是什么语法？

语法

const layout = {
  labelCol: {
    span: 8
  },
  wrapperCol: {
    span: 16
  },
};

React 支持这种写法吗？还是说这是用了其它插件做到的？

➹：react 中的解构赋值例子_lskshz 的专栏-CSDN 博客_react 解构

➹：React.js 给组件属性赋值的展开运算符应该怎么理解？- SegmentFault 思否

3）antd 表单验证的几种方

文档：表单 Form - Ant Design

Rule 支持接收 object 进行配置，也支持 function 来动态获取 form 的数据：

type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);

对于注册页面：

1、用户名输入框校验

const validateUserName = (rule, value) => {
  if (/\W/.test(value)) return Promise.reject("只能是字母数字下划线");
  if (value.length < 4 || value.length > 10) return Promise.reject("长度为 4~10 个字符");
  return Promise.resolve();
};

用户名校验

2、密码输入框校验

密码校验

3、确认密码输入框校验

const validateConfirm = ({ getFieldValue }) => ({
  validator(rule, value) {
    if (getFieldValue("password") === value) return Promise.resolve();
    return Promise.reject("两次密码不一致");
  },
});

{ getFieldValue }是 Form 实例，我们拿到实例的getFieldValue方法，而箭头函数的返回值就是RuleConfig，这就像上边的{validator: validateUserName}一样

确认密码校验

4）Leancloud 使用介绍

1、介绍

使用一个 Serverless 平台！ -> 不用自己去写后端代码，就能提供后端服务！

我们只要调用它提供的前端 API，就能使用它提供的后端服务了！

适用场景：

如果项目特别复杂 -> 建议自己去写后端代码，而不是使用 Leancloud

2、快速入门

文档：数据存储开发指南 · JavaScript - LeanCloud 文档

安装：

yarn add leancloud-storage

创建epic应用 -> 创建一个 Class，就是在创建一个数据库！

➹：【图文教程】前端使用云存储，利用 LeanCloud 管理页面数据 - SegmentFault 思否

5）使用 Leancloud 完善 Auth 模型实现登录注册接口

文档：用户注册、登录

登录注册接口：

import AV, { Query, User } from "leancloud-storage";

// 初始化
AV.init({
  appId: "XlO937...",
  appKey: "hcH...",
  serverURL: "https://xxx.lc-cn-n1-shared.com",
});

const Auth = {
  // 注册
  register(username, password) {
    let user = new User();
    user.setUsername(username);
    user.setPassword(password);
    return new Promise((resolve, reject) => {
      user.signUp().then(
        (loginedUser) => resolve(loginedUser),
        (error) => reject(error)
      );
    });
  },

  // 登录
  login(username, password) {
    return new Promise((resolve, reject) => {
      User.logIn(username, password).then(
        (loginedUser) => resolve(loginedUser),
        (error) => reject(error)
      );
    });
  },

  // 注销
  logout() {
    User.logOut();
  },

  // 获取当前用户信息
  getCurrentUser() {
    return User.current();
  },
};

export { Auth };

把所有的和服务器相关的操作都放到models里边 -> 如果就一个功能模块，那就搞一个index.js就好了！如果还有其它模块，如用户个人信息、发布的状态、日志等，那就搞多几个文件，而不是都写在一个文件里边！

💡：看文档技巧？

文档：JavaScript SDK 安装指南 - LeanCloud 文档

文档

💡：如何去掉控制台里边的这个警告？

警告发生的场景：在表单组件里边删除输入的内容

警告

在src/index.js里边：

删除多余的东西

6）接口模型、mobx 全局状态、组件间的数据联动

注册功能用到的数据联动：

注册功能

效果：

效果

UI 层 -> action -> values

models 只管数据，不管 UI，stores 可以管 UI 展示！

tips 框

这就是我们还要Auth.register(username,password).then()这样搞一层Promise的原因所在了！而不是，让models里边的代码去处理响应回来的数据！总之，models只是数据的搬运工罢了！当然，最终响应回来的数据是交给了 UI 层去处理了，而store只是处理了一个过渡罢了，如提示、过渡动画等……整体上看：M（发请求拿响应数据） -> C（把 Model 数据传给 View，期间可以搞一些辅助的 UI，如过渡动画、提示框等） -> V（React 组件）

数据库情况：

数据库情况

注册同一个用户名：

用户名已存在

登录功能效果：

登录功能效果

7）登录注册功能完善

登录注册功能

💡：关于模块的导入导出？

如果你这样写：

export const useStores = () => useContext(context)

不能直接导出一个变量，得导出一个带声明的变量

那么其它模块用的时候得这样：

import { useStores } from "../stores";

💡：有两个模块，都导入了同一个模块，那么这个模块是一样的吗？

一样的吗

图误：userStore.js -> user.js

测试结果：window.x === window.b // true

💡：已是登录状态，但页面刷新后，居然变成「未登录」状态？

userStore

// user.js
const userStore = new UserStore()

userStore.pullUser()

export default userStore;