HTML轮播图实现(前后端分离)
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轮播图实现(前后端分离)的更多相关文章
- 浅谈WEB前后端分离
重审业务逻辑 用过MVC的童鞋都知道业务逻辑(Bussiness Logic),但是大多对这概念又是模棱两可,业务逻辑从来都是这样难以理解,谈论前后端分离之前这个概念非常有必要探讨一下! 在简单的CR ...
- 前台主页搭建、后台主页轮播图接口设计、跨域问题详解、前后端互通、后端自定义配置、git软件的初步介绍
今日内容概要 前台主页 后台主页轮播图接口 跨域问题详解 前后端打通 后端自定义配置 git介绍和安装 内容详细 1.前台主页 Homeviwe.vue <template> <di ...
- Flask实战第51天:cms添加轮播图后端代码逻辑完成
首先,我们需要给轮播图设计一张表,因为轮播图前端要展示,CMS要管理,所以我们在apps下新建个models.py 编辑apps.models.py from exts import db from ...
- python drf+xadmin+react+dva+react-native+sentry+nginx 搭建前后端分离的博客完整平台
前言: 经过差不多半年的开发,搭建从前端到服务器,实现了前后端分离的一个集PC端.移动端的多端应用,实属不易,今天得空,好好写篇文章,记录这些天的成果.同时也做个分享. 演示网站地址: http:// ...
- 巨蟒python全栈开发flask8 MongoDB回顾 前后端分离之H5&pycharm&夜神
1.MongoDB回顾 .启动 mongod - 改变data/db位置: --dbpath D:\data\db mongod --install 安装windows系统服务 mongod --re ...
- 基于SpringBoot前后端分离的点餐系统
基于SpringBoot前后端分离的点餐系统 开发环境:主要采用Spring boot框架和小程序开发 项目简介:点餐系统,分成卖家端和买家端.买家端使用微信小程序开发,实现扫码点餐.浏览菜单.下单. ...
- luffy项目搭建流程(Django前后端分离项目范本)
第一阶段: 1.版本控制器:Git 2.pip安装源换国内源 3.虚拟环境搭建 4.后台:Django项目创建 5.数据库配置 6.luffy前 ...
- Luffy /3/ 前台主页搭建&轮播图接口
目录 前台主页搭建 components/Homeviwe.vue components/Banner.vue components/Header.vue components/Footer.vue ...
- 前后端分离djangorestframework—— 在线视频平台接入第三方加密防盗录视频
加密视频 在以后的开发项目中,很可能有做在线视频的,而在线视频就有个问题,因为在线播放,就很有可能视频数据被抓包,如果这个在线视频平台有付费视频的话,这样就会有人做点倒卖视频的生意了,针对这个问题,目 ...
随机推荐
- OpenLayers Node环境安装运行构建-支持Vue集成OpenLayers
NodeJS 环境安装包下载:https://nodejs.org/zh-cn/download/ 安装vue-cli3.0.1: https://cli.vuejs.org/guide/instal ...
- 爬虫对自己服务器 CPU,内存和网速的影响
今天无事写一遍关于爬虫对计算机的影响,主要是给小白同学普及一下爬虫的基础知识. 在我们写爬虫的时候,首先会想到开多线程,如果使用的语言是Python,很不幸,因为Python存在 GIL,在任何时候 ...
- [k8s]Docker 用户使用 kubectl 命令指南-unkown排错(kubelet端口解析)
参考:https://kubernetes.io/docs/user-guide/kubectl-cheatsheet/ https://k8smeetup.github.io/docs/user-g ...
- 开源文件服务器file-service介绍
file-service 一个基于ASP.NET Core的可伸缩.通用的文件服务器. 通常后端项目可能会有头像.图片.音频.视频等上传/下载需求,这些需求都可以抽象为文件服务. 功能特点 支持Lin ...
- 使用DotfuscatorPro_4.9对软件dll库进行加密
点击settings选项,Disable String Encryption改成NO,具体里面的设置如下图. 再点击Rename选项下的options,左边的选项勾上,再把Renaming Schem ...
- .net reactor使用教程(一)——界面各功能说明(转)
概述:安装了.net reactor之后,可以在安装目录下找到帮助文档REACTOR_HELP.chm,目前没有中文版本,里面详细介绍了.net reactor的各功能及使用场景. 安装了.net ...
- python什么时候加self,什么时候不加self
1.self是什么,一般都说指对象本身,这样说了没了用,说了后还是很难懂,因为这样说了后,仍然完全搞不清楚,什么时候变量前需要加self,什么时候不需要加self. 造成很多人,已经怕了self,不停 ...
- 【MyBatis学习06】_parameter:解决There is no getter for property named in class java.lang.String
我们知道在mybatis的映射中传参数,只能传入一个.通过#{参数名} 即可获取传入的值. Mapper接口文件: public int delete(int id) throws Exception ...
- Java基础知识点总结
前言 本文主要是我之前复习Java基础原理过程中写的Java基础知识点总结.Java的知识点其实非常多,并且有些知识点比较难以理解,有时候我们自以为理解了某些内容,其实可能只是停留在表面上,没有理解其 ...
- [ICPC 北京 2017 J题]HihoCoder 1636 Pangu and Stones
#1636 : Pangu and Stones 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 In Chinese mythology, Pangu is the fi ...