{
"info": {
"grade": 2023,
"major": "数字媒体技术",
"class": 1,
"course": "Web前端开发",
"state": true,
"members": [
{
"id": 1,
"name": "张三"
},
{
"id": 2,
"name": "李四"
},
{
"id": 3,
"name": "王五"
}
]
}
}
| Item | Desc | |
|---|---|---|
| GET | 查询 | 获取数据 还可以使用 id 查询指定记录 |
/posts /posts/:id |
| POST | 新增|提交数据；会自动增加id，也可以提交时，手动指定 | /posts |
| PUT | 配合 id 使用，以覆盖 | 替换的方式修改数据 | /posts/:id |
| PATCH | 配合 id 使用，以更新 | 部分修改的方式修改数据 | /posts/:id |
| DELETE | 配合 id 使用，删除指定数据 | /posts/:id |
npm install json-server -g
npx json-server --watch data/students.json --port 3000
. 初始部分数据可能为空，后期通过操作如添加和修改逐步增加；具体数据根据需求添加和修改
{
"info": {
"grade": 2023,
"major": "数媒",
"class": 1,
"course": "Web前端开发"
},
"cont": [
{
"id": 2024020300,
"usn": "23054037",
"uavatar": "/avatar/avatar0.png",
"uname": "孔铠琳",
"ucredit": 1
},
{
"id": 2024020302,
"usn": "23054016",
"uavatar": "/avatar/avatar2.png",
"uname": "陈燕君",
"ucredit": 9
}
]
}
json-server 20240203.json
. 系统自动检测并给出接口的地址；这个地址就是提供给项目使用的 API 接口
PS E:\glpla.github.io> json-server 20240203.json JSON Server started on PORT :3000 Press CTRL-C to stop Watching 20240203.json... ♡( ◡‿◡ ) Index: http://localhost:3000/ Static files: Serving ./public directory if it exists Endpoints: http://localhost:3000/info http://localhost:3000/cont
. 按住CTRL单击对应的地址，可以在浏览器中访问其中的内容；或直接在浏览器输入对应的地址
. 默认端口3000；也可以指定端口
json-server 20240203.json --port=5173
const baseURL = 'http://localhost:3000'
// 或
// const baseURL = 'http://127.0.0.1:3000'
btn.addEventListener('click', () => {
// your code here
})
fetch(baseURL + '/cont')
.then(res => res.json())
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err);
})
.finally(() => {
console.log('get done');
})
fetch(baseURL + '/cont/2024020302')
fetch(baseURL + '/cont/' + id)
fetch(`${baseURL}/cont/${id}`)
btn.addEventListener('click', async () => {
const res = await fetch(`${baseURL}/cont`)
const data = await res.json()
console.log(data)
})
fetch(baseURL + '/cont', {
// Must
method: 'POST',
// Better way
// headers: {
// 'Content-Type': 'application/json'
// },
// Must
body: JSON.stringify({
usn: '20241126',
uname: 'glpla',
ucredit: 1
})
// Fail
// body: {
// usn: '20241127',
// uname: 'glpla1',
// ucredit: 1
// }
})
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
})
.finally(() => {
console.log('post done');
})
fetch(baseURL + '/cont/cd5c', {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
ucredit: 10
})
})
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
})
.finally(() => {
console.log('patch done');
})
fetch(baseURL + '/cont/8503', {
method: 'DELETE',
})
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
})
.finally(() => {
console.log('delete done');
})
onMounted(() => {
axios.get('http://127.0.0.1:5173/software')
.then(res => {
//赋值
})
})
onMounted(() => {
loadData()
})
func loadData(){
axios.get('http://127.0.0.1:5173/software')
.then(res => {
//赋值
})
}
<div class="wrap">
<template v-if="students.length">
<div class="item" v-for="(item, ind) in students" :key="item.id">
<div>{{ ind + 1 }}</div>
<div>{{ item.uid }}</div>
<div>{{ item.uname }}</div>
<div>
<span class="iconfont icon-iconfontshoucang" v-for="star in item.rank"></span>
</div>
<button @click="mod(item.id, item.rank)">增加</button>
</div>
</template>
<template v-else>数据为空</template>
</div>
function add() {
axios.post('http://127.0.0.1:5173/software', {
uid: uid.value,
uname: uname.value,
rank: rank.value
})
.then(res => {
loadData()
})
}
function mod(id, rank) {
axios.patch('http://127.0.0.1:5173/software/' + id, {
rank: rank + 1
})
.then(res => {
//更新完毕后，创新加载数据
loadData()
})
}
function del(id) {
axios.delete('http://127.0.0.1:5173/software/' + id)
.then(res => {
loadData()
})
}
wx.request({
url: 'http://127.0.0.1:3000/msg',
success:res=>{
console.log(res);
}
})
url: 'http://127.0.0.1:3000/user?id='+this.data.id
wx.request({
url: 'http://127.0.0.1:3000/msg',
method:'POST',
data:{
id:2,
uname:'nj'
},
success:res=>{
console.log(res);
}
})
wx.request({
url: 'http://127.0.0.1:3000/msg/'+e.currentTarget.dataset.id,
method: 'DELETE',
success: res => {
console.log(res);
},
fail: err => {
console.log(err);
},
complete: () => {
console.log('done log');
}
})