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， 就可以看到剛剛填寫的信息了。