微信小程序之投票管理

前言

对于会议管理模块，必不可少的当然就是我们的投票管理，实现真正意义上的无纸化办公，本期博客为大家介绍会议管理模块，包括发布投票及查看各类投票的状态 

所用技术点

MyBatis、SpringMVC、VentUI

 MyBatis和SpringMVC在博客主页有讲解，可以翻看往期博客

这里简单介绍一下VantUI

VantUI

Vant是一款基于Vue.js的流行移动端UI框架。它提供了丰富的UI组件和工具，可以帮助您快速构建漂亮的移动端应用程序。

  1. 特点：

    • 丰富的组件：Vant提供了众多常用的移动端UI组件，包括按钮、导航栏、轮播、卡片、表单元素、弹窗等。
    • 定制性强：您可以根据自己的需求对组件进行高度定制，包括样式、主题和功能。
    • 文档丰富：Vant提供了详细的文档和示例，以帮助开发者更容易地使用框架。
    • 社区支持：Vant有一个活跃的社区，开发者可以在社区中提问、分享经验和解决问题。

  2. 安装和使用：

    • 您可以使用npm或yarn来安装Vant：npm install vant 或 yarn add vant。
    • 在项目中引入Vant的CSS和JavaScript。
    • 使用Vue的Vue.use()方法来注册Vant组件，例如：Vue.use(Vant)。
    • 接下来，您可以在项目中使用Vant的组件，按照文档的指导进行配置和使用。

  3. 主题定制：

    • Vant允许您轻松定制主题，以满足您应用程序的设计需求。您可以自定义颜色、字体、间距等。
    • Vant提供了主题定制工具，帮助您生成自定义主题的CSS文件。

  4. 支持的平台：Vant主要用于构建移动端应用，支持iOS和Android平台。

  5. 版本：请注意，Vant不断更新和改进，因此建议查看它的官方文档以获取最新信息和使用方法。

总的来说，Vant是一个功能强大、易于使用的移动端UI框架，适用于构建各种类型的移动应用程序。如果您使用Vue.js，并且需要构建具有吸引人用户界面的移动应用，Vant是一个很好的选择。它的文档和社区支持也会对您的开发工作有所帮助。

学习网站：介绍 - Vant Weapp (gitee.io)

 

一.数据库准备

其中包含我们的会议id，会议标题， 会议状态、会议图片及会议描述

分别通过会议id遍历获取我们选取当前的会议，通过

@Autowired
private VoteMapper voteMapper;@RequestMapping("/add")
public Object Add (Vote vote){int i = voteMapper.insertSelective(vote);return ResponseUtil.ok();
}

投票状态进行分类，参与未参与，及我们的投票信息：会议标题、投票组织信息图片、投票描述

二.后端逻辑演示

1.发起投票

通过新增投票向后端发送请求，在controller调用新增投票的方法，并将投票的信息进行存储添加到数据库。

@Autowiredprivate VoteMapper voteMapper;@RequestMapping("/add")public Object Add (Vote vote){int i = voteMapper.insertSelective(vote);return ResponseUtil.ok();}
<insert id="insertSelective" parameterType="com.zking.ssm.model.Vote" >insert into t_oa_meeting_vote<trim prefix="(" suffix=")" suffixOverrides="," ><if test="meetingId != null" >meetingId,</if><if test="name != null" >name,</if><if test="remark != null" >remark,</if><if test="images != null" >images</if></trim><trim prefix="values (" suffix=")" suffixOverrides="," ><if test="meetingId != null" >#{meetingId,jdbcType=BIGINT},</if><if test="name != null" >#{name,jdbcType=VARCHAR},</if><if test="remark != null" >#{remark,jdbcType=VARCHAR},</if><if test="images != null" >#{images,jdbcType=VARCHAR}</if></trim></insert>

2.查询投票

 前端向后端发送查询会议投票请求，调用后端查询的方法，返回状态不为空的投票会议

@Autowiredprivate VoteMapper voteMapper;@RequestMapping("/list")public Object list (Integer state){List<Vote> votes = voteMapper.selectByList(state);return ResponseUtil.ok(votes);}

 

<select id="selectByList" resultMap="BaseResultMap" parameterType="java.lang.Integer" >select<include refid="Base_Column_List" />from t_oa_meeting_votewhere 1=1<if test="state != null" >and state = #{state,jdbcType=BIGINT}</if></select>

三.前端准备

1.数据接口

将所有数据接口封装到api.js文件实现前后端数据交互

// 以下是业务服务器API地址// 本机开发API地址
var WxApiRoot = 'http://localhost:8080/oapro/wx/';module.exports = {IndexUrl: WxApiRoot + 'home/index', //首页数据接口MettingVoteAdd : WxApiRoot+'vote/add',//增加投票MettingVoteList : WxApiRoot+'vote/list',//获取投票信息MettingVoteupdate : WxApiRoot+'vote/update',//确认投票};

 2.前端逻辑演示

2.0 基本数据结构存储

data: {tabs: ['发起投票', '未参与', '已参与', '全部投票'],//顶部导航栏componentStatus: [true, false, false, false],//用于处理内容显示engage:[],//未参与的投票not:[],//已参与的投票lists:[],//全部投票信息meeting_id: '请选择会议',imageUrl: '',//图片路径votename: '123'},

2.1 顶部选项卡 

我们通过自定义组件完成顶部的选项卡，在完成点击时展示不同的内容

（1）模板定义
<view class="tabs"><view class="tabs_title"><view wx:for="{{tabList}}" wx:key="id" class="title_item  {{index==tabIndex?'item_active':''}}" bindtap="handleItemTap" data-index="{{index}}"><view style="margin-bottom:5rpx">{{item}}</view><view style="width:30px" class="{{index==tabIndex?'item_active1':''}}"></view></view></view><view class="tabs_content"><slot></slot></view>
</view>
（2）事件定义
var App = getApp();
Component({/*** 组件的属性列表*/properties: {tabList:Object},/*** 组件的初始数据*/data: {tabIndex:0},/*** 组件的方法列表*/methods: {handleItemTap(e){// 获取索引const {index} = e.currentTarget.dataset;// 触发 父组件的事件this.triggerEvent("tabsItemChange",{index})this.setData({tabIndex:index})}}
})

注：在使用时，需要到指定页面的xxx.json中进行添加使用，如：

{"navigationBarTitleText": "投票管理","usingComponents": {"tabs":"/components/tabs/tabs",}
}

2.2 发起投票

 首先获取投票信息，将投票信息存储到对象中，并通过事件将投票信息以数据接口的形式向后端发送新增投票的请求

voteparticipate(id){// console.log(id.target.dataset.item)wx.showModal({title: '提示',content: '投票后不可修改，是否投票?',success: function (res) {if (res.confirm) {//这里是点击了确定以后util.request(api.MettingVoteupdate, {id:id.target.dataset.item}).then(res => {// console.log(res)if (res.errno == 0) {wx.showToast({title: '投票成功！！',icon: 'none',duration: 1000//持续的时间})}}).catch(res => {})} else {//这里是点击了取消以后alert('投票取消')}}})},

2.3初始化投票会议

我们通过传入不同状态返回不同类型投票会议

Voteiniengage(states) {util.request(api.MettingVoteList,{state:states}).then(res => {this.setData({engage: res.data})}).catch(res => {console.log('投票出错')})},

效果展示

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Spring Boot集成Swagger接口分类与各元素排序问题

Spring Boot集成Swagger接口分类与各元素排序问题

在上一篇中我们完成使用JSR-303校验&#xff0c;以及利用Swagger2得到相关接口文档&#xff0c;这节&#xff0c;我们在原先的基础之上&#xff0c;完成Swagger中关于对各个元素之间控制前后顺序的具体配置方法。 Swagger的接口的分组 首先我们需要对Swagger中的接口也就是以…
阅读更多...
ElasticSearch深度解析入门篇：高效搜索解决方案的介绍与实战案例讲解，带你避坑

ElasticSearch深度解析入门篇：高效搜索解决方案的介绍与实战案例讲解，带你避坑

ElasticSearch深度解析入门篇&#xff1a;高效搜索解决方案的介绍与实战案例讲解&#xff0c;带你避坑 1.Elasticsearch 产生背景 大规模数据如何检索 如&#xff1a;当系统数据量上了 10 亿、100 亿条的时候&#xff0c;我们在做系统架构的时候通常会从以下角度去考虑问题&a…
阅读更多...
52张扑克牌(Python字符串替换)

52张扑克牌(Python字符串替换)

输入a~d的字母对应扑克牌黑、红、梅、方花色 1~13数字对应扑克牌点数&#xff1b;输出“字母数字”字符串对应的扑克牌花色和点数。 (本笔记适合熟悉Python循环和str字符串处理的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free…
阅读更多...
智慧矿山系统中的猴车安全监测与识别

智慧矿山系统中的猴车安全监测与识别

智慧矿山是近年来兴起的一种采用人工智能&#xff08;AI&#xff09;技术的矿山管理方式&#xff0c;它通过利用智能传感设备和先进算法来实现对矿山环境和设备进行监测和管理&#xff0c;从而提高矿山的安全性和效率。在智慧矿山的AI算法系列中&#xff0c;猴车不安全行为识别…
阅读更多...
【信创】银河麒麟V10 本地部署yum数据源

【信创】银河麒麟V10 本地部署yum数据源

1. 下载银河麒麟系统ISO镜像文件。 https://fdoc.epoint.com.cn:3366/ISO/麒麟V10/ wget https://fdoc.epoint.com.cn:3366/ISO/麒麟V10/Kylin-Server-10-SP1-Release-Build19-20210319-x86.iso 一般这个镜像文件会默认放置在/home目录下&#xff0c;如图&#xff1a; 挂载到…
阅读更多...
宇信科技：强势行业加速融入AIGC，同时做深做细

宇信科技：强势行业加速融入AIGC，同时做深做细

【科技明说 &#xff5c; 重磅专题】 大家可能没有想到&#xff0c;一向对外低调行事的宇信科技&#xff0c;在AIGC方面2023年就已经训练出了适配金融场景的垂直模型&#xff0c;并应用到了各产品线上&#xff0c;同时结合通用大模型预研了宇信金融系统编程大模型。宇信金融系…
阅读更多...
我用好说 AI 做二次元人设

我用好说 AI 做二次元人设

你有没有想过自己做一部原创作品&#xff1f; 就像开发《星露谷物语》那样&#xff0c;自己把控作品的 角色、故事、载体、宣传 等方方面面&#xff0c;让 idea 不再只是灵光一闪。 以前是 “万事开头难”&#xff0c;可能第一步都举步维艰。但现在有了 AI 就不同了&#xff…
阅读更多...
电脑频繁出现程序无响应怎么办？

电脑频繁出现程序无响应怎么办？

在Windows系统中每个运行的应用程序都会有一个进程&#xff0c;而每个进程会有多个线程&#xff0c;就如你打开微信同时与多个人聊天&#xff0c;而每个线程只能同时处理一个线程。若Windows向程序传递消息时&#xff0c;而程序在处理其他工作未作出反应&#xff0c;Windows就会…
阅读更多...
吐血整理，Jmeter接口测试-项目案例场景，直接上高速...

吐血整理，Jmeter接口测试-项目案例场景，直接上高速...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 场景一&#xff1…
阅读更多...
Matlab2022b图文安装保姆级教程

Matlab2022b图文安装保姆级教程

注意&#xff1a;完成安装步骤1和步骤2之后&#xff0c;再去使用Matlab2022b 本次安装后的版本信息如下&#xff0c;64位软件&#xff0c;windows系统 Matlab2022a与2022b的比较 MATLAB主要用于数据分析、无线通信、深度学习、图像处理与计算机视觉、信号处理、量化金融与风险…
阅读更多...
中国各城市土地利用类型（城市功能）矢量数据集（shp）

中国各城市土地利用类型（城市功能）矢量数据集（shp）

中国各城市土地利用类型（城市功能）数据集 时间：2018年 全国范围的城市用地类型数据（居住/商业/交通用地等共计11类） 分类：居住用地、商业用地、工业用地、医疗设施用地、体育文化设施用地、交通场站用地、绿地等用地类型 含城市编码、一级分类5个、二级分类11个 数据按…
阅读更多...
省市区三级联动查询redis（通过python脚本导入数据）

省市区三级联动查询redis（通过python脚本导入数据）

最近工作有一个工作需求是实现省市区联动&#xff0c;点击省下拉框&#xff0c;选中一个省&#xff0c;然后再选市&#xff0c;最后选区&#xff0c;当然最重要的首先自然是数据了&#xff0c;没数据怎么测试接口&#xff0c;我数据是在 https://hxkj.vip/demo/echartsMap/ 这里…
阅读更多...
Notepad++安装插件和配置快捷键

Notepad++安装插件和配置快捷键

Notepad是一款轻量级、开源的文件编辑工具&#xff0c;可以编辑、浏览文本文件、二进制文件、.cpp、.java、*.cs等文件。Notepad每隔1个月&#xff0c;就有一个新版本&#xff0c;其官网是&#xff1a; https://github.com/notepad-plus-plus/notepad-plus-plus。这里介绍其插件…
阅读更多...
企业内部外网向内网传输文件如何实现高效安全？

企业内部外网向内网传输文件如何实现高效安全？

随着信息技术的发展&#xff0c;企业内部外网隔离已成为一种常见的网络安全措施&#xff0c;旨在防止外部攻击者入侵内部网络&#xff0c;保护企业的核心数据和业务系统。然而&#xff0c;企业内外网隔离也带来了一些问题&#xff0c;其中之一就是如何实现内外网之间的文件传输…
阅读更多...
Mac 配置环境变量

Mac 配置环境变量

Mac 配置环境变量 修改配置文件 vim ~/.bash_profile i进入编辑模式. Esc&#xff1a;wq 保存文件 esc:q 退出 如&#xff1a;jdk环境变量配置 JAVA_HOME/Library/Java/JavaVirtualMachines/jdk1.8.0_361.jdk/Contents/Home CLASSPATH J A V A H O M E / l i b / t o o l…
阅读更多...
【Acwing170】加成序列（dfs+迭代加深+剪枝）题解和一点感想

【Acwing170】加成序列（dfs+迭代加深+剪枝）题解和一点感想

本思路来自acwing算法提高课 题目描述 看本文需要准备的知识 1.dfs算法基本思想 2.对剪枝这个词有个简单的认识 迭代加深思想和此题分析 首先&#xff0c;什么是迭代加深呢&#xff1f;当一个问题的解有很大概率出现在递归树很浅的层&#xff0c;但是这个问题的解本身存在…
阅读更多...
【Proteus仿真】【Arduino单片机】SG90舵机控制

【Proteus仿真】【Arduino单片机】SG90舵机控制

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器&#xff0c;使用SG90舵机等。 主要功能&#xff1a; 系统运行后&#xff0c;舵机开始运行。 二、软件设计 /* 作者&#xff1a;嗨小易&#xff08;QQ&#x…
阅读更多...
【RTOS学习】CubeMX对FreeRTOS的适配

【RTOS学习】CubeMX对FreeRTOS的适配

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《RTOS学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 经过前面的学习&#xff0c;现在我已经对FreeRTOS有了一个初步的认识&#xff0c;而且也可以使用F…
阅读更多...
TiDB 企业版全新升级，平凯数据库核心特性全解读

TiDB 企业版全新升级，平凯数据库核心特性全解读

作为 TiDB 企业版的全新升级&#xff0c;平凯数据库一经推出便广受媒体及用户关注。 近日&#xff0c;平凯星辰首席科学家丁岩在“平凯数据库全解读”活动中&#xff0c;首次详细介绍了平凯数据库的核心能力。 本文为丁岩演讲实录全文&#xff0c;为方便阅读&#xff0c;已做部…
阅读更多...
Nginx 实战指南：暴露出请求的真实 IP

Nginx 实战指南：暴露出请求的真实 IP

&#x1f52d; 嗨&#xff0c;您好 &#x1f44b; 我是 vnjohn&#xff0c;在互联网企业担任 Java 开发&#xff0c;CSDN 优质创作者 &#x1f4d6; 推荐专栏&#xff1a;Spring、MySQL、Nacos、Java&#xff0c;后续其他专栏会持续优化更新迭代 &#x1f332;文章所在专栏&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023