Ant Design Pro(react.js) 之 项目启动及前后端联调

最新推荐文章于 2024-12-03 16:12:15 发布
原创 最新推荐文章于 2024-12-03 16:12:15 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在VSCode的终端中通过npm进行软件包安装，并演示了使用mock数据和前后端联调的方法。包括运行命令npminstall进行依赖安装，以及通过npmstart启动mock数据服务，或使用npmrunstart:no-mock进行前后端联调。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、VS Code中，终端中输入：

a、npm install

b、使用mock数据：npm start                 前后端联调：npm run start:no-mock

执行成功如下图

【Ant Design Pro】使用ant design pro做为你的开发模板（七）如何动态加载菜单列表
梦想成为全栈的切图仔
09-26 999
哈喽，朋友们好久不见，这两周忙着实际工作的事情，所以没有更新，不知不觉我们已经针对ant design pro的研究已经到了第七章。越来越深入的了解，让我们可能都有点跟不上，但是在此还是希望伙伴们能够沉下心，细心的跟敲，我们把这些代码吃透吃够就行。本章第七章，我们来一起看看 Ant design pro 如何动态加载左侧菜单。
猿创征文 |【Ant Design Pro】使用ant design pro做为你的开发模板（四） 联调正式后台接口与运行时全局配置
梦想成为全栈的切图仔
09-05 1042
在第三章节中，我们联调后台管理系统，因为后台服务接口没出来，所以我们使用的mock模拟数据来联调，这时候假如我们的正式后台接口出来了，我们的pro模板应当如何联调正式的后台管理系统呢？
Ant Design Pro 前后端数据交互(前台调接口)
qq_42552574的博客
08-28 1万+
原文地址：https://pro.ant.design/docs/server-cn Ant Design Pro 前后端数据交互(前台调接口) Ant Design Pro 是一套基于 React 技术栈的单页面应用，我们提供的是前端代码和本地模拟数据的开发模式， 通过 Restful API 的形式和任何技术栈的服务端应用一起工作。下面将简单介绍和服务端交互的基本写法。 1.前端与后台服务交互...
antd-admin 调试记录
weixin_33720452的博客
07-21 278
2019独角兽企业重金招聘Python工程师标准>>> ...
#react 之ant design Pro 学习研究#----启动项目
weixin_34242331的博客
11-27 318
2019独角兽企业重金招聘Python工程师标准>>> ...
Ant Design Pro V4 修改请求配置(api改为服务器地址 请求Content-Type改为form)
shakle的博客
01-20 5173
修改api地址 Ant Pro 如果 dev 环境要接入自己的服务端api，需要修改 config\proxy.ts 中的代理设置 原配置: dev: { '/api/': { target: 'https://preview.pro.ant.design', changeOrigin: true, pathRewrite: { '^': '' }, }, }, 修改配置： dev: { '/api/': { target: '
Ant Design Pro 2.0 调用后台接口数据
JavaLiXL的博客
03-03 5372
Ant Design Pro 2.0 调用后台接口数据 这几天折腾了And Design Pro，组件什么的都挺容易的。后来准备调用后台提供的接口。之前重来没接触过umi和dva， 掉接口数据有些懵。看了一些umi和dva的文档之后再反过来看And Design Pro折腾了好些时间才把这个问题解决， 在这里记录和分享一下，希望能帮到和我一样的同志。 1. 修改/config/config.j...
猿创征文 |【Ant Design Pro】使用ant design pro做为你的开发模板（三） 接入mock数据做持续开发
梦想成为全栈的切图仔
09-05 822
接上文，在一个项目中，除过基础的增加页面之外，我们紧跟着就是要数据联调，可是当后台还没有给出正式接口的时候，前端难道要停止开发等待后台接口吗？综上所述，mock数据是前端在后台正式接口还没出来之前的模拟数据，前端模拟后台数据返回，可以自由定义返回数据，使前端不停歇的继续开发，大大提高了开发效率。：明月，从业前端开发，会Java，会前端，会产品，会测试，会大客户销售，有过职业规划经验，欢迎各位私信聊天。就必须，我们要验证登录接口，那么我们就启动项目找到登录，进行登录，然后查看接口返回值是否一直。
猿创征文 |【Ant Design Pro】使用ant design pro做为你的开发模板（五）去除无效代码，生成一个清晰的开发模板
梦想成为全栈的切图仔
09-07 755
本次终于写到了第五章了，前面四章节，我们从一个全新的 umi3 的ant design pro 模板开始着手，我们以一个初始者要用它的思想介入，逐步走了新增路由、cssmodules、国际化语言切换、使用mock数据进行快速开发、联调正式接口、初始化配置、登录修改、接口文件提取等等。这次到第五章了，我们暂时不做新的改变，我们来把之前写的一些杂项收拾收拾，比如，清除一些不需要的代码，规范一些东西，让我们的项目成为我们的快速开发模板。
二、Ant Design Pro 布局、菜单、新增页面、CSS Modules和services
rocktanga的博客
11-16 2911
一、开发 1、区块(block) 区块是研发资产的一种，它是一系列快速搭建页面的代码片段，它可以帮助你快速的在项目中初始化好一个页面，帮助你更快速的开发代码。当前的区块都是页面级别的区块，你可以理解为它是一些项目中经常会用到的典型页面的模板，使用区块其实相当于从已有的项目中复制一些页面的代码到你当前的项目中 以前开发一个页面：创建 JS -> 创建 CSS -> 创建 Model -> 创建 service -> 写页面组件。 现在开发一个页面：下载区块 -> 基于区块初
使用AntdPro创建基于React的管理后台（学习笔记4）（技术笔记2）中 ＜火山引擎后台管理＞商品模块的实现；有代码结构简析；文末附有源码
房森的博客
03-21 2682
.商品模块的实现；有代码结构简析；文末附有源码
【React】antdpro开发指南
不忘初心，坚定道路！
11-20 6130
前言 后台管理系统用的非常多，如果比较复杂点的后台可能会多人开发，这时候可能导致各种样式不统一之类的问题。 antdpro用起来有一定学习成本，所以需要梳理一下。 快速上手 npx create-umi your-project 选择最新v5，antd4 启动 npm run start 即可看见页面。 登录页默认用户名密码是admin ant.design 。输入进去即可进入后台。 进入后右下角有个米饭一样的图标，那个就是umi-ui，可以非常方便的导入代码或者模板进行修改。 注意
antd design pro前端填坑笔记
冰原狼的博客
06-12 4301
React 填坑笔记 组件调用dispatch页面不渲染 state参数是引用类型，如果直接返回state，dva会认为没有修改state，所有不会刷新
AntdPro项目前端测试的探索
qq_43663965的博客
02-25 1424
测试规范 测试工具的选择 在本项目中以 ant design pro 项目为测试项目，测试工具最终选型为 jest javascript的常用测试框架 enzyme 支持react的jest测试库 react-test-renderer 快照测试的常用测试库 puppeteer “布偶人” – E2E测试工具 上述工具除react-test-render外，在ant design pro项目中都已内置 jest的初体验 安装jest npm i jest
React学习（一）——React项目启动
GIN0913的博客
08-21 6256
学习目标：（1）搭建和启动一个新的React项目（2）认识React项目中的目录。
如何启动一个React项目
最新发布
weixin_42434636的博客
12-03 681
如何成功的启动一个React项目
ant design pro 代码学习(一) ----- 路由分析
热门推荐
夕阳枫的博客
06-13 1万+
1、一级路由 const routerData = getRouterData(app); const UserLayout = routerData['/user'].component; const BasicLayout = routerData['/'].component; return ( <LocaleProvider locale={zhCN}&g...
ant design pro （七）和服务端进行交互
weixin_33701617的博客
12-04 4420
一、概述 　　原文地址：https://pro.ant.design/docs/server-cn 　　Ant Design Pro 是一套基于 React 技术栈的单页面应用，我们提供的是前端代码和本地模拟数据的开发模式， 通过 Restful API 的形式和任何技术栈的服务端应用一起工作。下面将简单介绍和服务端交互的基本写法。 二、详细介绍 2.1、前端请求流程 在 Ant Design P...
ant design pro （十一）advanced Mock 和联调
weixin_34232744的博客
12-08 376
一、概述 原文地址：https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发所阻塞。 在 Ant Design Pro 中，因为我们底层的工具是 roadhog，而它自带了代理请求功能，通过代理请求就能够轻...
Ant Design Pro 2.0.0-beta.1：一站式中台前端解决方案
资源摘要信息:"ant-design-pro-2.0.0-beta.1.zip 是一个开箱即用的中台前端/设计解决方案，使用了 react、antd、ant-design 等前端技术栈。该压缩包内包含了多种配置文件和依赖管理文件，如 .editorconfig、....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值