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>

HTML轮播图实现(前后端分离)的更多相关文章

  1. 浅谈WEB前后端分离

    重审业务逻辑 用过MVC的童鞋都知道业务逻辑(Bussiness Logic),但是大多对这概念又是模棱两可,业务逻辑从来都是这样难以理解,谈论前后端分离之前这个概念非常有必要探讨一下! 在简单的CR ...

  2. 前台主页搭建、后台主页轮播图接口设计、跨域问题详解、前后端互通、后端自定义配置、git软件的初步介绍

    今日内容概要 前台主页 后台主页轮播图接口 跨域问题详解 前后端打通 后端自定义配置 git介绍和安装 内容详细 1.前台主页 Homeviwe.vue <template> <di ...

  3. Flask实战第51天:cms添加轮播图后端代码逻辑完成

    首先,我们需要给轮播图设计一张表,因为轮播图前端要展示,CMS要管理,所以我们在apps下新建个models.py 编辑apps.models.py from exts import db from ...

  4. python drf+xadmin+react+dva+react-native+sentry+nginx 搭建前后端分离的博客完整平台

    前言: 经过差不多半年的开发,搭建从前端到服务器,实现了前后端分离的一个集PC端.移动端的多端应用,实属不易,今天得空,好好写篇文章,记录这些天的成果.同时也做个分享. 演示网站地址: http:// ...

  5. 巨蟒python全栈开发flask8 MongoDB回顾 前后端分离之H5&pycharm&夜神

    1.MongoDB回顾 .启动 mongod - 改变data/db位置: --dbpath D:\data\db mongod --install 安装windows系统服务 mongod --re ...

  6. 基于SpringBoot前后端分离的点餐系统

    基于SpringBoot前后端分离的点餐系统 开发环境:主要采用Spring boot框架和小程序开发 项目简介:点餐系统,分成卖家端和买家端.买家端使用微信小程序开发,实现扫码点餐.浏览菜单.下单. ...

  7. luffy项目搭建流程(Django前后端分离项目范本)

    第一阶段: 1.版本控制器:Git      2.pip安装源换国内源    3.虚拟环境搭建        4.后台:Django项目创建 5.数据库配置              6.luffy前 ...

  8. Luffy /3/ 前台主页搭建&轮播图接口

    目录 前台主页搭建 components/Homeviwe.vue components/Banner.vue components/Header.vue components/Footer.vue ...

  9. 前后端分离djangorestframework—— 在线视频平台接入第三方加密防盗录视频

    加密视频 在以后的开发项目中,很可能有做在线视频的,而在线视频就有个问题,因为在线播放,就很有可能视频数据被抓包,如果这个在线视频平台有付费视频的话,这样就会有人做点倒卖视频的生意了,针对这个问题,目 ...

随机推荐

  1. java 获取当天(今日)零点零分零秒

    两种方法 一种得到的是时间戳,一种得到是日期格式: 1.日期格式的 Calendar calendar = Calendar.getInstance(); calendar.setTime(new D ...

  2. Implementation of Message Receiver

  3. Atitit s2018.6 s6 doc list on com pc.docx Atitit s2018.6 s6 doc list on com pc.docx  Aitit algo fix 算法系列补充.docx Atiitt 兼容性提示的艺术 attilax总结.docx Atitit 应用程序容器化总结 v2 s66.docx Atitit file cms api

    Atitit s2018.6 s6  doc list on com pc.docx Atitit s2018.6 s6  doc list on com pc.docx  Aitit algo fi ...

  4. maven 使用 国内镜像的方法 解决依赖下载慢

    转自:http://blog.csdn.net/banqgg/article/details/55804569 Maven是当前流行的项目管理工具,但官方的库在国外经常连不上,连上也下载速度很慢.国内 ...

  5. Windows10下virtualenv配置

    1.安装virtualenv pip install virtualenv 2.选定一个目录,作为存储不同环境的总目录 3.安装virtualenvwrapper-powershell(只适用于Pyt ...

  6. spring JdbcTemplate数据库

    DAO package DAO; import org.springframework.jdbc.core.JdbcTemplate; public class OrderDao { private ...

  7. saltstack通过jinja模板,将变量值增加到配置文件中?通过引用变量值修改配置文件?

    需求描述: 在使用saltstack的时候,有的时候,需要根据不同的变量来增加配置,比如,bind,监听端口,这些都可以通过变量写入,并且在配置的时候引用,下面是一个例子,用来演示,如何使用jinja ...

  8. spring事务解析

    1 初步理解 理解事务之前,先讲一个你日常生活中最常干的事:取钱. 比如你去ATM机取1000块钱,大体有两个步骤:首先输入密码金额,银行卡扣掉1000元钱:然后ATM出1000元钱.这两个步骤必须是 ...

  9. Inside The C++ Object Model(二)

    ============================================================================2-0. 关键字explicit被引入C++,提 ...

  10. JS 浅谈函数柯里化,不明觉厉

    在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术.这个技术由 Christopher ...