json-server与axios的简单使用
一、json-server的简单使用
1、安装
npm install -g json-server
2、新建json数据
- 新建一个文件夹
- 在此文件夹中新建db.json文件,数据如下所示
{
"posts": [
{
"id": 1, "title": "json-server", "author": "typicode" }
]
}
3、启动服务
在此文件位置下输入如下命令:
json-server --watch db.json
可点击该链接查看是否能正常使用。
4、接口规则-RESTful说明
接口地址 | 请求方式及 | 适用情况 |
---|---|---|
/posts | GET | 查询所有数据 |
/posts/id | GET | 查询单条数据 |
/posts | POST | 添加,提交的参数在请求体 {title,author};id为数字,每次添加会自动加1 |
/posts/id | DELETE | 删除 |
/posts/id | PUT | 修改 请求体{title,author} 全部修改 |
/posts/id | PATCH | 修改 请求体{title} 个别修改 |
二、axios部分使用
1、查询所有数据
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="../libs/bootstrap/css/bootstrap.min.css" />
<script src="../libs/vue.js"></script>
<script src="../libs/axios.min.js"></script