[JavaScript知识库] 【掘掘记账本】前端React Hook，一步步详细版

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 【掘掘记账本】前端React Hook，一步步详细版 -> 正文阅读

[JavaScript知识库]【掘掘记账本】前端React Hook，一步步详细版

第一章项目框架搭建

yarn create @vitejs/app react-vite-h5 --template react
yarn
yarn run dev

为了在项目过程中不出现千奇百怪问题，这里贴出项目的包版本。

{
  "name": "react-vite-h5",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^0.26.1",
    "classnames": "^2.3.1",
    "dayjs": "^1.11.0",
    "global": "^4.4.0",
    "lib-flexible": "0.3.2",
    "pm2": "^5.2.0",
    "postcss-pxtorem": "6.0.0",
    "pushstate-server": "^3.1.0",
    "query-string": "^7.1.1",
    "rc-form": "^2.4.12",
    "react": "^17.0.2",
    "react-captcha-code": "^1.0.7",
    "react-dom": "^17.0.2",
    "react-router-dom": "5.2.0",
    "zarm": "^2.9.13"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^1.0.7",
    "@vitejs/plugin-react-refresh": "^1.3.6",
    "less": "4.1.1",
    "vite": "^2.8.0",
    "vite-plugin-style-import": "0.10.1"
  }
}

引入路由插件react-router-dom

yarn add react-router-dom@5 -S

cd src
mkdir container && cd container
mkdir Index About

cd Index && touch index.jsx

import React from "react";

const Index = () => {
    return <div>
        <h1>Index</h1>
    </div>
}

export default Index;

cd About && touch index.jsx

import React from "react";

const About = () => {
    return <div>
        <h1>About</h1>
    </div>
}

export default About;

cd src && mkdir router && touch index.jsx

import Index from '../container/Index'
import About from '../container/About'

const routes = [
  {
    path: "/",
    component: Index
  },{
    path: "/about",
    component: About
  }
];

export default routes;

vim App.jsx

import React, { useState } from 'react'
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom"
import routes from '../src/router'
function App() {
  return <Router>
    <Switch>
      {
        routes.map(route => <Route exact key={route.path} path={route.path}>
          <route.component />
        </Route>)
      }
    </Switch>
  </Router>
}

export default App

启动项目 npm run dev

引入Zarm UI组件库

yarn add zarm -S

vim App.jsx

  import React, { useState } from 'react'
  import {
    BrowserRouter as Router,
    Switch,
    Route
  } from "react-router-dom"

+	import { ConfigProvider } from 'zarm'
+ import zhCN from 'zarm/lib/config-provider/locale/zh_CN'
+ import 'zarm/dist/zarm.css'

  import routes from '../src/router'
  function App() {
    return <Router>
+     <ConfigProvider locale={zhCN} primaryColor={'#007fff'}>
      <Switch>
        {
          routes.map(route => <Route exact key={route.path} path={route.path}>
            <route.component />
          </Route>)
        }
      </Switch>
+     </ConfigProvider>
    </Router>
  }

  export default App

此时 zarm 的样式，已经全局引入了，我们先查看在 /container/Index/index.jsx 添加一个按钮是否生效：

使用less

yarn add less -D

vim vite.config.js

{
  plugins: [...]
  css: {
    modules: {
      localsConvention: 'dashesOnly'
    },
    preprocessorOptions: {
      less: {
        // 支持内联 JavaScript
        javascriptEnabled: true,
      }
    }
  },
}

移动端项目适配rem

yarn add lib-flexible@0.3.2 -S

vim main.jsx

  import React from 'react'
  import ReactDOM from 'react-dom'
+ import 'lib-flexible/flexible'
  import './index.css'
  import App from './App'

  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  )

yarn add postcss-pxtorem@6.0.0

cd / && vim postcss.config.js

// postcss.config.js
// 用 vite 创建项目，配置 postcss 需要使用 post.config.js，之前使用的 .postcssrc.js 已经被抛弃
// 具体配置可以去 postcss-pxtorem 仓库看看文档
module.exports = {
  "plugins": [
    require("postcss-pxtorem")({
      rootValue: 37.5,
      propList: ['*'],
      selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
    })
  ]
}

按需引入css

yarn add vite-plugin-style-import@0.10.1 -D

vim vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import styleImport from 'vite-plugin-style-import'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(),styleImport({
    libs:[{
      libraryName:'zarm',
      esModule:true,
      resolveStyle:(name)=>{
        return `zarm/es/${name}/style/css`;
      }
    }]
  })],
  css: {
    modules: {
      localsConvention: 'dashesOnly'
    },
    preprocessorOptions: {
      less: {
        // 支持内联 JavaScript
        javascriptEnabled: true,
      }
    }
  }
})

yarn run build

二次封装axios

后端接口：http://dualseason.com:7001

yarn add axios -S

cd src && mkdir utils && vim axios.js

import axios from 'axios'
import { Toast } from 'zarm'

const MODE = import.meta.env.MODE // 环境变量

axios.defaults.baseURL = 'http://dualseason.com:7001'
axios.defaults.withCredentials = true
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers['Authorization'] = `${localStorage.getItem('token') || null}`
axios.defaults.headers.post['Content-Type'] = 'application/json'

axios.interceptors.response.use(res => {
  if (typeof res.data !== 'object') {
    Toast.show('服务端异常！')
    return Promise.reject(res)
  }
  if (res.data.code != 200) {
    if (res.data.msg) Toast.show(res.data.msg)
    if (res.data.code == 401) {
      window.location.href = '/login'
    }
    return Promise.reject(res.data)
  }
  return res.data
})

export default axios;

代码解释：

const MODE = import.meta.env.MODE

MODE 是一个环境变量，通过 Vite 构建的项目中，环境变量在项目中，可以通过 import.meta.env.MODE 获取，环境变量的作用就是判断当前代码运行在开发环境还是生产环境。

axios.defaults.baseURL = 'http://dualseason.com:7001'

baseURL 是 axios 的配置项，它的作用就是设置请求的基础路径，后续我们会在项目实战中有所体现。配置基础路径的好处就是，当请求地址修改的时候，可以在此统一配置。

axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers['Authorization'] = `${localStorage.getItem('token') || null}`
axios.defaults.headers.post['Content-Type'] = 'application/json'

上述三个配置是用于请求头的设置，Authorization 是我们在服务端鉴权的时候用到的，我们在前端设置好 token，服务端通过获取请求头中的 token 去验证每一次请求是否合法。最后一行是配置 post 请求是，使用的请求体，这里默认设置成 application/json 的形式。

axios.interceptors.response.use(res => {
  if (typeof res.data !== 'object') {
    Toast.show('服务端异常！')
    return Promise.reject(res)
  }
  if (res.data.code != 200) {
    if (res.data.msg) Toast.show(res.data.msg)
    if (res.data.code == 401) {
      window.location.href = '/login'
    }
    return Promise.reject(res.data)
  }

  return res.data
})

interceptors 为拦截器，拦截器的作用是帮你拦截每一次请求，你可以在回调函数中做一些“手脚”，再将数据 return 回去。上述代码就是拦截了响应内容，统一判断请求内容，如果非 200，则提示错误信息，401 的话，就是没有登录的用户，默认跳到 /login 页面。如果是正常的响应，则 retrun res.data。

最后我们将这个 axios 抛出，供页面组件请求使用。

cd src && mkdir utils && vim index.js

import axios from './axios'

export const get = axios.get
export const post = axios.post

代理配置(项目不需要代理，后端已处理跨域)

vim vite.config.js

server: {
  proxy: {
    '/api': {
      // 当遇到 /api 路径时，将其转换成 target 的值
      target: 'http://api.chennick.wang/api/',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '') // 将 /api 重写为空
    }
  }
}

resolve.alias别名设置

vim vite.config.js

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  import styleImport from 'vite-plugin-style-import'
+ import path from 'path'

  // https://vitejs.dev/config/
  export default defineConfig({
    plugins: [react(),styleImport({
      libs:[{
        libraryName:'zarm',
        esModule:true,
        resolveStyle:(name)=>{
          return `zarm/es/${name}/style/css`;
        }
      }]
    })],
    css: {
      modules: {
        localsConvention: 'dashesOnly'
      },
      preprocessorOptions: {
        less: {
          // 支持内联 JavaScript
          javascriptEnabled: true,
        }
      }
    },
+   resolve: {
+     alias: {
+       '@': path.resolve(__dirname, 'src'), // src 路径
+       'utils': path.resolve(__dirname, 'src/utils') // src 路径
+     }
+   }
  })

此时我们便可以修改之前的代码如下：

vim router/index.jsx

import Index from '@/container/Index'
import About from '@/container/About'

vim App.jsx

import routes from '@/router'

行文至此，我们的基础开发环境已经搭建完毕，涉及构建工具、前端框架、UI 组件库、HTTP 请求库、CSS 预加载器、跨域代理、移动端分辨率适配，这些知识都是一个合格的前端工程师应该具备的，所以请大家加油，将他们都通通拿下，下载代码。

第二章底部导航栏实现

预期效果

cd src && mkdir components && cd components && mkdir NavBar && cd NavBar && touch index.jsx style.module.less

zarm文档这里要做底部导航栏最适合的就是TabBar（众安科技移动端组件库例子）

我们从架构的层面来看，这三个按钮分别对应跳转三个页面，分别是home、data以及user，所以我们应该先创建三个路由，不过创建路由前需要创建对应的组件，用于跳转。

cd src/container && mkdir Home && cd Home && touch index.jsx style.module.less

vim src/container/Data/index.jsx

import React from "react";

const Data = () => {
    return <div>
        <h1>Data</h1>
    </div>
}

export default Data;

cd src/container && mkdir Data && cd Data && touch index.jsx style.module.less

vim src/container/Home/index.jsx

import React from "react";

const Home = () => {
    return <div>
        <h1>Home</h1>
    </div>
}

export default Home;

cd src/container && mkdir User && cd User && touch index.jsx style.module.less

vim src/container/User/index.jsx

import React from "react";

const User = () => {
    return <div>
        <h1>User</h1>
    </div>
}

export default User;

vim src/router/index.js

- import Index from "@/container/Index";
  import About from "@/container/About";
  import Home from "@/container/Home";
  import Data from "@/container/Data";
  import User from "@/container/User";
  const router = [
-     {
-         path: '/',
-         component: Index,
-     }, {
          path: '/about',
          component: About,
      }, {
          path: '/user',
          component: User,
      }, {
          path: '/data',
          component: Data,
      }, {
          path: '/',
          component: Home,
      }
  ];

  export default router;

确保路由能够正常跳转后再进行其他操作，接下来我们对NavBar组件进行编写，编写前我们查看文档，先确保能够显示静态再做动态。

vim NarBar/index.jsx

import React from "react";
import { TabBar } from "zarm";

const NavBar = () => {
    return <TabBar>
        <TabBar.Item itemKey={'/'} title={'账单'}/>
        <TabBar.Item itemKey={'/data'} title={'统计'}/>
        <TabBar.Item itemKey={'/user'} title={'我的'}/>
    </TabBar>
}

export default NavBar;

vim App.jsx

  import React from "react";

  import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
  import router from "@/router";

  import { ConfigProvider } from 'zarm'
  import zhCN from 'zarm/lib/config-provider/locale/zh_CN'
  import 'zarm/dist/zarm.css'
+ import NavBar from "@/components/NavBar";

  const App = () => {
    return <Router>
      <ConfigProvider primaryColor={'#007fff'} locale={zhCN}>
        <Switch>
          {router.map(route => <Route exact key={route.path} path={route.path}><route.component /></Route>)}
        </Switch>
      </ConfigProvider>
+     <NavBar/>
    </Router>;
  }

  export default App;

到此为止我们已经可以使用组件进行代码编写了，可以写一个静态页面了，代码我已经放在了gitee上，跑不起来这些代码的可以去获取，直接下载下来运行即可。

接下来我们要实现点击NavBar进行路由跳转，只需要在上一步基础上加上如下代码，如果你不能出现跳转可能是环境没配置好，我们要明确目标，环境只是为了写代码的，我们不必在环境上花太多时间，所以我建议直接下载代码直接使用即可，接下来每一步我都会把对应代码放上来，出现问题先不要管，删掉自己的代码然后用我提供的代码进行替换即可，后面有基础后再自己搞。

vim NavBar/index.jsx

  import React from "react";
  import { TabBar } from "zarm";
  import { useHistory } from 'react-router-dom'
  const NavBar = () => {

+     const history = useHistory();

+     const changeTab = (path) => [
+         history.push(path)
+     ]

+     return <TabBar onChange={changeTab}>
          <TabBar.Item itemKey={'/'} title={'账单'} />
          <TabBar.Item itemKey={'/data'} title={'统计'} />
          <TabBar.Item itemKey={'/user'} title={'我的'} />
      </TabBar>
  }

  export default NavBar;

useHistory()是react-router-dom提供的一个路由组件，可以使用push()方法进行路由插入history中。

接下来我们实现功能：当点击NavBar时，我们的蓝色active会标亮选中。

  import React, { useState } from "react";
  import { TabBar } from "zarm";
  import { useHistory } from 'react-router-dom'
  const NavBar = () => {

+     const [activeKey, setActiveKey] = useState("/");
      const history = useHistory();

      const changeTab = (path) => {
+         setActiveKey(path)
          history.push(path)
      }

      return <TabBar activeKey={activeKey} onChange={changeTab}>
          <TabBar.Item itemKey={'/'} title={'账单'} />
          <TabBar.Item itemKey={'/data'} title={'统计'} />
          <TabBar.Item itemKey={'/user'} title={'我的'} />
      </TabBar>
  }

  export default NavBar;

添加底部导航栏图标

cd src/components && mkdir CustomIcon && touch index.jsx

import { Icon } from "zarm";
// 官网：https://www.iconfont.cn/home/index
export default Icon.createFromIconfont('//at.alicdn.com/t/font_2236655_w1mpqp7n1ni.js');

  import React, { useState } from "react";
  import { TabBar } from "zarm";
  import { useHistory } from 'react-router-dom'
+ import CustomIcon from "@/components/CustomIcon";
  const NavBar = () => {

      const [activeKey, setActiveKey] = useState("/");
      const history = useHistory();

      const changeTab = (path) => {
          setActiveKey(path)
          history.push(path)
      }

      return <TabBar activeKey={activeKey} onChange={changeTab}>
+         <TabBar.Item itemKey={'/'} title={'账单'} icon={<CustomIcon type="zhangdan"/>}/>
+         <TabBar.Item itemKey={'/data'} title={'统计'} icon={<CustomIcon type="tongji"/>}/>
+         <TabBar.Item itemKey={'/user'} title={'我的'} icon={<CustomIcon type="wode"/>}/>
      </TabBar>
  }

  export default NavBar;

底部导航栏的显示与隐藏

我们要做到动态隐藏显示NavBar可以使用文档里面提到的visible属性。

我们要实现的功能：当用户强行在地址栏输入我们不存在的路由时，我们不仅不显示页面的内容，还要把底部的NavBar给屏蔽掉。

如图，我们就没有/detail路径，也就是说当用户来到这个路径时会产生bug，只显示底部导航栏但没内容，这是不行的，而且以后我们还要做登陆页面也是没有NavBar的，改！

vim App.jsx

import React, { useState, useEffect } from 'react'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useLocation
} from "react-router-dom"

import { ConfigProvider } from 'zarm'

import routes from '@/router'
import NavBar from '@/components/NavBar'
const App = () => {
  const location = useLocation() // 拿到 location 实例
  const { pathname } = location // 获取当前路径
  const needNav = ['/', '/data', '/user'] // 需要底部导航栏的路径
  const [showNav, setShowNav] = useState(false) // 是否展示 Nav
  
  useEffect(() => {
    setShowNav(needNav.includes(pathname))
  }, [pathname]) // [] 内的参数若是变化，便会执行上述回调函数

  return <Router>
    <ConfigProvider primaryColor={'#007fff'}>
      <Switch>
        {
          routes.map(route => <Route exact key={route.path} path={route.path}>
            <route.component />
          </Route>)
        }
      </Switch>
    </ConfigProvider>
    <NavBar showNav={showNav}/>
  </Router>
}

export default App

我们按照修改思路进行编写代码，结果发现报错了，那问题出在哪呢？

我们来看报错信息Cannot read properties of undefined (reading 'location')

这是因为想要在函数组件内执行 useLocation，该组件必须被 Router 高阶组件包裹，我们做如下改动，将 App.jsx 的 Router 组件，前移到 main.jsx 内。

vim App.jsx

import React, { useState, useEffect } from 'react'
import {
  Switch,
  Route,
  useLocation
} from "react-router-dom"

import { ConfigProvider } from 'zarm'

import routes from '@/router'
import NavBar from '@/components/NavBar'
const App = () => {
  const location = useLocation() // 拿到 location 实例
  const { pathname } = location // 获取当前路径
  const needNav = ['/', '/data', '/user'] // 需要底部导航栏的路径
  const [showNav, setShowNav] = useState(false) // 是否展示 Nav
  
  useEffect(() => {
    setShowNav(needNav.includes(pathname))
  }, [pathname]) // [] 内的参数若是变化，便会执行上述回调函数

  return <>
    <ConfigProvider primaryColor={'#007fff'}>
      <Switch>
        {
          routes.map(route => <Route exact key={route.path} path={route.path}>
            <route.component />
          </Route>)
        }
      </Switch>
    </ConfigProvider>
    <NavBar showNav={showNav}/>
  </>
}

export default App

vim main.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import 'lib-flexible/flexible'
import './index.css'
import App from './App'
import { BrowserRouter as Router } from 'react-router-dom'

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
)

vim NavBar/index.jsx

import React, { useState } from "react";
import { TabBar } from "zarm";
import { useHistory } from 'react-router-dom'
import CustomIcon from "@/components/CustomIcon";
const NavBar = ({showNav}) => {

    const [activeKey, setActiveKey] = useState("/");
    const history = useHistory();

    const changeTab = (path) => {
        setActiveKey(path)
        history.push(path)
    }
        
    return <TabBar activeKey={activeKey} onChange={changeTab} visible={showNav}>
        <TabBar.Item itemKey={'/'} title={'账单'} icon={<CustomIcon type="zhangdan"/>}/>
        <TabBar.Item itemKey={'/data'} title={'统计'} icon={<CustomIcon type="tongji"/>}/>
        <TabBar.Item itemKey={'/user'} title={'我的'} icon={<CustomIcon type="wode"/>}/>
    </TabBar>
}

export default NavBar;

这里说明一下传入参数showNav为什么要加一个{}，这是ES6语法中的结构，App.jsx中<NavBar showNav={showNav}/>这里的showNav={}传给NavBar组件的其实是一个props，所以原本的写法是：

const NavBar = (props) = >{
  const {showNav} = props
	...
}

这里我们使用简写方式，能偷懒就不多写任何东西。

导航栏可以用在很多地方，映射到 PC 网页就是左侧侧边导航，道理都是相通的。移动端放在下面控制，PC 端放在左边或者右边控制罢了。所以再次强调不要学完了一个知识点，就思维定势地认为只能用在某一个需求上，能做到融会贯通，才是判断一个好程序员的标准，下载代码。

第三章登陆注册页面

cd src/container && mkdir Login && cd Login && touch index.jsx style.module.less

vim Login/index.jsx

import React from 'react';

const Login = () => {
    return <div>
        <h1>Login</h1>
    </div>
}

export default Login;

vim router/index.js

  import Data from '@/container/Data'
  import Home from '@/container/Home'
  import User from '@/container/User'
+ import Login from '@/container/Login'

  const routes = [
    {
      path: "/",
      component: Home
    },
    {
      path: "/user",
      component: User
    },
    {
      path: "/data",
      component: Data
    },
+   {
+     path:'/login',
+     component: Login
+   }
  ];

  export default routes

通过上面的学习我们可以得出一个开发顺序的思路：先路由后页面，先静态后动态。首先要确保这个页面可以正常跳转了，能够出来基础页面了，最后我们才去对页面进行丰富以及美化，否则做了一堆结果页面没出来，一切都是无效的。

vim Login/index.jsx

import React from 'react'
import { Button, Cell, Checkbox, Input } from 'zarm';
import CustomIcon from '@/components/CustomIcon';

const Login = () => {
    return <div>
        <div />
        <div>
            <span>注册</span>
        </div>
        <div>
            <Cell icon={<CustomIcon type={'zhanghao'} />}><Input clearable type='text' placeholder='账号'/></Cell>
            <Cell icon={<CustomIcon type={'mima'} />}><Input clearable type='text' placeholder='密码'/></Cell>
            <Cell icon={<CustomIcon type={'mima'} />}><Input clearable type='text' placeholder='验证码'/></Cell>
        </div>
        <div>
            <div>
                <Checkbox />
                <label>阅读并同意 <a>《掘掘记账本条款》</a> </label>
            </div>
            <Button block theme='primary'>注册</Button>
        </div>
    </div>
}

export default Login;

上述代码中，关键部分是账号输入、密码输入、验证码输入，这三个输入框是需要获取数据作为接口的参数提交上去的。

很多时候，服务端没有开发好接口的时候，我们前端要做的任务就是先还原 UI 稿，把该切的页面都切出来，并且预留好需要给接口提交的数据交互，比如上述三个输入框。

接下来我们来让页面变好看：

vim ./style.module.less  							#以后样式部分的这行我就省略了

.auth {
  min-height: 100vh;
  background-image: linear-gradient(217deg, #6fb9f8, #3daaf85e, #49d3fc1a, #3fd3ff00);
  .head {
    height: 200px;
    background: url('//s.yezgea02.com/1616032174786/cryptocurrency.png') no-repeat center;
    background-size: 120%;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    img {
      width: 34px;
      margin: 15px 0 0 15px;
    }
  }
  .tab {
    color: #597fe7;
    padding: 30px 24px 10px 24px;
    > span {
      margin-right: 10px;
      font-size: 14px;
      font-weight: bold;
      &.avtive {
        font-size: 20px;
        border-bottom: 2PX solid #597fe7;
        padding-bottom: 6px;
      }
    }
  }
  .form {
    padding: 0 6px;
    :global {
      .za-cell {
        background-color: transparent;
        &::after {
          border-top: none;
        }
      }
    }
  }
  .operation {
    padding: 10px 24px 0 24px;
    .agree {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      label {
        margin-left: 10px;
        font-size: 14px;
      }
    }
  }
}

由于我们采用的是 CSS Module 的形式进行开发，也就是你在页面中声明的类名都会根据当前页面，打一个唯一的 hash 值，比如我们页面中声明的 className={s.form}，最终在浏览器中显示的是这样的：

_form_1h5us_30是已经被编译过的样式，这样做的目的是避免和别的页面的样式重名，这是目前样式管理的一个诟病，当多人参与项目开发的时候，很难做到不污染全局样式名称，除非很小心的命名样式名称。

所以经过编译之后，想要修改 .form 下的 .za-cell，如下写法，将无法修改成功：

.form {
  .za-cell {
    color: red;
  }
}

原因是，上述写法，.za-cell 会被编译加上 hash，组件库 Zarm 内的 dom 类名还是叫 za-cell，如上图所示。所以为了不加 hash，就需要这样操作：

.form {
  :global {
    .za-cell {
      color: red;
    }
  }
}

这样 .za-cell 就不会被加上 hash，如上图的.za-cell所示。

接下来我们添加验证码：

yarn add react-captcha-code -S

由于代码太长加的又少，就贴图了。

我们给页面加上相应的逻辑，首先是账号、密码、验证码：

vim Login/index.jsx

import React, { useState, useCallback } from 'react'
import { Button, Cell, Checkbox, Input } from 'zarm';
import CustomIcon from '@/components/CustomIcon';
import Captcha from "react-captcha-code"
import s from './style.module.less'

const Login = () => {

    const [captcha, setCaptcha] = useState(''); // 验证码变化后存储值
    const [username, setUsername] = useState(''); // 账号
    const [password, setPassword] = useState(''); // 密码
    const [verify, setVerify] = useState(''); // 验证码

    //  验证码变化，回调方法
    const handleChange = useCallback((captcha) => {
      setCaptcha(captcha)
    }, []);
  
    return <div className={s.auth}>
      <div className={s.head} />
      <div className={s.tab}>
        <span>登陆</span>
        <span>注册</span>
      </div>
      <div className={s.form}>
        <Cell icon={<CustomIcon type="zhanghao" />}>
          <Input
            clearable
            type="text"
            placeholder="请输入账号"
            onChange={(value) => setUsername(value)}
          />
        </Cell>
        <Cell icon={<CustomIcon type="mima" />}>
          <Input
            clearable
            type="password"
            placeholder="请输入密码"
            onChange={(value) => setPassword(value)}
          />
        </Cell>
        <Cell icon={<CustomIcon type="mima" />}>
          <Input
            clearable
            type="text"
            placeholder="请输入验证码"
            onChange={(value) => setVerify(value)}
          />
          <Captcha charNum={4} onChange={handleChange} />
        </Cell>
      </div>
      <div className={s.operation}>
        <div className={s.agree}>
          <Checkbox />
          <label className="text-light">阅读并同意<a>《掘掘手札条款》</a></label>
        </div>
        <Button block theme="primary">{'登录'}</Button>
      </div>
    </div>
}
export default Login;

到此为止，我们可以获取的参数有用户输入的账号、密码、验证码以及验证码图片上的验证码。

接下来我们该写一下注册方法了，前端只需要把参数传给后端即可注册：

import React, { useState, useCallback } from 'react'
import { Button, Cell, Checkbox, Input, Toast } from 'zarm';
import CustomIcon from '@/components/CustomIcon';
import Captcha from "react-captcha-code"
import s from './style.module.less'
import { post } from '@/utils'

const Login = () => {

  const [captcha, setCaptcha] = useState(''); // 验证码变化后存储值
  const [username, setUsername] = useState(''); // 账号
  const [password, setPassword] = useState(''); // 密码
  const [verify, setVerify] = useState(''); // 验证码

  //  验证码变化，回调方法
  const handleChange = useCallback((captcha) => {
    setCaptcha(captcha)
  }, []);

  const onSubmit = async () => {
    if (!username) {
      Toast.show('请输入账号')
      return
    }
    if (!password) {
      Toast.show('请输入密码')
      return
    }
    if (!verify) {
      Toast.show('请输入验证码')
      return
    };
    if (verify != captcha) {
      Toast.show('验证码错误')
      return
    };
    try {
      const { data } = await post('/api/user/register', {
        username,
        password
      });
      Toast.show('注册成功');
    } catch (error) {
      Toast.show('系统错误');
      console.log(error);
    }
  };

  return <div className={s.auth}>
    <div className={s.head} />
    <div className={s.tab}>
      <span>登陆</span>
      <span>注册</span>
    </div>
    <div className={s.form}>
      <Cell icon={<CustomIcon type="zhanghao" />}>
        <Input
          clearable
          type="text"
          placeholder="请输入账号"
          onChange={(value) => setUsername(value)}
        />
      </Cell>
      <Cell icon={<CustomIcon type="mima" />}>
        <Input
          clearable
          type="password"
          placeholder="请输入密码"
          onChange={(value) => setPassword(value)}
        />
      </Cell>
      <Cell icon={<CustomIcon type="mima" />}>
        <Input
          clearable
          type="text"
          placeholder="请输入验证码"
          onChange={(value) => setVerify(value)}
        />
        <Captcha charNum={4} onChange={handleChange} />
      </Cell>
    </div>
    <div className={s.operation}>
      <div className={s.agree}>
        <Checkbox />
        <label className="text-light">阅读并同意<a>《掘掘手札条款》</a></label>
      </div>
      <Button block theme="primary" onClick={onSubmit}>{'登录'}</Button>
    </div>
  </div>
}
export default Login;

记得要修改两个地方：

vim src/utils/axios.js

import axios from 'axios'
import { Toast } from 'zarm'

const MODE = import.meta.env.MODE // 环境变量

axios.defaults.baseURL = MODE == 'development' ? '/api' : 'http://dualseason.com:7001'
axios.defaults.withCredentials = true
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers['Authorization'] = `${localStorage.getItem('token') || null}`
axios.defaults.headers.post['Content-Type'] = 'application/json'

axios.interceptors.response.use(res => {
  if (typeof res.data !== 'object') {
    Toast.show('服务端异常！')
    return Promise.reject(res)
  }
  if (res.data.code != 200) {
    if (res.data.msg) Toast.show(res.data.msg)
    if (res.data.code == 401) {
      window.location.href = '/login'
    }
    return Promise.reject(res.data)
  }

  return res.data
})

export default axios

vim vite.config.js

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import styleImport from 'vite-plugin-style-import'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    reactRefresh(),
    styleImport(
      {
        libs: [
          {
            libraryName: 'zarm',
            esModule: true,
            resolveStyle: (name) => {
              return `zarm/es/${name}/style/css`;
            }
          }
        ]
      }
    )
  ],
  css: {
    modules: {
      localsConvention: 'dashesOnly'
    },
    preprocessorOptions: {
      less: {
        // 支持内联 JavaScript
        javascriptEnabled: true,
      }
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // src 路径
      'utils': path.resolve(__dirname, 'src/utils') // src 路径
    }
  },
  server: {
    proxy: {
      '/api': {
        // 当遇到 /api 路径时，将其转换成 target 的值
        target: 'http://dualseason.com:7001',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '') // 将 /api 重写为空
      }
    }
  }
})

上述代码中，因为我们使用的是 async await 做异步处理，所以需要通过 try catch 来捕获异步处理过程中出现的错误，如果使用 Promise 的回调函数，则无需使用 try catch，改动如下：

post('/api/user/register', {
  username,
  password
}).then(res => {
  // do something
})

我们可以使用&&来替代三元表达式中的选择显示功能：

{
  type === 'register' &&
	<div className={s.agree}>
    <Checkbox />
    <label className="text-light">阅读并同意<a>《掘掘手札条款》</a></label>
	</div>
}

{
  type === 'register' ?
	<div className={s.agree}>
    <Checkbox />
    <label className="text-light">阅读并同意<a>《掘掘手札条款》</a></label>
	</div>
    :null
}

接下来把所有代码补上去：

import React, { useState, useCallback } from 'react'
import { Button, Cell, Checkbox, Input, Toast } from 'zarm';
import CustomIcon from '@/components/CustomIcon';
import Captcha from "react-captcha-code"
import s from './style.module.less'
import { post } from '@/utils'
import cx from 'classnames'

const Login = () => {

  const [captcha, setCaptcha] = useState(''); // 验证码变化后存储值
  const [username, setUsername] = useState(''); // 账号
  const [password, setPassword] = useState(''); // 密码
  const [verify, setVerify] = useState(''); // 验证码

  const [type, setType] = useState('login'); // 登录注册类型

  //  验证码变化，回调方法
  const handleChange = useCallback((captcha) => {
    setCaptcha(captcha)
  }, []);

  const onSubmit = async () => {
    if (!username) {
      Toast.show('请输入账号')
      return
    }
    if (!password) {
      Toast.show('请输入密码')
      return
    }
    try {
      // 判断是否是登录状态
      if (type == 'login') {
        // 执行登录接口，获取 token
        const { data } = await post('/api/user/login', {
          username,
          password
        });
        // 将 token 写入 localStorage
        localStorage.setItem('token', data.token);
      } else {
        if (!verify) {
          Toast.show('请输入验证码')
          return
        };
        if (verify != captcha) {
          Toast.show('验证码错误')
          return
        };
        const { data } = await post('/api/user/register', {
          username,
          password
        });
        Toast.show('注册成功');
        // 注册成功，自动将 tab 切换到 login 状态
        setType('login');
      }
    } catch (error) {
      Toast.show('系统错误');
    }
  };

  return <div className={s.auth}>
    <div className={s.head} />
    <div className={s.tab}>
      <span className={cx({ [s.avtive]: type == 'login' })} onClick={() => setType('login')}>登录</span>
      <span className={cx({ [s.avtive]: type == 'register' })} onClick={() => setType('register')}>注册</span>
    </div>
    <div className={s.form}>
      <Cell icon={<CustomIcon type="zhanghao" />}>
        <Input
          clearable
          type="text"
          placeholder="请输入账号"
          onChange={(value) => setUsername(value)}
        />
      </Cell>
      <Cell icon={<CustomIcon type="mima" />}>
        <Input
          clearable
          type="password"
          placeholder="请输入密码"
          onChange={(value) => setPassword(value)}
        />
      </Cell>
      {
        type === 'register' &&
        <Cell icon={<CustomIcon type="mima" />}>
          <Input
            clearable
            type="text"
            placeholder="请输入验证码"
            onChange={(value) => setVerify(value)}
          />
          <Captcha charNum={4} onChange={handleChange} />
        </Cell>
      }
    </div>
    <div className={s.operation}>
      {
        type === 'register' &&
        <div className={s.agree}>
          <Checkbox />
          <label className="text-light">阅读并同意<a>《掘掘手札条款》</a></label>
        </div>
      }
      <Button block theme="primary" onClick={onSubmit}>{type === 'register' ? '注册' : '登陆'}</Button>
    </div>
  </div>
}
export default Login;

登陆成功则会填入token到localStorage里面。

useEffect(() => {
  document.title = type == 'login' ? '登录' : '注册';
}, [type])

我们再完善一下代码，让它更像项目一点，我们让登录成功后跳转到首页。

import {useHistory} from 'react-router-dom'
const history = useHistory();
history.push('/')
// 或者
window.location.href = '/';

?代码

第四章账单列表页

上一章节介绍的登录注册是整个项目的根基，没有拿到 token，将无法进行后续的各种操作，如账单的增删改查。所以务必将上一章节好好地阅读与揣摩，为后面的学习做好铺垫。我们直接进入本次前端实战项目的主题，账单的增删改查之列表页。

列表页编写

按照正常的开发流程，我们先将静态页面切出来，再填入数据使其动态化。在此之前，我们已经新建好了 Home 目录，该目录便是用于放置账单列表，所以我们直接在 Home/index.jsx新增代码。

头部统计实现

import React from 'react'
import { Icon } from 'zarm'
import s from './style.module.less'

const Home = () => {
  return <div className={s.home}>
    <div className={s.header}>
    <div className={s.dataWrap}>
        <span className={s.expense}>总支出：<b>￥ 200</b></span>
        <span className={s.income}>总收入：<b>￥ 500</b></span>
      </div>
      <div className={s.typeWrap}>
        <div className={s.left}>
          <span className={s.title}>类型 <Icon className={s.arrow} type="arrow-bottom" /></span>
        </div>
        <div className={s.right}>
          <span className={s.time}>2022-06<Icon className={s.arrow} type="arrow-bottom" /></span>
        </div>
      </div>
    </div>
  </div>
}

export default Home;

.home {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 80px;

    .header {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 80px;
        background-color: #007fff;
        color: #fff;
        font-size: 14px;
        z-index: 100;
        padding: 10px;

        .data-wrap {
            font-size: 14px;

            >span {
                font-size: 12px;

                >b {
                    font-size: 26px;
                    font-family: DINCondensed-Bold, DINCondensed;
                    margin-left: 4px;
                }
            }

            .income {
                margin-left: 10px;
            }
        }

        .type-wrap {
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;

            >div {
                align-self: flex-start;
                background: rgba(0, 0, 0, 0.1);
                border-radius: 30px;
                padding: 3px 8px;
                font-size: 12px;
            }

            .left {
                margin-right: 6px;
            }

            .arrow {
                font-size: 12px;
                margin-left: 4px;
            }
        }
    }
}

本次项目全程采用的是 Flex 弹性布局，这种布局形式在当下的开发生产环境已经非常成熟，同学们如果还有不熟悉的，请实现对 Flex 布局做一个简单的学习，这边推荐一个学习网站。

列表页面实现

列表页面会用到 Zarm 组件库为我们提供的 Pull 组件，来实现下拉刷新以及无限滚动，我们先来将基础布局实现，如下所示：

import React,{useState} from 'react'
import { Icon } from 'zarm'
import s from './style.module.less'

const Home = () => {

  const [list, setList] = useState([
    {
      bills: [
        {
          amount: "25.00",
          date: "1623390740000",
          id: 911,
          pay_type: 1,
          remark: "",
          type_id: 1,
          type_name: "餐饮"
        }
      ],
      date: '2021-06-11'
    }
  ]); // 账单列表

  return <div className={s.home}>
    <div className={s.header}>
    <div className={s.dataWrap}>
        <span className={s.expense}>总支出：<b>￥ 200</b></span>
        <span className={s.income}>总收入：<b>￥ 500</b></span>
      </div>
      <div className={s.typeWrap}>
        <div className={s.left}>
          <span className={s.title}>类型 <Icon className={s.arrow} type="arrow-bottom" /></span>
        </div>
        <div className={s.right}>
          <span className={s.time}>2022-06<Icon className={s.arrow} type="arrow-bottom" /></span>
        </div>
      </div>
    </div>
    <div className={s.contentWrap}>
      {
        list.map((item, index) => <div>BillItem</div>)
      }
    </div>
  </div>
}

export default Home;

我们看到BillItem已经被渲染到页面上了，接下来我们来对BillItem进行渲染即可，我们来回顾一下效果。

{
  bills: [
    {
      amount: "25.00",
      date: "1623390740000",
      id: 911,
      pay_type: 1,
      remark: "",
      type_id: 1,
      type_name: "餐饮"
    }
  ],
  date: '2021-06-11'
}

这是一个BillItem的数据结构，上面代码使用变量list来存储，也就是说list.map(item => console.log(item))就会打印出这样的结构出来：

import React, { useState } from 'react'
import { Cell, Icon } from 'zarm'
import s from './style.module.less'

const Home = () => {

    const [list, setList] = useState([
    {
      bills: [
        {
          amount: "25.00",
          date: "1623390740000",
          id: 911,
          pay_type: 1,
          remark: "wod",
          type_id: 1,
          type_name: "餐饮"
        },
        {
          amount: "26.00",
          date: "1623390740000",
          id: 912,
          pay_type: 1,
          remark: "",
          type_id: 1,
          type_name: "餐饮"
        }
      ],
      date: '2021-06-11'
    },
    {
      bills: [
        {
          amount: "25.00",
          date: "1623390740000",
          id: 913,
          pay_type: 1,
          remark: "",
          type_id: 1,
          type_name: "餐饮"
        },
        {
          amount: "26.00",
          date: "1623390740000",
          id: 914,
          pay_type: 2,
          remark: "",
          type_id: 1,
          type_name: "餐饮"
        }
      ],
      date: '2021-06-12'
    }
  ]); // 账单列表
  
  return <div className={s.home}>
    <div className={s.header}>
      <div className={s.dataWrap}>
        <span className={s.expense}>总支出：<b>￥ 200</b></span>
        <span className={s.income}>总收入：<b>￥ 500</b></span>
      </div>
      <div className={s.typeWrap}>
        <div className={s.left}>
          <span className={s.title}>类型 <Icon className={s.arrow} type="arrow-bottom" /></span>
        </div>
        <div className={s.right}>
          <span className={s.time}>2022-06<Icon className={s.arrow} type="arrow-bottom" /></span>
        </div>
      </div>
    </div>
    <div className={s.contentWrap}>
      {
        list.map((item, index) => <div key={item.date}>
          <div className={s.headerDate}>
            <div className={s.date}>{item.date}</div>
            <div className={s.money}>
              <span>
                <img src="//s.yezgea02.com/1615953405599/zhi%402x.png" alt='支' />
                <span>￥1</span>
              </span>
              <span>
                <img src="//s.yezgea02.com/1615953405599/shou%402x.png" alt="收" />
                <span>￥2</span>
              </span>
            </div>
          </div>
          {
            item.bills?.map(bill => <Cell
              className={s.bill}
              key={bill.id}
              description={
                <span style={{ color: bill.pay_type == 2 ? 'red' : '#39be77' }}>
                  {`${bill.pay_type == 1 ? '-' : '+'}${bill.amount}`}
                </span>}
            >
            </Cell>)
          }
        </div>)
      }
    </div>
  </div>
}

export default Home;

我们现在要把每个账单项的时间显示出来，我们用到dayjs这个库。

yarn add dayjs -S

{
  item.bills?.map(bill =>
		<Cell className={s.item} key={bill.id}
			description={
  			<span style={{ color: bill.pay_type == 2 ? 'red' : '#39be77' }}>
    		{`${bill.pay_type == 1 ? '-' : '+'}${bill.amount}`}
 				</span>}
			help={
				<div>{dayjs(Number(bill.date)).format('HH:mm')}
				{bill.remark ? `| ${bill.remark}` : ''}</div>}
		></Cell>)
}

加上上面这段代码就是这个效果了，接下来我们把项目标题给补上。

vim utils/index.js

export const typeMap = {
    1: {
        icon: 'canyin'
    },
    2: {
        icon: 'fushi'
    },
    3: {
        icon: 'jiaotong'
    },
    4: {
        icon: 'riyong'
    },
    5: {
        icon: 'gouwu'
    },
    6: {
        icon: 'xuexi'
    },
    7: {
        icon: 'yiliao'
    },
    8: {
        icon: 'lvxing'
    },
    9: {
        icon: 'renqing'
    },
    10: {
        icon: 'qita'
    },
    11: {
        icon: 'gongzi'
    },
    12: {
        icon: 'jiangjin'
    },
    13: {
        icon: 'zhuanzhang'
    },
    14: {
        icon: 'licai'
    },
    15: {
        icon: 'tuikuang'
    },
    16: {
        icon: 'qita'
    }
}

title={
          <>
            <CustomIcon
              className={s.itemIcon}
              type={item.type_id ? typeMap[item.type_id].icon : 1}
            />
            <span>{ item.type_name }</span>
          </>
        }