Springboot+Thymeleaf实现投票功能

Hello EveryBody，今天向大家介绍通过Springboot+themleaf实现投票相关的操作，此次投票功能主要涉及注册，登录，参与投票，图形展示，邮件发送，数据库连接。
下图是整个投票功能整体的代码结构：

现在我们介绍具体的细节。

一、注册

1.1 页面使用的是Thymeleaf,Thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎,在页面的头部需要先导入，另外还需要引入jquery，用于事件处理，HTML文档遍历，Ajax交互：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head><meta charset="UTF-8"><title>投票系统</title><img src="companylog.png" title="yoka" alt="youka" border="1" width="211" height="78"/><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">

1.2 通过正则对用户在输入框输入的账号，密码，邮箱，验证码进行校验：

$("#sub_btn").click(function () {//获取用户名并校验var usernameText = $("#username").val();var usernamePatt = /^\w{5,12}$/;if (!usernamePatt.test(usernameText)){//提示用户结果$("span.errorMsg").text("用户名不合法");return false;alert(usernameText);}

1.3 通过Ajax将数据传递给后端，接口返回：注册成功，页面跳转到投票页面：

 $.ajax({url : "http://localhost:8080/registerData",type : "POST",data : {"userName" : usernameText,"passWord" : passwordText,"email"    : email,},contentType: "application/x-www-form-urlencoded;charset=UTF-8",success : function (data) {if (data == "注册成功"){url = "book_manager?phone="+usernameText;window.location.href = url;}else {alert("参数错误");}},error:function (errorThrown) {alert("参数错误");}})
});

1.4 后端通过查询数据库，是否存在该用户，不存在：将用户信息存入数据库：
//注册页面数据处理

 @ResponseBody@RequestMapping(value = "/registerData",method = RequestMethod.POST)public String registerData(@RequestParam(value = "userName") String name,@RequestParam(value = "passWord") String password,@RequestParam(value = "email") String email){//判断用户是否注册List list = new ArrayList();list = userResipository.selectUser(name,password);System.out.println("----这是用户数据："+list);
//        ModelAndView modelAndView = new ModelAndView();
//        modelAndView.setViewName("book_manager");if (list.size() == 0){//将注册的用户信息添加到数据库UserInfo user = new UserInfo();user.setIphone(name);user.setPasswd(password);user.setEmail(email);//设置日期格式SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");// new Date()为获取当前系统时间String time = df.format(new Date());System.out.println(time);user.setTime(time);//调用封装好的方法进行保存userResipository.save(user);System.out.println("新增用户添加到数据库中，请查看。");System.out.println("注册用户信息："+name+" "+password+" " + email);return "注册成功";}else {return "存在该用户";}}

细心的同学可能会有疑问，前端传参为什么没有传验证码进行校验，哈哈哈，因为验证码是前端页面写死的，后期再由后端生成。

下面附注册页面：

二、登录

登录功能和注册差不多，拿账号和密码去数据库查询，存在：跳转至登录页面，不存在：跳转注册页面，就不详细的介绍了。附图。

三、投票

页面主要内容：倒计时时间，目前书籍的总投票数，支持搜索和按票数排序的功能，支持多选，另外每个用户每天只能投一次，此外，还支持背景音乐功能，哈哈哈…这个小淘(si)气（gui）。

下面是投票页面的头部，JS中实现倒计时的方法，通过search，sort方法对应的Ajax与后端进行交互，返回对应值（这里现在有个问题：返回的页面不能在当前页面重新打开，或者需要根据返回数据重新渲染当前页面，渲染这个词听起来有点高大上，不要问我怎么知道的，问就是公共支持部的大佬说的，解决了，后面会持续更新的，真是个贴心的小棉袄）：

<bodySTYLE="BACKGROUND-COLOR:lightblue;">
<br/>
倒计时：<div id="timer"></div>
//背景音乐
<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"src="http://p4.music.126.net/HvB44MNINoLar8HFbRjIGQ==/109951165142435842.jpg?param=50y50&amp;quality=100">
</audio>
<embed src=" " autostart="false" loop="false" />
<div class="search">
<!--<input type="submit" value="搜索" name="vote" id="search" class="search" οnclick="search()">--><input class="itxt" type="text" placeholder="根据书名进行查找" autocomplete="off"tabindex="1" name="seach" id="search"/><input type="submit" value="搜索" name="seachbtn" id="seachbtn" onclick="search()"><input type="submit" value="票数排序" name="sortNum" id="sortNum" class="sortNum" onclick="sort()">
</div><div id="header" align="center"><!--<img src="static/img/companylog.png" title="yoka" alt="youka" border="1" width="211" height="78"/>--><div class="content" align="center">

后端通过判断是否到截止时间+该用户是否投过票，符合条件：进入将用户选择的书籍list循环插入数据库，可能有点笨的，如果有更好的思路，请私我，请遵循女士优先的原则。
//接受前端传参，并进行处理

 @RequestMapping(value = "/data",method = RequestMethod.GET)@ResponseBodypublic String handleData(@RequestParam(value = "check_val[]") String[] params,@RequestParam(value = "phone") String phone){//判断时间是否过期boolean is_time = isEndTime();//判断当天是否投过票
//        VoteDay voteDay = new VoteDay();boolean is_flag1 = voteDay.isVoted(phone);if (is_time){if (is_flag1){System.out.println("没有到截止时间");System.out.println("前端页面传过来的手机号："+ phone);//设置日期格式SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");// new Date()为获取当前系统时间String time = df.format(new Date());UserRecorde userRecorde = new UserRecorde();userRecorde.setPhone(phone);userRecorde.setVotetime(time);recordResipository.save(userRecorde);for (String book : params){System.out.println("for循环获得每一本书："+book);userResipository.updateBookNum(book);System.out.println("update成功");}System.out.println("即将进入return");return "投票成功";}else {return "您已经投过票啦";}}else {return "已过截止时间";}}

下面附出投票页面的效果图：

四、图形展示

在用户刚完成投票，或者判断用户已经投过票，页面会跳转到书籍得票统计页面，目前采用的是Echarts：支持常规的折线图、柱状图、散点图、饼图、K线图。

// y轴配置
yAxis: {},
legend: {data: ['票数']
},
series: [{// 数据集data: [[${dataList}]],// 图表类型，这里使用bar，柱状图type: 'bar',name:'票数',
}]

type：‘bar’—柱状图 type：‘pie’—饼图 type:‘category’—饼图 type: ‘map’—全图地图…
后端从数据库获取书籍的信息存入到一个List，传递给前端，前端接收后展示（支持左右滑动）：

五、邮件通知

邮件发送很多同学都接触过，我们使用的是qq，所以需要先开启qq的SMTP服务，然后生成授权码，这里是获取数据库中用户的邮箱信息，定期发送邮件，目前是每隔一天发送一次， @Scheduled(cron = “0 0 0 0/1 * *”)，大家有时间可以了解下cron的规则，@EnableScheduling：这个注解用来开启定时任务。

@Slf4j
@Component
@EnableScheduling
public class SendEmailJob {@Resourceprivate MailService mailService;@Scheduled(cron = "0 0 0 0/1 * *")public void sendEmail(){String to = "2421712196@qq.com";String subject = "hello, 这是投票统计邮件";String content = "详情请见地址：http://localhost:8080/resultChartLine";mailService.sendSimpleMail(to, subject, content);

六、连接数据库

通过采用JPA连接数据库，JPA是用于对象持久化的 API，主要是为了简化现有的持久化开发工作和整合ORM技术，提供封装好的查询数据库的方法，可以直接调用，另外也支持我们自定义sql语句进行查询：

public interface UserResipository extends JpaRepository<UserInfo,String> {//    @Query(value = "select * from voter_test vt where vt.phone=?1",nativeQuery = true)@Modifying@Transactional@Query(value = "update vote_book set num = num + 1 where book =?1",nativeQuery = true)void updateBookNum(String book);//查询数据库有无此用户@Query(value = "select * from voter_test where phone = ?1 and ?2",nativeQuery = true)List<UserInfo> selectUser(String phone,String password);@Query(value = "select * from voter_test ",nativeQuery = true)

编写持久化类：

@Entity//告诉JPA这是一个实体类
@Table(name="voter_test")
public class UserInfo {@Id//这是一个主键@GeneratedValue(strategy = GenerationType.AUTO)//自增主键private int id;@Column(name = "phone")private String phone;@Columnprivate String passwd;@Columnprivate String email;public String getTime() {return time;}public void setTime(String time) {this.time = time;}@Columnprivate String time;

我们按照JPA的规范开发持久层代码，而不用关心究竟是哪种框架实现的，极大地提高我们工作的效率，减少不必要的操作时间。

七、踩坑

1、新建springboot项目没有生效—一直提示：failed for ‘https://start.spring.io’ Please check URL, network and proxy settings.

解决方法：Choose Initializr Service URL选择Custom,输入：http://start.springboot.io/，然后Next

2、新建springboot创建项目后，Controller跳转不到对应的页面，配置后代码都是正确的
原因：pom.xml中的thymeleaf.version不对

需要改成3.0.11，然后在Maven里面进行更新

3、页面找不到jquery.js文件，页面直接打开是ok的，但是通过后端转发后打开页面，会报错：

解决方案：不采取读文件的文法，通过网页去加载，不推荐，因为弱网时会有影响

4、建立2个实体类，需要建立两个对应的RecordResipositor

5、springboot中，一个类调用另一个类中的方法，不通过过new，需要通过注入的方式

6、将项目push到github上，提示：Push rejected: Push to origin/master was rejected

解决方法：找到项目对应的目录：打开git bash,敲以下下三行命令

。。。。。。多踩坑，多百度，多总结。。。。。。

八、总结

这篇文章简述了投票功能的大致思路，还有一些没有提到，比如：pom.xml，如果大家想看完整版的代码，可以访问：https://github.com/limeng000111/yoka-java。
其实先前选择的构架是tomcat+servlet+jsp，弄了一个月，发现很繁琐，很绕，不得其解，然后开始网上调研，决心推到重来，采取现在的构架，简洁，快速，很多现有的工具类，封装好的方法。感悟：方向比过程更重要，希望大家引以为戒。