极客园后台

步骤

• 初始化项目结构 - src

• 配置路由规则 - router （login、home）

• 配置好 antd 的组件使用

• 登录页面结构初始化 - css 和 antd 的基本使用

• 配置项目的绝对路径使用 和 了解 scss 的基本使用

• 登入页面的样式编写 - 使用 Antd 组件

• 配置表单的校验规则 - 手机号、验证码、是否勾选等

• 校验规则的学习 - 自定义校验规则 promise

• 封装 axios ，完成基本的登入功能

• 优化 antd 的登入提示，和 loading 加载效果

• 解决在 react 中 css 的样式重名问题 - 了解 css-modules 的基本使用

• css-modules 对 iconfont 类的全局样式的修改

• 配合 scss 使用 ， 解决 css-modules 使用的弊端

• 首页布局 基本样式的编写 - Layout

• 页面布局 - 头部样式的编写

• 页面布局 - 侧边栏 页面的编写

• 处理首页布局的整体样式

• 配置 嵌套路由 - 对 token 进行基本的封装

• 退出功能基本功能实现 - 路由守卫对退出逻辑的完善

样式冲突

组件样式覆盖问题

• 在组件中添加样式，其它组件的样式也跟着发生了改变，组件之间的样式是互相影响的
• 原因：在配置路由时，所有的组件都被导入到了项目中，那么组件的样式也就被导入到了项目中。如果组件之间样式名称相同，那么一个组件中的样式就会在另一个组件中也生效，从而造成组件之间样式互相覆盖的问题

解决方案

• 手动处理，起不同的类名
• CSS IN JS 以 js 的方式来处理 css

常用的 css in js 包有 CSS Modules

css module基本使用

import style from './idnex.module.css'

<div className = {style.test}></div>

注意

• 类名使用驼峰命名，如果不使用需要使用 styles['tab-bar']
• 如果时全局类名，应该使用 :gloabl(.icon-map) ，不会修改全局类名

配合 less 等使用

index.js

import style from './idnex.module.css'

<div className = {style.test}></div>

index.module.less

.home{
    width:100%;
    height:100%;
    //...
    :global{
        .home-container{
            //...
        }
    }
}

AuthRuter

回传页面

重定向传入数据

return (
	<Redirect 
  to={{
  pathname:'/login',
  search:'?from=/home',//search同样也能获取到
  state:{from:props.location.pathname}
	}}
)

登入页

const {state} = this.props.location
if(state){
  this.props.history.push(state.from) 
}else{
  this.props.history.push('/home')
}

• 登入接口编写、渲染用户基本信息

• token 过期逻辑处理在拦截器中

  import {createBroserHistory} from 'history'
  const history = createBrowserHistory()
  exoport default history
  

  App.js

  import {Router} from 'react-router-dom'
  import history from 'utils/history'
  <Router history = {history}></Router>
  

  request.js

  import history from 'utils/history'
  history.push('/login')
  

• 处理侧边栏高亮逻辑

• 数据概览图片加入

• 内容管理 - 面包屑

• 内容管理 - 表单布局渲染

• 列表表单 - 样式编写、封装接口获取渲染文章列表

内容管理

分页处理

• 1、2
• pagination

筛选功能

• 3、4
• 注意 bug ，逻辑
• delete

删除功能

• 5
• API

发布内容

拦截器处理网络超时显示

• 6
• 拦截器

基本结构

• 7、8、9、10、11、12、13、14
• 表单结构
• 校验
• 封装一些组件
• 富文本编辑器
• 封面上传
• 数量逻辑控制
• 预览
• 图片校验 upload_isignore

发送文章

• 添加草稿 - 18
• this.formRef.current.validateFields()

修改文章

路由设置获取文章id

显示文章详情

修复路由bug

• 05
• key

处理侧边栏高亮问题

面包屑路由跳转不会重新创建组件

componentDidUpdate()

有个死循环的逻辑

• 发布修改文章的高亮问题

路由懒加载

<Suspense fallbacl={
  (<div>loading</div>)
}>
 	<Switch>...</Switch>
 </Suspense>