Ant Design Pro模板神器:让后台管理飞起来!

时间:2025-04-03 00:08 分类:其他教程

在互联网的世界里,每一个创新都如同璀璨的星辰,照亮前行的道路。我,一位对互联网充满热情的探索者,于2023年8月,开启了属于自己的创业之路——北京微谏科技有限公司。起初,我们的业务仅限于一份由前领导引荐的AI前端外包项目,虽然忙碌,但内心却充满了期待与激情。

两年时间转瞬即逝,我们服务了一些客户,也完成了一些有趣的项目,但这些都是别人的成果,无法满足我对产品的渴望和对营收的追求。于是,我下定决心,要打造出完全属于自己的产品。

在开发后台管理系统的过程中,我选择了Ant Design Pro作为基础框架。然而,每次生成项目后,都需要手动调整大量代码,才能让界面回归到一个简单可用的状态。这种繁琐的工作让我倍感疲惫,也让我意识到,必须有所改变。

于是,我开始了我的第一个产品——Ant Design Pro模板简化工具的研发。这款工具的核心理念是“让后台管理项目快速启动”。原本需要半天的时间,如今只需1分钟,你就能轻松搞定后台管理的基本框架。对于中大型公司来说,这款工具或许并无太大作用;但对于小型非科技型企业、计算机专业的学生以及偶尔接私活的程序员们来说,它无疑是一场及时雨。

下面,我将为大家展示如何使用全局安装的Pro命令初始化一个简单的脚手架。不得不说,这款工具的界面还是非常漂亮的。但是,作为一个以速度为核心的外包开发团队,漂亮只是加分项。因此,我们需要先删除一些不必要的部分,如mock数据、单元测试、Ant相关Logo/提示信息、多语言、欢迎页、管理页等。

接下来,我们将添加一个基础的增删改查模块。大致思路如下:

import { execSync } from 'child_process';
import fs from 'fs';
import path, { dirname } from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const mockPath = path.join(__dirname, '../mock');
const testsPath = path.join(__dirname, '../tests');
const jestPath = path.join(__dirname, '../jest.config.ts');
const srcUserLoginTest = path.join(__dirname, '../src/pages/User/Login/login.test.tsx');
const srcUserLoginSnapshots = path.join(__dirname, '../src/pages/User/Login/__snapshots__');
const typesPath = path.join(__dirname, '../types');
const srcComponentsFooter = path.join(__dirname, '../src/components/Footer');
const srcComponentsRightContent = path.join(__dirname, '../src/components/RightContent/index.tsx');
const srcLocales = path.join(__dirname, '../src/locales');
const srcPagesAdmin = path.join(__dirname, '../src/pages/Admin.tsx');
const srcPagesWelcome = path.join(__dirname, '../src/pages/Welcome.tsx');
const srcPagesTableList = path.join(__dirname, '../src/pages/TableList');
const srcPages404 = path.join(__dirname, '../src/pages/404.tsx');
const srcServices = path.join(__dirname, '../src/services');
const srcConfigOneApi = path.join(__dirname, '../config/oneapi.json');
const srcAccess = path.join(__dirname, '../src/access.ts');
const publicIcons = path.join(__dirname, '../public/icons');
const publicCNAME = path.join(__dirname, '../public/CNAME');
const publicIco = path.join(__dirname, '../public/favicon.ico');
const publicSvg = path.join(__dirname, '../public/logo.svg');
const publicProIcon = path.join(__dirname, '../public/pro_icon.svg');

// 删除不需要的代码
[
  mockPath,
  testsPath,
  jestPath,
  srcUserLoginTest,
  srcUserLoginSnapshots,
  typesPath,
  srcComponentsFooter,
  srcComponentsRightContent,
  srcLocales,
  srcPagesAdmin,
  srcPagesWelcome,
  srcPagesTableList,
  srcPages404,
  srcServices,
  srcConfigOneApi,
  srcAccess,
  publicIcons,
  publicCNAME,
  publicIco,
  publicSvg,
  publicProIcon,
].forEach((itemPath) => {
  execSync(`rm -rf ${itemPath}`);
});

// 将replace-source-code的内容覆盖到../中
execSync(`cp -r ${path.join(__dirname, './replace-source-code/*')} ${path.join(__dirname, '../')}`);

const args = process.argv.slice(2);
const title = args.length > 0 ? args[0] : '后台管理系统';

// 替换系统标题
execSync(
  `sed -i '' 's/{{title}}/${title}/g' ${path.join(__dirname, '../config/defaultSettings.ts')}`,
);

执行后,一个清爽的后台界面呈现在我们眼前。此时,我们可以全身心地投入到业务开发中。如果你也渴望拥有这样的工具,欢迎访问我的公司官网。目前,我们的在线生成服务已经开放了100次免登录生成代码。如果你看到了“今日免登录体验次数已耗尽,请登录后使用”的提示,请给予我一点信任,免费注册我的网站,享受无限次的后台模板生成服务吧!

希望这篇文章能为你带来一些启发和帮助。如果你对这款工具有任何建议或想法,欢迎在评论区留言。感谢大家的关注和支持,祝大家在创业的道路上越走越远,前程似锦,大展宏图!

声明:

1、本博客不从事任何主机及服务器租赁业务,不参与任何交易,也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动,信息均摘自网络或来自服务商主动提供;所以对本博客提及的内容不作直接、间接、法定、约定的保证,博客内容也不具备任何参考价值及引导作用,访问者需自行甄别。

2、访问本博客请务必遵守有关互联网的相关法律、规定与规则;不能利用本博客所提及的内容从事任何违法、违规操作;否则造成的一切后果由访问者自行承担。

3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。

4、一旦您访问本博客,即表示您已经知晓并接受了以上声明通告。

本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 0人参与,0条评论
查看更多

Copyright 2005-2024 yuanmayuan.com 源码园 版权所有 备案信息

声明: 本站非腾讯QQ官方网站 所有软件和文章来自互联网 如有异议 请与本站联系 本站为非赢利性网站 不接受任何赞助和广告