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. Git回滚代码到某个commit

    回退命令: $ git reset --hard HEAD^ 回退到上个版本$ git reset --hard HEAD~3 回退到前3次提交之前,以此类推,回退到n次提交之前 $ git rese ...

  2. Atitit 项目版本管理gitflow 与 Forking的对比与使用

    Atitit 项目版本管理gitflow 与 Forking的对比与使用 1.1. 版本管理的历史 csv>>svn >git 1 1.2. gitflow的核心是分版本管理,for ...

  3. Clash Royale开发日志

    2018-04-17 本次更新: [修复点击时间bug] [修复断线重连后不自动开始脚本bug] 2018-04-16 本次更新增加以下功能: [支持断线重连机制(5分钟)] [界面UI设置] 201 ...

  4. 再杀掉app之后 删除NSUserDefault存在本地的数据

    这两天在处理  app退出后删除本地数据  在appDelegate里的这个函数里设置发现进不去 - (void)applicationWillTerminate:(UIApplication*)ap ...

  5. Linux文件属性有哪些?(共十位)

    -rw-r--r-- 那个是权限符号,总共是 - --- --- --- 这几个位. 第一个短横处是文件类型识别符: - 表示普通文件: c 表示字符设备(character): b 表示块设备(bl ...

  6. (转) 开运算opening_circle和闭运算closing_circle的异同

    从去除毛刺的策略看开运算opening_circle和闭运算closing_circle的异同 例一:毛刺在往外凸的面上 策略1:分割出黑色部分,然后通过开运算去掉毛刺,再通过原黑色部分区域减去开运算 ...

  7. 在Android中使用FFmpeg(android studio环境)

    1.首先我们需要一个已经编译好的libffmpeg.so文件.(怎么编译是个大坑,可以参考windows环境下编译android中使用的FFmpeg,也可以用网上下载的现成的,本文相关的github项 ...

  8. 在Linux添加定时任务删除5天前的日志文件

    利用shell脚本自动清理,脚本如下 1.删除文件命令: find 对应目录 -mtime +天数 -name "文件名" -exec rm -rf {} \; 实例命令: fin ...

  9. C#访问gsoap的服务

    C++开发一个webservice,然后C#开发客户端,这样就需要C#的客户端访问gsoap的服务端.(大家都知道gsoap是C/C++开发webservice的最佳利器) 为什么不考虑直接用wcf开 ...

  10. Linux 文件普通权限_011

    一.文件权限10个字符对应类型和权限 二.Linux普通文件和Linux目录读.写.执行权限说明 标注:Linux 中的文件名是存在于父目录的block里面,并指向这个文件的inode节点 1.lin ...