Vue+ElementUI实现简单的用户管理系统（一）：使用JsonServer模拟接口

我这里没有写后台题接口，而是使用了JsonServer模拟接口和数据。GitHub地址：https://github.com/typicode/json-server，可以按照里面的教程进行学习。

1）新建一个文件夹，cd进去，npm init
2）npm install json-server --save
3）新建一个db.json文件，写入以下内容：

{
  "users": [
    {
      "name": "Mary",
      "phone": "233345",
      "email": "[email protected]",
      "desc": "wq3rdf",
      "id": 1
    },
    {
      "name": "mike",
      "id": 3,
      "companyId": 3,
      "phone": "40098",
      "email": "[email protected]"
    },
    {
      "name": "amy",
      "id": 4,
      "companyId": 1,
      "phone": "338976",
      "email": "[email protected]"
    },
    {
      "name": "hou",
      "id": 5,
      "companyId": 2,
      "phone": "000000",
      "email": "[email protected]"
    },
    {
      "name": "xuan",
      "id": 6,
      "companyId": 3,
      "phone": "87654",
      "email": "[email protected]"
    },
    {
      "name": "idnsl",
      "phone": "ispon",
      "email": "osb",
      "desc": "pons",
      "id": 7
    },
    {
      "name": "凌凌",
      "phone": "158-1",
      "email": "lingzi.k2qq.com",
      "desc": "123456",
      "id": 11
    },
    {
      "name": "123",
      "phone": "234",
      "email": "345",
      "desc": "456",
      "id": 12
    },
    {
      "name": "79u",
      "phone": "y8934`9",
      "email": "i9wy83n",
      "desc": "9hgfi2",
      "id": 13
    },
    {
      "name": "12345",
      "phone": "r2r",
      "email": "3345",
      "desc": "23r4g",
      "id": 14
    },
    {
      "name": "eowqn",
      "phone": "odnoesi",
      "email": "onsoei",
      "desc": "osienv",
      "id": 15
    },
    {
      "name": "wqxc",
      "phone": "asec",
      "email": "awfc",
      "desc": "qwedfc",
      "id": 16
    },
    {
      "name": "sdwo3iu",
      "phone": "oaswien",
      "email": "eoiqwn",
      "desc": "odjwoi3e",
      "id": 17
    }
  ],
  "company": [
    {
      "id": 1,
      "name": "apple"
    },
    {
      "id": 2,
      "name": "microsoft"
    },
    {
      "id": 3,
      "name": "vue"
    }
  ]
}

4）在package.json的scripts节点里填入以下内容：

"json:server": "json-server --watch db.json"

5）在控制台输入

npm run json:server

然后在浏览器输入http://localhost:3000/users， 就可以看到刚刚填写的信息了。