在很多前后端分离的项目中，前后端同时开工，当前段项目已完成部分后，就需要获取数据来做部分调试，但是这个时候后台服务器往往还没有完成，这个时候就需要我们自己搭建一个虚拟的后台服务器，无意中发现一款好用的"神器"，我把自己搭建服务器和进行一些增删改查操作的具体步骤记录了下来，以供大家参考；
第一步 利用json-server搭建虚拟服务器
1.新建一个文件夹jsonServer,并在根目录下生成package.json文件；
package.json文件可通过以下命令来生成
npm init2.安装json-server
npm install json-server -g执行如下命令，检查json-server是否安装成功
json-server -h如果安装成功，控制台会出现如下：
E:\JsonServer>json-server -h
index.js [options] <source>
Options:
--config, -c Path to config file [default: "json-server.json"]
--port, -p Set port [default: 3000]
--host, -H Set host [default: "localhost"]
--watch, -w Watch file(s) [boolean]
--routes, -r Path to routes file
--middlewares, -m Paths to middleware files [array]
--static, -s Set static files directory
--read-only, --ro Allow only GET requests [boolean]
--no-cors, --nc Disable Cross-Origin Resource Sharing [boolean]
--no-gzip, --ng Disable GZIP Content-Encoding [boolean]
--snapshots, -S Set snapshots directory [default: "."]
--delay, -d Add delay to responses (ms)
--id, -i Set database id property (e.g. _id) [default: "id"]
--foreignKeySuffix, --fks Set foreign key suffix (e.g. _id as in post_id)
[default: "Id"]
--quiet, -q Suppress log messages from output [boolean]
--help, -h Show help [boolean]
--version, -v Show version number [boolean]
Examples:
index.js db.json
index.js file.js
index.js http://example.com/db.json
https://github.com/typicode/json-server
3.在根目录下创建db.json文件，此文件保存前端测试需要的数据文件；
我文件内只保存了部分测试数据，如下；
{
"users": [
{
"id": 6985851,
"username": "lnx132133",
"phone": "13212345678",
"mail": "[email protected]",
"gender": "女",
"department": "研发三部",
"avatar": "../../../static/img/avatar.jpg",
"character": "普通用户",
"remarks": "张九"
},
{
"id": 6985852,
"username": "dsfa132133",
"phone": "13312345678",
"mail": "[email protected]",
"gender": "男",
"department": "研发二部",
"avatar": "../../../static/img/avatar.jpg",
"character": "管理员",
"remarks": "李明"
},
{
"id": 6985424,
"username": "dsdfa132133",
"phone": "13412345678",
"mail": "[email protected]",
"gender": "男",
"department": "研发二部",
"avatar": "../../../static/img/avatar.jpg",
"character": "管理员",
"remarks": "刘震"
},
{
"id": 6985754,
"username": "dsfg132133",
"phone": "13512345678",
"mail": "[email protected]",
"gender": "女",
"department": "客服部",
"avatar": "../../../static/img/avatar.jpg",
"character": "管理员",
"remarks": "徐梅"
},
{
"id": 6985132,
"username": "dsfa132133",
"phone": "13612345678",
"mail": "[email protected]",
"gender": "男",
"department": "市场部",
"avatar": "../../../static/img/avatar.jpg",
"character": "管理员",
"remarks": "张强"
},
{
"id": 6985715,
"username": "dsfa132133",
"phone": "13712345678",
"mail": "[email protected]",
"gender": "男",
"department": "研发二部",
"avatar": "../../../static/img/avatar.jpg",
"character": "管理员",
"remarks": "宋杰"
},
{
"id": 6985741,
"username": "dsfa132133",
"phone": "13812345678",
"mail": "[email protected]",
"gender": "男",
"department": "研发二部",
"avatar": "../../../static/img/avatar.jpg",
"character": "普通用户",
"remarks": "何宇"
},
{
"id": 69858965,
"username": "dsfa132133",
"phone": "13912345678",
"mail": "[email protected]",
"gender": "男",
"department": "研发二部",
"avatar": "../../../static/img/avatar.jpg",
"character": "普通用户",
"remarks": "强东"
},
{
"id": 6988959,
"username": "lnx132199",
"phone": "13212345678",
"mail": "[email protected]",
"gender": "男",
"department": "研发一部",
"avatar": "../../../static/img/avatar.jpg",
"character": "普通用户",
"remarks": "张八"
},
{
"id": "6988960",
"username": "lnx132199",
"phone": "13212345678",
"mail": "[email protected]",
"gender": "男",
"department": "研发一部",
"avatar": "../../../static/img/avatar.jpg",
"character": "普通用户",
"remarks": "张八"
}
]
}4.启动josn-server服务器
在控制台执行如下命令
json-server --watch db.json执行成功后的结果
\{^_^}/ hi!
Loading db.json
Done
Resources
http://localhost:3000/users
Home
http://localhost:3000
Type s + enter at any time to create a snapshot of the database
Watching...第二步 对数据进行增删改查操作
json-server支持的操作方法如下
GET /users--------------------------------------------------------------------------------------------------------------------------获取列表
GET /users/id ------------------------------------------------------------------------------------------------------------------------获取指定id的数据
POST /users -------------------------------------------------------------------------------------------------------------------------新增一个数据对象
PUT /users/id------------------------------------------------------------------------------------------------------------------------- 更新指定id对象的数据
DELETE /users/id -------------------------------------------------------------------------------------------------------------------删除指定id的数据
注：篇幅限制，在此就不一一介绍，需要详细了点这里→https://www.npmjs.com/package/json-server
1.查询数据---GET /users
//请求用户数据
$.ajax({
type:"GET",
url:"http://localhost:3000/users",
dataType:"json",
success:function (data) {
console.log(data);
},
error:function (err) {
console.error(err);
}
});输出结果：
2.获取指定id的数据---GET /users/id
//获取指定用户
$("#getUser").click(function(){
$.ajax({
type:"GET",
url:"http://localhost:3000/users/6985715",
dataType:"json",
success:function(data){
console.log(data);
},
error:function(err){
console.error(err)
}
})
});输出结果：
3.新增用户数据-------POST /users
//增加用户数据
$("#addUser").click(function(){
var newUser={
"id": 6988960,
"username": "lnx132199",
"phone": "13212345678",
"mail": "[email protected]",
"gender": "男",
"department": "研发一部",
"avatar": "../../../static/img/avatar.jpg",
"character": "普通用户",
"remarks": "张八"
};
$.ajax({
type:"POST",
url:"http://localhost:3000/users",
data:newUser,
success:function(data){
console.log("添加成功");
},
error:function(err){
console.error(err)
}
})
});结果：
查看db.json文件中已经有了新增的数据
4.更改指定对象数据------PUT /users/id
//修改用户数据
$("#updateUser").click(function(){
var updateuser={
"id": 6985851,
"username": "lnx132133",
"phone": "13212345678",
"mail": "[email protected]",
"gender": "男",
"department": "研发四部",
"avatar": "../../../static/img/avatar.jpg",
"character": "普通用户",
"remarks": "刘工"
};
$.ajax({
type:"PUT",
url:"http://localhost:3000/users/6985851",
data:updateuser,
success:function(data){
console.log(data)
},
error:function(err){
console.error(err)
}
})
});控制台输出结果：
查看db.json文件，指定用户的信息也已经更改过来了；
5.删除指定用户----------DELETE /users/id
//删除用户
$("#delUser").click(function(){
var delUserId=6988960;
$.ajax({
type:"DELETE",
url:"http://localhost:3000/users/"+delUserId,
dataType:"json",
success:function(data){
console.log(data)
},
error:function(err){
console.error(err)
}
})
})执行完删除指定用户指令后，会返回一个空对象；
查看db.json文件发现指定id 的对象已经删除
以上就是使用json-server做数据虚拟操作的全部步骤，我最近还在更加深入的学习，学习完成后再进行更新；