全家桶内装有:

服务端:

json server 作为工具,支持CORS和JSONP跨域请求,支持GET, POST, PUT, PATCH 和 DELETE 方法,更提供了一系列的查询方法,如limit,order等。

npm install json-server -g 

安装完成后可以用 json-server -h 命令检查是否安装成功
  1. 新建项目目录reactbox,并初始化

    npm init
  2. 新建 mock/ 文件夹,及其下新建db.json
  3. 在mock目录下执行
    json-server db.json -w -p 

    或者:

    在mock\下再建一个package.json文件,添加
    {
    "scripts": {
    "mock": "json-server db.json --port 3000"
    }
    }
    在mock\下执行 : npm run mock
    如果用reactbox下的package.json,配置地址:
    "mock": "json-server mock/db.json --port 3000"
    在reactbox\下执行 : npm run mock

    通过地址http://localhost:3000/查看

json server以每个”表”为单位注册一系列标准的RESTFull形式的API接口(路由),表(.json中的第一级)

操作数据:
,Get查询:
jQuery.get 或 fecth({method: "get"}) 访问http://localhost:3000/news ,Post:push一条新数据
$.ajax({
type: 'post',
url: 'http://localhost:3000/news',
data: {
"id": ,
...
}
}
) ,PUT:对数据进行修改(id为1)
$.ajax({
type: 'put',
url: 'http://localhost:3000/news/1',
data: {
"title": "aaa",
...
}
}
) ,[DELETE] /user/:id #删除 等

json server 也可以使用动态数据

# /mock/db.js

module.exports = function() {
var data = { users: [] }
// Create 1000 users
for (var i = ; i < ; i++) {
data.users.push({ id: i, name: 'user' + i })
}
return data
}
/mock 下运行 json-server db.js -p 3000,可以通过http://localhost:3000/users来访问

客户端

npm i roadhog -g

roadhog 是一个 cli 工具,提供 server、 build 和 test 三个命令,分别用于本地调试和构建,并且提供了特别易用的 mock 功能,
安装出错,npm cache clean --force,用管理员权限安装
  • 新建/src目录(存放客户端代码),新建/src/index.js (应用的入口文件)

  • 新建/public目录(存放项目的静态文件),/public/index.html (页面的入口文件)
    npm i react react-dom react-router-dom -S  //react-router4以上,引入react-router-dom不再引入react-router
  • /src/index.js
    
    import React from 'react';
    import ReactDOM from 'react-dom';
    ReactDOM.render((
    <div>Hello React!</div>
    ), document.getElementById('app')); /public/index.html <div id="app"></div>
    <script src="./index.js"></script>
  • roadhog server

   

在package.json中配置:
"scripts": { "dev": "roadhog server" } npm run dev 启动客户端

react全家桶-服务端与客户端配置的更多相关文章

  1. 红帽学习笔记[RHCE]OpenLDAP 服务端与客户端配置

    目录 OpenLDAP 服务端与客户端配置 关于LDIF 一个LDIF基本结构一个条目 属性 Object的类型 服务端 安装 生成证书 生成默认数据 修改基本的配置 导入基础数据 关于ldif的格式 ...

  2. seata服务端和客户端配置(使用nacos进行注册发现,使用mysql进行数据持久化),以及过程中可能会出现的问题与解决方案

    seata服务端和客户端配置(使用nacos进行注册发现,使用mysql进行数据持久化),以及过程中可能会出现的问题与解决方案 说明: 之所以只用nacos进行了注册与发现,因为seata使用naco ...

  3. shadow服务端、客户端配置流程

    服务端 系统环境 CentOS 7 64位,由于系统自带python,shadowsocks服务端我们选择python版,过程如下 yum install python-setuptools & ...

  4. 综合架构之Rsync备份服务,服务端和客户端配置

    服务端配置(即备份服务器) ps:客户端配置见下方 配置一个新服务的步骤: 第一步:先将该服务下载 yum install -y rsync 第二步:编写服务配置文件 配置文件:/etc/rsyncd ...

  5. DHCP服务——服务端 和 客户端 配置

    转载注明出处:https://www.cnblogs.com/kelamoyujuzhen/p/9520341.html  实验环境 rhel-server-6.4-x86_64-dvd(ED2000 ...

  6. Linux Yum仓库介绍及服务端及客户端配置

    YUM服务器 适合在于内网使用,因为很多包需要国外的网站下载应用包,这样网络很不稳定 下载慢,所有为何不尝试搭建 自己内部的YUM服务器呢 YUM服务器搭建 一 创建yum仓库目录 #mkdir -p ...

  7. NFS服务端与客户端配置

    #首先确认系统中是否安装了对于的软件 rpm -qa|grep -i nfs #在有网络的情况下使用YUM安装NFS.rpcbind软件包 yum install lrzsz nmap tree do ...

  8. DNS服务——服务端 和 客户端 配置

    参考:Linux下DNS主从服务器搭建详解 前言 电脑经常会出现一些网络小毛病.有的时候,QQ能正常上网,但是网页却打不开.这种时候十有八九是DNS出问题了. QQ在DNS不可用的时候,可以跳过DNS ...

  9. PHP 文件上传服务端及客户端配置参数说明

    文件上传服务器端配置: ·file_uploads = On, 支持HTTP上传 ·upload_tmp_dir = , 临时文件保存的目录 ·upload_max_filesize=2M, 允许上传 ...

随机推荐

  1. Integer与int区别

    Integer与int的区别:估计大多数人只会说道两点,一开始我也不太清楚,Ingeter是int的包装类,int的初值为0,Ingeter的初值为null.但是如果面试官再问一下Integer i ...

  2. 第一个Netty程序

    netty就是一个高性能的NIO框架,用于java网络编程.下面说说思路: 服务端: 开启通道.设置网络通信方式.设置端口.设置接收请求的handler.绑定通道.最后关闭 客户端: 开启通道.设置网 ...

  3. C# http监听之Nancy.net

    通过winform或者是控制台应用程序监听http请求,之前使用的是微软的HttpListener,参考https://www.cnblogs.com/duanjt/p/5566336.html 然后 ...

  4. JS中如何生成全局变量

    JS中如何生成全局变量 一.总结 一句话总结:在函数内部,一般用var声明的为局部变量,没用var声明的一般为全局变量 在函数内没用var声明的一般为全局变量 1.js中的函数中的this指向的是谁? ...

  5. php如何控制客户端生成缓存

    php如何控制客户端生成缓存 一.总结 一句话总结:用http消息响应头中的Cache-Control来控制客户端缓存,说的是页面本身被客户端缓存,而不是重新生成的其它的非页面缓存 响应头Cache- ...

  6. Go语言学习之1 基本概念、环境搭建、第一个Go程序

    一.环境搭建 见我的这篇博客 https://www.cnblogs.com/xuejiale/p/10258244.html 二.golang语言特性1. 垃圾回收    1) 内存自动回收,再也不 ...

  7. idea javamaven项目 连接sqlserver 数据库方法

    这里用的是c3p0连接数据库 1.pom文件写法: <!-- 数据库连接池 --> <dependency> <groupId>com.mchange</gr ...

  8. InitializingBean和DisposableBean

    InitializingBean 记住一点:InitializingBean接口为bean提供了初始化方法的方式,它只包括afterPropertiesSet方法,凡是继承该接口的子类,在初始化bea ...

  9. Codefores 1151E Number of Components

    大意:给定n元素序列$a$, $1\le a_i \le n$, 定义函数$f(l,r)$表示范围在$[l,r]$以内的数构成的连通块个数, 求$\sum\limits_{i=1}^{n}\sum\l ...

  10. Runable和Thread

    Java多线程 java中有两种实现多线程的方式: 1. 一种是通过继承Thread类,同时重写run()方法.但是java中,只允许单继承,也就是一个类只能继承一个父类,使得该方式具有一定的局限性, ...