当前位置: 首页 > news >正文

微信小程序——后台交互

目录

后台准备

pom.xml

配置数据源

整合mtbatis

前后端交互

 method1

 method2


后台准备

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.6.2</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.zking</groupId><artifactId>minoa</artifactId><version>0.0.1-SNAPSHOT</version><name>minoa</name><description>Demo project for Spring Boot</description><properties><java.version>1.8</java.version><fastjson.version>1.2.70</fastjson.version><jackson.version>2.9.8</jackson.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.2.1</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.44</version><scope>runtime</scope></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>${fastjson.version}</version></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><excludes><exclude><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></exclude></excludes></configuration></plugin><plugin><groupId>org.mybatis.generator</groupId><artifactId>mybatis-generator-maven-plugin</artifactId><version>1.3.2</version><dependencies><!--使用Mybatis-generator插件不能使用太高版本的mysql驱动 --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>${mysql.version}</version></dependency></dependencies><configuration><overwrite>true</overwrite></configuration></plugin></plugins></build></project>

配置数据源

spring:datasource:#type连接池类型 DBCP,C3P0,Hikari,Druid,默认为Hikaritype: com.zaxxer.hikari.HikariDataSourcedriver-class-name: com.mysql.jdbc.Driverurl: jdbc:mysql://localhost:3306/mybatis_oapro?useUnicode=true&characterEncoding=UTF-8&useSSL=falseusername: rootpassword: 123456

生成mapper接口、model实体类以及mapper映射文件

整合mtbatis

mybatis:mapper-locations: classpath*:mapper/*.xml #指定mapper文件位置type-aliases-package: com.zking.minoa.model #指定自动生成别名所在包

启动类

@MapperScan("com.zking.minoa.mapper") //指mapper接口所在包

然后启动后台即可

前后端交互

 method1

首先在index.js中编写以下方法

  loadMeetingInfo(){let that=this;wx.request({url: api.IndexUrl,dataType: 'json',success(res) {console.log(res)that.setData({lists:res.data.data.infoList})}})},

然后在该页面下方生命周期函数——监听页面加载代码块下编写以下方法

  onLoad(options) {this.loadMeetingInfo();//首页会议信息},

由于后台是没有数据图片的,我们则需要在前端传入一张图片

index.wxml

<image class="video-img" mode="scaleToFill" src="{{item.image != null ? item.image : '/static/persons/1.jpg'}}"></image>

 method2

封装request

utils/util.js

const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
}const formatNumber = n => {n = n.toString()return n[1] ? n : `0${n}`
}/*** 封装微信的request请求*/
function request(url, data = {}, method = "GET") {return new Promise(function (resolve, reject) {wx.request({url: url,data: data,method: method,header: {'Content-Type': 'application/json',},success: function (res) {if (res.statusCode == 200) {resolve(res.data);//会把进行中改变成已成功} else {reject(res.errMsg);//会把进行中改变成已失败}},fail: function (err) {reject(err)}})});
}module.exports = {formatTime,request
}

在index.js的头部引用util

const util = require("../../utils/util.js")

 编写方法

咱们先把method1的代码注释,再写method2,编写代码如下

loadMeetingInfo(){util.request(api.IndexUrl).then(res=>{this.setData({lists:res.data.infoList})});// let that=this;// wx.request({//     url: api.IndexUrl,//     dataType: 'json',//     success(res) {//       console.log(res)//       that.setData({//           lists:res.data.data.infoList//       })//     }//   })},

效果展示

相关文章:

微信小程序——后台交互

目录 后台准备 pom.xml 配置数据源 整合mtbatis 前后端交互 method1 method2 后台准备 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org…...

3D模型如何添加表面贴图?

1、模型表面贴图介绍 模型表面贴图&#xff08;Texture Mapping&#xff09;是一种将纹理映射到三维模型表面的技术&#xff0c;用于增加模型的细节和真实感。它通过在模型的每个表面点上应用纹理坐标&#xff0c;并将纹理像素与模型的对应点进行匹配&#xff0c;使得模型表面…...

C语言之函数详解

目录 函数的定义 函数的调用 变量的存储类型 auto自动变量 extern外部变量 static静态变量 register寄存器变量 函数的定义 在C语言中&#xff0c;函数是一段可重复使用的代码块&#xff0c;用于执行特定的任务。函数的定义包括函数的声明和函数体两个部分。 函数的声…...

华纳云:mysql创建触发器报错的原因及解决方法是什么

在 MySQL 中创建触发器时可能会出现错误&#xff0c;这些错误通常是由于多种原因引起的&#xff0c;包括语法错误、权限问题、表结构问题等。以下是一些常见的创建触发器报错的原因和相应的解决方法&#xff1a; 1. 语法错误&#xff1a; 原因&#xff1a; 创建触发器的SQL语句…...

C++笔记之初始化二维矩阵的方法

C笔记之初始化二维矩阵的方法 —— 2023年5月20日 上海 code review! 文章目录 C笔记之初始化二维矩阵的方法一.常见方法1. 使用数组2. 使用向量3. 使用数组的动态分配4. 使用嵌套的 std::vector 并使用resize方法5. 初始化固定大小的 std::array 二.C中使用vector初始化二维矩…...

ArrayList与List的层级关系及ArrayList解析

List与ArrayList的关系 List List是一个接口&#xff0c;不能直接实例化。如果要使用必须去实例化List的实现类——ArrayList和LinkedList站在数据结构的角度看&#xff0c;List就是一个线性表。常见的线性表&#xff1a;顺序表、链表、栈、队列等 线性表 线性表是n个具有相…...

智慧公厕设备选型攻略,打造智能化便利生活体验

智慧公厕设备的选型对于打造智能化便利生活体验起着至关重要的作用。在不断提升城市品质的背景下&#xff0c;智慧公厕已成为城市建设中的一项重要内容。在选购智慧公厕设备时&#xff0c;我们需要考虑到不同版本的功能要求&#xff0c;确保公厕设备的质量和性能。本文以智慧公…...

TCP 协议的可靠传输机制是怎样实现的?

TCP 协议是一种面向连接的、可靠的、基于字节流的传输层协议。 1 它通过以下几种方法来保证数据传输的可靠性&#xff1a; 检验和&#xff1a;TCP 在发送和接收数据时&#xff0c;都会计算一个检验和&#xff0c;用来检测数据是否在传输过程中发生了错误或损坏。如果检验和不匹…...

Antv G6入门之旅--combo图

目录 什么是AntV G6 G6 的特性 G6 文档 安装 1 在项目中使用 NPM 包引入 2 在 HTML 中使用 CDN 引入 使用 Step 1 创建容器 Step 2 数据准备 Step 3 创建关系图 Step 4 配置数据源&#xff0c;渲染 React 中使用 G6 Combo图 什么是AntV G6 G6 是一个图可视化引擎…...

聊聊分布式架构09——分布式中的一致性协议

目录 01从集中式到分布式 系统特点 集中式特点 分布式特点 事务处理差异 02一致性协议与Paxos算法 2PC&#xff08;Two-Phase Commit&#xff09; 阶段一&#xff1a;提交事务请求 阶段二&#xff1a;执行事务提交 优缺点 3PC&#xff08;Three-Phase Commit&#x…...

探索流视频的发送

1.网络连接 2.主设备将某处视频开始的视频数据发送给从设备。 之前有读取本地视频并播放的demo,所以可以先测试网络连接的问题。 先用模拟器进行模拟吧。方便进行测试。 是的&#xff0c;可以使用Android设备使用上述库或框架来构建实时Web应用程序。虽然这些库和框架在Java服…...

[ACTF2020 新生赛]Include 1

题目环境&#xff1a;超链接&#xff0c;点进去看看你能找到flag吗&#xff1f;除了这些网页什么都没有&#xff0c;但是不当紧&#xff0c;因为我们有一双善于发现的眼睛&#x1f440;F12瞅瞅无&#xff0c;并无其他等等URL看了吗&#xff1f;发现存在一个参数file&#xff0c…...

教师必备宝藏,强烈推荐

亲爱的教师朋友们&#xff0c;你们是不是在为学期末成绩查询而头疼呢&#xff1f;一学期下来&#xff0c;成堆的试卷和成绩单&#xff0c;还有学生家长的各种咨询&#xff0c;让人应接不暇。现在&#xff0c;我给你们分享一个教师必备的宝藏&#xff0c;让你们的成绩查询工作变…...

「北大社送书」学习MATLAB—从算法到实战

MATLAB科学计算从入门到精通 一句话推荐书籍特色内容简介书籍概览 从代码到函数&#xff0c;从算法到实战&#xff0c;从问题到应用&#xff0c;由浅入深掌握科学计算方法&#xff0c;高效解决实际问题。 一句话推荐 科学计算基础入门&#xff0c;高效解决实际问题。 书籍特色…...

clion安装C++远程linux开发并调试 从装centos虚拟机到完美开发调试

下载镜像 阿里云镜像 从vmware上安装虚拟机并提权开放ssh 更新编译环境 一般 gcc gdb 版本都是比较低的&#xff0c;适配不了clion的最低要求。 升级gdb参考博客 升级gcc参考博客 安装CMAKE 官方的源使用wget即可下载 未找到openssl的解决办法 注意版本&#xff0c;又踩个…...

Android笔记

目录 触摸事件java弱引用WorkerThread注解NonNull注解camera.setFrameProcessingFormat(ImageFormat.YUV_420_888);YUV_420_888的字节数据长啥样YUV_420_888的字节数组长啥样 触摸事件 java弱引用 创建对象的弱引用&#xff0c;在没有强引用指向改对象的情况下&#xff0c;垃圾…...

Java虚拟机内存区域、异常、垃圾收集器

java虚拟机 java内存区域 jvm的主要组成部分及作用 主要包含两个子系统和两个组件 子系统 类加载器&#xff08;Class loader&#xff09;&#xff1a;根据给定的类路径来装载class文件到运行时数据区 …...

深入理解JVM虚拟机第十三篇:详解JVM中的程序计数器

文章目录 一:程序计数器 1:概念 2:官方说法 3:图解 4:特点...

《合成孔径雷达成像算法与实现》Figure5.5

clc clear close all%% 参数设置 Ta 64; % 脉冲持续时间 Ka -1.56e-2; % 方位向调频率 Delta_f_dop abs(Ta*Ka); …...

leetcode经典面试150题---2.移除元素

题目描述 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

破解路内监管盲区:免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

Vue3 PC端 UI组件库我更推荐Naive UI

一、Vue3生态现状与UI库选择的重要性 随着Vue3的稳定发布和Composition API的广泛采用&#xff0c;前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率&#xff0c;还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库&#xff08;Naive UI、Element …...