目录
打开文件夹发现多一个文件。这是上一步要输入的内容，你都可以更改。如果上一步忘记了，记得把名字改成其他的，别叫json-server。
刷新发现多了一个json-server依赖，版本为0.14.2。
本次系列实践以腾讯课堂米斯特吴老师的Vue实战项目(后台用户管理系统)课程为指导。
安装全局的json—server
创建空文件夹
下载插件到文件夹，一直回车就行了。
打开文件夹发现多一个文件。这是上一步要输入的内容，你都可以更改。如果上一步忘记了，记得把名字改成其他的，别叫json-server。
安装局部的json-server包。
刷新发现多了一个json-server依赖，版本为0.14.2。
启用名和启用方式。
创建db.json
db.json
{
"users": [
{
"name": "Jane",
"phone": "15687898746",
"email": "[email protected]",
"education": "本科",
"graduationschool": "云南大学",
"profession": "律师",
"profile": "热爱生活，生活爱我",
"id": 1
},
{
"name": "Kang",
"phone": "123564",
"email": "[email protected]",
"education": "专科",
"graduationschool": "北京大学",
"profession": "无",
"profile": "无",
"id": 2
}
],
"companies": [
{
"id": 1,
"name": "Apple",
"description": "good company"
},
{
"id": 2,
"name": "Adobe",
"description": "good company"
},
{
"id": 2,
"name": "Microsoft",
"description": "good company"
},
{
"id": 3,
"name": "google",
"description": "good company"
}
]
}启动json-server,并在浏览器里打开。
访问远端的接口。记得要先关闭刚才打开的端口。
相关文件内容
package.json
{
"name": "jserver",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"myjserver": "json-server --watch db.json",
"myJsonServerremote": "json-server https://jsonplaceholder.typicode.com/db"
},
"author": "",
"license": "ISC",
"dependencies": {
"json-server": "^0.14.2"
}
}
操作过程总结
- D:\workplace\vue\json-server>npm init
- D:\workplace\vue\json-server>npm install json-server --save
- D:\workplace\vue\json-server>npm run myjserver
各种操作总结
get方法：
//获取所有的用户信息
http://localhost:3000/users
//获取id为1单个用户信息
http://localhost:3000/users/1
//获取公司的所有信息
http://localhost:3000/companies
//获取公司为3的用户
http://localhost:3000/companies/3/users
//名字为Adobe的公司
http://localhost:3000/companies?name=Adobe
//根据多个名字获取信息
http://localhost:3000/companies?name=Adobe&name=Apple
//一页中的两个数据
http://localhost:3000/companies?_page=1&_limit=2
//升序排序
http://localhost:3000/companies?_sort=name&_order=asc
//获取年龄范围内的数据
http://localhost:3000/users?age_get=29&age_lte=40
//模糊搜索用户信息
http://localhost:3000/users?q=a
其他：
相关链接
【1】米斯特吴老师的腾讯课堂课程。