微信小程序之投票管理

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

微信小程序之投票管理,微信小程序,微信小程序,小程序,微信,交互,学习

前言

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

所用技术点

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调用新增投票的方法,并将投票的信息进行存储添加到数据库。

@Autowired
    private 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.查询投票

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

@Autowired
    private 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_vote
    where 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('投票出错')
    })
  },

效果展示

微信小程序之投票管理,微信小程序,微信小程序,小程序,微信,交互,学习文章来源地址https://www.toymoban.com/news/detail-734106.html

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

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

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

相关文章

  • 【微信小程序】实现投票功能(附源码)

            Vant Weapp 是一个基于微信小程序的组件库,它提供了丰富的 UI 组件和交互功能,能够帮助开发者快速构建出现代化的小程序应用。Vant Weapp 的设计理念注重简洁、易用和高效,同时提供灵活的定制化选项,以满足开发者不同的需求。         Vant Weapp 包含了多个

    2024年02月08日
    浏览(44)
  • 基于微信小程序的投票评选系统小程序

    文末联系获取源码 开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea Maven包:Maven3.3.9 浏览器:谷歌浏览器 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序运行软件:微信开发者 社会发展日新月异

    2024年02月08日
    浏览(55)
  • 微信小程序评选投票系统设计与实现

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、

    2024年02月04日
    浏览(51)
  • 基于微信小程序的投票系统源码

    开发环境及工具: 大等于jdk1.8,大于mysql5.5,idea(eclipse),微信开发者工具 技术说明: springboot mybatis 微信小程序 代码注释齐全,没有多余代码,适合学习(毕设),二次开发,包含论文技术相关文档。 功能介绍: 用户端: 登录注册(含授权登录) 首页显示轮播图,投票列

    2024年02月09日
    浏览(88)
  • 微信小程序毕业设计作品成品(03)在线投票小程序投票评选小程序系统设计与实现

    博主介绍 :《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(46)
  • 基于php微信小程序评选投票系统设计与实现

    开发概要 开发操作系统:windows10 + 4G内存 + 500G 小程序开发:微信开发者工具(MINA框架) 后台环境:IIS +PHP 后台开发语言:PHP 后台开发工具:Dreamweaver +PhpStorm 数据库:mysql8 数据库管理工具:navicat 其他开发语言:html + css +javascript

    2024年02月11日
    浏览(65)
  • uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -用户投票实现

    锋哥原创的uniapp微信小程序投票系统实战: uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibili uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )共计21条视频,包括:uniapp微信小程序投票系统实

    2024年01月23日
    浏览(72)
  • java毕业设计基于微信小程序的选民投票系统[附源码]

    本系统 (程序+源码) 带文档lw万字以上    文末可领取本课题的JAVA源码参考 随着移动互联网的普及和微信小程序的广泛应用,人们越来越倾向于使用便捷、快速的移动应用来处理日常事务。在政治参与和民主决策方面,传统的纸质投票或基于网站的电子投票系统已逐渐不能

    2024年04月28日
    浏览(56)
  • 微信小程序之自定义组件(OA项目个人主页及投票)

    本期为大家带来微信小程序自定义组件及OA项目的个人主页布局和投票 自定义组件 / 介绍 (qq.com)  2.1 创建目录 在根目录下依次创建components/tabs,然后在tabs中新建Component 创建好后会自动为我们生成对应的文件 2.2添加配置文件(关闭检查) 在根目录下的project.config.json中的settin

    2024年02月05日
    浏览(44)
  • uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子明细实现

    锋哥原创的uniapp微信小程序投票系统实战: uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibili uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )共计21条视频,包括:uniapp微信小程序投票系统实

    2024年01月22日
    浏览(73)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包