小程序项目-后台交互（首页）

news2024/9/20 9:29:37

目录

一，后台准备

配置数据源

整合mybatis

二，准备前端的首页的数据

封装request

会议展示

一，后台准备

先建一个新的项目，建好后导入相关的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>

配置数据源

appliation.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-generator

生成mapper接口，model实体类，mapper映射文件

整合mybatis

application.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

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

  • promise运行中有三个状态：

    • pending: 等待 (进行中) promise一创建出来，就是pending进行中

    • fulfilled: 成功 (已完成), 调用 resolve, 就会将状态从pending改成fulfilled, 且将来就会执行.then

    • rejected: 失败 (拒绝), 调用 reject, 就会将状态从pending改成rejected, 且将来就会执行.catch

  • 注意点：

    • 一旦promise的状态发生变化, 状态就会被凝固

    • 如果再调用reject或resolve,进行状态修改就没有意义了

封装request

 在/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/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>

效果图如下  

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

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

相关文章

Django学习16 -- ModelAdmin options

Django学习16 -- ModelAdmin options

参考&#xff1a; Django Documentation Release 4.1.4.dev20221130072229&#xff0c;ModelAdmin options&#xff0c;P988 ~ P1007 &#xff08;补充更新。。。。。。&#xff09;Django学习7 -- 添加个人应用&#xff08;自定义应用页面优化&#xff09;Django学习8 -- 添加…
阅读更多...
form表单的基本使用

form表单的基本使用

1、什么是表单 表单在网页中主要负责数据采集功能。HTML中的<form>标签&#xff0c;就是用于采集用户输入的信息&#xff0c;并通过<form>标签的提交操作&#xff0c;把采集到的信息提交到服务器端进行处理。 2、表单的组成部分 <form> <input type"…
阅读更多...
c#入门-objtct的方法

c#入门-objtct的方法

声明类型的基类 c#中的类都继承自object类&#xff0c;包括静态类。 静态类只是无法手动指定继承类型&#xff0c;而声明静态类时的关键字class&#xff0c;已经让他派生自object类了。 结构类型继承自ValueType类&#xff0c;而ValueType继承自object类。 数组继承自Array类…
阅读更多...
【JavaScript】本地存储(localStorage、sessionStorage、cookie)

【JavaScript】本地存储(localStorage、sessionStorage、cookie)

文章目录【JavaScript】本地存储(localStorage、sessionStorage、cookie)一. 概念二. 本地存储特性三. 会话级存储四. 持久性存储五. cookie六. 本地存储的区别(1) cookie和storage的区别(2) localStorage和sessionStorage的区别七. 案例&#xff1a;记住用户名【JavaScript】本…
阅读更多...
ansible（第二天）

ansible（第二天）

第二章&#xff1a;模块介绍 1.Ansible的三个命令模块 command shell raw 应尽量避免使用这三个模块来执行命令&#xff0c;因为其他模块大部分都是幂等性的&#xff0c;可以自动进行更改跟踪。 command、shell、raw不具备幂等性。注&#xff1a; 幂等性&#xff1a;简单来…
阅读更多...
【2 - 随机森林 - 案例部分：随机森林在乳腺癌数据上的调参】菜菜sklearn机器学习

【2 - 随机森林 - 案例部分：随机森林在乳腺癌数据上的调参】菜菜sklearn机器学习

课程地址&#xff1a;《菜菜的机器学习sklearn课堂》_哔哩哔哩_bilibili 第一期&#xff1a;sklearn入门 & 决策树在sklearn中的实现第二期&#xff1a;随机森林在sklearn中的实现第三期&#xff1a;sklearn中的数据预处理和特征工程第四期&#xff1a;sklearn中的降维算法…
阅读更多...
vue3笔记案例——Suspense使用之骨架屏

vue3笔记案例——Suspense使用之骨架屏

文章目录skeleton组件sync组件Suspense使用skeleton组件 示例图 代码 <template><div class"sk"><div class"sk-2"><div class"sk-2-1"></div><div></div></div><hr><div class&qu…
阅读更多...
亚马逊云科技 Build On -轻松搭建咖啡点单系统

亚马逊云科技 Build On -轻松搭建咖啡点单系统

【前言】 1、什么是Build On&#xff1f; Build On是亚马逊团队基于亚马逊云服务开发&#xff0c;打造的一系列可快速上手的实操性活动。通过通俗易懂的场景案例、简单快捷的开发路径&#xff0c;参与者可快速理解目标任务涉及的相关知识&#xff0c;同时对亚马逊云服务具备一…
阅读更多...
【回答问题】ChatGPT上线了！推荐30个以上比较好的意图识别模型

【回答问题】ChatGPT上线了！推荐30个以上比较好的意图识别模型

【回答问题】ChatGPT上线了&#xff01;推荐30个以上比较好的意图识别github源码&#xff1f; 好的&#xff0c;这里列出 30 个相对比较优秀的意图识别 GitHub 源码&#xff1a; DeepPavlov Rasa Snips spaCy OpenAI GPT OpenAI DialogFlow ChatterBot Botpress Amazon Lex M…
阅读更多...
ArcGIS基础实验操作100例--实验41提取道路面中心线

ArcGIS基础实验操作100例--实验41提取道路面中心线

本实验专栏参考自汤国安教授《地理信息系统基础实验操作100例》一书 实验平台&#xff1a;ArcGIS 10.6 实验数据&#xff1a;请访问实验1&#xff08;传送门&#xff09; 高级编辑篇--实验41 提取道路面中心线 目录 一、实验背景 二、实验数据 三、实验步骤 &#xff08;1…
阅读更多...
2022，我遭遇的那些小事

2022，我遭遇的那些小事

前言 2022&#xff0c;总感觉一晃眼就过去了&#xff0c;不知不觉自己坚持更文已经一周年了。回顾这一周年&#xff0c;无论是在技术成长上还是职业发展上&#xff0c;都有了许多新的体会。 裁员风波 还记得是四、五月份的一个上午&#xff0c;原本还在紧张的加班赶项目&…
阅读更多...
educoder数据结构与算法 队列 第2关 实现一个链接存储的队列

educoder数据结构与算法 队列 第2关 实现一个链接存储的队列

本文已收录于专栏 &#x1f332;《educoder数据结构与算法_大耳朵宋宋的博客-CSDN博客》&#x1f332; 目录 任务描述 相关知识 编程要求 测试说明 AC_Code 任务描述 本关任务&#xff1a;实现 step2/CLnkQueue.cpp 中的CLQ_IsEmpty、CLQ_Length、CLQ_In和CLQ_Out四个操…
阅读更多...
论文阅读和复现：去除PPG运动伪影的IEEE论文

论文阅读和复现：去除PPG运动伪影的IEEE论文

论文阅读和代码复现&#xff1a; 《Combining Nonlinear Adaptive Filtering and Signal Decomposition for Motion Artifact Removal in Wearable Photoplethysmography》 基本介绍&#xff1a; 由于手腕运动造成的噪声&#xff1a;运动伪影&#xff0c;使得PPG方法的心率监…
阅读更多...
shell-流程控制之条件判断

shell-流程控制之条件判断

1、判断当前磁盘剩余空间是否有20G&#xff0c;如果小于20G&#xff0c;则将报警邮件发送给管理员&#xff0c;每天检查一次磁盘剩余空间。 补充&#xff1a;20G20971520kb [rootcotenos day06]# pwd /root/shell/day06 [rootcotenos day06]# vim free_men.sh #!/bin/bash f…
阅读更多...
spring boot启动环境的配置与更改（dev，local，pro）包含单元测试环境

spring boot启动环境的配置与更改（dev，local，pro）包含单元测试环境

文件类型介绍 properties 该文件是一种key-value的格式&#xff0c;配置文件的特点是&#xff0c;它的Key-Value一般都是String-String类型的&#xff0c;因此我们完全可以用Map<String, String>来表示它。 用Properties读取配置文件非常简单。Java默认配置文件以.pro…
阅读更多...
elasticsearch 7.9.3知识归纳整理（二）之es基本原理及使用kibana操作es的常见命令

elasticsearch 7.9.3知识归纳整理（二）之es基本原理及使用kibana操作es的常见命令

es基本原理及使用kibana操作es的常见命令 一、es的基本原理与基础概念 1.1 倒排索引 倒排索引源于实际应用中需要根据属性的值来查找记录。这种索引表中的每一项都包括一个属性值和具有该属性值的各记录的地址。由于不是由记录来确定属性值&#xff0c;而是由属性值来确定记录…
阅读更多...
【机器学习】机器学习中常用的损失函数一览

【机器学习】机器学习中常用的损失函数一览

问题 机器学习中常用的损失函数总结 前言 我们经常听到损失函数、代价函数和目标函数这三种说法&#xff0c;这三种说法有什么联系和区别呢&#xff1f;这里明确下&#xff1a; 损失函数 Loss Function 通常是针对单个训练样本而言的&#xff0c;给定一个模型输出 y^\hat{y…
阅读更多...
设计模式 - UML类图

设计模式 - UML类图

1. 什么是 UML 统一建模语言(Unified Modeling Language,UML)是用来设计软件的可视化建模语言。它的特点是简单、统图形化、能表达软件设计中的动态与静态信息。L从目标系统的不同角度出发&#xff0c;定义了用例图、类图、对象图、状态图、活动图、时序图、协作图、构件图部署…
阅读更多...
8种数据结构

8种数据结构

快速介绍8种常用数据结构 数据结构是一种特殊的组织和存储数据的方式&#xff0c;可以使我们可以更高效地对存储的数据执行操作。数据结构在计算机科学和软件工程领域具有广泛而多样的用途。 几乎所有已开发的程序或软件系统都使用数据结构。此外&#xff0c;数据结构属于计算…
阅读更多...
【回答问题】ChatGPT上线了！有哪些3D点云算法模型？3D点云算法模型实现代码？

【回答问题】ChatGPT上线了！有哪些3D点云算法模型？3D点云算法模型实现代码？

有哪些3D点云算法模型&#xff1f; 3D点云算法的模型有很多种&#xff0c;以下是一些常见的算法模型&#xff1a; 归一化重心法&#xff08;Normalized point-to-point ICP&#xff09;&#xff1a;是一种常用的模型配准方法&#xff0c;用于将两个模型中的点匹配起来。 基于…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023