1,首先前后端分离用到了3个插件
2,异步请求后端获取数据库图片地址(图片名字)
//图片轮播
axios({
url:'http://127.0.0.1:8000/userctrl/image',
method:'get',
responseType:"json",
}) .then(function(obj){
let list = obj.data
for(var i=0;i<list.length;i++){
$("#tuu"+[i]).attr('src','http://127.0.0.1:8000/upload/'+list[i]['fields']['img'])
}
})
**后端过程略过
3,模板渲染部分
<ul class="slide" >
<li><a><img src="" id="tuu0"></a></li>
<li><a><img src="" id="tuu1"></a></li>
<li><a><img src="" id="tuu2"></a></li>
<li><a><img src="" id="tuu3"></a></li> </ul>