小程序轮播图的两种后台方式(JSP)--【浅入深出系列009】

news2024/11/18 21:45:00

微信目录集链接在此：

详细解析黑马微信小程序视频–【思维导图知识范围】难度★✰✰✰✰

不会导入/打开小程序的看这里：参考

让别人的小程序长成自己的样子-更换window上下颜色–【浅入深出系列001】

文章目录

  • 本系列校训
  • 学习资源的选择
  • 啥是轮播图
  • 轮播图的关键代码
    • 最常见的轮播图代码
    • 便于理解但是不能用于后台的轮播代码
  • 知识点复习
    • swiper
  • 前端
    • 页面代码
    • 相应的JS文件
  • JSP后端
    • idea设置
    • 后端代码
    • 启动后端，编译前端
  • 运行小程序前端
  • 整点高级活
    • 然后，修改json文件。
    • 重新编译小程序，让他报错！！（好象就是没事闲的）
    • 再修复这个错。
  • 这全套的活一整套下来
  • 配套资源
  • 作业：

本系列校训

用免费公开视频，卷飞培训班哈人！打死不报班，赚钱靠狠干！
只要自己有电脑，前后项目都能搞！N年苦学无人问，一朝成名天下知！

学习资源的选择

黑马程序员微信小程序开发前端教程_零基础玩转微信小程序（130集）
https://www.bilibili.com/video/BV1nE41117BQ/
目录如下：
…
P303-微信小程序的环境准备08:21 00:00 到 05：16 获取APPid, 后面下载开发工具。

啥是轮播图

在这里插入图片描述

基本上只要你看到的网站（90%以上），都会看到轮播图，轮播如此重要，基本上成了网站的必备的模块，甚至有一些页面里面也大量出现轮播
小程序上呢？也是一样，毕竟小程序大概率也是一种商业的网站。当然也得要使用轮播了
在这里插入图片描述

轮播图的关键代码

最常见的轮播图代码

<swiper class="swiper_box" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange"
		 circular="circular">
			<block wx:for="{{banners}}" wx:key="id">
				<swiper-item>
					<image bindtap="tapBanner" data-id="{{item.businessId}}" src="{{item.picUrl}}_m" class="slide-image" />
				</swiper-item>
			</block>
		</swiper>

这是一般的小程序最常见的轮播图代码段。

便于理解但是不能用于后台的轮播代码

<swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay>
          <swiper-item>
            <image src="/images/banner.jpg" />
          </swiper-item>
          <swiper-item>
            <image src="/images/banner.jpg" />
          </swiper-item>
          <swiper-item>
            <image src="/images/banner.jpg" />
          </swiper-item>
 </swiper>

第一种是万能型，即可以做静态的纯前端，也可以后端定制，比如说你的小程序轮播图需要后台人员更换图片，

知识点复习

首先一点，如果你对小程序还是属于ABC阶段还是强列推荐看《让小程序动起来-轮播图的两种方式–【浅入深出系列003】》
这不是好不好的问题，而是初学者是不是更容易接受的问题。数学虽好，也不能在小学开设微积分。物理虽棒，也没有在初中就讲量子力学。

swiper

具体请参见官方文档《微信官方文档. 小程序》 swiper一节
swiper
基础库 1.0.0 开始支持，低版本需做兼容处理。

微信 Windows 版：支持

微信 Mac 版：支持

渲染框架支持情况：Skyline （使用最新 Nighly 工具调试）、WebView

功能描述
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

通用属性
属性 类型 默认值 必填 说明 最低版本
indicator-dots boolean false 否 是否显示面板指示点 1.0.0
indicator-color color rgba(0, 0, 0, .3) 否 指示点颜色 1.1.0
indicator-active-color color #000000 否 当前选中的指示点颜色 1.1.0
autoplay boolean false 否 是否自动切换 1.0.0
current number 0 否 当前所在滑块的 index 1.0.0
interval number 5000 否 自动切换时间间隔 1.0.0
duration number 500 否 滑动动画时长 1.0.0
circular boolean false 否 是否采用衔接滑动 1.0.0
vertical boolean false 否 滑动方向是否为纵向 1.0.0
display-multiple-items number 1 否 同时显示的滑块数量 1.9.0
easing-function string “default” 否 指定 swiper 切换缓动动画类型 2.6.5
合法值 说明
default 默认缓动函数
linear 线性动画
easeInCubic 缓入动画
easeOutCubic 缓出动画
easeInOutCubic 缓入缓出动画
bindchange eventhandle 否 current 改变时会触发 change 事件，event.detail = {current, source} 1.0.0
bindtransition eventhandle 否 swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}。Skyline 仅支持非 worklet 的组件方法作为回调。 2.4.3
bindanimationfinish eventhandle 否 动画结束时会触发 animationfinish 事件，event.detail 同上。Skyline 仅支持非 worklet 的组件方法作为回调。 1.9.0

前端

页面代码

<!--pages/home/home.wxml-->
<block wx:for="{{listData}}" wx:key="itemlist">
  <!-- 菜单轮播图 -->
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{item.imgUrls}}" wx:for-item="imgItem" wx:key="{{item.id}}">
      <swiper-item>
        <image class="slide-image" src="{{imgItem.src}}"></image>
      </swiper-item>
    </block>
  </swiper>
  <!--开启点餐之旅 -->
  <view class="menu-bar">
    <view class="menu-block" bindtap="gostart">
      <view class="menu-start">开启点餐之旅→</view>
    </view>
  </view>
  <!-- 中间部分 -->
  <view class="ad-box">
    <image src="{{item.image_ad}}" class="image-ad"></image>
  </view>
  <!-- 底部商品图 -->
  <view class="bottom-box">
    <view class="bottom-pic" wx:for="{{item.image_bottom}}" wx:for-item="bottomItem" wx:key="{{item.id}}">
      <image src="{{bottomItem.src}}" class="btm-image" data-id="{{bottomItem.id}}"></image>
    </view>
  </view>
</block>

这个页面，只看 swiper 部分。有以下几个绑定的变量

  1. indicatorDots
  2. autoplay
  3. interval
  4. duration
  5. item.imgUrls
    而在wx:for-item 里使用的是imgItem.src

相应的JS文件

很容易的就找到了 前四个参数，都是只有一个简单值。
在这里插入图片描述
整个代码如下：

// pages/home/home.js
const fetch = require('../../utils/fetch.js')
Page({
  data: {
    // 显示面板指示点
    indicatorDots: true,
    // 图片自动切换
    autoplay: true,
    // 自动切换时间间隔
    interval: 5000,
    // 滑动动画时长
    duration: 1000
  },
  onLoad: function(options) {
    // 显示模态对话框
    wx.showLoading({
      title: "努力加载中"
    })
    // 请求数据
    fetch('food/index.json').then((res) => {
      // 请求成功，关闭对话框
      wx.hideLoading();
      // 把接口返回数据setData给listData
      this.setData({
        listData: res.data,
      })
    },() => {
      // 请求失败，关闭对话框，执行fetch.js文件中的fail方法
      wx.hideLoading();
    });
  },
  gostart: function() {
    wx.navigateTo({
      url: "../list/list",
    })
  }
})

重点来了。当页面loLoad的时候（跟html差不多的意思），
在这里插入图片描述
Ctrl+ 鼠标点击（事实上很多的工具都是这样的跟踪代码的方式）
找到fetch函数。
在这里插入图片描述

可以找到一段ES6的JS写法，这也是为什么不推荐初学者，直接使用复杂例子的原因。看不动，一改N个错，那还怎么学习？
不得不流下伤心而又无奈的泪水。IT的程序员门槛貌似很低，但是从理解代码的角度上，从来不是各专业TOP！比啥啥电子的与非门，比啥啥信号的频域，傅立叶变换都难很多。
啥？你都没听说过？ 呃，其实我也啥都没说，只说：加油，奥利给！
在这里插入图片描述
友情提示 可以使用资源管理器里的搜索功能，真的很好用。
其实，除了接口的部分跟PHP的有一点点不一样，前端的部分基本上就是不动的。

JSP后端

其实这个后端，只是一个轮播图的话，springboot, Jsp, PHP都差不多。
但是我还是打算写成不同的文章，
一个原因是学JSP 的不一定有我这么全才的嘛，
另一个原因就是，这样看上去水三篇文章是不是感觉上要好很多？经验加1一下子变成了
在这里插入图片描述
本篇 可以说的PHP的姊妹篇了。这一次用的是JSP技术，原因嘛，就是这两个技术，都是大四之年学过的。

idea设置

在这里插入图片描述
在这里插入图片描述
其它的设置不会的，参看我的《IDEA运行配置JAVAWEB项目–【唐诗300首】》

运行Tomcat配置
在这里插入图片描述

后端代码

打开idea，然后，第一步。换颜色，算了，连我都没有把颜色调好，再说了，一般人也不会调idea 的颜色。
在这里插入图片描述
还是本着能省就省的原则。
直接扔一个JSON文件 在idea环境里。这里要对URL说明一下，其实这并一定就是一个真实的文件，也不一定是对应一个servlet 。事实上这种URL叫统一资源
文字流，图片，字节码，游戏的协议包等等，JSP 算是最简化的开发，也是网上所说的低代码开发，而且也是javaEE ，甚至springBoot 的基础，当然了，一般的人只是CV策略开发项目，可能没有这种感觉。

因特网上的可用资源可以用简单字符串来表示，该文档就是描述了这种字符串的语法和语义。而这些字符串则被称为：“统一资源定位器”（URL）。这篇说明源于万维网全球信息主动组织（World Wide Web global informationinitiative）介绍的概念。RFC1630《通用资源标志符》描述了一些对象数据，他们自1990年起就开始使用这些对象数据。

启动后端，编译前端

在这里插入图片描述
在这里插入图片描述

不引入新工具了，会postman的可以使用，这里直接用浏览器暴力输地址了。
在这里插入图片描述

运行小程序前端

在这里插入图片描述
当然了，到这里的时候，其实你已经完成了。后面的东西不做也是牛哄哄了，但是后面的部分是普拉思。

整点高级活

搞三张大图放服务端，（模拟上报图片的这种真实环境）
在这里插入图片描述

然后，修改json文件。

在这里插入图片描述

重新编译小程序，让他报错！！（好象就是没事闲的）

在这里插入图片描述

再修复这个错。

在这里插入图片描述
至此，轮播图的三个图片都从后台的JSP服务器取出来。
不过感觉上同一个前端，从PHP换成JSP，然后，就又说是一门新技术？又要学一遍？
在这里插入图片描述

这全套的活一整套下来

这不得整个大鸡腿？

在这里插入图片描述

配套资源

后端
小程序轮播图的两种后台方式(jsp)-jsp
https://download.csdn.net/download/dearmite/88111567
前端
小程序轮播图的两种后台方式(jsp)-小程序
https://download.csdn.net/download/dearmite/88111570

作业：

学会了你就已经是神，基本上银河系是留不下你了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/799698.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Retrospectives on the Embodied AI Workshop(嵌入式人工智能研讨会回顾) 论文阅读

Retrospectives on the Embodied AI Workshop(嵌入式人工智能研讨会回顾) 论文阅读

论文信息 题目&#xff1a;Retrospectives on the Embodied AI Workshop 作者&#xff1a;Matt Deitke, Dhruv Batra, Yonatan Bisk 来源&#xff1a;arXiv 论文地址&#xff1a;https://arxiv.org/pdf/2210.06849 Abstract 我们的分析重点关注 CVPR Embodied AI Workshop 上…
阅读更多...
一个开源的文件存储软件Filehub，不限速防和谐

一个开源的文件存储软件Filehub，不限速防和谐

FileHub介绍 一个基于Github开发的文件存储软件&#xff0c;美其名曰&#xff1a;FileHub&#xff0c;可存万物&#xff0c;而且绝不和谐任何文件。类似于百度云盘的功能&#xff0c;但是功能上肯定达不到百度云盘的效果&#xff0c;但是基本功能还是有的&#xff1a;例如登录注…
阅读更多...
如何实现高效的动态鉴权

如何实现高效的动态鉴权

一、概述 Spring Security 是 Spring 框架内高度可定制化的安全框架&#xff0c;也是 Spring 应用的标准安全框架&#xff0c;提供了包括认证和鉴权在内的两大部分。其高度集成于 Spring 框架&#xff0c;无需引入第三方扩展模块&#xff0c;可以避 免大量的数据接口适配问题…
阅读更多...
如何使用Git上传代码到GitHub简单教程

如何使用Git上传代码到GitHub简单教程

学习笔记 1&#xff1a;Github创建自己的一个repositories 2&#xff1a;随便给仓库取个名字 3&#xff1a;接下来&#xff0c;打开git 4&#xff1a;通过 cd 你的本地文件路径 &#xff0c;进入到该路径下 5&#xff1a;初始化项目&#xff0c;在目录下面运行完该代码后会有…
阅读更多...
Linux6.16 Docker consul的容器服务更新与发现

Linux6.16 Docker consul的容器服务更新与发现

文章目录 计算机系统5G云计算第四章 LINUX Docker consul的容器服务更新与发现一、consul 概述1.什么是服务注册与发现2.什么是consul 二、consul 部署1.consul服务器2.registrator服务器3.consul-template4.consul 多节点 计算机系统 5G云计算 第四章 LINUX Docker consul的…
阅读更多...
高压放大器在超声加工中的应用

高压放大器在超声加工中的应用

超声加工是一种非常重要的现代加工技术&#xff0c;广泛应用于材料加工、精密制造等领域。在该技术中&#xff0c;高压放大器扮演着至关重要的角色&#xff0c;可以为超声加工提供必要的信号放大和控制功能。 超声加工的原理是通过高频振动产生机械能&#xff0c;并将其传递到被…
阅读更多...
编程小白的自学笔记十二（python爬虫入门四Selenium的使用实例二）

编程小白的自学笔记十二（python爬虫入门四Selenium的使用实例二）

系列文章目录 编程小白的自学笔记十一&#xff08;python爬虫入门三Selenium的使用实例详解&#xff09; 编程小白的自学笔记十&#xff08;python爬虫入门二实例代码详解&#xff09; 编程小白的自学笔记九&#xff08;python爬虫入门代码详解&#xff09; 目录 系列文章…
阅读更多...
Jmeter性能测试配置

Jmeter性能测试配置

Jmeter检查点/断言 在上一章节中&#xff0c;我们通过调试脚本&#xff0c;通过人工验证脚本可以完成业务功能&#xff0c; 但在性能测试中&#xff0c;我们希望能通过自动验证脚本是否完成业务功能&#xff0c;在Jmeter 中我们可以通过检查点&#xff0c;也就是断言来实现自动…
阅读更多...
19.2：纸牌问题

19.2：纸牌问题

给定一个整型数组arr&#xff0c;代表数值不同的纸牌排成一条线 玩家A和玩家B依次拿走每张纸牌 规定玩家A先拿&#xff0c;玩家B后拿 但是每个玩家每次只能拿走最左或最右的纸牌 玩家A和玩家B都绝顶聪明 请返回最后获胜者的分数 方法一&#xff1a;暴力解法 自然智慧。 pack…
阅读更多...
【NLP入门教程】二十三、循环神经网络（RNN）| 小白专场

【NLP入门教程】二十三、循环神经网络（RNN）| 小白专场

本教程旨在为初学者提供一份全面而系统的NLP入门指南&#xff0c;探索NLP的核心概念、方法和技术。无论你是计算机科学的新手&#xff0c;还是对自然语言处理领域感兴趣的研究人员&#xff0c;本教程都将为你提供所需的基础知识和实用技能。 专栏地址&#xff1a;&#x1f4d5…
阅读更多...
【蓝图】p40-p43对象引用、变量有效性、实现键盘控制物体自转、简单点名系统

【蓝图】p40-p43对象引用、变量有效性、实现键盘控制物体自转、简单点名系统

p40-p43对象引用、变量有效性、实现键盘控制物体自转、简单点名系统 p40对象引用、变量有效性p41实现键盘控制物体自转创建bool值控制旋转实现通过键盘控制自转 p42p43简单点名系统Get All Actors Of Class&#xff08;获得场景中所有该类的actor演员&#xff09;getFor Each L…
阅读更多...
TEE GP(Global Platform)安全认证产品

TEE GP(Global Platform)安全认证产品

TEE之GP(Global Platform)认证汇总 一、安全认证产品介绍 选择SECURITY和TEE SECURITY&#xff0c;然后SEARCH&#xff0c;可以看到TEE对应的安全认证产品。 二、HUAWEI ITRUSTEE V3.0 ON KIRIN 980 三、SAMSUNG TEEGRIS V4.1 参考&#xff1a; GlobalPlatform Certification…
阅读更多...
【linux】暗夜精灵9自动升级BIOS后，无法进入双系统

【linux】暗夜精灵9自动升级BIOS后，无法进入双系统

1、问题描述 暗夜精灵9自动升级BIOS后，无法进入双系统，甚至没有“多重引导菜单” 2、解决方法 1）进入BIOS 惠普暗夜精灵9进入BIOS的按键是F10 2）设置启动项 需要设置三处 功能键延时：5秒 安全启动模式：关闭 UEFI模式下的开机顺序：ubuntu3）设置显卡切换 如果NVIDIA…
阅读更多...
TCL(Tool Command Language)学习（三）-----字符串操作

TCL(Tool Command Language)学习（三）-----字符串操作

一、比较 &#xff1a; string compare 格式 &#xff1a; string compare ?-nocase? ?-length int? string1 string2 把字符串 string1 和字符串 string2 进行比较 &#xff0c;返回值为 -1、0或 1 &#xff0c;分别对应 string1 小于、等于或大于string2。如果有 -len…
阅读更多...
全球百年品牌，最高已改变25次

全球百年品牌，最高已改变25次

摘要&#xff1a;今天&#xff0c;我们看到的那些持久的公司并不是真正持续了100年的公司。在100年的时间里,他们改变了25次、5次或4次,如果不改变,他们就无法生存。 近期市场调研中&#xff0c;许战海咨询发现国内市场已经进入无限内卷的竞争阶段。如何在内卷的竞争中保持可持…
阅读更多...
Android OpenGL ES Camera2 实现实时抠图效果

Android OpenGL ES Camera2 实现实时抠图效果

前面文章人像抠图 + OpenGL ES 还能这样玩？没想到吧，我们介绍了利用人像抠图算法生成的 mask 图，然后结合 OpenGL 可以产生一些有趣的效果。 抠图技术应用很广泛，比如很多手机的相机自带“人像留色”滤镜：人体区域保留彩色，人体区域之外灰度化。所以人像留色的关键技术在…
阅读更多...
Unity下如何实现低延迟的全景RTMP|RTSP流渲染

Unity下如何实现低延迟的全景RTMP|RTSP流渲染

技术背景 Unity3D可以用于创建各种类型的的应用程序&#xff0c;包括虚拟现实、培训模拟器等。以下是一些可以使用Unity3D全景播放的场景&#xff1a; 虚拟现实体验&#xff1a;全景视频可以用来创建逼真的虚拟环境&#xff0c;使用户能够感受到身临其境的感觉&#xff1b;培…
阅读更多...
Spring中的Bean配置

Spring中的Bean配置

bean配置 基础配置 别名配置 作用范围配置 1、为什么bean会默认为单例&#xff1f; 如果不为单例&#xff0c;则每一次调用bean&#xff0c;Spring的bean容器中&#xff0c;会出现多个该类的对象&#xff0c;这会造成容器的冗余。 2、适合交给容器进行管理的bean 表现层对象…
阅读更多...
Ansys Zemax | 确保自由曲面设计的可制造性

Ansys Zemax | 确保自由曲面设计的可制造性

本文专门介绍使用单点金刚石车床加工自由曲面的主要可制造性参数&#xff0c;解释了可制造性参数如何与仪器参数相关联&#xff0c;并展示了如何在 OpticStudio 中检查和控制这些可制造性参数。此外&#xff0c;还解释了如何处理其考察区域外的自由曲面的行为。例如&#xff0c…
阅读更多...
MYSQL练习四

MYSQL练习四

练习四 某公司的mis数据库中有部⻔表&#xff08;dept&#xff09;和员工表&#xff08;employee&#xff09;表结构及其数据如下&#xff1a; 表结构 dept表结构 employee表结构 表数据 dept表数据 employee表数据 完成以下SQL编写&#xff1a; 编写脚本&#xff0c;创建…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023