微信小程序——后台交互

这篇具有很好参考价值的文章主要介绍了微信小程序——后台交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

后台准备

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,默认为Hikari
    type: com.zaxxer.hikari.HikariDataSource
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/mybatis_oapro?useUnicode=true&characterEncoding=UTF-8&useSSL=false
    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 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() + 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 that=this;
    // wx.request({
    //     url: api.IndexUrl,
    //     dataType: 'json',
    //     success(res) {
    //       console.log(res)
    //       that.setData({
    //           lists:res.data.data.infoList
    //       })
    //     }
    //   })
  },

效果展示

微信小程序——后台交互,微信小程序,交互,小程序文章来源地址https://www.toymoban.com/news/detail-737115.html

到了这里,关于微信小程序——后台交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】后台数据交互于WX文件使用

    目录 一、前期准备 1.1 数据库准备 1.2 后端数据获取接口编写 1.3 前端配置接口 1.4 封装微信的request请求   二、WXS文件的使用 2.1 WXS简介 2.2 WXS使用   三、后台数据交互完整代码 3.1 WXML 3.2 JS 3.3 WXSS 效果图  创建数据库: 注意: 字符集选择 utf8mb4 ,因为可能用存储用户信息,

    2024年02月08日
    浏览(50)
  • 微信小程序之会议OA个人中心后台交互

    目录 获取用户昵称头像和昵称 小程序登录 登录-小程序 wx.checkSession wx.login wx.request 后台 准备数据表 反向生成工具生成 准备封装前端传过来的数据 小程序服器配置 导入微信小程序SDK application.yml WxProperties WxConfig WxAuthController 登录-小程序 login.js user.js util.js emoji wx.getUserProfi

    2024年02月22日
    浏览(72)
  • 微信小程序之首页-后台交互及WXS的使用

    目录 前言  一. 前后台数据交互及封装request 1.准备后台 1.1 配置数据源  1.2 部分后台获取数据方法编写 2.准备前端 2.1封装Request 2.2 前端JS方法编写 2.3 前端页面展示index.wxml 二.WXS的使用 1.简介 2.WXS优化OA系统  2.1 使用及定义 2.2 导入要使用的项目 2.3 优化会议状态 2.4 优化人

    2024年02月08日
    浏览(51)
  • 关于微信小程序与Java后台交互数据中中文乱码问题的讨论

    如果小程序端发起的请求参数中含有中文,直接发送到后台会显示乱码,需要在header中设置UTF-8编码 这样后台接收到的中文就能解析正常了 为了便于测试,后台接口简化如下: 结果小程序端显示的用户名为“寮犱笁”。 起初怀疑后台返回的编码格式不对,网上说对于Spring

    2024年02月09日
    浏览(40)
  • 巧用回调函数解决微信小程序与后台数据交互出现的异步问题

            微信小程序端需要发送一个包含文字与图片的表单数据给后端,我一开始的思路是 先 上传图片得到临时的URL, 后 执行POST请求将表单数据发送给后端,但后端只能获取到文字,而图片URL却始终获取不到。         注意看我上面的思路, 一先一后 ,无形中将两

    2024年02月16日
    浏览(44)
  • 【微信小程序】6天精准入门(第5天:利用案例与后台的数据交互)附源码

            在小程序中,与后台交互指的是小程序前端与后台服务器之间的数据通信和请求处理过程。通过与后台交互,小程序能够获取服务器端的数据、上传用户数据、发送请求等。         小程序与后台交互可以实现数据的传输、用户认证、实时消息推送等功能,为

    2024年02月08日
    浏览(47)
  • 微信小程序-后台安装ssl证书

    准备工作:准备ssl证书,可以在域名管理中申请、下载该证书(***.key ***.pem) 有几种方式: 一、对于springboot项目,可以在yaml文件里面配置ssl 二、可以配置nginx,现在讲一下这种方式: cd /usr/local/nginx/conf #进入Nginx默认安装目录。如果您修改过默认安装目录,请根据实际配置

    2024年02月12日
    浏览(43)
  • SpringBoot微信小程序商城源码(前台+后台)

    🍓🍓 文末获取联系 🍓🍓 产品介绍   本产品用java技术开发的小程序前后台源码代码和视频开发教程。   产品主要包含一套Spring Boot小程序商城代码和一套小程序开发全栈实战项目视频课程。 小程序商城源代码介绍:   系统由:Spring Boot后端API,web管理后台 和 微信小

    2024年02月10日
    浏览(88)
  • 微信小程序 - 调用后台api接口方法

    2024年01月16日
    浏览(49)
  • 【Java】微信小程序V3支付(后台)

    目录         相关官网文档         1.需要的参数         2.引入库         3.用到的工具类         4.支付下单实现         5.支付回调 接入前准备-小程序支付 | 微信支付商户平台文档中心 微信支付-JSAPI下单 获取平台证书列表-文档中心-微信支付商户平

    2024年02月12日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包