vue2.0——用户管理系统01

这节课教大家如何搭建一个本地数据接口

{JSONPlaceholder}

请访问地址：https://jsonplaceholder.typicode.com/

好了不多说废话了，开始吧！

第一步：搭建一下JSON Server本地接口，并实现数据增删改查

1.1 安装JSON Server，进入终端

win系统：cnpm install -g json-server

mac系统：sudo cnpm install -g json-server

1.2 在电脑任意盘符下创建一个文件夹：

名字：JSONSERVER

1.3 打开终端进入JSONSERVER文件夹路径下，安装插件

cnpm init（回车）

一直 回车之后，文件夹会多一个package.json的配置文件

继续安装：cnpm i json-server --save

安装成功之后，会在项目根文件夹下多一个node_modules的插件文件夹，而且也会在pacckage.json中多了一行配置信息

1.4 配置package.json的启动方式

复制： json-server --watch db.json

拷贝到package.json文件中的第7行，代码如下：

"scripts": { "json:server": "json-server --watch db.json" },

1.5 在项目根目录下创建一个db.json文件

json文件的名字可以任意起，但是记得同步package.json文件名一致就可以

//------------------------复制下面的代码到db.json文件中---------------------------------------

{ "users":[ { "name":"TestName1", "phone":"333-444-555", "email":"[email protected]", "id":1, "age":30, "companyId":1 }, { "name":"TestName2", "phone":"333-444-555", "email":"[email protected]", "id":2, "age":35, "companyId":2 },{ "name":"TestName3", "phone":"333-444-555", "email":"[email protected]", "id":3, "age":40, "companyId":3 },{ "name":"TestName4", "phone":"333-444-555", "email":"[email protected]", "id":4, "age":46, "companyId":3 } ], "companies":[ { "id":1, "name":"apple", "description":"apple is good" }, { "id":2, "name":"Microsoft", "description":"Microsoft is good" }, { "id":3, "name":"Google", "description":"Google is good" } ] }

//---------------------------------------------------------------------------------------------------

在json文件里需要注意：必须是双引号，单引号会报错

1.6 在终端，还是在JSONSERVER文件路径中执行命令，就启动了。

npm run json:server

1.7 在终端就会提示出一下内容，在地址栏上输入下面的地址就会出现接口的具体内容：

Resources

http://localhost:3000/users

http://localhost:3000/companies

Home

http://localhost:3000

以上就是访问之后，在浏览器呈现的样式，接口就搭建好了，恭喜大家！

下一节课：我们会学习如何去请求这些接口，加油！

特别说明：

使用说明地址：https://github.com/typicode/json-server

启动并监听它： json-server --watch db.json