专栏首页cwl_Java前端基础-json-server与axios

前端基础-json-server与axios

第7章 json-server与axios

一个项目从立项开始,一般都是前后端同时进行编码工作的,而此时前端需要的接口和数据后台都是无法提供的;

7.1 json-server 使用

使用全局安装 :npm install json-server -g

json-server 会将一个json文件作为数据库来存储数据,对json数据的格式是有要求的,如data.json的内容:

{
  "tb1": [
    {
      "id": 1,
      "title": "标题1",
      "author": "描述信息1"
    },
    {
      "id": 2,
      "title": "标题2",
      "author": "描述信息2"
    }
  ],
  "tb2": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "tb3": {
    "name": "typicode"
  }
}

启动服务: json-server --watch data.json

启动成功后,提示信息如下:

$ json-server --watch data.json

  \{^_^}/ hi!

  Loading data.json
  Done

  Resources
  http://localhost:3000/tb1
  http://localhost:3000/tb2
  http://localhost:3000/tb3

  Home
  http://localhost:3000

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

得到tb1所有的数据 GET: http://localhost:3000/tb1

根据id得到数据 GET : http://localhost:3000/tb1/2

添加一条数据 POST: http://localhost:3000/tb1

删除一条数据 DELETE: http://localhost:3000/tb1/2

模糊查找 GET : http://localhost:3000/tb1?title_like=标题

根据id修改数据 PUT: http://localhost:3000/tb1/1

注意:json-server 严格遵循 HTTP 请求语义进行数据处理

7.2 axios

我们在构建应用时需要访问一个 API 并展示其数据。做这件事的方法有好几种,而使用基于 Promise 的 HTTP 客户端 axios 则是其中非常流行的一种。

<script src="./axios.js"></script>
<script>
    // 获取全部数据
    axios.get('http://localhost:3000/list_data')
    .then((data)=>{
        console.log(data);
    });

    // 获取一条数据
    axios.get('http://localhost:3000/list_data/2')
    .then((data)=>{
        console.log(data);
    })
    
    // 添加一条数据
    axios.post('http://localhost:3000/list_data',{stat:false,title:'喝水'})
    .then((d)=>{
        console.log(d);
    }).catch(error => console.log(error))

     // 删除一条数据
     axios.delete('http://localhost:3000/list_data/4')
    .then((d)=>{
        console.log(d);
    }).catch(error => console.log(error))

     // 修改一条数据
     axios.put('http://localhost:3000/list_data/6',{title:'hhhhhh'})
    .then((d)=>{
        console.log(d);
    }).catch(error => console.log(error))
</script>

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • GO-Web 服务器的创建

    Go 提供了一系列用于创建 Web 服务器的标准库,而且通过 Go 创建一个服务器的步骤非常简单,只要通过 net/http 包调用ListenAndServe...

    cwl_java
  • GO-处理请求

    Go 语言的 net/http 包提供了一系列用于表示 HTTP 报文的结构,我们可以使用它处理请求和发送相应,其中 Request 结构代表了客户端发送的请求...

    cwl_java
  • 大数据-Azkaban介绍

    各任务单元之间存在时间先后及前后依赖关系, 为了很好地组织起这样的复杂执行计划, 需要一个工作流调度系统来调度执行;

    cwl_java
  • Akka-CQRS(11)- akka-http for http-web-service: Marshalling-数据序列化

    前面几篇讨论了关于gRPC方式的前后端连接集成方式。gRPC也是一个开放的标准,但讲到普及性就远远不及基于http/1.1协议的web-service了。特...

    用户1150956
  • 爬虫入门到精通-爬虫之异步加载(实战花瓣网)

    本文章属于爬虫入门到精通系统教程第八讲 本次我们会讲解两个知识点 异步加载 headers中的Accept 本次我们要抓取的是花瓣网美女照片美女花瓣,陪你做生活...

    爬虫
  • VS IDE开发字体推荐

    我个人比较推荐Consolas 看着要比初始的舒服很多 (如果觉得字体很小,可以使用 ctrl+滚轮 来调整字体大小) 效果图:

    跟着阿笨一起玩NET
  • 流量分析的瑞士军刀:Zeek

    Zeek (Bro) 是一款大名鼎鼎的开源网络安全分析工具。通过 Zeek 可以监测网络流量中的可疑活动,通过 Zeek 的脚本可以实现灵活的分析功能,可是实现...

    FB客服
  • logstash之input配置syslog类型详解

    用途 监控syslog,监控系统运行情况 配置示例 input { syslog { port => 5000 type...

    苦咖啡
  • 【深度学习量化投资】RNNs在股票价格预测的应用基于Keras

    前言 RNN和LSTMs在时态数据上表现特别好,这就是为什么他们在语音识别上是有效的。我们通过前25天的开高收低价格,去预测下一时刻的前收盘价。每个时间序列通过...

    量化投资与机器学习微信公众号
  • 委内瑞拉大力发展区块链虚拟资产币种交易系统开发

    委内瑞拉国家通讯社报道,委内瑞拉总统尼古拉斯·马杜罗宣布组建一个“青年银行(Youth Bank)”,以支持他们最近刚刚推出的国家加密虚拟资产虚拟资产。此外,马...

    ruiec1212

扫码关注云+社区

领取腾讯云代金券