1.背景準備

最初に新しいプロジェクトをビルドしてから、関連する pom 依存関係をインポートします。

以下のツールクラスもいくつか用意されています.ツールクラスについてはSpringMVCのプロジェクト構築についての以前のブログを参照してください.

pomは以下に依存します

<?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.7.7</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.dengxiyan</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>

データソースの構成

アプリケーション.yml

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/oapro?useUnicode=true&characterEncoding=UTF-8&useSSL=false
    username: root
    password: 123456
mybatis:
  mapper-locations: classpath*:mapper/*.xml #指定mapper文件位置
  type-aliases-package: com.dengxiyan.minoa.model #指定自动生成别名所在包

logging:
  level:
    root: info
    com.dengxiyan.minoa.mapper: debug

mybatis ジェネレーター

マッパーインターフェイス、モデルエンティティクラス、マッパーマッピングファイルの生成

マイバティスの統合

アプリケーション.yml

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

スタートアップクラスで

package com.dengxiyan.minoa;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@MapperScan("com.dengxiyan.minoa.mapper")
@SpringBootApplication
public class MinoaApplication {

    public static void main(String[] args) {
        SpringApplication.run(MinoaApplication.class, args);
    }

}

データ表示

次に、フロントエンドのホームページのデータを準備します

上記のデータを最前面に表示する

約束

Promise は、従来のソリューション (コールバック関数とイベント) よりも論理的で強力な非同期プログラミングのソリューションです。コミュニティによって最初に提案され、実装されました. ES6 はそれを言語標準に書き込み、使用法を統一し、Promise オブジェクトをネイティブに提供しました.

いわゆる Promise は、将来終了するイベント (通常は非同期操作) の結果を保持する単純なコンテナーです。構文的には、Promise は非同期操作のメッセージを取得できるオブジェクトです。Promise は統一された API を提供し、さまざまな非同期操作を同じ方法で処理できます。

promise オペレーションには 3 つの状態があります。

pending: promise が作成されるとすぐに待機中 (進行中)、保留中は進行中です

履行: 成功 (完了)。解決を呼び出すと、状態が保留中から履行済に変更され、将来実行されます。

reject: 失敗 (拒否)。reject を呼び出すと、ステータスが保留から拒否に変更され、今後 .catch が実行されます

注意点：

promise の状態が変更されると、状態は凍結されます

再度 reject または resolve を呼び出すと、状態を変更しても意味がありません

カプセル化リクエスト

/utils/util.js 内

/**
 * 封装微信的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)
      }
    })
  });
}

会議ディスプレイ

インデックス/index.js

loadMeetingInfos(){
    util.request(api.IndexUrl).then(res=>{
      this.setData({
        lists:res.data.infoList
      })
    }).catch(res=>{
        console.log('服器没有开启，使用模拟数据!')
    })
  }

/utils/page.wxs を追加

function getState(state){
  if(state == 0){
    return '取消会议';
  }
  else if(state == 1){
    return '待审核';
  }
  else if(state == 2){
    return '驳回';
  }
  else if(state == 3){
    return '待开';
  }
  else if(state == 4){
    return '进行中';
  }
  else if(state == 5){
    return '开启投票';
  }
  else if(state == 6){
    return '结束会议';
  }
    return '其他';
}
function getNumber(s){
    s+=""
    var arr = s.split(",");
    return arr.length;
}

function formatDate(ts, option) {
  var date = getDate(ts)
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var week = date.getDay()
  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()
  
  //获取 年月日
  if (option == 'YY-MM-DD') return [year, month, day].map(formatNumber).join('-')

  //获取 年月
  if (option == 'YY-MM') return [year, month].map(formatNumber).join('-')

  //获取 年
  if (option == 'YY') return [year].map(formatNumber).toString()

  //获取 月
  if (option == 'MM') return  [mont].map(formatNumber).toString()

  //获取 日
  if (option == 'DD') return [day].map(formatNumber).toString()

  //获取 年月日 周一 至 周日
  if (option == 'YY-MM-DD Week')  return [year, month, day].map(formatNumber).join('-') + ' ' + getWeek(week)

  //获取 月日 周一 至 周日
  if (option == 'MM-DD Week')  return [month, day].map(formatNumber).join('-') + ' ' + getWeek(week)

  //获取 周一 至 周日
  if (option == 'Week')  return getWeek(week)

  //获取 时分秒
  if (option == 'hh-mm-ss') return [hour, minute, second].map(formatNumber).join(':')

  //获取 时分
  if (option == 'hh-mm') return [hour, minute].map(formatNumber).join(':')

  //获取 分秒
  if (option == 'mm-dd') return [minute, second].map(formatNumber).join(':')

  //获取 时
  if (option == 'hh')  return [hour].map(formatNumber).toString()

  //获取 分
  if (option == 'mm')  return [minute].map(formatNumber).toString()

  //获取 秒
  if (option == 'ss') return [second].map(formatNumber).toString()

  //默认 时分秒 年月日
  return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

function getWeek(n) {
  switch(n) {
      case 1:
      return '星期一'
      case 2:
      return '星期二'
      case 3:
      return '星期三'
      case 4:
      return '星期四'
      case 5:
      return '星期五'
      case 6:
      return '星期六'
      case 7:
      return '星期日'
  }
}


module.exports = {
  getState: getState,
  getNumber: getNumber,
  formatDate:formatDate
};

meeting/list/list.wxml を変更します

<!--pages/meeting/list/list.wxml-->
<!-- <text>pages/meeting/list/list.wxml</text> -->
<tabs tabList="{
   
   {tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>
<view style="height: 100rpx;"></view>
<block wx:for-items="{
   
   {lists}}" wx:for-item="item" wx:key="item.id">
    <view class="list" data-id="{
   
   {item.id}}">
        <view class="list-img al-center">
            <image class="video-img" mode="scaleToFill" src="{
   
   {item.image}}"></image>
        </view>
        <view class="list-detail">
            <view class="list-title"><text>{
   
   {item.title}}</text></view>
            <view class="list-tag">
                <view class="state al-center">{
   
   {item.state}}</view>
                <view class="join al-center"><text class="list-num">{
   
   {item.num}}</text>人报名</view>
            </view>
            <view class="list-info"><text>{
   
   {item.address}}</text>|<text>{
   
   {item.time}}</text></view>
        </view>
    </view>
</block>

レンダリングは次のとおりです。

ミニプログラムプロジェクト - バックグラウンドインタラクション (ホームページ)

1.背景準備

データソースの構成

マイバティスの統合

次に、フロントエンドのホームページのデータを準備します

カプセル化リクエスト

会議ディスプレイ

おすすめ

ミニプログラム プロジェクト - バックグラウンド インタラクション (ホームページ)

1.背景準備

データ ソースの構成

マイバティスの統合

次に、フロントエンドのホームページのデータを準備します

カプセル化リクエスト

会議ディスプレイ

おすすめ

ミニプログラムプロジェクト - バックグラウンドインタラクション (ホームページ)

データソースの構成