【Vue】axios入门（一）

最新推荐文章于 2023-08-16 08:58:28 发布

繁星伴晚安

最新推荐文章于 2023-08-16 08:58:28 发布

阅读量166

点赞数 2

分类专栏： # Java实训

本文链接：https://blog.csdn.net/weixin_48180029/article/details/118650558

版权

Java实训专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这个博客展示了如何利用json-server创建一个简单的本地API，并结合axios库进行GET、POST、PUT和DELETE请求的实战操作。通过点击按钮触发不同类型的HTTP请求，直观地在控制台打印响应数据。

摘要由CSDN通过智能技术生成

视频
在这里插入图片描述

json-server

在这里插入图片描述

npm install -g json-server

json-server官网
在这里插入图片描述

json-server --watch test.json

在这里插入图片描述

axios
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <style>
      .show{
        padding-left: 30px;
        padding-top: 30px;
        position: absolute;
        top:40px;
        left:50px;
        width: 500px;
        height: 300px;
        background: #f1f1f1;
      }

    </style>
</head>
<body>
  <div class="show">
    <button onclick="testGet()">GET请求</button>
    <button onclick="testPost()">POST请求</button>
    <button onclick="testPut()">PUT请求</button>
    <button onclick="testDelete()">DELETE请求</button>
  </div>

</body>
<script>
  function testGet() {
      axios.get('http://localhost:3000/posts')
        .then(response =>{
          console.log('/posts',response.data)
        })
  }
</script>
</html>

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <style>
      .show{
        padding-left: 30px;
        padding-top: 30px;
        position: absolute;
        top:40px;
        left:50px;
        width: 500px;
        height: 300px;
        background: #f1f1f1;
      }

    </style>
</head>
<body>
  <div class="show">
    <button onclick="testGet()">GET请求</button>
    <button onclick="testPost()">POST请求</button>
    <button onclick="testPut()">PUT请求</button>
    <button onclick="testDelete()">DELETE请求</button>
  </div>

</body>
<script>
  function testGet() {
      axios.get('http://localhost:3000/posts')
        .then(response =>{
          console.log('/posts get',response.data)
        })
  }
  function testPost() {
    axios.post('http://localhost:3000/posts',{ "title": "明天你好", "author": "hangover" })
      .then(response =>{
        console.log('/posts post',response.data)
      })
  }
  function testPut() {
    axios.put('http://localhost:3000/posts/1',{
      "title": "明天你好",
      "author": "hangover",
    },)
      .then(response =>{
        console.log('/posts put',response.data)
      })
  }
  function testDelete() {
    axios.delete('http://localhost:3000/posts/3')
      .then(response =>{
        console.log('/posts delete',response.data)
      })
  }
</script>
</html>