长沙官网网站建设哪家好,做网站怎么做的,eyoucms去版权,做网站好看的背景图片前言
随着社交网络的兴起和移动互联网的普及#xff0c;人们对于参与和表达意见的需求越来越强烈。在这个背景下#xff0c;微信小程序投票管理系统应运而生。它为用户提供了一个智能、便捷的投票平台#xff0c;使用户可以轻松创建和参与各种类型的投票活动。本文将详细介…前言
随着社交网络的兴起和移动互联网的普及人们对于参与和表达意见的需求越来越强烈。在这个背景下微信小程序投票管理系统应运而生。它为用户提供了一个智能、便捷的投票平台使用户可以轻松创建和参与各种类型的投票活动。本文将详细介绍微信小程序投票管理系统的设计与功能并探讨其在实际应用中的优势和耐人寻味之处。
投票管理的实现
实现流程 1.用户进入后显示投票页面 2.用户可以选择自己想投票的选项并进行投票 3.投票完成后显示总的投票结果以及投票数量 4.限制每个用户每天投票只能进行一次 用例图演示
用户在系统内可以登陆选择投票对象、进行投票、查看投票等等。 数据表 总体设计 投票管理系统后端
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 {Autowiredprivate VoteinfoMapper voteinfoMapper;RequestMapping(/index)public Object index(Voteinfo voteinfo) {Voteinfo voteinfo1 voteinfoMapper.selectByPrimaryKey(3);MapObject, Object data new HashMapObject, Object();data.put(voteinfoList,voteinfo1);return ResponseUtil.ok(data);}
}工具类getopenid---获取用户的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();// 获取所有响应头字段MapString, ListString 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?appidwxf55dc8be7c3885absecret05e3ac3badee5c088ff97b5f3cac3974js_code;String rigth grant_typeauthorization_code;return result code rigth;}public static String outopenid(String code){String json getOpenid(jointStr(code));JSONObject jsonObj JSON.parseObject(json);System.out.println(openidjsonObj.getString(openid));return jsonObj.getString(openid);}}解释 该类包含三个静态方法getOpenid()、jointStr()和outopenid()。 getOpenid(String url)方法 参数一个字符串类型的URL。返回值一个字符串类型的结果。功能通过发送GET请求到指定的URL并从响应中解析出openid。 首先创建一个URL对象表示要连接的URL。然后使用openConnection()方法打开与URL之间的连接。设置通用的请求属性如accept、connection和user-agent。建立实际的连接。获取所有响应头字段。定义一个BufferedReader输入流来读取URL的响应。逐行读取响应内容并将其拼接到结果字符串中。关闭输入流。返回结果字符串。 jointStr(String code)方法 参数一个字符串类型的code。返回值一个字符串类型的拼接后的URL。功能根据给定的code和appid和密钥拼接成一个完整的URL用于向微信服务器发送请求以获取用户的openid。 定义一个字符串变量result存储拼接后的URL前半部分。定义一个字符串变量rigth存储拼接后的URL后半部分。返回拼接后的完整URL。 outopenid(String code)方法 参数一个字符串类型的code。返回值一个字符串类型的openid。功能调用getOpenid()方法获取响应中的JSON字符串然后将其解析为JSON对象并从中提取出openid。 调用getOpenid()方法传入拼接后的URL获取响应中的JSON字符串。使用JSON.parseObject()方法将JSON字符串转换为JSON对象。从JSON对象中获取名为openid的值并打印出来。返回提取出的openid。 获取小程序传递的参数
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投票);}}
获取参数并修改投票数量
int votevalue Integer.parseInt(request.getParameter(votevalue));String sSELECT * FROM voteinfo where id votevalue;sqlUtils utilsnew sqlUtils();Listvote1 selectsql utils.selectsql11(s);int a 0;for(vote1 tl:selectsql){atl.getValue();}a;System.out.println(a);String s1update voteinfo set value a where id votevalue;int a1 utils.DMLsql(s1);utils.Exceptionsql();
投票管理系统前端
投票页面wxml image src{{indeximage}} classindexImage_top/image
view classtext-top请选择你喜欢的角色/view
radio-group bindchangeradioChang data-id{{item.id}}view classindex_class wx:for{{voteinfo}} wx:for-itemitem wx:keyindexview classvoteInfo_classradio value{{item.id}}view{{item.id}}号选手{{item.name}}/viewimage src{{item.imagesrc}} classvoteImage/image/radio/view/viewbutton classbtn typeprimary bindtapsureVote确定投票/button
/radio-group
view classtext-bottom
view每人只能投票一次投票后可以查看每个选项的投票次数/view/viewwxss
/*首页图*/
.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;
}
js
Page({data: {indeximage:/pages/images/index.png,voteinfo:[],radioValue: , //当前用户选中的投票值userinfo: {}, //当前用户的微信信息openid: , //当前用户的openidislogin: 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()//微信登录获取openidthis.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.valueconsole.log(this.radioValue)if (this.data.a 1) {//判断该用户是否投票this.isopenid()this.setData({a: 0})}},//获取openidwxlogin: function () {console.log(我是获取openid)var that thiswx.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.datathat.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.userInfothat.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 thiswx.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.datawx.setStorageSync(isopenid, isopenid)},fail() {wx.showToast({title: 网络连接失败,icon: error})console.log(失败);},})},//获取投票信息getvoteinfo: function () {console.log(我是获取投票图片)var that thiswx.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
下拉刷新当用户在页面顶部向下滑动时可以触发下拉刷新操作从而更新页面内容在上述js中并需定义方法
{enablePullDownRefresh: true
}
投票结果wxml
view classcenterimage classimage_user src{{userImage}}/imageview classtext_user{{userName}}你好/viewview wx:if{{isopenid}}classtext_tip你今天已经参加过本投票/viewview wx:if{{!isopenid}} classview_text你的投票结果为{{votevalue}}号选手{{voteinfo[votevalue-1].name}}/viewview classview_text2截止到{{date}}的投票结果为/viewview wx:for{{voteinfo}} wx:for-itemitem wx:keyindexview classview_text1{{item.id}}号选手{{item.name}}票数为{{item.value}}票/viewview classindex_classprogress classprogress_box percent{{item.value/num*100}} active stroke-width20border-radius50//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;
}
js
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 thisvar 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 thiswx.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 0var i 0console.log(that.data.voteinfo);for(i 0;ithat.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(失败);}})}})
效果演示
当我们登录不同账号时都将有唯一标识进行判断是否可以参与投票这里也是注册了两个账号测试
一开始需要进行登录之后通过openid拿到个人用户信息去判断该用户是否参与投票 登录之后可以直接投票并每天只能参与一次投票
