网站建设都包括,书籍页面设计模板,优化网站视频,网络营销的特点有哪些前言
对于会议管理模块#xff0c;必不可少的当然就是我们的投票管理#xff0c;实现真正意义上的无纸化办公#xff0c;本期博客为大家介绍会议管理模块#xff0c;包括发布投票及查看各类投票的状态 所用技术点 MyBatis、SpringMVC、VentUI MyBatis和SpringMVC在博客主…
前言
对于会议管理模块必不可少的当然就是我们的投票管理实现真正意义上的无纸化办公本期博客为大家介绍会议管理模块包括发布投票及查看各类投票的状态 所用技术点 MyBatis、SpringMVC、VentUI MyBatis和SpringMVC在博客主页有讲解可以翻看往期博客
这里简单介绍一下VantUI
VantUI
Vant是一款基于Vue.js的流行移动端UI框架。它提供了丰富的UI组件和工具可以帮助您快速构建漂亮的移动端应用程序。 特点 丰富的组件Vant提供了众多常用的移动端UI组件包括按钮、导航栏、轮播、卡片、表单元素、弹窗等。定制性强您可以根据自己的需求对组件进行高度定制包括样式、主题和功能。文档丰富Vant提供了详细的文档和示例以帮助开发者更容易地使用框架。社区支持Vant有一个活跃的社区开发者可以在社区中提问、分享经验和解决问题。 安装和使用 您可以使用npm或yarn来安装Vantnpm install vant 或 yarn add vant。在项目中引入Vant的CSS和JavaScript。使用Vue的Vue.use()方法来注册Vant组件例如Vue.use(Vant)。接下来您可以在项目中使用Vant的组件按照文档的指导进行配置和使用。 主题定制 Vant允许您轻松定制主题以满足您应用程序的设计需求。您可以自定义颜色、字体、间距等。Vant提供了主题定制工具帮助您生成自定义主题的CSS文件。 支持的平台Vant主要用于构建移动端应用支持iOS和Android平台。 版本请注意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 idinsertSelective parameterTypecom.zking.ssm.model.Vote insert into t_oa_meeting_votetrim prefix( suffix) suffixOverrides, if testmeetingId ! null meetingId,/ifif testname ! null name,/ifif testremark ! null remark,/ifif testimages ! null images/if/trimtrim prefixvalues ( suffix) suffixOverrides, if testmeetingId ! null #{meetingId,jdbcTypeBIGINT},/ifif testname ! null #{name,jdbcTypeVARCHAR},/ifif testremark ! null #{remark,jdbcTypeVARCHAR},/ifif testimages ! null #{images,jdbcTypeVARCHAR}/if/trim/insert
2.查询投票 前端向后端发送查询会议投票请求调用后端查询的方法返回状态不为空的投票会议
Autowiredprivate VoteMapper voteMapper;RequestMapping(/list)public Object list (Integer state){ListVote votes voteMapper.selectByList(state);return ResponseUtil.ok(votes);} select idselectByList resultMapBaseResultMap parameterTypejava.lang.Integer selectinclude refidBase_Column_List /from t_oa_meeting_votewhere 11if teststate ! null and state #{state,jdbcTypeBIGINT}/if/select
三.前端准备
1.数据接口
将所有数据接口封装到api.js文件实现前后端数据交互
// 以下是业务服务器API地址// 本机开发API地址
var WxApiRoot http://localhost:8080/oapro/wx/;module.exports {IndexUrl: WxApiRoot home/index, //首页数据接口MettingVoteAdd : WxApiRootvote/add,//增加投票MettingVoteList : WxApiRootvote/list,//获取投票信息MettingVoteupdate : WxApiRootvote/update,//确认投票}; 2.前端逻辑演示
2.0 基本数据结构存储
data: {tabs: [发起投票, 未参与, 已参与, 全部投票],//顶部导航栏componentStatus: [true, false, false, false],//用于处理内容显示engage:[],//未参与的投票not:[],//已参与的投票lists:[],//全部投票信息meeting_id: 请选择会议,imageUrl: ,//图片路径votename: 123},
2.1 顶部选项卡
我们通过自定义组件完成顶部的选项卡在完成点击时展示不同的内容
1模板定义
view classtabsview classtabs_titleview wx:for{{tabList}} wx:keyid classtitle_item {{indextabIndex?item_active:}} bindtaphandleItemTap data-index{{index}}view stylemargin-bottom:5rpx{{item}}/viewview stylewidth:30px class{{indextabIndex?item_active1:}}/view/view/viewview classtabs_contentslot/slot/view
/view2事件定义
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(投票出错)})},
效果展示