码迷,mamicode.com
首页 > 其他好文 > 详细

react全家桶-1

时间:2017-09-08 15:01:12      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:命令   mit   安装完成   use   var   news   文件夹   table   cti   

全家桶内装有:

服务端:

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 3000

    或者:

    在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中的第一级)

操作数据:
1,Get查询:
jQuery.get 或 fecth({method: "get"}) 访问http://localhost:3000/news

2,Post:push一条新数据
$.ajax({
    type: post,
    url: http://localhost:3000/news,
    data: {
      "id": 11,
        ...
    }
  }
)

3,PUT:对数据进行修改(id为1)
$.ajax({
    type: put,
    url: http://localhost:3000/news/1,
    data: {
      "title": "aaa",
       ...
    }
  }
)

4,[DELETE] /user/:id #删除 等

json server 也可以使用动态数据 

# /mock/db.js

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

 

react全家桶-1

标签:命令   mit   安装完成   use   var   news   文件夹   table   cti   

原文地址:http://www.cnblogs.com/avidya/p/7494113.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!