微信小程序交流,微信小程序与后端交互

2023-10-26 09:26:58 墨初知识笔记 109阅读

目录后台准备pom.xml配置数据源整合姆特巴蒂斯前后端交互方法一方法2后台准备pom.xml？可扩展标记语言版编码UTF八号？项目xmlns xmlns : xsi :模式位置模型版本4。0 .0/型号版本父groupIdorg.springframework.boot/groupId artifact id spring-boot-starter-parent/artifact id版本2。6 .2/版本相对路径/！-从存储库查找父级-/父级groupIdcom.zking/groupId artifact id minoa/artifact id版本0。0 .1-快照/版本名称迈诺阿/名称描述Spring Boot的演示项目/描述属性Java。版本1.8/Java。版本快速JSON。版本1。2 .70/快速JSON。版本杰克逊。版本2。9 .8/杰克逊。版本/属性依赖项依赖项groupIdorg.springframework.boot/groupId artifactId弹簧-启动-起动机-JDBC/artifactId/依赖项groupIdorg.springframework.boot/groupId artifact id spring-boot-starter-web/artifact id/依赖项依赖项groupIdorg.mybatis.spring.boot/groupId工艺

aba</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>  <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,默认为Hikari    type: com.zaxxer.hikari.HikariDataSource    driver-class-name: com.mysql.jdbc.Driver    url: jdbc:mysql://localhost:3306/mybatis_oapro?useUnicodetrue&characterEncodingUTF-8&useSSLfalse    username: root    password: 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 thatthis;    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 classvideo-img modescaleToFill 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()  1  const 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 thatthis;    // wx.request({    //     url: api.IndexUrl,    //     dataType: json,    //     success(res) {    //       console.log(res)    //       that.setData({    //           lists:res.data.data.infoList    //       })    //     }    //   })  },

效果展示

标签：