json-server是一个在前端本地运行,可以存储json数据的server(服务器),该服务器只支持 get 方法获取,不支持 post 方法获取,使用express工具可以使用post方法。

  Vue项目模拟服务器json-server的安装即使用:

    跟视频学习的时,需要在vue项目build目录下dev-server.js的文件中进行一系列配置,有的时候由于版本问题,找不到dev-server.js。下面用第二种方法,可以不用在dev-server年中进行配置:

    第一步:全局安装(在根目录中安装) npm install -g json-server

    在项目中新建db.json放在与package.json同级目录下,如图(没有报错的情况下进行第二步):

           

          db.json文件内容(注:json中一定要是对象形式 { } 开头的,不能是数组形式 [ ] 开头):

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

{

"getBoardList":[

{

"title":"开放产品",

"description":"开放产品是一款开放产品",

"saleout":false,

"id":"car"

},{

"title":"品牌营销",

"description":"品牌营销帮助你的产品更好的找到定位",

"saleout":false,

"id":"earth"

},{

"title":"使命必达",

"description":"使命必达快速迭代永远保持最前端的速度",

"saleout":false,

"id":"loud"

},{

"title":"勇攀高峰",

"description":"帮你勇攀高峰,到达事业的顶峰",

"saleout":false,

"id":"mounten"

}

]

}

    第二步:在项目中打开cmd使用      json-server --watch --port 3001 db.json   命令(注:这个cmd命令窗口是打开服务器的,不能关掉,否则页                面中不显示 json数据,另外运行项目的窗口也不能关掉),输出如图内容,证明服务器开启成功

           

    第三步:在浏览器中的输入模拟服务器地址:可看到如图所示:

             

    第四步:点开上面的json接口(或直接浏览器输入json内容地址),就可以看到json内容了:

           

    第五步:在根组件内获取json

           

json-server的简单使用的更多相关文章

  1. json server的简单使用(附:使用nodejs快速搭建本地服务器)

    作为前端开发人员,经常需要模拟后台数据,我们称之为mock.通常的方式为自己搭建一个服务器,返回我们想要的数据.json server 作为工具,因为它足够简单,写少量数据,即可使用. 安装 首先需要 ...

  2. json server服务器

    json文件可以理解为数据库 一.json-server快速搭建RESTAPI 安装: sudo cnpm install -g json-server 启动(使用): json-server指向js ...

  3. 接口神器之 Json Server 详细指南

    简介 json-server 是一款小巧的接口模拟工具,一分钟内就能搭建一套 Restful 风格的 api,尤其适合前端接口测试使用. 只需指定一个 json 文件作为 api 的数据源即可,使用起 ...

  4. json数据格式及json校验格式化工具简单实现

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, ...

  5. SQL Server里简单参数化的痛苦

    在今天的文章里,我想谈下对于即席SQL语句(ad-hoc SQL statements),SQL Server使用的简单参数化(Simple Parameterization)的一些特性和副作用.首先 ...

  6. android json解析及简单例子+Android与服务器端数据交互+Android精彩案例【申明:来源于网络】

    android json解析及简单例子+Android与服务器端数据交互+Android精彩案例[申明:来源于网络] android json解析及简单例子:http://www.open-open. ...

  7. apache ftp server的简单入门(java应用内嵌ftp server)

    Apache Ftp Server:(强调) Apache Ftp Server 是100%纯Java的FTP服务器软件,它采用MINA网络框架开发具有非常好的性能.Apache FtpServer ...

  8. apache ftp server的简单入门(数据库验证)

    apache的简单校验分为两种,一直是前面提到的properties的校验,具体参考:apache ftp server的简单入门(properties验证) 今天来说一种数据库的校验,这种方式在项目 ...

  9. .net序列化 - Newtonsoft(Json.Net)简单应用

    Newtonsoft.Json,一款.NET中开源的Json序列化和反序列化类库. Json.Net是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更加简 ...

  10. json:server 本地搭建

    做个记录, 第一步,我们新建一个文件夹. 第二步,打开文件夹,执行git,没有git可以下载一个.或者用命令行工具进入到这个文件夹! 第三步,初始化json  在git里执行npm init --ye ...

随机推荐

  1. Arrays.sort() VS Arrays.parallelSort()

    英文原文地址:Arrays.sort vs Arrays.parallelSort 作者:baeldung 翻译:高行行 1. 概述 我们都使用过 Arrays.sort() 对对象或原始数据类型数组 ...

  2. vue超简单加载字体方法,解决scss难加载字体的问题

    vue超简单加载字体方法,解决scss难加载字体的问题 scss在加载字体方面一直不太好用,需要繁杂的配置才能达到想要的效果,这里说一种非常简单的方法 在App.vue的style标签下引入字体文件后 ...

  3. 阿里开源服务发现组件 Nacos快速入门

    最近几年随着云计算和微服务不断的发展,各大云厂商也都看好了微服务解决方案这个市场,纷纷推出了自己针对微服务上云架构的解决方案,并且诞生了云原生,Cloud Native的概念. 云原生是一种专门针对云 ...

  4. SpringCloud之Ribbon(四)

    一:Ribbon是什么? Ribbon是Netflix发布的开源项目,主要功能是提供客户端的软件负载均衡算法,将Netflix的中间层服务连接在一起.Ribbon客户端组件提供一系列完善的配置项如连接 ...

  5. 聊聊HTTP请求那一些事_HttpWebRequest_一篇就够了

    ​最近工作比较忙,很久没有写东西了,今天抽点时间整体一下最近工作的一个知识点小结.http请求对我们来说一点都不模式,程序员的我们有可能天天就是和这一些打交道.无论是BS架构的程序,前后端的数据交互, ...

  6. Knative 简介

    原文地址:https://yq.aliyun.com/articles/658800

  7. c#数字图像处理(六)直方图均衡化

    直方图均衡化又称直方图修平,是一种很重要的非线性点运算.使用该方法可以加强图像的局部对比度,尤其是当图像的有用数据的对比度相当接近的时候.通过这种方法,亮度可以更好的在直方图上分布. 直方图均衡化的基 ...

  8. 初学者学Java常遇到的问题,我都给你回答了!

    前言 只有光头才能变强. 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y 春节在家刷知乎,看到了一个知乎的问题:<学 ...

  9. robotframework,移动端(小程序)自动化,滚动屏幕的方法

    场景描述: 小程序端定位元素有无法定位弹出层内容的问题(自动化工具只能识别到背景主层,无法识别到弹出层) 解决思路: 1.弹出层元素与背景主层元素位置一致,当点击出弹出层时,在定位背景主层即可定位到弹 ...

  10. 本地python3环境下运行报错CV2的问题

    如上图,执行脚本后,报找不到指定的模块的错误 解决方法: 1.import cv2提示"Dll load failed:找不到指定的模块" 解决方法:那卸载掉opencv-cont ...