关于DOM视图渲染之axios异步交互数据

实现服务器返回搜索商品功能

主要的是实现的思路：
1、拿到用户搜索框输入的内容，然后我们拿着用户输入的值，向服务器发送请求。
2、得到服务器相应的结果，以对象数组的形式返回过来，我们使用 map方法对数组进行遍历操作。
3、循环的过程中将每个元素（也就是对象）转换为字符串，然后使用模板字符串进行插入到相应的位置。每次循环都重复的遍历操作，最后使用join方法将每个对象转为字符串形式。
4、最后经过模板字符串的渲染后，页面视图会根据服务器返回的结果个数也就是数组的元素个数，进行一次次的渲染。

	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script>
		// 目标: 点击搜索按钮(放大镜), 根据关键词搜索商品并铺设列表
		// 1.获取搜索按钮
		document.querySelector('#searchButton').addEventListener('click', e => {
			// 2.获取搜索框的内容
			let searchText = document.querySelector('#searchInp').value
			// 3.向服务器发送请求
			axios({
				url: 'http://123.57.109.30:3999/api/searchGoodsList',
				method: 'GET',
				params: {
					searchText: searchText,
					page: 1,
					everyNum: 16
				}
			}).then(result => {
				// 答应返回的数组里面的元素  这里返回的是对象数组 ，需要通过map方法循环操作，然后使用join转为字符串
				console.log(result.data.list)
				// 4、获取需要渲染视图的容器
				let ul = document.querySelector('.category-list')
				ul.innerHTML = result.data.list.data.map(obj => `
				<li>
					<a><i><img
								src="${obj.imageUrl}"></i>
						<div class="supplier">xxxx制造商</div>
						<div class="title">${obj.goodsName}</div>
						<div class="priceBox">
							<div class="price" price="${obj.goodsPrice}"><span
									style="color: #F7A701; font-size: 12px; padding-left: 2px;">￥<span
										style="font-size:18px;">${obj.goodsPrice}</span></span></div>
							<div class="mack"><span
									style="color:#FB4C81;background:#FFFFFF; border-color:#FB4C81">一起拼</span><span
									style="color:#FFFFFF;background:#AB7FD1; border-color:#AB7FD1">精选</span></div>
						</div>
						<div class="evaluate">${obj.evalNum}条好评</div>
					</a>
				</li>
				`).join('')
			})
		})
	</script>