基于springboot vue 投票系统设计与实现

博主介绍:专注于Java vue  .net  php phython  小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设,从业十五余年开发设计教学工作

☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟
我的博客空间发布了1000+毕设题目 方便大家学习使用
感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及论文编写等相关问题都可以给我留言咨询,希望帮助更多的人

开篇来一个系统运行图片

3.2需求分析

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

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

用户用例图如下所示。

图3-1 用户用例图

管理员用例图如下所示。

图3-2 管理员用例图

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

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

表3-1 注册用例描述

用例名称

注册

参与者

用户

描述

用户填写相关注册数据完成注册成为系统的用户

前置条件

后置条件

用户填写相关注册数据并且要注册的账号不存在与系统中

事件流

  1. 用户点击注册按钮
  2. 用户填写相关注册数据
  3. 用户确认并提交注册数据
  4. 系统提示注册成功

补充说明

  1. 系统检测用户所输注册数据如不符合要求则提示并返回注册界面
  2. 系统检测用户所输账号不可用或已存在与系统中则提示并返回注册界面

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

表3-1 登录用例描述

用例名称

登录

参与者

用户

描述

用户填写用户名和密码登录系统

前置条件

用户拥有账号和密码

后置条件

用户名和密码都正确

事件流

(1)用户在登录页面输入用户名和密码

(2)系统检测用户输入的用户名和密码是否正确

(3)用户名和密码正确的话,显示登录成功并返回主页面

补充说明

(a)系统检查除密码不正确,返回登录页面

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

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

用例名称

管理和修改个人信息

参与者

用户

描述

用户查看、修改个人信息

前置条件

用户已登录到系统中

后置条件

事件流

(1)用户查看个人信息

(2)用户修改个人信息

补充说明

(a)用户可修改密码

(b)用户可修改个人资料,例如姓名,头像等

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

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

用例名称

我的投票

参与者

用户

描述

用户执行我的投票操作

前置条件

用户已登录

后置条件

该活动存在,并且能被投票

事件流

在活动页点击要投票

补充说明

活动必循存在

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

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

用例名称

参与投票管理

参与者

用户

描述

用户提供新增、修改、删除、查阅等功能

前置条件

  1. 用户成功登录系统
  2. 用户只能对已存在的投票记录进行修改和删除

后置条件

事件流

(1)用户查看修改投票

(2)用户添加投票

(3)用户删除投票

补充说明

(a)新添加的投票不符合要求时会添加失败

(b)修改的投票不符合要求时会修改失败

3.3系统业务流程分析

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

图3-3 系统业务流程图

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

3.4系统数据流程分析

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

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

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

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

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

图3-5系统底层数据流图

系统底层数据流:外部实体为管理员和普通用户,数据流分别有管理员和普通用户流向系统数据流程,数据表提供数据支持,来完成逻辑操作。

  1. 系统设计
    1. 系统架构设计

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

图4-1 ASP.NET结构图

1.用户层(UI)负责和用户交互,接收来自于用户的请求,然后将结果呈现给客户;

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

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

    1. 系统功能结构

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

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

图4-2系统功能结构图

    1. 功能模块设计

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

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

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

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

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

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

用户录入参与投票信息;

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

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

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

用户录入投票信息;

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

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

    1. 数据库设计

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

      1. 概念模型设计

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

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

图4-7系统E-R图

      1. 逻辑结构设计

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

Vote表:

名称

类型

长度

不是null

主键

注释

vote_id

int

11

参与投票ID

voting_topic

varchar

64

投票话题

voting_type

varchar

64

投票类型

remarks

varchar

64

备注

voting_cover

varchar

255

投票封面

votes_

int

11

总票数

topic_introduction

text

0

话题介绍

voting_instructions

text

0

投票说明

hits

int

11

点击数

recommend

int

11

智能推荐

create_time

datetime

0

创建时间

update_time

timestamp

0

更新时间

ordinary_users表:

名称

类型

长度

不是null

主键

注释

ordinary_users_id

int

11

普通用户ID

full_name

varchar

64

姓名

gender

varchar

64

性别

examine_state

varchar

16

审核状态

recommend

int

11

智能推荐

user_id

int

11

用户ID

create_time

datetime

0

创建时间

update_time

timestamp

0

更新时间

my_vote表:

名称

类型

长度

不是null

主键

注释

my_vote_id

int

11

我的投票ID

user

int

11

用户

voting_topic

varchar

64

投票话题

voting_type

varchar

64

投票类型

number_of_votes

varchar

64

投票数

voting_instructions

text

0

投票说明

recommend

int

11

智能推荐

create_time

datetime

0

创建时间

update_time

timestamp

0

更新时间

cancel_voting表:

名称

类型

长度

不是null

主键

注释

cancel_voting_id

int

11

取消投票ID

user

int

11

用户

voting_topic

varchar

64

投票话题

voting_type

varchar

64

投票类型

number_of_cancelled_votes

varchar

64

取消票数

voting_instructions

text

0

投票说明

recommend

int

11

智能推荐

create_time

datetime

0

创建时间

update_time

timestamp

0

更新时间

Notice表:

名称

类型

长度

不是null

主键

注释

notice_id

mediumint

8

公告id

title

varchar

125

标题

content

longtext

0

正文

create_time

timestamp

0

创建时间

update_time

timestamp

0

更新时间

Praise表:

名称

类型

长度

不是null

主键

注释

praise_id

int

10

点赞ID

user_id

int

11

点赞人

create_time

timestamp

0

创建时间

update_time

timestamp

0

更新时间

source_table

varchar

255

来源表

source_field

varchar

255

来源字段

source_id

int

10

来源ID

status

tinyint

1

点赞状态

Upload表:

名称

类型

长度

不是null

主键

注释

upload_id

int

11

上传ID

name

varchar

64

文件名

path

varchar

255

访问路径

file

varchar

255

文件路径

display

varchar

255

显示顺序

father_id

int

11

父级ID

dir

varchar

255

文件夹

type

varchar

32

文件类型

  1. 系统实现
    1. 登录模块的实现

该登录模块利用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, "账号或密码不正确");

        }

}

    1. 用户子系统模块的实现
      1. 用户首页模块

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

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

5-3首页载入流程

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

首页如下图所示。

图5-4首页界面

      1. 用户注册模块

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

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

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;

文档下载获取方式

(springboot+mysql)投票系统.zip资源-CSDN文库


大家点赞、收藏、关注、评论啦  其他的定制服务  下方联系卡片↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 或者私信作者

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_251836457

你的鼓励 是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值