【掘掘记账本】前端React Hook，一步步详细版

最新推荐文章于 2024-04-30 13:44:47 发布

ReactSpring

最新推荐文章于 2024-04-30 13:44:47 发布

阅读量879

点赞数 3

分类专栏：记账本项目文章标签： React javascript

本文链接：https://blog.csdn.net/weixin_45607293/article/details/124430704

版权

记账本项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第一章项目框架搭建

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>
          </>
        }

现在没差了，只需要补上一点样式即可很漂亮哒啦，不过先不急，我们给他抽离出来形成独立的组件先。

ReactSpring

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
【掘掘记账本】前端React Hook，一步步详细版

第一章项目框架搭建yarn create @vitejs/app react-vite-h5 --template reactyarnyarn run dev为了在项目过程中不出现千奇百怪问题，这里贴出项目的包版本。{ "name": "react-vite-h5", "private": true, "version": "0.0.0", "scripts": { "dev": "vite", "build": "vite build", "previ
复制链接

扫一扫