专栏首页前端vuejson-server增删改查

json-server增删改查

前端开发中,接口多半是滞后于页面开发的,这时候就需要我们自己来模拟一些数据:

首先安装node.js(简单。不再演示)

1.全局安装json-server:

npm install json-server -g或cnpm install json-server -g

没装淘宝镜像的用npm安装

2.开始配置

    1.新建一个test文件,在test里新建一个db.json文件(此文件用来放虚拟数据),在db.json中写入以下数据↓↓↓↓↓↓

测试数据

    2.打开命令行,进入test文件下,输入命令:json-server db.json -p 3000

成功

3.操作数据

1.查询数据

        上一步成功后直接在浏览器打开localhost:3000/testData就可以查看数据了:

直接通过地址查看数据

get:新建一个html文件,为了测试方便,引入一个在线jq地址,然后写个get请求

get获取

在console中查看get拿到的数据

        POST:在页面中写个添加按钮,类名为add,点击add触发post添加id为3的新数据

post

新增一条数据

        PUT:在页面中写个修改按钮,类名为change,点击change触发put修改id为2的数据

修改数据

数据修改成功

        DELETE:在页面中写个删除按钮,类名为delete,点击delete删除id为3的数据

删除请求

删除成功

好了,增删改查全部成功,接下来对操作进行简化及优化

在test文件下新建package.json文件(这样做是用来简化启动server服务的步骤)

package.json中写入以上代码

这样,直接在命令行输入npm run server就OK了 不用每次启动都输入一长串的json-server********

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第三方账户登录--github

    使用node+express创建项目,可以参考这篇文章 node+express项目

    RtyXmd
  • Vue项目i18n国际化语言切换

    RtyXmd
  • 开发一套个人vue组件库

    使用vuePress开发,她能够很好的嵌入vue组件代码,使得文档能够准确的加载并预览组件,vuePress怎么使用可以看上一篇文章 VuePress搭建永久文...

    RtyXmd
  • [快学Python3]JSON解析

    概述 本章节将为大家介绍如何使用Python来编码和解码json对象。 json是javascript object notation的简写,是一种轻量级的数据...

    苦叶子
  • Python 操作json

    py3study
  • 快速API自动化测试

    我们平时写API,时效性太慢了。而且花费的成本代价太高。特别是有严重的滞后性。当平台多,业务多,迭代多的时候,接口自动化实现出来的时候,黄花菜都凉了。

    赵云龙龙
  • geotrellis使用(十九)spray-json框架介绍

    Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 spr...

    魏守峰
  • Python json 模块dumps、dump、loads、load的使用

    本文主要讲下json.dumps和json.dump、json.loads和json.load的区别,因为经常需要加载json文件,读取数据,傻傻分不清...

    致Great
  • Python json 模块dumps、dump、loads、load的使用

    本文主要讲下json.dumps和json.dump、json.loads和json.load的区别,因为经常需要加载json文件,读取数据,傻傻分不清...

    用户1332428
  • 2018年7月23日数据存储到文件中的代码介绍:

    ******************************************************************

    武军超

扫码关注云+社区

领取腾讯云代金券