当前位置: 首页 > news >正文

用户中心项目教程(一)--Ant design pro初始化的学习和使用

文章目录

  • 1.项目定位
  • 2.项目开发流程
  • 3.需求分析
  • 4.技术选型
  • 5.Ant design pro初始化
    • 5.1快速使用
    • 5.2初始化过程
  • 6.项目依赖的报错处理
    • 6.1项目出现的问题
    • 6.2怎么查看问题
    • 6.3怎么解决报错
    • 6.4关于pnpm的安装
  • 7.项目启动和运行
    • 7.1项目如何启动
    • 7.2双击跳转
    • 7.3登录和注册
    • 7.4页面分析
    • 7.5关于start:dev的说明

1.项目定位

了解做项目的基本思路,这次以一个简单的例子入手,从简单的到困难的,之前的这个方式确实有点问题,这次找了一个简单的项目进行学习和交流;

2.项目开发流程

1)需求的分析;

2)概要设计、详细设计

3)技术选项

4)初始化、引入需要的技术

5)写一个Demo

6)写业务代码

7)单元测试

8)代码的提交和评审

9)部署和发布上线

3.需求分析

1)注册和登录的功能–用户的信息,即登录名和明码;

2)对于用户的管理—管理员之类的可以看到,包含这个用户的数量之类的;

3)用户的校验(仅仅某些人符合要求)–指定人群

4.技术选型

前端:三件套(html+css之类的)+react+组件库 Ant Design + Umi + Ant Design Pro(现成的管理系统)

后端:java+spring boot+spring mvc +mybatis+mysql+mybatis-plus

部署:服务器

5.Ant design pro初始化

这个初始化的过程实际上就是生成一个模版:这个是我自己的一个理解,因为我自己也是第一次使用这个相关的内容,yupi使用的是这个ant design pro这个工具进行的初始化,但是我发现他的这个教程里面当时的 官方的文档和我现在看到的这个官方文档不完全一样,有很多地方都变化了,毕竟这个技术在不断的更新迭代,这个也是可以理解的;

5.1快速使用

进入官网之后,点击这个快速使用,就会看到下面的这个页面内容:

image-20250117135337138

5.2初始化过程

这个初始化的过程,在我们的文档里面有的,按照步骤操作就可以了哈;

image-20250117145802529

我自己操作的这个过程里面,这个没有选择umi的版本,但是提示让我选择了这个simple还是complete,这个是有的;

安装依赖的时候:如果你没有这个tyarn的话,使用第一行的就会报错;

但是如果你使用第三行的指令,这个速度会非常慢;

我的个人做法就是去切换这个镜像源:

1)npm config set registry https://registry.npmmirror.com

检查是不是安装成功:

2)npm config get registry

附:下面的这个是我第一次按照这个鱼皮的视频安装的过程:下面的这个是我从视频里面截取的,可见他和现在这个官网有很大的区别,不知道这个视频是几年前录制的,我第一次就是跟着教程搞得,最后发现一堆报错,解决方案就是我自己独立按照最新的这个文档重新搞了一次,遇到问题的时候百度,找到了这个跟换镜像源的方法,问题的已解决,我认为这个才是成长的过程,勇敢的迈出第一步,这个是我们作为初学者必须要经历的过程;

image-20250117150721763

6.项目依赖的报错处理

上面的这个初始化工作完成之后,我们就可以使用这个开发者工具把这个项目打开进行处理了,推荐使用这个web storm这个工具;

6.1项目出现的问题

这个其实在yupi讲这个内容里面并没有出现,这个也是因为我们的这个ant design pro这个初始化的问题,下面的这个是我按照上面的步骤打开项目遇到的问题;

image-20250117185942696

6.2怎么查看问题

可以打开下面的这个文件:app.tsx这个文件打开之后刷新一下,应该全是红的,证明我们的这个项目文件里面是存在很多的这个问题的,我自己最开始是显示有9个错误;

image-20250117190447972

6.3怎么解决报错

其实我们的这个工具在提示我们,就是运行这个 pnpm install这个命令;

这个pnpm和我们上面提到这个yarn一样,都属于这个包管理工具;pnpm兼容现在这个npm生态,且这个很高效,节省这个磁盘的空间;

image-20250117191242968

下面的这个是yupi当时的这个操作,使用这个yarn:但是当我输入之后,发现这个是无法被识别的,我知道这个时候需要靠我自己了;

image-20250117191549939

于是我尝试了一下这个提示的命令:npnm install命令:

image-20250117191650518

6.4关于pnpm的安装

出现上面的报错之后,我知道需要解决这个pnpm问题,于是就查了一下:

1)安装这个pnpm:npm install -g pnpm

image-20250117191857545

2)再次使用上面的那个指令:这个时候就不会报错了;

image-20250117191924995

到此为止,我们的这个app.tsx里面的全部报错都消失了,说明我们的这个依赖是引入成功的;

7.项目启动和运行

7.1项目如何启动

点击我们的这个package.json里面的这个start前面的按钮直接启动我们的这个项目;

image-20250117193214025

7.2双击跳转

点击下面的这个运行起来的这个日志里面的local对应的这个内容,就可以跳转到浏览器里面去;

image-20250117193408898

7.3登录和注册

下面的就是跳转的页面,这个上面已经告诉了我们登录名和密码,直接输入就可以了;

image-20250117193027430

7.4页面分析

我们就来之后就可以发现,这个页面非常简单,我们可以看到这个表格,点击这个右边的这个齿轮,我们可以更换这个页面的皮肤和颜色样式之类的;

image-20250117193710944

7.5关于start:dev的说明

这个start就是我们上面使用的,她的下面有一个dev,但是如果我们使用这个启动,就会发现这个也是可以跳转的,但是跳转之后的这个页面是无法成功登陆的;

这个主要是因为哦我们的这个dev里面的mock是none,这个mock就是假数据,也就是模拟数据,我们的这个start里面可以使用,但是dev里面把这个mock关闭了,所以我们进不去了;

image-20250117194112703

相关文章:

用户中心项目教程(一)--Ant design pro初始化的学习和使用

文章目录 1.项目定位2.项目开发流程3.需求分析4.技术选型5.Ant design pro初始化5.1快速使用5.2初始化过程 6.项目依赖的报错处理6.1项目出现的问题6.2怎么查看问题6.3怎么解决报错6.4关于pnpm的安装 7.项目启动和运行7.1项目如何启动7.2双击跳转7.3登录和注册7.4页面分析7.5关…...

分频器code

理论学习 数字电路中时钟占有非常重要的地位。时间的计算都依靠时钟信号作为基本单元。一般而言,一块板子只有一个晶振,即只有一种频率的时钟,但是数字系统中,经常需要对基准时钟进行不同倍数的分频,进而得到各模块所需…...

C#中字符串方法

字符串属性:Lenght 长度比最大索引大1 string str "frerfgd"; 1.可以通过索引,获取字符串中的某一个字符,下标“0,1.......” Console.WriteLine(str[0]);//f Console.WriteLine(str[1]);//r //Console.WriteLine(s…...

Python毕业设计选题:基于django+vue的二手电子设备交易平台设计与开发

开发语言:Python框架:djangoPython版本:python3.7.7数据库:mysql 5.7数据库工具:Navicat11开发软件:PyCharm 系统展示 管理员登录 管理员功能界面 用户管理 设备类型管理 设备信息管理 系统首页 设备信息…...

【愚公系列】《微信小程序与云开发从入门到实践》059-迷你商城小程序的开发(加入购物车与创建订单功能开发)

标题详情作者简介愚公搬代码头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。近期荣誉2022年度…...

Mac Android studio :gradle 配置、代理设置、及各种环境变量配置;

mac 安装 AS,最烦人的就是这些配置了(吐槽一下:这软件真是垃圾的一批,同样的代码换了电脑就没法用,比 vscode 甚至比低评分的xcode还差劲!) --------------------- 一、 gradle 下载及环境变量…...

unity——Preject3——开始界面拼面板

目录 1.创建panel,去掉panel自带的image,自己加一个image,使用锚点分配好 2.锚点(快捷键点击后 ALTShift) 锚点是什么? 锚点的实际例子 例子1:固定在父容器的中心 例子2:对齐到…...

【达梦数据库(Oracle模式)】如何将视图中的数据导出

在某些情况下,我们需要将生产环境某个模式下的数据导入到开发电脑中,因为正式环境无法连接外网数据。 方式一:将视图查询出来,然后右键导出所有查询结果(不推荐) 优点:方便快捷 缺点&#xff1…...

GB44495-2024 汽车整车信息安全技术要求 - V2X部分前置要求

背景 GB 44495-2024《汽车整车信息安全技术要求》中关于V2X(车与外界通信)的部分,主要关注于通信安全要求,旨在确保车辆在与外部设备进行数据交互时的信息安全。其测试大致可分为消息层(数据无异常)、应用…...

FastAPI 应用的容器化与 Docker 部署:提升性能与可扩展性

FastAPI 应用的容器化与 Docker 部署:提升性能与可扩展性 目录 🐳 使用 Docker 容器化 FastAPI 应用⚙️ 使用 Docker Compose 管理多个服务的部署🚀 在 Docker 容器中部署与运行 FastAPI 应用 1. 🐳 使用 Docker 容器化 FastAPI…...

QT入门的一些吐槽

QT入门的一些吐槽 看了网上的一些介绍QT的课程,看了一些讲述qt的书籍,然而再想自己做一个项目的时候,却发现我好像什么都不会,QT对我来说就是一个黑盒子。 我只会: 使用QT Creator创建一个项目,再UI文件中…...

4.Spring AI Prompt:与大模型进行有效沟通

1.什么是提示词 在人工智能领域,提示词(Prompt)扮演着至关重要的角色,它宛如一把精准的钥匙,为 AI 大模型开启理解之门。作为向模型输入的关键信息或引导性语句,提示词能够助力模型迅速洞悉问题需求&#…...

深入内核讲明白Android Binder【二】

深入内核讲明白Android Binder【二】 前言一、Binder通信内核源码整体思路概述1. 客户端向服务端发送数据流程概述1.1 binder_ref1.2 binder_node1.3 binder_proc1.4 binder_thread 2. 服务端的binder_node是什么时候被创建的呢?2.1 Binder驱动程序为服务创建binder…...

Python基于Django的图像去雾算法研究和系统实现(附源码,文档说明)

博主介绍:✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&#x1f3…...

TCP 连接状态标识 | SYN, FIN, ACK, PSH, RST, URG

注:本文为“TCP 连接状态标识”相关文章合辑。 TCP 的状态:SYN, FIN, ACK, PSH, RST, URG 简介及 ACK 确认机制 llzhang_fly 于 2020-09-19 05:25:26 发布 1、TCP 的状态 FLAGS 字段状态 在 TCP 层,有个 FLAGS 字段,这个字段有…...

WXML模版语法-事件绑定

知识点1:什么是事件 事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。 知识点2:小程序中常用的事件 类型绑定方式事件描述tapbindtap或bind:tap手指触摸后马上离开,类似于…...

楚慧杯Web

WEB1 计算器 import requests rrequests.session() data{"answer":0} url"" for i in range(30):if i0:rrequests.get(url)dr.textdd.split(":")[22][1:].split("<br>")[0]data["answer"]str(eval(d))print(eval(d)…...

工商业储能电站能量管理本地系统及多站点云平台

一、储能站就地监控 Acre1-2000MG储能能量管理系统是针对工商业储能电站研制的本地化能量管理系统&#xff0c;可实现了储能电站的数据采集、数据处理、数据存储、数据查询与分析、可视化监控、报警管理、统计报表、策略管理、历史曲线等功能。其中策略管理&#xff0c;支持多…...

HTML标签笔记

黑马程序员视频地址&#xff1a;黑马程序员前端JavaScript入门到精通全套视频教程https://www.bilibili.com/video/BV1Y84y1L7Nn?vd_source0a2d366696f87e241adc64419bf12cab&spm_id_from333.788.videopod.episodes 标题与段落 标题 <h1>~<h6> 段落 <p…...

pthread_create函数

函数原型 pthread_create 是 POSIX 线程&#xff08;pthread&#xff09;库中的一个函数&#xff0c;用于在程序中创建一个新线程。 #include <pthread.h>int pthread_create(pthread_t *thread, const pthread_attr_t *attr,void *(*start_routine) (void *), void *a…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...