网络投票系统有着很多传统投票方式所没有的优势。第一，使用它可以便于用户在不同的时间和不同的地区进行投票，并将用户投票所得的结果进行总结,并进行结果反馈，而这也是传统的投票方式所不具有的优势;其次，投票系统的效率要比以往人们到齐，然后挨个统计要便捷的多，而且也不容易出错，让人们有更多的时间去做自己的事情。综上所述，投票系统有着省时，便捷的等优点，而这些优点也注定它是未来投票方式的主流。而这个毕业设计的目的，就是设计一个网络投票系统并实现，该系统可以通过管理员权限添加投票项目，由用户注册登录投票，统计票数，同时用户也可以查看投票结果，用户通过查看结果来对白己的想法有一个更加清晰的认知。

1. 1. 目的与意义

1. 1. 论文组成结构

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

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

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

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

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

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

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

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

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

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

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的新特性糅合进去，以应对客户日益复杂的需求变化。

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

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

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

管理员模块：首页、站点管理（轮播图、公告栏）用户管理（管理员、普通用户）内容管理（新闻列表、新闻分类列表）更多管理（参与投票、我的投票、取消投票）

用户模块：首页、公告消息、新闻、参与投票等。

用户用例图如下所示。

图3-1 用户用例图

管理员用例图如下所示。

图3-2 管理员用例图

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

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

表3-1 注册用例描述

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

表3-1 登录用例描述

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

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

我的投票用例描述如下表所示。

表3-1 我的投票用例描述

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

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

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

图3-3 系统业务流程图

管理员拥有最高权限，在对各项信息进行增加、删除、修改后会更新后台数据库的内容，用户在登录进行注册登录、用户资料修改、我的投票、取消投票查询、等指令动作同样会更新后台数据。

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

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

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

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

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

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

图4-1 ASP.NET结构图

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

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

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

进入系统后首先要进行登录，验证你的身份，赋予你不同的权限。当你成功登录后，页面会有多个板块，分别是首页、站点管理（轮播图、公告栏）用户管理（管理员、普通用户）内容管理（新闻列表、新闻分类列表）更多管理（我的投票、参与投票、取消投票）推荐。里面界面简单易懂，根据标示可以直接进行方便快捷的操作。

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

图4-2系统功能结构图

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

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

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

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

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

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

用户录入参与投票信息；

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

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

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

用户录入投票信息；

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

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

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

本系统在数据库中存放了多张表，分别是用户表、参与投票表、我的投票表、取消投票表。

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

图4-7系统E-R图

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

Vote表：

该登录模块利用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首页界面

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

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

图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-7参与投票流程图

参与投票界面如图所示。

图5-8参与投票添加界面

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

主界面如下图所示。

图5-9管理员主界面

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

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

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

参与投票管理包括投票话题、投票类型、备注、投票封面、总票数、话题介绍、投票说明等操作。

参与投票的界面如所示。

图5-11参与投票界面图

参与投票关键代码如下所示。

@RequestMapping(value = "/del")

    @Transactional

    public Map<String, Object> del(HttpServletRequest request) {

        service.delete(service.readQuery(request), service.readConfig(request));

        return success(1);

}

    @Transactional

    public void delete(Map<String,String> query,Map<String,String> config){

        StringBuffer sql = new StringBuffer("DELETE FROM ").append("`").append(table).append("`").append(" ");

        sql.append(toWhereSql(query, "0".equals(config.get(FindConfig.GROUP_BY))));

        log.info("[{}] - 删除操作：{}",table,sql);

        Query query1 = runCountSql(sql.toString());

        query1.executeUpdate();

    }

1. 1. 1. 取消投票管理模块

取消投票管理包括用户、取消票数、投票话题、投票类型、投票说明等操作。

取消投票的界面如所示。

图5-12取消投票界面图

取消投票关键代码如下所示。

@RequestMapping(value = {"/sum_group", "/sum"})

    public Map<String, Object> sum(HttpServletRequest request) {

        Query count = service.sum(service.readQuery(request), service.readConfig(request));

        return success(count.getResultList());

}

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

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

表6-1登录测试用例

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

表6-2注册测试用例

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

表6-3取消投票测试用例

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

表6-4添加参与投票测试用例

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

表6-6测试结果