react全家桶-服务端与客户端配置
全家桶内装有:
- react - github
- react-router - github
- redux - github
- react-redux - github
- react-router-redux - github
- redux-saga - github
- immutable - github
- reselect - github
- antd - github
服务端:
json server
作为工具,支持CORS和JSONP跨域请求,支持GET, POST, PUT, PATCH 和 DELETE 方法,更提供了一系列的查询方法,如limit,order等。
npm install json-server -g 安装完成后可以用 json-server -h 命令检查是否安装成功
- 新建项目目录reactbox,并初始化
npm init
- 新建 mock/ 文件夹,及其下新建db.json
- 在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全家桶-服务端与客户端配置的更多相关文章
- 红帽学习笔记[RHCE]OpenLDAP 服务端与客户端配置
目录 OpenLDAP 服务端与客户端配置 关于LDIF 一个LDIF基本结构一个条目 属性 Object的类型 服务端 安装 生成证书 生成默认数据 修改基本的配置 导入基础数据 关于ldif的格式 ...
- seata服务端和客户端配置(使用nacos进行注册发现,使用mysql进行数据持久化),以及过程中可能会出现的问题与解决方案
seata服务端和客户端配置(使用nacos进行注册发现,使用mysql进行数据持久化),以及过程中可能会出现的问题与解决方案 说明: 之所以只用nacos进行了注册与发现,因为seata使用naco ...
- shadow服务端、客户端配置流程
服务端 系统环境 CentOS 7 64位,由于系统自带python,shadowsocks服务端我们选择python版,过程如下 yum install python-setuptools & ...
- 综合架构之Rsync备份服务,服务端和客户端配置
服务端配置(即备份服务器) ps:客户端配置见下方 配置一个新服务的步骤: 第一步:先将该服务下载 yum install -y rsync 第二步:编写服务配置文件 配置文件:/etc/rsyncd ...
- DHCP服务——服务端 和 客户端 配置
转载注明出处:https://www.cnblogs.com/kelamoyujuzhen/p/9520341.html 实验环境 rhel-server-6.4-x86_64-dvd(ED2000 ...
- Linux Yum仓库介绍及服务端及客户端配置
YUM服务器 适合在于内网使用,因为很多包需要国外的网站下载应用包,这样网络很不稳定 下载慢,所有为何不尝试搭建 自己内部的YUM服务器呢 YUM服务器搭建 一 创建yum仓库目录 #mkdir -p ...
- NFS服务端与客户端配置
#首先确认系统中是否安装了对于的软件 rpm -qa|grep -i nfs #在有网络的情况下使用YUM安装NFS.rpcbind软件包 yum install lrzsz nmap tree do ...
- DNS服务——服务端 和 客户端 配置
参考:Linux下DNS主从服务器搭建详解 前言 电脑经常会出现一些网络小毛病.有的时候,QQ能正常上网,但是网页却打不开.这种时候十有八九是DNS出问题了. QQ在DNS不可用的时候,可以跳过DNS ...
- PHP 文件上传服务端及客户端配置参数说明
文件上传服务器端配置: ·file_uploads = On, 支持HTTP上传 ·upload_tmp_dir = , 临时文件保存的目录 ·upload_max_filesize=2M, 允许上传 ...
随机推荐
- Integer与int区别
Integer与int的区别:估计大多数人只会说道两点,一开始我也不太清楚,Ingeter是int的包装类,int的初值为0,Ingeter的初值为null.但是如果面试官再问一下Integer i ...
- 第一个Netty程序
netty就是一个高性能的NIO框架,用于java网络编程.下面说说思路: 服务端: 开启通道.设置网络通信方式.设置端口.设置接收请求的handler.绑定通道.最后关闭 客户端: 开启通道.设置网 ...
- C# http监听之Nancy.net
通过winform或者是控制台应用程序监听http请求,之前使用的是微软的HttpListener,参考https://www.cnblogs.com/duanjt/p/5566336.html 然后 ...
- JS中如何生成全局变量
JS中如何生成全局变量 一.总结 一句话总结:在函数内部,一般用var声明的为局部变量,没用var声明的一般为全局变量 在函数内没用var声明的一般为全局变量 1.js中的函数中的this指向的是谁? ...
- php如何控制客户端生成缓存
php如何控制客户端生成缓存 一.总结 一句话总结:用http消息响应头中的Cache-Control来控制客户端缓存,说的是页面本身被客户端缓存,而不是重新生成的其它的非页面缓存 响应头Cache- ...
- Go语言学习之1 基本概念、环境搭建、第一个Go程序
一.环境搭建 见我的这篇博客 https://www.cnblogs.com/xuejiale/p/10258244.html 二.golang语言特性1. 垃圾回收 1) 内存自动回收,再也不 ...
- idea javamaven项目 连接sqlserver 数据库方法
这里用的是c3p0连接数据库 1.pom文件写法: <!-- 数据库连接池 --> <dependency> <groupId>com.mchange</gr ...
- InitializingBean和DisposableBean
InitializingBean 记住一点:InitializingBean接口为bean提供了初始化方法的方式,它只包括afterPropertiesSet方法,凡是继承该接口的子类,在初始化bea ...
- 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 ...
- Runable和Thread
Java多线程 java中有两种实现多线程的方式: 1. 一种是通过继承Thread类,同时重写run()方法.但是java中,只允许单继承,也就是一个类只能继承一个父类,使得该方式具有一定的局限性, ...