前端框架搭建——从零开始搭建一个高颜值后台管理系统全栈框架(一)

前端小付
25,515 阅读5分钟

项目体验地址：www.fluxyadmin.cn

效果展示

登录页

image.png

首页

image.png

表格例子

image.png

国际化

image.png

暗黑模式首页

image.png

暗黑模式表格页面

image.png

适配移动端

dbfu.github.io_fluxy-admin-web_(iPhone XR) (1).png

前言

个人介绍

  • 不知不觉已经30岁了，做前端开发也已经5年了，这期间在掘金学到了很多知识，现在也要对外输出知识了，帮助大家一起成长。
  • 我这5年期间主要都是在做后台管理系统，目前在公司充当前端架构师的角色，主导研发公司的低代码平台。这些年积攒了一些后台管理系统和低代码开发心得，现在想通过从零开始做一个后台管理系统向大家分享这些经验和心得。

项目介绍

  • 在公司一直使用的是umi+dva那一套，最近刚好学习了vite和zustand，打算这个项目就用vite和zustand练练手。
  • 项目的ui借鉴了mui的其中一个模版项目，berry-react-material-admin，这个模版项目没有开源，是收费的，我觉得ui很好看，就借鉴了一下。
  • 该项目的最终目标是实现一个企业级后台管理系统全栈框架，后面也会加入一些低代码功能，想法是把chatgpt和低代码结合，通过用户描述自己的需求就能生成一个功能或系统。关于chatgpt和低代码结合这一块，我已经做了技术验证，完全是可行的。
  • 项目前端使用vite4+react18+react-router6+antd5+windicss+zustand技术栈，后端使用midwayjs+typeorm+mysql+redis，这里后端使用midway，没有使用nest，是因为midway国内阿里团队开发的，文档很完善也很详细。如果遇到问题，可以加入midway交流群，群里有很多大佬积极的为别人解决问题，作者也经常在群里帮别人解决问题，所以不用担心遇到解决不了的问题。
  • 这个项目预计用一年的时间来做，陆陆续续会出一些文章，目标是让看文章的人也能开发一个属于自己的后台管理系统。 项目核心技术介绍

状态管理库

介绍

项目使用zustand框架作为状态管理库，状态管理库我在jotai,valtio,zustand这三个犹豫了很久，看了很多他们三个的文章，这三个使用起来差不多，可以根据个人喜好选择，我最终还是选择了zustand。 zustand的入门文档推荐看这两篇文章：

谈谈复杂应用的状态管理（上）：为什么是 Zustand 谈谈复杂应用的状态管理（下）：基于 Zustand 的渐进式状态管理实践

我的项目实战

目前我在项目中使用zustand存储全局公共属性，比如国际化的当前语言、菜单的展开收起状态、主题，后面实现登录功能后，也会把用户信息存进去。

下面代码中devtools和persist是zustand中间件，devtools借助google redux插件方便调试，persist可以把数据持久化到localStorage中。 image.png 菜单收起和展开功能实现 image.png 使用reduxgoogle插件查看数据 image.png

持久化到localStorage中的数据 image.png

暗黑模式

项目样式使用的是windicss框架，用这个框架实现暗黑主题切换很简单，只需要在样式前面加上:dark，然后动态设置body的class样式，就能快速实现暗黑主题切换。官方文档。

项目实战

image.png 暗黑主题下背景颜色是rgb(33,41,70)，亮色主题下是rgb(94,53,177) image.png image.png

react-router v6

  • react-router v6支持了配置的方式，不用写那么多组件了。
import { RouterProvider, createHashRouter } from 'react-router-dom';

function App() {
  const router = createHashRouter(
    [
      {
        path: '/user/login',
        Component: Login,
      }, {
        path: '/',
        Component: BasicLayout,
        children: routeConfig,
      }, {
        path: '*',
        Component: Result404,
      }
    ]
  );
	return (
	    <RouterProvider router={router} />
	)
}

上面配置了登录页面和layout，还有404页面，如果页面路由都没匹配上才会显示404页面。

  • layout代码 image.png
  • 路由配置 image.png
  • 因为做了路由懒加载，所以切换页面的时候，加了一个loading，用的是nprogress组件。 image.png

icon使用

icon方案使用的是我前面分享过的一个方案

开发中使用iconfont太麻烦了，于是我写了这款vscode插件，支持react和vue。

国际化

国际化方案使用的是i18n-next这个库，使用起来特别简单。使用这个库的原因是它支持动态加载国际化内容，目前国际化内容是放在本地的，后面会把国际化信息存到后端，方便业务翻译。我前面也分享过一篇国际化的文章，可以快速的做国际化。

开发过程中，因为国际化太麻烦，我写了这款vscode国际化插件。

我的项目实战

  • 初始化i18n-next，并导出国际化t方法。 image.png
  • 业务代码中使用 image.png
  • 切换语言 image.png
  • 国际化效果 image.png

移动端适配

移动端适配主要使用了windicss和antd的Row、Col组件。

  • 如果想实现在小屏下隐藏某个元素，只需要这样写就行了，超级简单。 image.png
  • 借助react-use库封装一个快速判断是小屏还是大屏的hooks，可以在代码中使用判断。 image.png
  • 使用Row、Col组件在不同屏幕大小下显示不同数量。 image.png 上面代码表示在lg屏幕下一行显示一个元素，在xl屏幕下一行显示3个。Row和Col具体使用方法可以看下官方文档。

总结

  • 一个简单的后台管理系统前端框架搭建起来，后面我会慢慢完善其他功能的。下期写如何使用midway搭建后端框架。
  • 我建了一个专栏，后面关于后台管理系统开发的文章都会放在专栏里，方便大家阅读。

项目源码地址：github.com/dbfu/fluxy-…，如果框架对你有帮助，麻烦给star吧。

avatar
文章
阅读
粉丝