电子信息时代背景下，互联网正在进行着急剧膨胀式的发展。而计算机和网络设备等硬件的普及，为网民的上网提供了更加便捷的条件，互联网已然成为了人们生活中不可分割的一部分，且在政治、经济、文化、科技、生活、社会等方面无时不刻地影响着整个世界。

近年来，在这样的网络与社会大环境之下，如何有效地了解并收集民情与民意逐渐成为了互联网领域的一个热点问题，于是网络投票中心这个词语应运而生。投票中心顾名思义，就是利用互联网技术将某些热点话题发布至 Web 上，提供若干个选项供网络用户在线选出感兴趣的选项的过程。投票的结果可以实时地自动统计出来，用户不仅能够随时查看统计结果，还可以对参与的投票话题进行热点投票，线上投票形式选出的结果。分布在互联网上的各种大大小小的投票活动可以说是不胜枚举，令人眼花缭乱。而作为网络投票中心的一种软件实现------网络投票系统在这些投票活动中起着至关重要的作用，其几乎囊括了从网络投票中心到投票结果查看，再到投票结果智能分析所有与投票过程相关的功能。

国内基于WEB的网络投票系统在国内外都有着非常广泛的应用。众多企业、高校、科研机构以及个人从理论与实践两个方面都进行了大量的研究与开发工作，并涌现出了大量的网络投票系统。以下介绍几个典型的网络投票系统，用以说明国内外网络投票系统的发展状况:

( 1)SurveyMonkey（调查猴子）免费创建在线调查问卷系统。SurveyMonkey在网络调查领域可谓遥遥领先，其富有特色的在线调查服务网站在美国十分的流行。该网站不仅具有强大的功能、人性化的界面而且还能非常好地支持世界上任何一门语言，包括中文在内。因此其客户群遍布于世界的各大公司，此外它还包括许多国家的政府职能、学术研究等机构。

(2)问道免费在线创建调查问卷平台。问道网是国内比较专业的在线创建问卷、在线调查网站，拥有超过10万的国内外用户，包括学校、中小企业、事业机构、上市公司、科研单位、跨国500强企业等。这种网络结构的应用变得相当流行，客户端只需安装网页浏览器就能实现对Internet的访问，而将系统功能实现的核心部分主要集中到服务器上。因而采用此结构模式开发的网络投票系统具有系统稳定性强、维护成本低、客户端电脑载荷小等优点。

根据市场调研得到的信息数据，结合国内外前沿研究，利用相关系统开发和设计方法，最终设计出网络投票系统。

本文共有七章，如下所示。

第一章概述了网络投票系统的研究目的和意义；精炼地总结了国内外在仓储领域的研究情况和未来的研究趋势，最后给出了论文的组成结构。

第二章简要概述了本文所用的开发技术和工具。

第三章简要对系统各业务流程进行需求分析、可行性分析。

第四章对网络投票系统进行设计。

第五章对网络投票系统进行实现，并贴出相关页面截图，语言描述出具体功能实现的操作方法。

第六章对投票中心采用测试用例的方式来对一些主要功能模块测试，最后得出测试结果。

第七章总结全文并对未来的研究做出展望。

本系统前端框架采用了比较流行的渐进式JavaScript框架Vue.js。使用Vue-Router和Vuex实现动态路由和全局状态管理,Ajax实现前后端通信，Element UI组件库使页面快速成型。后端部分：采用springboot作为开发框架，同时集成MyBatis、Redis等相关技术。

现在Mysql数据库在网络上它可以支撑许多个用户，而且也可以适应客服机和服务器的部署或者配置等，我们这里的服务器和客户机其实就是一种软件上的概念，并且我们使用的计算机硬件也与他们不存在一一对应的关系。

Mysql是一款非常流行的关系型数据库管理系统，它的出现一直都是佼佼者，它不仅功能非常强大，而且使用起来非常方便，并且Mysql的跨平台能力也很好，软件开发人员非常喜欢它的这些强大的优点。不同于其他关系型数据库，对于数据库的管理它有着自己的一套方案，通过对用户设定相应的权限和角色来达到对数据库的管理。由此可见，Mysql是一个能够适用于吞吐量高，可靠性高，效率高的一款数据库管理软件。

优点一：Mysql中对于不同身份的用户都设定其不同的权限来完成不同的业务逻辑，这使得Mysql在安全和完整性远远超出了其他关系型数据库。

优点二：对于那些动画、图形和声音的数据类型Mysql也可以支持，这说明多数据类型Mysql也是可以支持的。

优点三：Mysql还可以做到多个平台的开发，软件开发的多种编程语言都可以实现对Mysql数据库的操作。

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

在系统的开发上采用了B/S结构，在B/S结构中，统一采用浏览器，而不需要去开发任何的用户界面，Web浏览器向处理它的Web服务器发送请求，并一步一步地将处理结果返回给客户端。B/S结构主要采用了各种脚本语言和ActiveX技术，降低了系统的开发难度并简化了系统维护以及使用。

B/S结构有如下特点：B/S结构建立在广域网上，不需要专门为其配置硬件环境，比C/S结构的适应范围更强；由于其基于广域网，所以其对安全的控制能力相对较弱；B/S的多种结构要求构造相对独立的函数，这样才能可以更好地重用；B/S结构组成简单，便于对个别构件进行更换，降低了系统的维护成本B/S信息流向与C/S不同，B/S信息流向可变化。

在软件开发的过程中系统的可行性分析是必不可少的，可行性的研究就是评估问题是否能得到解决并且是要以最少的时间和最少的代价来解决。为实现上面的目标还要必须考虑到解决这些问题的方法的优点和缺点，还要考虑到实现了这些系统规模的开发带来的经济效益。这里可以用技术的可行性，操作的可行性，经济的可行性对我们的系统进行可行性的研究。网络投票系统的可行性分析如下所示：

网络投票系统是在Express和Mysql的环境中运行的，而系统的成本也只是主要分布在软件的开发和维护上。如果系统上线投入使用之后，不仅可以方便人们，还节省了用户的时间和精力，而且还极大限度的方便了运营者，减少了运营者的工作强度。网络投票系统其实也不太复杂，在开发的时候经济支出也不大，在开发系统时时间用的也不多，从时间的优势和对经济利益方面产生的好处远超过维护和管理的成本，所以开发此系统是可行合适的。

本系统是基于浏览器和服务器的网络投票系统，系统开发完成之后用户只需要在浏览器中输入正确的URL地址即可进行访问。本系统的前台页面简单明了，在没有操作指导的情况下也可以进行操作，无论是系统管理员还是普通用户在页面中所有的操作都是在浏览器中完成的，因此只要电脑在有网络的情况下，打开浏览器都能操作。而且在使用之前也不用进行相关的环境配置，因此本系统方便、简单、易于使用，所以该系统是容易并且可操作的。

管理员模块：首页、轮播图、通知公告、资源管理（新闻资讯、新闻分类、问卷调查）系统用户（管理员、普通用户）模块管理（投票信息、用户投票）用户模块：首页、问卷调查、通知公告、新闻资讯、个人账户、个人收藏、投票信息等。

用户用例图如下所示。

图3-1 用户用例图

管理员用例图如下所示。

图3-2 管理员用例图

根据用例图，对一些重要的用例进行描述。

注册用例描述如下表所示。

表3-1 注册用例描述

登录用例描述如下表所示。

表3-1 登录用例描述

个人信息管理用例描述如下表所示。

表3-1 个人信息管理用例描述

投票信息用例描述如下表所示。

表3-1 投票信息用例描述

投票管理描述如下表所示。

表3-1 投票管理用例描述

网络投票系统的业务流程如下图所示。

图3-3 系统业务流程图

管理员拥有最高权限，在对各项信息进行增加、删除、修改后会更新后台数据库的内容，用户在登录进行首页、问卷调查、通知公告、新闻资讯、个人账户、个人收藏、投票信息等指令动作同样会更新后台数据。

与强调控制逻辑的程序流程图不同，它更关心的是整个系统中数据的具体流动以及数据的加工处理的整个客观过程，是对数据规格的说明。也正因如此，系统数据流图作为系统结构化分析方法中极为重要的一种描述工具备受青睐。

网络投票系统的顶层数据流如下图所示。

图3-4系统顶层数据流图

系统顶层数据流：外部实体为用户，第一个流程为登录验证，用户信息表返回密码验证，是否正确，正确则登录系统，错误则反馈信息，登录系统后，根据不同用户的功能选择，来读写数据库。

系统底层数据流如下图所示。

springboot结构是一种三层机构：UI层、业务逻辑层和数据层。

图4-1 ASP.NET结构图

1.用户层（UI）负责和用户交互，接收来自于用户的请求，然后将结果呈现给客户；

2.逻辑层负责接收用户端传来的请求并将消息传给数据处理层，随后将处理后的结果发给客户。它是有Web Services、Web表单、XML和组件服务组成，在这些当中Web表单是一切的核心，是向客户显现数据和信息的基础，也是相应和处理客户和显示Web表单生成的数据及信息的基础；

3.通过数据层ADO.springboot操纵数据为业务层提供数据服务。

进入系统后首先要进行登录，验证你的身份，赋予你不同的权限。当你成功登录后，页面会有多个板块，分别是首页、问卷调查、通知公告、新闻资讯、个人账户、个人收藏、投票信息管理。里面界面简单易懂，根据标示可以直接进行方便快捷的操作。

系统功能结构图如下所示。

图4-2系统功能结构图

管理员账户的基本信息管理。主要提供管理员账户的基本信息录入、删除、维护和查询等功能，包括：

管理员录入管理员账户基本信息；

管理员更新、增加及删除管理员账户基本信息；

管理员根据管理员账户 ID 查询基本信息；

系统管理员更改个人密码；

投票资讯管理。主要是提供投票资讯的基本信息录入、维护和查询功能，包括：

用户录入投票资讯信息；

用户更新、增加及删除投票资讯基本信息；

用户根据想要了解的投票话题查询投票话题基本信息；

投票中心管理。主要提供投票中心的基本录入、删除、维护和查询功能， 包括：

用户录入投票信息；

用户更新、增加投票基本信息；

用户根据投票 ID 查询投票基本信息；

一个好的系统它的后台数据库一定要考虑的全面，这和我们建造房子一个概念，房子不是随心所欲建起来的，一切都是在合理设计的基础是实现的，地基打牢固了房子才能建的更高。数据库如果设计的很合理，而且每个方面都能考虑到了那么这个系统才能不会出现大的问题。

本系统在数据库中存放了多张表，分别是用户表、投票表、口语表、交流表。

系统的主要实体间关系E-R图如下图所示。

图4-7系统E-R图

此环节把概念转变成数据。由于整个数据库所处理的信息过多，就只展示几个表。

表access_token (登陆访问时长)

该登录模块利用js进行设计，JavaScript函数CheckSubmit()对输入框是否为空进行验证，使用js的技术结合Mysql 2012数据库的查询语句进行登录信息的验证。首先从文本框中分别获得账号user_name和密码user_pw，使用Sql语句“select * from t_user where user_name=‘”+user_name+“’ and user_pw=‘”+user_pw+“’”将查询结果赋给rs结果集，若rs.next()返回值为空，表示数据库找不到该用户数据，若rs.next()返回值不为空，则显示登录成功，进入主界面。

用户登录流程图如下所示。

图5-1用户登录流程

用户登录流程：用户只有输入正确的用户名和密码才会成功进入系统，用户输入用户名密码后点击登录按钮，系统会进行校验该用户名是否存在，如果用户名与密码不匹配或者用户名不存在，则返回主界面。

系统登录界面如下图所示。

图5-2系统登录界面

登录模块代码如下：

/**

     * 登录

     * @param data

     * @param httpServletRequest

     * @return

     */

    @PostMapping("login")

    public Map<String, Object> login(@RequestBody Map<String, String> data, HttpServletRequest httpServletRequest) {

        log.info("[执行登录接口]");

        String username = data.get("username");

        String email = data.get("email");

        String phone = data.get("phone");

        String password = data.get("password");

        List resultList = null;

        Map<String, String> map = new HashMap<>();

        if(username != null && "".equals(username) == false){

            map.put("username", username);

            resultList = service.select(map, new HashMap<>()).getResultList();

        }

        else if(email != null && "".equals(email) == false){

            map.put("email", email);

            resultList = service.select(map, new HashMap<>()).getResultList();

        }

        else if(phone != null && "".equals(phone) == false){

            map.put("phone", phone);

            resultList = service.select(map, new HashMap<>()).getResultList();

        }else{

            return error(30000, "账号或密码不能为空");

        }

        if (resultList == null || password == null) {

            return error(30000, "账号或密码不能为空");

        }

        //判断是否有这个用户

        if (resultList.size()<=0){

            return error(30000,"用户不存在");

        }

        User byUsername = (User) resultList.get(0);

        Map<String, String> groupMap = new HashMap<>();

        groupMap.put("name",byUsername.getUserGroup());

        List groupList = userGroupService.select(groupMap, new HashMap<>()).getResultList();

        if (groupList.size()<1){

            return error(30000,"用户组不存在");

        }

        UserGroup userGroup = (UserGroup) groupList.get(0);

        //查询用户审核状态

        if (!StringUtils.isEmpty(userGroup.getSourceTable())){

            String sql = "select examine_state from "+ userGroup.getSourceTable() +" WHERE user_id = " + byUsername.getUserId();

            String res = String.valueOf(service.runCountSql(sql).getSingleResult());

            if (res==null){

                return error(30000,"用户不存在");

            }

            if (!res.equals("已通过")){

                return error(30000,"该用户审核未通过");

            }

        }

        //查询用户状态

        if (byUsername.getState()!=1){

            return error(30000,"用户非可用状态，不能登录");

        }

        String md5password = service.encryption(password);

        if (byUsername.getPassword().equals(md5password)) {

            // 存储Token到数据库

            AccessToken accessToken = new AccessToken();

            accessToken.setToken(UUID.randomUUID().toString().replaceAll("-", ""));

            accessToken.setUser_id(byUsername.getUserId());

            tokenService.save(accessToken);

            // 返回用户信息

            JSONObject user = JSONObject.parseObject(JSONObject.toJSONString(byUsername));

            user.put("token", accessToken.getToken());

            JSONObject ret = new JSONObject();

            ret.put("obj",user);

            return success(ret);

        } else {

            return error(30000, "账号或密码不正确");

        }

}

在浏览器的地址栏里输入http://localhost:8080/index.jsp 地址，就可以跳转到网络投票系统的首页，首页是由4个页面组成的，包括top、left、down和center等页面，这里也是浏览者访问系统的入口，通过@ include引入。

首页载入流程图如下所示。

图5-3首页载入流程

首页载入流程：系统先连接数据库，显示界面参数初始化，读取数据库的数据表，读取html显示模板，对数据按添加时间排序，按照模板设计位置显示数据，刷新显示界面，断开数据库连接。

首页如下图所示。

图5-4首页界面

首页代码如下：  @PostMapping("/upload")

    public Map<String, Object> upload(@RequestParam("file") MultipartFile file) {

        log.info("进入方法");

        if (file.isEmpty()) {

            return error(30000, "没有选择文件");

        }

        try {

            //判断有没路径，没有则创建

            String filePath = System.getProperty("user.dir") + "\\target\\classes\\static\\upload\\";

            File targetDir = new File(filePath);

            if (!targetDir.exists() && !targetDir.isDirectory()) {

                if (targetDir.mkdirs()) {

                    log.info("创建目录成功");

                } else {

                    log.error("创建目录失败");

                }

            }

            String fileName = file.getOriginalFilename();

            File dest = new File(filePath + fileName);

            log.info("文件路径:{}", dest.getPath());

            log.info("文件名:{}", dest.getName());

            file.transferTo(dest);

            JSONObject jsonObject = new JSONObject();

            jsonObject.put("url", "/api/upload/" + fileName);

            return success(jsonObject);

        } catch (IOException e) {

            log.info("上传失败：{}", e.getMessage());

        }

        return error(30000, "上传失败");

}

系统的用户通过自行注册生成，在系统首页点击用户注册菜单，系统跳转到对应的注册页面。点击重置按钮，清空所填数据，点击注册按钮完成注册。

用户注册流程图如下所示。

图5-5用户注册流程

注册个人信息实现流程为：填写个人信息，系统使用JQuery选择器获取在网页中输入的注册信息，再对联系方式、登录密码等信息进行验证，验证通过后用Ajax异步请求方式向服务器发送请求并把数据传送到后台，然后验证用户名是否已存在，如果已存在则注册失败提示“用户名已存在”；如果用户表中没有该用户名则把用户信息加入数据库，把操作状态以json字符串方式返回到前台。Ajax请求成功接收到返回的数据时会触发成功回调函数，然后解析返回的json字符串，系统根据返回信息弹出提示框，注册成功后返回登录页。

用户注册界面如下图所示。

图5-6用户注册界面

用户注册代码如下：

/**

     * 注册

     * @param user

     * @return

     */

    @PostMapping("register")

    public Map<String, Object> signUp(@RequestBody User user) {

        // 查询用户

        Map<String, String> query = new HashMap<>();

        query.put("username",user.getUsername());

        List list = service.select(query, new HashMap<>()).getResultList();

        if (list.size()>0){

            return error(30000, "用户已存在");

        }

        user.setUserId(null);

        user.setPassword(service.encryption(user.getPassword()));

        service.save(user);

        return success(1);

}

/**

     * 用户ID：[0,8388607]用户获取其他与用户相关的数据

     */

    @Id

    @GeneratedValue(strategy = GenerationType.IDENTITY)

    @Column(name = "user_id")

    private Integer userId;

    /**

     * 账户状态：[0,10](1可用|2异常|3已冻结|4已注销)

     */

    @Basic

    @Column(name = "state")

    private Integer state;

    /**

     * 所在用户组：[0,32767]决定用户身份和权限

     */

    @Basic

    @Column(name = "user_group")

    private String userGroup;

    /**

     * 上次登录时间：

     */

    @Basic

    @Column(name = "login_time")

    private Timestamp loginTime;

    /**

     * 手机号码：[0,11]用户的手机号码，用于找回密码时或登录时

     */

    @Basic

    @Column(name = "phone")

    private String phone;

    /**

     * 手机认证：[0,1](0未认证|1审核中|2已认证)

     */

    @Basic

    @Column(name = "phone_state")

    private Integer phoneState;

    /**

     * 用户名：[0,16]用户登录时所用的账户名称

     */

    @Basic

    @Column(name = "username")

    private String username;

    /**

     * 昵称：[0,16]

     */

    @Basic

    @Column(name = "nickname")

    private String nickname;

    /**

     * 密码：[0,32]用户登录所需的密码，由6-16位数字或英文组成

     */

    @Basic

    @Column(name = "password")

    private String password;

    /**

     * 邮箱：[0,64]用户的邮箱，用于找回密码时或登录时

     */

    @Basic

    @Column(name = "email")

    private String email;

    /**

     * 邮箱认证：[0,1](0未认证|1审核中|2已认证)

     */

    @Basic

    @Column(name = "email_state")

    private Integer emailState;

    /**

     * 头像地址：[0,255]

     */

    @Basic

    @Column(name = "avatar")

    private String avatar;

    /**

     * 创建时间：

     */

    @Basic

    @Column(name = "create_time")

    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")

    private Timestamp createTime;

    @Basic

    @Transient

    private String code;

}

用户在系统前台显示，用户浏览投票活动信息，查找到自己感兴趣的活动内容，在投票栏提交投票，生成投票记录。

投票中心流程图如下图所示。

图5-9投票中心流程

投票中心界面如下图所示。

图5-10投票中心界面

经过用户登录后，页面跳转至首页，main.jsp，首页是由2个页面组成的，包括top、left和center等页面，通过@ include引入，系统首页主要介绍系统的基本信息，包括当前用户、当前日期、当前访问浏览器的版本、服务器的端口数、当前用户的权限、当前电脑的ip、当前电脑的操作系统名称、本系统的开发日期、系统作者、指导教师、开发日期等。其中left部分是系统菜单，本系统菜单包括1级菜单和2级菜单，使用jquery实现1级菜单展开为2级菜单。

主界面如下图所示。

图5-11管理员主界面

管理员对系统用户的管理，在yhzhgl.jsp实现管理员用户的管理，包括录入、删除、修改，修改密码通过SESSION获取用户名，然后输入新密码，提交到mod.jsp中，使用sql命令更新密码。

管理员用户管理的界面如下图所示。

图5-12管理员用户管理界面

投票信息管理包括活动名称、活动类型、活动编号、选择选项、多项选项、投票用户、投票日期等操作。

投票信息的界面如所示。

图5-13投票信息界面图

在这个产品被投入使用前，首先需要进行试用，这是重要的环节。考虑到某个部分的开发没有缺陷情况下，把各种模块拼接，也有一定概率就存在矛盾。这就好比每个人都很独特，但聚在一起就显得杂乱无章，需要保证有默契的配合。对于测试，要看它的各项内容是否契合的原则。若与最初定下的标准有一定程度上的出入，那么就需要做出一些调整，让最终的大方向朝着目标前进。

登录测试用例如下表所示。

表6-1登录测试用例

注册测试用例如下表所示。

表6-2注册测试用例

投票测试用例如下表所示。

表6-3投票测试用例

投票资讯测试用例如下表所示。

表6-4添加投票资讯测试用例

经过测试，得到测试结果如下表所示。

表6-6测试结果