json-server

json-server

mock数据的工具(模拟接口)

1、安装(npm i json-server -g)
2、json-server --version查看版本号
3、安装axios(npm i axios )
4、更改和启动mock端口,并将此接口提供出来
json-server mock/data.json --port 4000 -w
（-w是修改json不重启）

请求方式(添加和修改需要设置请求头)

GET 请求数据列表
localhost:3000/users
GET 请求指定ID的数据

localhost:3000/users/1
GET 请求指定字段值的数据

localhost:3000/users?name=李四&age=15
GET 数据分页

localhost:3000/users?_page=1&_limit=2
GET 数据排序

localhost:3000/users?_sort=age&_order=asc
asc 升序 desc 降序
GET 区间查询

localhost:3000/users?age_gte=30&age_lte=40
GET 搜索

localhost:3000/users?q=张三
GET 关联查询

localhost:3000/companies/1/users
POST 添加数据

localhost:3000/users
Headers:{ Content-Type:'application/json' }
body -> raw
{
    "name": "赵六",
    "age": 50,
    "companyId": 3
}
delete 删除数据

localhost:3000/users/1
patch 更新数据

localhost:3000/users/3
Headers:{ Content-Type:'application/json' }
body -> raw
{
    "age": 100
} 

实例代码：

import React, { Component } from 'react'
import axios from 'axios'
export default class index extends Component {
constructor(props) {
super(props)
this.state = {
name: '',
age: 0,

list: [],
}
}
componentDidMount() {
this.getData()
}
getData() {
axios.get("http://localhost:8081/list").then((res) => {
console.log(res.data)
this.setState({
list: res.data
})
})
}
confirm = (e) => {
if (e.keyCode === 13)
this.add()
}

add = () => {  //添加数据
let { name, age } = this.state;
if (this.state.name === "") return; //排除空值
axios.post("http://localhost:8081/list", {
name, age
}, {
"headers": {
"Content-type": "application/json"
}
}).then(() => {  //写入成功
this.getData();  //再次请求新的数据
})


}
del = (id) => {


axios.delete("http://localhost:8081/list/" + id).then(() => {  //写入成功
this.getData();  //再次请求新的数据
})
}
modify = (item) => {
let newValue = prompt('修改', item.name + ',' + item.age)
// console.log(newValue)
var arr = newValue.split(',')
// console.log(arr)
axios.patch("http://localhost:8081/list/" + item.id, {
name: arr[0],
age: arr[1]
},
{
headers: {
    "content-type": "application/json"
}
}
).then((res) => {
if (res.status === 200) {
this.getData()
}
})
}
find = () => {
axios.get("http://localhost:8081/list?name_like=" + this.state.name).then((res) => {
if (res.status === 200) {
this.setState({
    list: res.data
})
}
})
}
render() {
let { name, age, list } = this.state
return (
<div>
<input id="name" type="text" value={name} onChange={this.go} onKeyUp={this.confirm} />
<input id="age" type="number" value={age} onChange={this.go} onKeyUp={this.confirm} />
<ul>
    {
        list.map((item) => {
            return <li key={item.id}>{item.name}{item.age}{item.id}
                <button onClick={this.del.bind(this, item.id)}>删除</button>
                <button onClick={this.modify.bind(this, item)}>修改</button>
            </li>

        })
    }
</ul>
<button onClick={this.add}>添加</button>
<button onClick={this.find}>查找</button>

</div>
)
}
go = (e) => {
this.setState({
[e.target.id]: e.target.value
})
}

}

配置文件的路径
1、vue里面是Vue.config
2、项目目录下/node_modules/react-scripts/config/webpackDevServer.config.js
proxy:{
"/weather":{
target:"http://www.weather.com.cn",
changeOrigin:true,
"pathRewrite":{
"^/weather":"/"
}
}
},

弹射 eject
yarn eject 不能撤销
如果弹射后出错，重装依赖