【vue】本地开发mock数据支持

项目离不开数据渲染的支持，为本地开发配置 数据  支持。

（一）方式一：安装JSON Server搭建mock数据的服务器

json Server 是一个创建 伪RESTful服务器的工具。

 

配置流程：

①项目安装json-server

   cnpm install -g json-server

②项目目录下新增mock文件夹，并在mock文件夹下 添加 db.json 数据文件

   db.json的内容为：

{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
],
"profile": {
"name": "typicode"
}
}

 

③在项目的 package.json 的 “scripts” 配置中添加如下语句：

"mock": "json-server --watch mock/db.json",
"mockdev": "npm run mock & npm run dev"


④完结步骤
1）运行启动mock服务器(通过安装json-server 搭建而成)          cnpm run mock 
2）访问mock数据的接口地址为                                http://localhost:3000/
3) 以上db.json中的第一级json对象被解析为独立的可访问路径，如下图：

4）以上各独立 json对象 的  访问路径/请求接口 则为 http://localhost:3000/对象名

------------------------------------------方式一 end------------------------------------------------

若命令 cnpm run mock & cnpm run dev  无法同时运行mock服务器和项目，可参照博文【vue】npm run mock & npm run dev 无法同时运行的解决 解决。