Vue使用json-server来进行后端数据模拟

正开发过程中 前后端分离或者不分离 ,接口多半是之后与页面的开发 ,所以建立rest的APL的接口 给前端提供虚拟的数据是非常必要的 所以这里我使用了json-server作为工具,支持CORS和JSONP跨域请求,支持GET, POST, PUT, PATCH 和 DELETE 方法,更提供了一系列的查询方法,如limit,order等,接下来我把我自己的上使用心写成文档

安装

首先必须有node环境(都用到json-server一定会有node环境吧)然后全局安装json-server

npm install json-server -g

安装完成后检查是否全局安装成功

G:\demo\JavaScript\Vue\Vue one\project\my-project\Vue_two\my-project>json-server -h
index.js [options] <source>

Options:
  --config, -c               Path to config file   [default: "json-server.json"]
  --port, -p                 Set port                            [default: 3000]
  --host, -H                 Set host                       [default: "0.0.0.0"]
  --watch, -w                Watch file(s)                             [boolean]
  --routes, -r               Path to routes file
  --middlewares, -m          Paths to middleware files                   [array]
  --static, -s               Set static files directory
  --read-only, --ro          Allow only GET requests                   [boolean]
  --no-cors, --nc            Disable Cross-Origin Resource Sharing     [boolean]
  --no-gzip, --ng            Disable GZIP Content-Encoding             [boolean]
  --snapshots, -S            Set snapshots directory              [default: "."]
  --delay, -d                Add delay to responses (ms)
  --id, -i                   Set database id property (e.g. _id) [default: "id"]
  --foreignKeySuffix, --fks  Set foreign key suffix (e.g. _id as in post_id)
                                                                 [default: "Id"]
  --quiet, -q                Suppress log messages from output         [boolean]
  --help, -h                 Show help                                 [boolean]
  --version, -v              Show version number                       [boolean]

Examples:
  index.js db.json
  index.js file.js
  index.js http://example.com/db.json

https://github.com/typicode/json-server

在项目根目录创建一个db.json的目录,然后写入信息

{
  "api": [
    {
      "text": "数据统计",
      "link": "#",
      "hot": true
    },
    {
      "text": "数据检测",
      "link": "#",
      "hot": true
    },
    {
      "text": "流量分析",
      "link": "#",
      "hot": true
    },
    {
      "text": "广告发布",
      "link": "#",
      "hot": false
    }
  ]
}

在package.json里面的scripts里面加一行命令

   "json": "json-server db.json --port 3003"

在项目目录执行命令

npm run json

在bash里面会看到这样的界面

> [email protected] json g:\demo\JavaScript\Vue\Vue one\project\my-project\Vue_two\my-project
> json-server db.json --port 3003

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3003/api

  Home
  http://localhost:3003

  Type s + enter at any time to create a snapshot of the database

恭喜启动成功!

这时候进入网页进行访问

这时候就可以进行访问了

http://localhost:3003/api

可以看到之前写的json串

到此json-server启动完毕

调用的代码是这样的

this.$http.get(‘http://localhost:3003/api‘)
      .then((data) => {
        console.log(data.body)
      }, () => {
        console.log(‘这里是用了vue-source,后端没有接口‘)
      })

页面初始化就可以看到数据 完成

原文地址:https://www.cnblogs.com/wuvkcyan/p/8858104.html

时间: 2024-11-05 18:02:49

Vue使用json-server来进行后端数据模拟的相关文章

利用jQuery传送json格式的字符串,后端用ashx文件来接收

在Default.aspx里面,我们会透过javascript建立两个物件,分别有Name和Age的属性,再透过Array的方式,将这两个物件塞到Array里面去.使用Ajax内建的$.ajax API,我们可以把url,type,data,sucess等几个属性先设定好,其中要注意到当我们想透过json格式来传递资料的时候,我们可以用JSON.stringify()的方法来把想要传送的阵列资料先转换成json格式. 1 <%@ Page Language="C#" AutoEv

关于vue中JSON.parse(JSON.stringify(...))使用深拷贝问题

一般我们单独用JSON.parse()或JSON.stringify() 今天在学vue看到JSON.parse(JSON.stringify(...))的用法,这里研究一下: 首先分别说下他们的用法: JSON.parse()  是将字符串中的对象解析出来 例:  var str = "{'name':'huahua','age':'22'}";  JSON.parse(str); var obj = {name:"hua",age: 26};  JSON.str

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

作为前端开发人员,经常需要模拟后台数据,我们称之为mock.通常的方式为自己搭建一个服务器,返回我们想要的数据.json server 作为工具,因为它足够简单,写少量数据,即可使用. 安装 首先需要安装nodejs,建议使用最新版本.然后全局安装json server. npm install json-server -g 安装完成后可以用 json-server -h 命令检查是否安装成功,成功后会出现json-server相关的参数选项. 运行 安装完成后,可以在任一目录下建立一个 xxx

nodeJS(express4.x)+vue(vue-cli)构建前后端分离详细教程

好想再回到大学宿舍,当时床虽小,房随小,但是心确是满的 ----致  西安工程大学a-114舍友们 转载请注明出处:水车:http://www.cnblogs.com/xuange306/p/6185453.html 没图片的教程都是耍流氓 准备工作: 安装nodejs ---还用我教了? 安装依赖包express4.x  点这里>>>nodeJS搭建本地服务器 安装vue-cli脚手架 点这里>>>vue-cli构建vue项目 这里强调一下,express是后端服务器

vue项目axios请求接口,后端代理请求接口404,问题出现在哪?

在vue项目中,列表数据需要用到qq音乐接口中的数据,但是直接请求不行,有host及referer限制,需要采用后端代理的方式.借助axios及node的express,在dev-server.js中实现后,重启项目,结果接口404了.代码如下: 仔细检查后,代码没问题:于是在apiRouts中console.log()打印信息,运行没有打印信息,意味着根本没有运行这部分代码.于是想到会不会是webpack版本更新,配置发生了改变导致的.所以仔细看了配置后,发现webpack.dev.conf.

LVS(Linux Viretual Server) 负载均衡器 + 后端服务器

定义: LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统. 结构: 一般来说,LVS集群采用三层结构,其主要组成部分为: A.负载调度器(load balancer),它是整个集群对外面的前端机,负责将客户的请求发送到一组服务器上执行,而客户认为服务是来自一个IP地址(我们可称之为虚拟IP地址)上的. B.服务器池(server pool),是一组真正执行客户请求的服务器,执行的服务有WEB.MAIL.FTP和DNS等. C.共享存储(

微信小程序传数组(Json字符串)到Java后端

一:小程序端: wxml中代码: <!--index.wxml--> <view> <view> <button bindtap="onShow"> 调接口 </button> </view> </view> js中代码: //index.js //获取应用实例 const app = getApp() Page({ onShow:function(){ console.log('123456') le

【转】django 与 vue 的完美结合 实现前后端的分离开发之后在整合

https://blog.csdn.net/guan__ye/article/details/80451318 最近接到一个任务,就是用django后端,前段用vue,做一个普通的简单系统,我就是一搞后端的,听到vue也是比较震惊,之前压根没接触过vue. 看了vue的一些文档,还有一些项目,先说一下django与vue的完美结合吧! 首先是创建一个django项目 django-admin startproject mysite # 创建mysite项目 django-admin starta

vue使用json最简单的两种方式

第一种: 首先我项目是在 webpack 下搭建的vue项目 在public文件夹下创建jsonTest.json json 格式的数据如下: { "innerList": [ {"attr1":"内部数据1","attr2":"内部数据2",...}, {"attr1":"内部数据1","attr2":"内部数据2",...}