前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >使用concurrently模块-同时启动react项目和mock模拟接口

使用concurrently模块-同时启动react项目和mock模拟接口

作者头像
王小婷
发布于 2019-11-21 04:39:17
发布于 2019-11-21 04:39:17
1.4K00
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

上一节前面在react项目里面,添加了mock模拟接口,我们知道,启动react项目的命令是npm start,启动模拟接口的命令 是json-server mock/db.js,但是同在react项目的根目录底下,该怎么办?如何才能实现一个命令能够同事启动两个服务?

当要同时启动后台服务,和前端服务的时候,我们可以使用concurrently模块。

1:全局安装concurrently模块

打开cmd,右键以管理员身份运行,全局安装concurrently模块。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
cnpm insatll -g concurrently
2:修改package.json配置

安装完成以后,进入react项目里面,找到package.json配置文件,修改启动配置,将启动react项目的命令和启动模拟接口的命令都写在scripts里面。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  "scripts": {
    "server":"react-scripts start",
    "json_server":"json-server mock/db.js --port 3003",
    "start": "concurrently \"npm run json_server\" \"npm run server\" ",
  },
3:输入正常启动命令
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm  start
4:打开浏览器访问

这个时候,打开浏览器,在浏览器分别输入接口数据端口3003和项目访问端口3000,可以发现都可以访问啦,(为了区分可以用命令启动指定端口。)

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
从零开始学习React-在react项目里面使用mock(七)
从零开始学习React-开发环境的搭建(一) https://www.jianshu.com/p/97f3a1ba168e 从零开始学习React-目录结构,创建组件页面(二) https://www.jianshu.com/p/5b950b8cb73a 从零开始学习React-属性绑定(三) https://www.jianshu.com/p/2c251795d1b3 从零开始学习React-路由react-router配置(四) https://www.jianshu.com/p/2b86d5f4d9d7 从零开始学习React-axios获取服务器API接口(五) https://www.jianshu.com/p/81ca5cc94923 从零开始学习React-解析json、渲染数据(六) https://www.jianshu.com/p/1a998147b09b 从零开始学习React-在react项目里面使用mock(七) https://www.jianshu.com/p/2a5f296a865c
王小婷
2019/11/21
1.8K0
使用mockjs 随机生成模拟接口数据
json-server模拟后端接口 https://cloud.tencent.com/developer/article/1541622
王小婷
2019/11/21
1.6K0
react项目如何修改默认3000端口号
因为使用了json-server模拟后端接口,打开的是3000端口号,现在启动react项目的时候,总是会询问3000端口被占用,是否改成3001 的端口,每次都要手动确定一下,很麻烦,所以想把端口号改掉。
王小婷
2019/11/20
1.6K0
大前端快闪二:react开发模式 一键启动多个服务
最近全权负责了一个前后端分离的web项目,前端使用create-react-app[1], 后端使用golang做的api服务。
有态度的马甲
2021/10/14
7620
大前端快闪二:react开发模式 一键启动多个服务
json-server模拟后端接口
作为一个前端,在实现项目功能的时候,需要在前端写一个静态的json数据,进行测试,但是有的时候,需要涉及到全模拟请求以及请求回来的过程,实现动态增删改查,这个时候就需要使用到web的API接口神器json-server。
王小婷
2019/11/20
1.5K0
【Techo Day 腾讯技术开放日】jira React 实战
说明: 这里使用脚手架安装项目的时候遇到了一个问题,大致可能说的是 node 版本不匹配,也就是我的版本低了,截图如下。
yaoyaoah
2022/10/31
4610
创建 React 应用的 7 种方式,你用过几种?
首先,我们第一个是想到的是 react 官方团队提供的脚手架工具 Create React App(cra)
狂奔滴小马
2023/03/16
7.8K0
创建 React 应用的 7 种方式,你用过几种?
关于Webpack前端工程化构建,你必须要掌握这些核心知识点
在很久之前,模块化管理还没有出现,如果我们开发一个页面想要引入一些依赖的话,最常见的做法就是将依赖文件引入到.html文件中。比如,我们要使用JS的一些依赖库,就要在.html文件中使用<script>标签引用;要引用CSS的依赖就要使用<link>标签。如果页面中引入的依赖文件太多,那么向服务发送的请求也随之增多,势必会拖慢网页的加载速度,影响用户体验。另外,网页的内容也会变得很臃肿,增加维护的难度。
江一铭
2022/06/17
1.9K0
关于Webpack前端工程化构建,你必须要掌握这些核心知识点
接口Mock利器——Json Server
Mock在中文的含义就是模拟的意思,mock测试就是在测试过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试的测试方法。
清风穆云
2021/08/09
1.8K0
concurrently 实现前后端连载启动
在做一个 Vue + koa2 技术栈的前后端项目时,常常需要通过终端分别启动前端和后端服务,通过安装 concurrently 模块,可以做到前后端连载启动。
Chor
2020/08/02
9610
React目录结构详细解析
每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。
先知先觉
2021/12/06
2.4K0
React目录结构详细解析
React.js基础知识总结一
React是FaceBook(脸书)公司研发的一款JS框架(MVC) React是一款框架:具备自己开发的独立思想(MVC:Model View Controller) -> 划分组件开发 -> 基于路由的SPA单页面开发 -> 基于ES6来编写代码(最后部署上线的时候,我们需要把ES6编译成ES5 =>基于Babel来完成编译) -> 可能用到Less/Sass等,我们也需要使用对应的插件把他们进行预编译 -> 最后为了优化性能(减少HTTP请求次数),我们需要把JS或者CSS进行合并压缩 -> webpack来完成以上页面组件合并、JS/CSS编译加合并等工作
用户6379025
2022/12/26
2K0
React.js基础知识总结一
前端必备技能:json-server全攻略
由于json-server需要通过Node对其进行启动,所以首先要安装Node。Node可自行安装,在此不再进行演示。
用户1272076
2020/08/28
1.7K0
使用json-Server快速模拟服务环境搭建
在前后端分离的这种工作模式下,分工明确,各司其职。前端负责展示数据,后端提供数据。然而,在这种过程中对于接口的规范 需要提前制定好。例如根据规范提前模拟数据,这个时候就比较麻烦的。JsonServer这个比较NB了,它可以快速搭建服务端环境,创建json文件,便于调用。然后可以通过下载postman与json-server结合,可以实现数据的增删改查功能。下面是使用过程:
小周sir
2019/09/23
1.3K0
使用json-Server快速模拟服务环境搭建
create-react-app初探
CRA除了能帮我们构建出一个React的SPA项目(generator),充当脚手架的作用。还能为我们在项目开发,编译时进行构建,充当builder的作用。可以看到生成的项目中的package.json包含很多命令:
IMWeb前端团队
2019/12/04
1.3K0
正式发布一款可cmd命令安装的React.js项目脚手架——FastReactApp
今天,篇幅可能比较短,主要介绍最近这段时间开发的一款脚手架——FastReactApp。这是一款基于Parcel2 开发的React.js项目脚手架。虽然比不上正在前端界火爆的Vite以及占据稳定地位的CreateReactApp,但是基本的项目开发还是可以的。
Vam的金豆之路
2021/12/01
1.6K0
正式发布一款可cmd命令安装的React.js项目脚手架——FastReactApp
create-react-app初探
本文由 IMWeb 社区 imweb.io 授权转载自腾讯内部 KM 论坛,原作者:kingfo。点击阅读原文查看 IMWeb 社区更多精彩文章。 create-react-app是一个react的cli脚手架+构建器,我们可以基于CRA零配置直接上手开发一个react的SPA应用。通过3种方式快速创建一个React SPA应用: npm init with initializer (npm 6.1+) npx with generator (npm 5.2+) yarn create with initi
用户1097444
2022/06/29
7950
create-react-app初探
create-react-app入门教程
Create React App是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。它本身集成了Webpack,并配置了一系列内置的loader和默认的npm的脚本,可以很轻松的实现零配置就可以快速开发React的应用。
老马
2019/05/25
2.5K0
React基础(9)-React中发送Ajax请求以及Mock数据
把这段商品列表的json代码命名为goodlist.json,放到根目录public的api文件夹内
itclanCoder
2020/10/16
2.3K0
使用Mock.js和json server快速生成前端测试数据
下面演示的是我总结的一个使用示例,帮助大家参考学习,看完后,如果大家有其他需求,可以参考Mock.js 的官方文档,需要生成哪些格式的数据,复制样例代码即可,本案例重在演示如何使用Mock.js和json server自动生成前端开发测试用的接口数据。
害恶细君
2022/11/22
1.4K0
使用Mock.js和json server快速生成前端测试数据
相关推荐
从零开始学习React-在react项目里面使用mock(七)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档