zdpreact_antdesginpro 研究一下react里面比较流行的一个UI框架，开发后台管理系统

news2024/7/4 6:22:32

首先看一下最开始的代码：
在这里插入图片描述

这里面大部分的东西都可以删掉，比如README，只留下中文的那个就可以了。
在这里插入图片描述

之后看看README.md中介绍的特性。

特性

💡 TypeScript: 应用程序级 JavaScript 的语言
📜 区块: 通过区块模板快速构建页面
💎 优雅美观：基于 Ant Design 体系精心设计
📐 常见设计模式：提炼自中后台应用的典型页面和场景
🚀 最新技术栈：使用 React/umi/dva/antd 等前端前沿技术开发
📱 响应式：针对不同屏幕大小设计
🎨 主题：可配置的主题满足多样化的品牌诉求
🌐 国际化：内建业界通用的国际化方案
⚙️ 最佳实践：良好的工程实践助您持续产出高质量代码
🔢 Mock 数据：实用的本地数据调试方案
✅ UI 测试：自动化测试保障前端产品质量

再看看模板页面：

Dashboard
- 分析页
- 监控页
- 工作台
表单页
- 基础表单页
- 分步表单页
- 高级表单页
列表页
- 查询表格
- 标准列表
- 卡片列表
- 搜索列表（项目/应用/文章）
详情页
- 基础详情页
- 高级详情页
用户
- 用户中心页
- 用户设置页
结果
- 成功页
- 失败页
异常
- 403 无权限
- 404 找不到
- 500 服务器出错
帐户
- 登录
- 注册
- 注册成功

安装依赖

npm install -g tyarn
tyarn

配置启动命令

这里我使用的是webstorm，配置了一个npm：
在这里插入图片描述

此时还在安装依赖，需要等一会：
在这里插入图片描述

等一会以后依赖安装好了：
在这里插入图片描述

第一次启动项目

此时，我选择启动项目：
在这里插入图片描述

控制台会输出一个地址：
在这里插入图片描述

浏览器进行访问：http://localhost:8000/
在这里插入图片描述

编译一会儿以后，会进入登录页面：
在这里插入图片描述

点击登录，但是报了登录失败：
在这里插入图片描述

查看登录的代码

首先我选择去看mock代码：
在这里插入图片描述

我将登录条件改为：

if (password === 'zhangdapeng520' && username === 'zhangdapeng') {

此时，需要：

账号：zhangdapeng
密码：zhangdapeng520

才能够登录系统了。

但是重启服务以后还是报了这个错，说明问题没有解决：
在这里插入图片描述

查看启动代码

此时我选择去看package.json中的启动代码：

"scripts": {
    "analyze": "cross-env ANALYZE=1 max build",
    "build": "max build",
    "deploy": "npm run build && npm run gh-pages",
    "dev": "npm run start:dev",
    "gh-pages": "gh-pages -d dist",
    "i18n-remove": "pro i18n-remove --locale=zh-CN --write",
    "postinstall": "max setup",
    "jest": "jest",
    "lint": "npm run lint:js && npm run lint:prettier && npm run tsc",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src ",
    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
    "lint:prettier": "prettier -c --write \"**/**.{js,jsx,tsx,ts,less,md,json}\" --end-of-line auto",
    "openapi": "max openapi",
    "prepare": "husky install",
    "prettier": "prettier -c --write \"**/**.{js,jsx,tsx,ts,less,md,json}\"",
    "preview": "npm run build && max preview --port 8000",
    "record": "cross-env NODE_ENV=development REACT_APP_ENV=test max record --scene=login",
    "serve": "umi-serve",
    "start": "cross-env UMI_ENV=dev max dev",
    "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev",
    "start:no-mock": "cross-env MOCK=none UMI_ENV=dev max dev",
    "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev max dev",
    "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev max dev",
    "test": "jest",
    "test:coverage": "npm run jest -- --coverage",
    "test:update": "npm run jest -- -u",
    "tsc": "tsc --noEmit"
  },

我发现启动命令特别多，决定尝试其他的启动方案，比如：

tyarn start

使用这个命令以后，再次登录就成功了。
在这里插入图片描述

我们来观察一下这两个命令：

"start": "cross-env UMI_ENV=dev max dev",
"start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev",

可以看出了，默认是启动mock服务的，但是加了MOCK=none以后可以关闭mock服务。

而

"dev": "npm run start:dev"

不会启动mock服务，所以才登录不了。

页面观察

既然成功了，我们来看看目前的页面吧。

首页：
在这里插入图片描述

二级管理页面：
在这里插入图片描述

查询表格：
在这里插入图片描述

目前只有这三个页面，算是比较简约的了，后面需要什么页面就继续开发就好了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1571477.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！