WeChat Mini Program Voting Management System: Create an intelligent and convenient voting experience

Preface

With the rise of social networks and the popularity of mobile Internet, people have an increasingly strong need to participate and express their opinions. In this context, the WeChat mini program voting management system came into being. It provides users with a smart and convenient voting platform that allows users to easily create and participate in various types of voting activities. This article will introduce in detail the design and functions of the WeChat mini-program voting management system, and explore its advantages and intriguing features in practical applications.

Implementation of voting management

Implementation process

1. The voting page is displayed after the user logs in

2. Users can choose the options they want to vote for and vote

3. After the voting is completed, the total voting results and the number of votes will be displayed.

4. Limit each user to vote only once per day.

Use case diagram demonstration

Users can log in to the system, select voting objects, vote, view votes, etc.

data sheet

overall design

Voting management system backend

mapper

package com.ctb.minoa.mapper;

import com.ctb.minoa.model.Voteinfo;

public interface VoteinfoMapper {
    int deleteByPrimaryKey(int id);

    int insert(Voteinfo record);

    int insertSelective(Voteinfo record);

    Voteinfo selectByPrimaryKey(int id);

    int updateByPrimaryKeySelective(Voteinfo record);

    int updateByPrimaryKey(Voteinfo record);
}

controller

/**
 * @Autho biao
 *
 */
@RestController
@RequestMapping("/wx/vote")
public class VoteinfoController {
    @Autowired
    private VoteinfoMapper voteinfoMapper;
    @RequestMapping("/index")
    public Object index(Voteinfo voteinfo) {
        Voteinfo voteinfo1 = voteinfoMapper.selectByPrimaryKey(3);
        Map<Object, Object> data = new HashMap<Object, Object>();
        data.put("voteinfoList",voteinfo1);
        return ResponseUtil.ok(data);
    }
}

Tool class getopenid---Get the user's openid

package util;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import java.io.*;
import java.net.URL;
import java.net.URLConnection;
import java.util.List;
import java.util.Map;

/**
 * biao
 *拼接用户信息对官方进行用户的openid进行查询
 *
 */
public class getopenid {

    public static String getOpenid(String url) {
        String result = "";
        BufferedReader in = null;
        try {
            String urlNameString = url;
            URL realUrl = new URL(urlNameString);
            // 打开和URL之间的连接
            URLConnection connection = realUrl.openConnection();
            // 设置通用的请求属性
            connection.setRequestProperty("accept", "*/*");
            connection.setRequestProperty("connection", "Keep-Alive");
            connection.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)");
            // 建立实际的连接
            connection.connect();
            // 获取所有响应头字段
            Map<String, List<String>> map = connection.getHeaderFields();
            // 遍历所有的响应头字段

            // 定义 BufferedReader输入流来读取URL的响应
            in = new BufferedReader(new InputStreamReader(
                    connection.getInputStream()));
            String line;
            while ((line = in.readLine()) != null) {
                result += line;
            }
        } catch (Exception e) {
            System.out.println("发送GET请求出现异常！" + e);
            e.printStackTrace();
        }
        // 使用finally块来关闭输入流
        finally {
            try {
                if (in != null) {
                    in.close();
                }
            } catch (Exception e2) {
                e2.printStackTrace();
            }
        }

        return result;
    }

    public static String jointStr(String code) {
        String result = "https://api.weixin.qq.com/sns/jscode2session?appid=wxf55dc8be7c3885ab&secret=05e3ac3badee5c088ff97b5f3cac3974&js_code=";
        String rigth = "&grant_type=authorization_code";
        return result + code + rigth;
    }

    public static String outopenid(String code){
        String json = getOpenid(jointStr(code));
        JSONObject jsonObj = JSON.parseObject(json);
        System.out.println("openid："+jsonObj.getString("openid"));
        return jsonObj.getString("openid");
    }



}

explain:

This class contains three static methods: getOpenid(), jointStr()and outopenid().

getOpenid(String url)method:

Parameters: A URL of string type.

Return value: a string type result.

Function: By sending a GET request to the specified URL and parsing the openid from the response.

First, create an URLobject that represents the URL to connect to.

Then, use openConnection()the method to open a connection to the URL.

Set common request properties such as "accept", "connection" and "user-agent".

Establish the actual connection.

Get all response header fields.

Define an BufferedReaderinput stream to read the response from the URL.

Read the response content line by line and concatenate it into the result string.

Close the input stream.

Returns the result string.

jointStr(String code)method:

Parameters: a code of string type.

Return value: A concatenated URL of string type.

Function: Concatenate a complete URL based on the given code, appid and key , which is used to send a request to the WeChat server to obtain the user's openid.

Define a string variable resultto store the first half of the spliced URL.

Define a string variable rigthto store the second half of the spliced URL.

Returns the complete concatenated URL.

outopenid(String code)method:

Parameters: a code of string type.

Return value: an openid of string type.

Function: Call getOpenid()the method to get the JSON string in the response, then parse it into a JSON object and extract the openid from it.

Call getOpenid()the method, pass in the spliced URL, and get the JSON string in the response.

Use JSON.parseObject()method to convert JSON string to JSON object.

Get the value named "openid" from the JSON object and print it.

Return the extracted openid.

Get the parameters passed by the applet

String openid =request.getParameter("openid");
        Writer out = response.getWriter();
        String sqlSel = "SELECT * FROM openid WHERE openid = '"+ openid +"'";
        String sqlIns = "INSERT INTO openid VALUES ('"+ openid +"')";
        System.out.println(sqlIns);
        sqlUtils sqlutils = new sqlUtils();
        if (!openid.equals("")) {
            int count = sqlutils.selectOpenid(sqlSel);
            System.out.println(count);
            if (count == 0) {
                sqlutils.DMLsql(sqlIns);
                System.out.println(sqlIns);
                out.write("false");
                System.out.println("没投票");
            } else {
                out.write("true");//数据库中已有数据
                System.out.println("1投票");
            }
        }

Get parameters and modify the number of votes

int votevalue = Integer.parseInt(request.getParameter("votevalue"));
        String s="SELECT * FROM voteinfo where id =" + votevalue;
        sqlUtils utils=new sqlUtils();
        List<vote1> selectsql = utils.selectsql11(s);

        int a = 0;
        for(vote1 tl:selectsql)
        {
            a=tl.getValue();
        }
        ++a;
        System.out.println(a);
        String s1="update voteinfo set value =" + a + " where id =" + votevalue;
        int a1 = utils.DMLsql(s1);
        utils.Exceptionsql();

Voting management system front-end

Voting page wxml


<image src="{
   
   {indeximage}}" class="indexImage_top"></image>
<view class="text-top">请选择你喜欢的角色</view>
<radio-group bindchange="radioChang" data-id="{
   
   {item.id}}">
    <view class="index_class" wx:for="{
   
   {voteinfo}}" wx:for-item="item" wx:key="index">
        <view class="voteInfo_class">
            <radio value="{
   
   {item.id}}">
                <view>{
   
   {item.id}}号选手：{
   
   {item.name}}</view>
                <image src="{
   
   {item.imagesrc}}" class="voteImage"></image>
            </radio>
        </view>
    </view>
    <button class="btn" type="primary" bindtap="sureVote">确定投票</button>
</radio-group>
<view class="text-bottom">
<view>每人只能投票一次，投票后可以查看每个选项的投票次数</view>

</view>

wxss

/*首页图*/
.indexImage_top {
    width: 100%;
    height: 300rpx;
}

.text-top{
    display: flex;
    align-items: center;
    justify-content: center;/*对齐方式*/
    height: 100rpx;
    font-weight: 600;
    font-size: large;
}
.text-bottom{
    display: flex;
    flex-direction: column;/*以列的方式进行排列*/
    align-items: center;
    justify-content: center;
    height: 40rpx;
    font-size:smaller;
    margin-top:40px;/*margin外边距 上右下左 padding内边距*/
    margin-bottom: 60rpx;
}
/*投票view的边距*/
.voteInfo_class{
    padding: 20px 10px 20px 10px;
}
/*投票的图片大小*/
.voteImage {
    width: 250rpx;
    height: 250rpx;
}
/*首页排版*/
.index_class {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-around;
    display:inline-block
}

.btn{
    margin-top: 30rpx;
    width: 300rpx;
}

Page({
  data: {
    indeximage:"/pages/images/index.png",
    voteinfo:[],
    radioValue: '', //当前用户选中的投票值
    userinfo: {}, //当前用户的微信信息
    openid: '', //当前用户的openid
    islogin: false, //判断用户是否已经登陆
    isopenid: false, //判断用户是否已经投票
    a: 1 ,//判断是否对数据库查询用户是否投票
  },
  onLoad: function () {
    let islogin = wx.getStorageSync('islogin') || false //判断是否登陆
    let userinfo = wx.getStorageSync('userinfo') //取登陆后的信息
    //console.log(islogin)
    if (islogin) {
      this.setData({
        islogin: true,
        userinfo: userinfo,
      })
    }
    //判断本获取投票名字和图片
    this.getvoteinfo()
    //微信登录获取openid
    this.wxlogin()
  },
  //首页确定投票事件
  sureVote: function () {
    this.setData({
      a: 1
    })
    //let openid = wx.getStorageSync('openid')
    console.log(this.data.openid)
    //微信登录获取个人信息
    if (!this.data.islogin) {
      //登陆及获取用户信息
      this.wxgeiuserinfo()
      //console.log(this.data.islogin)
      //console.log(this.data.userinfo)
    } else {
      //console.log(this.data.islogin)
      //console.log(this.data.userinfo)
      if (this.radioValue == undefined) {
        wx.showToast({
          title: '请选择你的投票对象',
          icon: 'none'
        })
      } else {
        this.data.isopenid = wx.getStorageSync('isopenid') //判断用户是否投票
        console.log(this.data.isopenid)
        if (this.data.isopenid) { //如果投过票  就直接跳转
          wx.setStorageSync('votevalue', this.radioValue)
          wx.redirectTo({
            url: '/pages/result/result'
          })
        } else {
          wx.request({
            url: 'http://localhost:8080/vote/voteupdate',
            data: {
              votevalue: this.radioValue
            },
            method: 'get',
            header: {
              'content-type': 'application/json'
            },
          })
          wx.setStorageSync('votevalue', this.radioValue)
          wx.redirectTo({
            url: '/pages/result/result'
          })
        }
      }
    }
  },
  //单选框组选中事件
  radioChang: function (e) {
    console.log("选择的值为" + e.detail.value)
    this.radioValue = e.detail.value
    console.log(this.radioValue)
    if (this.data.a == 1) {
      //判断该用户是否投票
      this.isopenid()
      this.setData({
        a: 0
      })
    }
  },
  //获取openid
  wxlogin: function () {
    console.log("我是获取openid")
    var that = this
    wx.login({
      success(res) {
        if (res.code) {
          //console.log(res.data)
          //发起请求
          wx.request({
            url: 'http://localhost:8080/vote/openid',
            data: {
              code: res.code
            },
            header: {
              'content-type': 'application/json'
            },
            success: function (res) {
              console.log(res);
              let openid = res.data
              that.setData({
                openid: openid
              })
              //console.log(that.data.openid);
              wx.setStorageSync('openid', that.data.openid)
            },
            fail: function (res) {
              console.log("失败");
            }
          })
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      }
    })
  },
  //登陆及获取用户信息
  wxgeiuserinfo: function () {
    console.log("我是登陆及获取用户信息")
    let that = this;
    wx.getUserProfile({
      desc: '获取个人信息以便于您的投票',
      success(res) {
        let userinfo = res.userInfo
        that.setData({
          islogin: true,
          userinfo: userinfo
        })
        wx.setStorageSync('islogin', true)
        wx.setStorageSync('userinfo', userinfo)
        console.log(that.islogin)
      },
      fail() {
        wx.showToast({
          title: '请求信息失败',
          icon: 'error'
        })
      }
    })
  },
  //判断该用户是否投票
  isopenid: function () {
    console.log("我是判断该用户是否投票")
    let that = this
    wx.request({
      url: 'http://localhost:8080/vote/isopenid',
      data: {
        openid: this.data.openid
      },
      method: 'get',
      header: {
        'content-type': 'application/json'
      },
      success(res) {
        console.log(res.data)
        let isopenid = res.data
        wx.setStorageSync('isopenid', isopenid)
      },
      fail() {
        wx.showToast({
          title: '网络连接失败！',
          icon: 'error'
        })
        console.log("失败");
      },
    })
  },
    //获取投票信息
    getvoteinfo: function () {
      console.log("我是获取投票图片")
      var that = this
      wx.request({
        url: 'http://localhost:8080/vote/voteinfo',
        success: function (res) {
          console.log(res);
          that.setData({
            voteinfo: res.data
          })
          console.log(that.data.voteinfo);
          wx.setStorageSync('voteinfo', res.data)
          wx.setStorageSync('isinfo', true)
        },
        fail: function (res) {
          wx.showToast({
            title: '网络连接失败！',
            icon: 'error'
          })
          console.log("失败");
        }
      })
    },
    onRefresh(){
      this.getvoteinfo()
    },
  //分享
  onShareAppMessage: function (res) {
    var that = this;
    //console.log(JSON.stringify(that.data.array)) 
    return {
      title: "快来和我一起投票吧",
      path: '/pages/index/index',
      imageUrl: "/pages/images/index.png"
    }
  },
//下拉刷新
onPullDownRefresh: function () {
    //调用刷新时将执行的方法
  this.onRefresh();
}
})

json

Pull-down refresh. When the user slides down at the top of the page, the pull-down refresh operation can be triggered to update the page content. In the above js, a method needs to be defined.

{
    "enablePullDownRefresh": true
}

Voting results wxml

<view class="center">
  <image class="image_user" src="{
   
   {userImage}}"></image>
  <view class="text_user">{
   
   {userName}}，你好</view>
  <view wx:if="{
   
   {isopenid}}"class="text_tip">你今天已经参加过本投票</view>
  <view wx:if="{
   
   {!isopenid}}" class="view_text">你的投票结果为：{
   
   {votevalue}}号选手：{
   
   {voteinfo[votevalue-1].name}}</view>
  <view class="view_text2">截止到{
   
   {date}}的投票结果为：</view>
  <view wx:for="{
   
   {voteinfo}}" wx:for-item="item" wx:key="index">
  <view class="view_text1">{
   
   {item.id}}号选手：{
   
   {item.name}}，票数为：{
   
   {item.value}}票</view>
  <view class="index_class">
    <progress class="progress_box" percent="{
   
   {item.value/num*100}}" active stroke-width="20"
      border-radius="50"/>
  </view>
  </view>
</view>

wxss

.view_text2{
    font-weight: 300;
    font-size:small;
    margin-bottom:30px;
}
.view_text{
    height: 100rpx;
    font-weight: 600;
    font-size: large;
}
/*首页排版*/
.index_class {
    display: flex;
}

/*进度条排版*/
.progress_box{
    width: 500rpx;
    margin-bottom:50px;
}

.center{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.image_user{
    height: 100px;
    width: 100px;
    border-radius: 50px;
    margin-top:30px;
    margin-bottom:10px;
}
.text_user{
    font-weight: 600;
    font-size: large;
    margin-bottom:10px;
}
.text_tip{
    font-weight: 600;
    font-size: large;
    color: red;
    margin-bottom:10px;
}

Page({
  data: {
    date: new Date().toLocaleString(),
    votevalue: '',
    voteinfo: [],
    userName: '',
    userImage: '',
    isopenid: true,
    num:0
  },
  onLoad: function (options) {
     //获取投票信息
     this.getvoteinfo()
    let userinfo = wx.getStorageSync('userinfo') //取用户的头像 名字
    this.setData({
      userName: userinfo.nickName,
      userImage: userinfo.avatarUrl
    })
    let isopenid = wx.getStorageSync('isopenid') //判断用户是否已经进行过投票
    this.setData({
      isopenid: isopenid
    })
    console.log(this.data.isopenid)
    var that = this
    var votevalue = wx.getStorageSync('votevalue') //取用户的投票的对象
    this.setData({
      votevalue: votevalue
    })
    console.log(votevalue)
    
  },
  onShareAppMessage: function (res) {
    var that = this;
    //console.log(JSON.stringify(that.data.array)) 
    return {
      title: "快来和我一起投票吧",
      path: '/pages/index/index',
      imageUrl: "/pages/images/index.png"
    }
  },
  getvoteinfo: function () {
    console.log("我是获取投票图片")
    var that = this
    wx.request({
      url: 'http://localhost:8080/vote/voteinfo',
      /*method: 'get',
      header: {
        'content-type': 'application/json'
      },*/
      success: function (res) {
        //console.log(res);
        that.setData({
          voteinfo: res.data
        })
        var num = 0
        var i = 0
        console.log(that.data.voteinfo);
        for(i = 0;i<that.data.voteinfo.length;i++){
          num = num + that.data.voteinfo[i].value
        }
        that.setData({
          num: num
        })
        console.log(that.data.num);
      },
      fail: function (res) {
        wx.showToast({
          title: '网络连接失败！',
          icon: 'error'
        })
        console.log("失败");
      }
    })
  }

})

Effect demonstration

When we log in to different accounts, there will be unique identifiers to determine whether we can participate in voting. Here we also registered two accounts for testing.

You need to log in at the beginning and then get the personal user information through openid to determine whether the user participates in voting.

After logging in, you can vote directly and can only participate in one vote per day.