怎么做视频解析网站吗河南省村镇建设处网站
一、目的
使用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查询字符串
三、代码解析
需要实现的功能：
- 定义获取图书列表的函数
getbooklist() - 使用Axios发起请求
- 处理响应数据并渲染到页面
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.dataconst 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映射将其取出并写入网页