react 项目实战(一)创建项目 及 服务端搭建

1.安装

React社区提供了众多的脚手架,这里我们使用官方推荐的create-react-app

//安装脚手架
npm install -g create-react-app
//生成并运行项目
create-react-app my-app 
cd my-app
npm start

注:create-react-app 脚手架默认隐藏 config 文件夹,需要通过

npm run eject
npm i

导出可配置的模板

2.服务端搭建

这里我们借助json-server这个工具快速搭建后台管理系统的服务端程序:

  • 首先执行npm i json-server -g把json-server作为全局工具安装
  • 新建一个项目目录(后面文中所有的路径根目录都表示该项目目录)
  • 在根目录中执行npm init初始化一个npm项目(会有一些项目配置需要你输入,一直敲回车就行了)
  • 新建/server目录用于放置服务端的文件
  • 新建/server/db.json文件作为服务端的数据库文件
  • /server/db.json文件中写入以下数据:
{
  "user": [
    {
      "id": 10000,
      "name": "一韬",
      "age": 25,
      "gender": "male"
    },
    {
      "id": 10001,
      "name": "张三",
      "age": 30,
      "gender": "female"
    }
  ],
  "book": [
    {
      "id": 10000,
      "name": "JavaScript从入门到精通",
      "price": 9990,
      "owner_id": 10000
    },
    {
      "id": 10001,
      "name": "Java从入门到放弃",
      "price": 1990,
      "owner_id": 10001
    }
  ]
}
  • 最后在/server目录执行json-server db.json -w -p 8000

现在打开浏览器,访问网址http://localhost:8000

点击Routes下面的user会跳转到http://localhost:8000/user,可以看到我们之前在db.json中写入的user数组:

[
  {
    "id": 10000,
    "name": "一韬",
    "age": 25,
    "gender": "male"
  },
  {
    "id": 10001,
    "name": "张三",
    "age": 30,
    "gender": "female"
  }
]

访问http://localhost:8000/book同上

我们在db.json文件中写入了标准的JSON格式数据,这个json里有一个user数组和一个book数组,这就告诉json-server,我们的数据库里有一个名为user的”表”和一个名为book的”表”,并且表里的数据为xxx,然后json-server就会启动服务器,并且以每个”表”为单位为我们注册一系列标准的RESTFull形式的API接口(路由),以user为例:

  • [GET] /user #获取用户列表的接口
  • [GET] /user/:id #获取单个用户的接口
  • [POST] /user #新增用户的接口
  • [PUT] /user/:id #修改用户的接口
  • [DELETE] /user/:id #删除用户的接口

在获取列表的接口中也可以追加查询参数,来限定查询的结果,比如:

  • 查询所有男性用户: /user?gender=male
  • 查询年龄大于等于20并且小于等于29的用户:/user?age_gte=20&age_lte=29

此外还有分页、排序、匹配、关系查询等查询方式,可以在这里查看更多

至此我们就拥有了一套强大的数据接口。

原文地址:https://www.cnblogs.com/crazycode2/p/8462242.html