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

(一)方式一:安装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 无法同时运行的解决 解决。

【vue】本地开发mock数据支持的更多相关文章

  1. 使用node.js + json-server + mock.js 搭建本地开发mock数据服务

    在开发过程中,前后端不论是否分离,接口多半是滞后于页面开发的.所以建立一个REST风格的API接口,给前端页面提供虚拟的数据,是非常有必要的.对比过多种mock工具后,我最终选择了使用 json se ...

  2. vue-cli 本地开发mock数据使用方法

    vue-cli 中可以通过配置 proxyTable 解决开发环境的跨域问题,具体可以参考这篇文章: Vue-cli proxyTable 解决开发环境的跨域问题 如果后端接口尚未开发完成,前端开发一 ...

  3. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  4. 在vue项目中mock数据

    第一步:安装: 在命令行中执行: npm install mockjs; 第二步:定义index.js文件 我们新建一个mock文件夹,此文件夹中建一个index.js文件:在index.js中输入以 ...

  5. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  6. vue 本地开发时使用localhost与ip访问

    修改config文件夹下面的index.js配置,将localhost改为0.0.0.0就可以了.用ip,127.0.0.1,localhost均行 host: '0.0.0.0', // can b ...

  7. Vue.js的后端数据支持:使用Express建立app, 并使用MongoDB数据库。

    需要用到的backed tech stack: Node: JavaScript on the server/backend. That's basically what it is, but mor ...

  8. vue-cli项目中怎么mock数据

    在vue项目中, mock数据可以使用 node 的 express模块搭建服务 1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data ...

  9. 循序渐进BootstrapVue,开发公司门户网站(5)--- 使用实际数据接口代替本地Mock数据

    在我们开发一些门户网站功能的时候,有时候我们需要快速的创建数据模型来进行数据展示,因为数据结构可能处于不断的修正变化之中,因此服务端的接口我们可以暂时不开发,当我们基本完成数据结构和界面展示的时候,就 ...

随机推荐

  1. 百万级数据 MySQL处理(转)

    转自 http://www.cnblogs.com/win7xt/p/3156334.html 使用MySQL处理百万级以上数据时,不得不知道的几个常识   最近一段时间参与的项目要操作百万级数据量的 ...

  2. Asp.net MVC 移除不用的视图引擎

    Asp.net MVC 默认提供两个视图引擎,分别为: WebFormViewEngine 和 RazorViewEngine.MVC在查找视图时,会按照指定的顺序进行查找.当我们的MVC程序未找到相 ...

  3. redis 迭代命令SCAN、SSCAN、HSCAN、ZSCAN

    SCAN 命令用于迭代当前数据库中的数据库键.SSCAN 命令用于迭代集合键中的元素.HSCAN 命令用于迭代哈希键中的键值对.ZSCAN 命令用于迭代有序集合中的元素(包括元素成员和元素分值). S ...

  4. python匿名函数 高阶函数 内置函数 文件操作

    1.匿名函数 匿名就是没有名字 def func(x,y,z=1): return x+y+z 匿名 lambda x,y,z=1:x+y+z #与函数有相同的作用域,但是匿名意味着引用计数为0,使用 ...

  5. ubuntu安装zeromq

    官网地址:http://zeromq.org/ ubuntu下zmq安装 (1)下载:wget http://download.zeromq.org/zeromq-4.1.4.tar.gz (2)解压 ...

  6. JBoss jmx-console中的秘密

    JBoss jmx-console中的秘密 https://wenku.baidu.com/view/fe196f047cd184254b35351d.html

  7. ASP.Net WebAPI的返回值

    Asp.Net WebAPI服务函数的返回值主要可以分为void.普通对象.HttpResponseMessag.IHttpActionResult e四种,本文这里简单的介绍一下它们的区别. 一.返 ...

  8. Linux的Transparent Hugepage与关闭方法

    Transparent HugePages是在运行时动态分配内存的,而标准的HugePages是在系统启动时预先分配内存,并在系统运行时不再改变. 因为Transparent HugePages是在运 ...

  9. 转: SSH框架总结(框架分析+环境搭建+实例源码下载)

    原:http://blog.csdn.net/shan9liang/article/details/8803989 首先,SSH不是一个框架,而是多个框架(struts+spring+hibernat ...

  10. [翻译] M13ProgressSuite

    M13ProgressSuite https://github.com/Marxon13/M13ProgressSuite A set of classes used to display progr ...