[前端React] 利用JSON-Server几分钟轻松部署API

最新推荐文章于 2023-04-11 11:24:01 发布
最新推荐文章于 2023-04-11 11:24:01 发布
阅读量503 收藏
点赞数 1
分类专栏： 前端开发笔记 文章标签： reactjs javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Joyce_LLL/article/details/109087779
版权

目录

这篇笔记基于json-server和部署的两次课程，如有错漏欢迎指正！

目的

在前端开发的时候我们不会花很大的精力去建后端，这时就会用到JSON-Server来建立一个api，对于不是很复杂的项目，在开发阶段足够用来测试debug

这篇笔记主要介绍把这样一个项目实际部署的步骤和注意事项。

主要工具

  • Reactjs
  • JSON-Server
  • Netlify, 部署前端。使用Netlify是因为它支持proxing behavior
  • Heroku, 部署api
  • Github

具体步骤

  1. 注册账号

    Netlify 和 Heroku 都需要注册。两个网站对于免费服务有限流和限制大小，对于一个简单项目，免费的账号基本也足够我们使用。在访问heroku时，可能会有速度问题，使用科学手段可以较快访问
    Netlify
    Heroku

  2. 创建toml文件

    注册完账号之后，我们先回到本地文件，对react app的配置做一些修改：

    在app根目录下创建一个netlify.toml文件。注意<your-app-endpoint>里填写的路径要与等一下在heroku中设置的

最低0.47元/天 解锁文章
易北Alist
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react-json-view：用于响应的JSON查看器
02-03
react-json-view RJV是一个React组件，用于显示和编辑javascript数组和JSON对象。 该组件提供了一个响应界面，用于在Web浏览器中显示数组或JSON。 NPM提供了分发到ES5的源的分发； 因此您可以将此组件包含在任何...
react-admin-example:带有JSON-Server的React Admin框架示例
03-08
React Admin示例 React Admin的示例。 我们使用JSON-Server作为REST API 用法 # Install dependencies npm install # Install client dependencies cd client npm install cd .. # Run client and server (Visit http://localhost:3000) npm run dev # Run server only (:5000) npm run server # Run client only (:3000) npm run client
APIJSON使用和搭建
qq_32556919的博客
01-15 4608
APIJSON项目的搭建APIJSON的介绍这是什么这有什么用对我们的项目的好处有哪些功能流程图UML 图表FLowchart流程图导出与导入导出导入 APIJSON的介绍 这是什么 APIJSON是一种专为API而生的 JSON网络传输协议 以及 基于这套协议实现的ORM库 这有什么用 为 简单的增删改查、复杂的查询、简单的事务操作 提供了完全自动化的API。能大幅降低开发和沟通成本，简化开发流程，缩短开发周期。 对我们的项目的好处有哪些 通过自动化API，前端可以定制任何数据、任何结构！ 大部
Django REST framework笔记一之简易JsonAPI搭建(可使用)
海贼王的博客
08-04 6742
参考 Django rest framework官网http://www.django-rest-framework.org/**文章可能有疏漏，具体请参考代码 源码地址 github:本文需要有一定的Python和Django基础，需要预先安装Ubantu及其相关配置。创建虚拟环境//创建虚拟环境文件夹 mkdir tutorial cd tutorial//创建虚拟环境（方便后期部署） vi
APIJSON教程：上手apijson项目，学习apijson语法，并实现持久层配置
TracyCoder的博客
05-27 9796
文章目录： 一、项目导入 二、数据库搭建及配置 三、运行项目并访问接口 四、apijson语法 五、如何新增接口 这篇博客在知乎上发表过了，知乎编辑器和markdown不兼容，重新排版实在是累： 点击跳转 ...
APIJSON
comeoffbest的专栏
09-19 1022
APIJSON 文章目录APIJSONA.介绍A1.关于接口开发A2.功能说明B.安装&使用B1.下载项目B2.导入项目B3. pom.xml的错误修改。C.开发说明C-1.基于Mysql数据库的开发流程C-1-1.修改数据库链接C-1-2.导入表C-1-2-1.更多测试用例C-1-3.测试查询字段过滤字段别名逻辑运算模糊查询正则匹配列表数据分页排序关联查询分组查询C-1-4.登录C-1-5.测试新增C-1-4.测试修改C-1-5.测试删除C-2.新增接口1. 后台添加数据表2. 配置权限2.1）在
React项目笔记1-json-server的配置
cloudgaps的博客
06-09 290
1.使用配置简单的json-server来模拟数据的增删改查. 安装一开 yarn add json-server -D
react模拟后端接口及提交方式 json-server
Cupid
09-03 229
前后端并行开发的痛点 前端需要等待后端开发完接口以后 再根据接口来完成前端的业务逻辑 解决方法 在本地模拟后端接口用来测试前端效果 这种做法称之为构建前端Mock json-server 获取一个模拟的功能齐全的api接口 不需要敲代码 小于30s即可搞定 json-server使用 全局安装json-server命令行工具 npm install -g json-ser...
json-server：部署
lzr244977118的博客
08-18 453
1.安装：npm install json-server -g 2.创建文件夹/文件server/data.json 3.在data.json中添加数据 4.在Terminal打开server文件夹 5.运行服务器：json-server data.json，每次改变data.json都重新运行。 6.默认API为 localhost:3000 详情：https://www.npmjs.com/package/json-server ...
json rest api_JSON-Server作为前端开发中的伪REST API
culiu9261的博客
07-22 136
json rest api 介绍 ( Introduction ) Frontend development is changing day by day and we have to learn a lot more stuff. When we start learning a new framework or library, the first thing that is recommen...
阿里云centos部署jsonserver
小张与BUG
04-08 2162
阿里云centos部署jsonserver
react-editable-json-tree:React可编辑的Json树
05-17
授权删除动作的可能性如何使用安装npm install --save react-editable-json-tree用法示例 // Importimport { JsonTree , ADD_DELTA_TYPE , REMOVE_DELTA_TYPE , UPDATE_DELTA_TYPE , DATA_TYPES , INPUT_USAGE_...
react-json-editor：用于使用JSON-Schema进行响应的动态表单组件
02-03
react-json-editor 这是丛状叉，意在保持 使用基于的规范格式的动态表单组件。 演示的完整代码可以在找到。 react-json-editor使用一个JavaScript对象来描述我们希望用户提供的数据的形状-模式-并根据该模式自动...
react-json-schema:使用映射到React组件的JSON模式配置和构建视图
05-17
react-json-schema npm install react-json-schema 通过将JSON定义映射到React组件来从JSON构造React元素。 将react-json-schema用于数据驱动的布局，或用作React组件和道具的抽象层。 渲染到任何地方（只要是DOM）...
react-json-editor-ajrm：一种模块化，易于使用的，react组件，用于查看，编辑和调试javascript对象
02-03
react-json-editor-ajrm 一个时尚的，类似于编辑器的模块化React组件，用于查看，编辑和调试javascript对象语法！安装依赖使用节点包管理器： $ npm i --save react-json-editor-ajrm如何使用 import JSONInput from...
新手怎么用React在没有服务器的情况，用json-server写一个小案例
weixin_42139781的博客
05-14 293
1.首先我们写react就要先安装nodeJS: 安装步骤： 直接去nodeJS官网下载，双击，直接下一步，就安装成功了 2.安装完成nodeJS，才能安装react的脚手架，
简单易懂：如何用React和json-server搭建一个社交媒体应用（1）
ksjdskla的博客
04-11 205
如何使用json-server快速搭建一个简单后端
在react中json-server的安装和使用(基础使用)
zhaojiaxing123的博客
02-08 545
在react中json-server的安装和使用(基础使用)
json-server单独使用或者在react中进行使用
hyqhyqhyqq的博客
03-10 566
在该文件夹下定义db.json文件。
react-router-dom react-router-config 安装失败
最新发布
01-13
您可以尝试以下步骤来解决react-router-dom和react-router-config安装失败的问题： 1. 确保您已经正确安装了Node.js和npm。您可以在终端中运行以下命令来检查它们的版本： ```shell node -v npm -v ``` 2. 确保您的项目目录下有一个正确的package.json文件。如果没有，请在终端中导航到项目目录并运行以下命令来创建一个新的package.json文件： ```shell npm init -y ``` 3. 确保您的项目目录下没有其他正在运行的npm进程。您可以尝试关闭终端并重新打开一个新的终端窗口，然后再次尝试安装。 4. 确保您的网络连接正常。有时候安装过程中会因为网络问题而失败。您可以尝试使用其他网络连接或者使用VPN来解决这个问题。 5. 尝试使用npm的镜像源来安装。您可以在终端中运行以下命令来切换到淘宝的镜像源： ```shell npm config set registry https://registry.npm.taobao.org/ ``` 然后再次尝试安装react-router-dom和react-router-config。 如果您仍然遇到问题，请提供更多的错误信息或者详细描述您遇到的具体问题，以便我能够更好地帮助您解决。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值