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. mac下安装xampp、及其之上的组件安装

    由于mac下开发需要用到php7,这里是用的xampp集成开发版本.但是mac下安装xampp失败,失败信息如下: Error starting "XAMPP" stack: fa ...

  2. class<T>和 class<?>类型

    ? 表示不确定的java类型. T 表示java类型 Class<T>在实例化的时候,T要替换成具体类Class<?>它是个通配泛型,?可以代表任何类型<? extend ...

  3. 15.翻译系列:EF 6中的级联删除【EF 6 Code-First 系列】

    原文链接:https://www.entityframeworktutorial.net/code-first/cascade-delete-in-code-first.aspx EF 6 Code- ...

  4. vim:放弃hjkl

    vim放弃使用hjkl,可以加快文本的编辑速度,不信,看我摘录的文章:http://vimcasts.org/blog/2013/02/habit-breaking-habit-making/ Wor ...

  5. .NET Core+NLog+存储配置 日志存入到数据库

    nlog-config.xml 配置文件: <?xml version="1.0" encoding="utf-8" ?> <nlog xml ...

  6. [HBase Manual]CH5 HBase运行模式:单实例和分布式

    HBase运行模式:单实例和分布式 HBase运行模式:单实例和分布式 1.单实例模式 1.1 单实例在HDFS下 2.分布式 2.1 伪分布式 3完全分布式 HBase有2种运行模式,单实例和分布式 ...

  7. 【iCore4 双核心板_uC/OS-II】例程八:消息邮箱

    一.实验说明: 消息邮箱是uC/OS-II中的另一种通信机制,可以使一个任务或者中断服务子程序向另一个任务发送一个指针型的变量.通常该指针指向一个包含了“消息”的特定数据结构.   二.实验截图:   ...

  8. 【iCore4 双核心板_ARM】例程二十八:FSMC实验——读写FPGA

    实验现象: 1.先烧写FPGA程序,再烧写ARM程序,ARM程序烧写完毕后即开始读写RAM测试,测试成功,绿色ARM·LED亮,测试失败,红色ARM·LED闪烁. 2.测试成功,ARM通过映射寄存器来 ...

  9. [Java并发编程(五)] Java volatile 的实现原理

    [Java并发编程(五)] Java volatile 的实现原理 简介 在多线程并发编程中 synchronized 和 volatile 都扮演着重要的角色,volatile 是轻量级的 sync ...

  10. Hlacon 之Image ,Region,XLD

    一 读取的3种方式: read_image( image,'filename') //image 是输出对象,后面是输入文件的路径和名称 读取多图: 1,申明一个数组,分别保存路径 ImagePath ...