使用axios向服务器请求信息并渲染页面

发布于：2025-07-17 ⋅ 阅读:(18) ⋅ 点赞:(0)

一、目的

使用axios从后端API获取图书列表数据并渲染至网页。
首先，编辑好原html框架：
在这里插入图片描述
从服务器获取存储信息：
在这里插入图片描述
控制台检查信息格式：

            console.log(result);
            console.log(htmlstr);

在这里插入图片描述
完成渲染：
在这里插入图片描述

二、Axios基础使用

axios使用语法：

axios({
    url:'目标资源地址'
    method://指定请求方法
    data://需要提交的数据
}).then((result)=>{
    //请求成功后执行的代码
})

mathod:‘POST’//提交数据，‘GET’//查询数据，默认为get(不区分大小写)，可以省略

**data：**提交数据

**params：**查询参数

axios会自动帮我们转换json格式，十分方便，我们只需要考虑如何获取并整理数据。

我们的目的是查询，所以method为get，省略不写：

axios({
	url: 'http://hmajax.itheima.net/api/books',
	params: {
		creator: 'evergreen'
	}
	}).then(result => {})

1. 引入Axios

引用代码从axios官网取得，在HTML中直接通过CDN引入：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. 发起GET请求

在我的项目中，需要获取创建者为"evergreen"的所有图书，API地址是http://hmajax.itheima.net/api/books。使用Axios发起请求：

axios({
  url: 'http://hmajax.itheima.net/api/books',
  params: {
    creator: 'evergreen'
  }
})

关键点：

  • url: 指定API地址
  • params: 用于传递查询参数，Axios会自动将其转换为URL查询字符串

三、代码解析

需要实现的功能：

  1. 定义获取图书列表的函数getbooklist()
  2. 使用Axios发起请求
  3. 处理响应数据并渲染到页面
function getbooklist() {
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    params: {
      creator: 'evergreen'
    }
  }).then(result => {
  	//控制台检查
    console.log(result);
    //获取图书列表
    const booklist = result.data.data
    //用map函数将图书字符串映射到html中
    //map：遍历图书列表并映射
    //join：整合为字符串输出，方便利用innerHTML写入页面
    const htmlstr = booklist.map((item,index) => {
      return `<li class="hei">
        <div class="number ha">${index+1}</div>
        <span></span>
        <div class="book ha">${item.bookname}</div>
        <span></span>
        <div class="author ha">${item.author}</div>
        <span></span>
        <div class="publish ha">${item.author}</div>
        <span></span>
        <div class="movement ha">
          <button class="btn1">删除</button>
          <button class="btn2">修改</button>
        </div>
      </li>`
    }).join('')
    
    document.querySelector('ul').innerHTML=htmlstr
  })
}

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .nav {
            height: 40px;
            width: 580px;
        }

        .nav h2 {
            float: left;
            padding: 0;
            margin: 0;
        }

        .nav .add {
            color: #fff;
            padding: 0;
            margin-top: 10px;
            float: right;
            height: 25px;
            line-height: 25px;
            width: 60px;
            text-align: center;
            background-color: rgb(58, 171, 240);
            border-radius: 3px;
            cursor: pointer;
        }

        header {
            background-color: gray;
            color: #e0e0e0;

        }

        .hei {
            width: 580px;
            font-family: 'Courier New', Courier, monospace;
            height: 60px;
            line-height: 60px;
        }

        .ha {
            display: inline-block;
            text-align: center;
            border-left: 1px #fff solid;
        }

        .number {
            width: 60px;
        }

        .book {
            width: 120px;
        }

        .author {
            width: 100px;
        }

        .publish {
            width: 100px;
        }

        .movement {
            width: 150px;
        }

        ul {
            padding: 0;
        }

        li {
            list-style: none;
            border-bottom: 1px solid gray;
        }
    </style>
</head>

<body>
    <section>
        <div class="nav">
            <h2>图书管理</h2>
            <div class="add">+ 添加</div>
        </div>
        <header class="hei">
            <div class="number ha">序号</div>
            <span></span>
            <div class="book ha">书名</div>
            <span></span>
            <div class="author ha">作者</div>
            <span></span>
            <div class="publish ha">出版社</div>
            <span></span>
            <div class="movement ha">操作</div>
        </header>
        <ul>
            <li class="hei">
                <div class="number ha">1</div>
                <span></span>
                <div class="book ha">荒原狼</div>
                <span></span>
                <div class="author ha">德·黑塞</div>
                <span></span>
                <div class="publish ha">人民出版社</div>
                <span></span>
                <div class="movement ha">
                    <button class="btn1">删除</button>
                    <button class="btn2">修改</button>
                </div>
            </li>
        </ul>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
        <script>
            function getbooklist() {
                axios({
                    url: 'http://hmajax.itheima.net/api/books',
                    params: {
                        creator: 'evergreen'
                    }
                }).then(result => {
                    console.log(result);
                    const booklist = result.data.data
                    const htmlstr = booklist.map((item,index) => {
                        return `<li class="hei">
                <div class="number ha">${index+1}</div>
                <span></span>
                <div class="book ha">${item.bookname}</div>
                <span></span>
                <div class="author ha">${item.author}</div>
                <span></span>
                <div class="publish ha">${item.author}</div>
                <span></span>
                <div class="movement ha">
                    <button class="btn1">删除</button>
                    <button class="btn2">修改</button>
                </div>
            </li>`
                    }).join('')

                console.log(htmlstr);
                document.querySelector('ul').innerHTML=htmlstr
                })
            }
            getbooklist()
        </script>
    </section>
</body>

</html>

效果：

在这里插入图片描述

说明：

1.使用.then()处理成功的响应
2.从响应结果中提取result.data.data获取实际图书数据
3.使用ES6模板字符串动态生成HTML
4. 通过map()方法将数据数组转换为HTML字符串数组
5. 最后将生成的HTML插入到页面中

注意点：

  • 资源地址是否正确
  • 是否提交了请求参数，以及请求参数是否能成功获取信息
  • 通过检查得到的对象格式来明确使用何种方法获取信息，如本次获得格式为对象数组，通过map映射将其取出并写入网页

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布