基于Vue和SpringBoot的毕业生追踪系统的设计和实现(二)

简介: 基于Vue和SpringBoot的毕业生追踪系统的设计和实现

5.5.2 系统逻辑结构设计

本系统重要数据表的主要逻辑结构设计如下文所示。

6系统实现

6.1登陆注册模块的设计和实现

进入到毕业生追踪管理系统,首先到系统的登录页,用户需要输入登陆账号和登陆密码,并输入图形验证码完成系统登陆。当账户密码错误,或者图形验证码输入错误时,系统将给与相应的错误提示,并拒绝登陆系统,如图6-1所示。

系统也保留了手机验证码登陆的操作界面,但因为手机验证码有经济成本,所以没有实装验证码登陆的功能,手机号登录界面如图6-2所示。

若用户没有账号,可以点击左侧账号的绿色超链接,跳转到注册界面,如图6-3所示。

用户输入正确的账号密码,即可进入到系统首页,如图6-4所示。

登陆核心代码如下:

login({
    username: this.form.username,
    password: this.form.password,
    code: this.form.imgCode,
    captchaId: this.captchaId,
    saveLogin: this.saveLogin
}).then(res => {
    if (res.success) {
        this.afterLogin(res);
    } else {
        this.loading = false;
        this.getCaptchaImg();
    }
});

6.2学生基本配置模块的设计和实现

用户进入系统后,可以进入学生管理模块,可以查看学生的具体列表,如图6-5所示。

用户可以点击添加用户按钮,输入学生信息完成学生的添加,也可以点击编辑按钮更新学生的信息,也可以点击删除按钮,删除学生的信息。

学生管理模块查询核心代码如下:

@RequestMapping(value = "/getByCondition", method = RequestMethod.GET)
@ApiOperation(value = "查询用户")
public Result<IPage<User>> getByCondition(@ModelAttribute User user, @ModelAttribute PageVo page) {
    QueryWrapper<User> userQw = new QueryWrapper<>();
    if(!ZwzNullUtils.isNull(user.getUsername())) {
        userQw.like("username",user.getUsername());
    }
    if(!ZwzNullUtils.isNull(user.getNickname())) {
        userQw.like("nickname",user.getNickname());
    }
    if(!ZwzNullUtils.isNull(user.getMobile())) {
        userQw.like("mobile",user.getMobile());
    }
    if(!ZwzNullUtils.isNull(user.getDepartmentId())) {
        userQw.eq("department_id",user.getDepartmentId());
    }
    if(user.getType() != null) {
        userQw.eq("type",user.getType());
    }
    if(user.getStatus() != null) {
        userQw.eq("status",user.getStatus());
    }
    if(!ZwzNullUtils.isNull(user.getSex())) {
        userQw.eq("sex",user.getSex());
    }
    IPage<User> userData = iUserService.page(PageUtil.initMpPage(page),userQw);
    for(User u: userData.getRecords()) {
        List<Role> list = iUserRoleService.findByUserId(u.getId());
        List<RoleDTO> roleDTOList = list.stream().map(e->{
            return new RoleDTO().setId(e.getId()).setName(e.getName()).setDescription(e.getDescription());
        }).collect(Collectors.toList());
        u.setRoles(roleDTOList);
        entityManager.detach(u);
        u.setPassword(null);
    }
    return new ResultUtil<IPage<User>>().setData(userData);
}

6.3就业状况模块的设计和实现

高校管理员可以进入毕业去向统计页面,查看毕业生的就业去向明细。

在这个模块中,可以预览每位毕业生的毕业去向,比如正常就业、升学等等,如图6-6所示。

点击每一行的查看详细按钮,即可查看详细数据,如图6-7所示。

作为学生,也可以在毕业去向模块中填报自己的去向内容,以便于高校做数据分析,如图6-8所示。

就业去向查询核心代码如下:

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "查询就业状况")
public Result<IPage<EmploymentStatus>> getByPage(@ModelAttribute EmploymentStatus employmentStatus ,@ModelAttribute PageVo page){
    initWork();
    QueryWrapper<EmploymentStatus> qw = new QueryWrapper<>();
    if(employmentStatus.getStatus() != null && employmentStatus.getStatus() > 0) {
        qw.eq("status",employmentStatus.getStatus());
    }
    if(!ZwzNullUtils.isNull(employmentStatus.getUserName())) {
        qw.inSql("id","select id in a_user where nickname like '%" + employmentStatus.getUserName() + "%'");
    }
    IPage<EmploymentStatus> data = iEmploymentStatusService.page(PageUtil.initMpPage(page),qw);
    for (EmploymentStatus status : data.getRecords()) {
        if(!ZwzNullUtils.isNull(status.getUserId())) {
            User user = iUserService.getById(status.getUserId());
            if(user != null) {
                status.setUserName(user.getNickname());
                status.setUserNumber(user.getUsername());
                status.setUserMobile(user.getMobile());
            } else {
                status.setUserName("无");
                status.setUserNumber("无");
                status.setUserMobile("无");
            }
        }
    }
    return new ResultUtil<IPage<EmploymentStatus>>().setData(data);
}

6.4学历深造模块的设计和实现

部分学生在毕业之后选择了升学,所以对这一类学生需要额外分析管理,分析出各个班级、各个专业的考研率、升学率等等,为高校决策出谋划策,如图6-9所示。

设置学历深造模块代码如下:

@RequestMapping(value = "/insert", method = RequestMethod.POST)
@ApiOperation(value = "新增学历生造")
public Result<EmploymentStatus> insert(EmploymentStatus employmentStatus){
    iEmploymentStatusService.saveOrUpdate(employmentStatus);
    return new ResultUtil<EmploymentStatus>().setData(employmentStatus);
}
@RequestMapping(value = "/update", method = RequestMethod.POST)
@ApiOperation(value = "编辑学历生造")
public Result<EmploymentStatus> update(EmploymentStatus employmentStatus){
    iEmploymentStatusService.saveOrUpdate(employmentStatus);
    return new ResultUtil<EmploymentStatus>().setData(employmentStatus);
}

6.5信息汇总分析模块的设计和实现

信息汇总分析模块放置了若干图表,用于对毕业生的去向进行图表分析,可以给管理员更加直观的数据展示,如图6-10、6-11、6-12、6-13所示。

图表核心代码如下:

initAntvFx() {
    var data = this.userData;
    this.stackedBarPlot = new Bar('container', {
        data,
        isGroup: true,
        xField: 'value',
        yField: 'title',
        seriesField: 'type',
        dodgePadding: 4,
        label: {
            position: 'middle', // 'left', 'middle', 'right'
            layout: [
                {
                    type: 'interval-adjust-position'
                },
                {
                    type: 'interval-hide-overlap'
                },
                {
                    type: 'adjust-color'
                },
            ],
        },
    });
    this.stackedBarPlot.render();
},

6.6校友论坛模块的设计和实现

校友论坛模块提供了留言板的功能,毕业生可以在这个模块进行留言互动,增加毕业生之间的联系。

学生可以进入校友论坛模块,进行新增留言,如图6-14所示。

高校管理员可以对学生的评论进行回复,如图6-15所示。

新增留言核心代码如下:

@RequestMapping(value = "/insert", method = RequestMethod.POST)
@ApiOperation(value = "新增留言")
public Result<MessageBoard> insert(@RequestParam String content){
    if(ZwzNullUtils.isNull(content)) {
        return ResultUtil.error("留言不能为空");
    }
    User currUser = securityUtil.getCurrUser();
    MessageBoard messageBoard = new MessageBoard();
    messageBoard.setUserId(currUser.getId());
    messageBoard.setUserName(currUser.getNickname());
    messageBoard.setContent(content);
    messageBoard.setDate(getZwzNowTime());
    messageBoard.setReplyId("");
    if(iMessageBoardService.saveOrUpdate(messageBoard)){
        return new ResultUtil<MessageBoard>().setData(messageBoard);
    }
    return ResultUtil.error();
}

7 系统测试

由于软件开发复杂性的原因,软件开发过程中不可避免的会产生各种错误。为了在软件开发的顺利完成以及在软件投入实际运营之前,尽可能多地发现软件当中的错误,需要尽可能全面地对软件进行测试。目前软件测试仍然是保证软件质量的关键步骤,它是对软件需求分析、设计以及编码的最后的检查。

对应于软件开发的各个过程,软件测试也分为几种不同的层次。每一个层次都是下一层次的继续。

  1. 单元测试,单元测试对应于详细设计部分,从软件的详细设计中导出。软件的独立单元将在与程序的其他部分相隔离的情况下进行测试。
  2. 集成测试,集成测试对应于系统的概要设计,主要用来的是各个模块之间的接口的正确性。
  3. 系统测试,系统测试的目的是通过测试发现是否需求分析中的功能相符。

7.1集成测试

集成测试,也叫组装测试或联合测试。它是在单元测试的基础上,将所有模块按照设计要求组装成为子系统或系统,进行的测试。集成测试应该考虑以下问题有:数据在模块接口之间穿越时是否会丢失;各个子功能组合起来,能否达到预计要求的父功能;模块之间是否会有不良的影响;单个模块中的误差是否会在其他模块中进行放大。合理地组织集成测试,直接影响到模块测试用例的形式、所用测试工具的类型、模块编号和测试的次序、生成测试用例和调试的费用。通常,有两种不同的组装方式:一次性组装方式和增量式组装方式。

本系统中采用 Spring 框架的IOC功能,对相关的模块进行增量式的组装,进行集成测试。首先利用能够实现简单功能的替代类对主流程进行测试,然后用已经开发和测试完成的每一个实际类将替代类替换掉。看看新开发的类是否能够达到预期的目的,有没有什么冲突。对于客户端的 Javascript 页面的测试,采用Firefox浏览器所带的 JavaScript 调试器 Firebug 完成。

解决方法:在相关类中设置一个消息队列进行消息的缓冲,并且将类设置为线程类,这样即使在繁忙时也不会影响到其他操作。

7.2系统测试

系统测试是将已经确认的软件、计算机硬件、外设、网络等其他元素结合在一起,进行信息系统的各种组装测试和确认测试,其目的是通过与系统的需求相比较,发现所开发的系统与用户需求不符或矛盾的地方

系统测试的过程中,由于使用实际车辆进行测试的费用很大,所以利用模拟软件根据通信协议与系统进行通信。这种情况还可以测试大通信量情况下的系统的稳定性。客户端在IE和Firefox下进行分别测试。其测试内容如表7-1所示。

输入服务器的URL地址,自动返回了登录界面。根据测试,利用不同公司账号登录系统,Web客户端只显示和处理被授权管理的资源。图6.1所示为用户进入页面以后的截图。页面的左边显示的是当前能看到的系统资源,其中有背景图等。页面右边利用 JavaScript 生成了几个内置窗口来显示系统信息,当前显示的是一个站点信息。页面右下角有操作的按钮,这里没有显示出来。

7.3测试结论

我采用了黑盒测试和白盒测试的方法,对毕业生追踪管理系统的各大功能模块进行了测试,其中查看毕业生列表当数据量超过1万时加载时间大于3秒,影响了用户的正常使用,还需要进一步完善搜索算法,其他模块的功能能够正常实现,总之毕业生追踪管理系统符合上线要求。

结论

本文提出并设计了毕业生追踪系统,从系统整体结构设计出发,提出了毕业生追踪系统的六大功能模块。最后实现了毕业生追踪系统的开发。

在设计该系统时,主要包括了以下几个工作部分。在设计的初期,搜集比对大量的国内外文献对毕业生追踪系统的现状做了分析,阐述了研究背景和意义,并具体分析了国内外现状的优缺点,同时确立了本次开发所使用的具体技术,阐述了所使用技术的优缺点。

对毕业生追踪系统进行系统需求和功能需求等分析,确定了本系统所具备的功能,同时对系统开发进行可行性分析,确定了本次系统开发的可行性,在此基础上完成了数据库的创建。

在编码实现阶段,使用Idea开发工具完成了编码实现,引入Spring Boot框架简化了WEB的开发,在数据层,使用了MyBatis框架、MySQL,并利用Maven进行管理,前端使用VUE框架进行开发。

本文设计的毕业生追踪系统能够有效满足毕业生的相关需求,流程合理,操作简单,界面简洁美观,适合邮件相关人员的使用,但因个人水平的不足及其他因素,研究仍存在许多问题及不足之处,例如:论文所设计的毕业生追踪系统使用MySQL对系统产出的数据进行存储,但随着后期信息量的不断加大,在性能方面可能会受一定的影响,后期考虑增加缓存来增强数据存储能力。其次,保障毕业生的信息安全也是一重大关键点,毕业生信息安全性问题是极其重要的,本文未对信息的安全性问题展开讨论,要完善该系统,还需要对信息安全问题进行深入探讨,并且,由于系统本身并没有链接到实体高校,所以无法进行现有高校毕业生信息的查询。

参考文献

[1] 齐治昌, 谭庆平, 宁洪. 软件工程[M]. 北京:高等教育出版社, 2004, 04.

[2] 王德永, 张佰慧. 数据库原理与应用----SQL Server版(项目式)[M]. 人民邮电

版社, 2011, 05.

[3] 李武, 刘清梅. 基于B/S模式的大学生就业指导信息系统设计[J]. 2008.

[4] 常中华. 基于WEB的SQL数据库管理系统的设计[J]. 2006.

[5] 屈辉立, 陈可明, 石武信. JSP网站编程教程[M]. 北京希望电子出版社, 2002.

[6] 柏亚军,等. JSP编程基础及应用实例集锦[M]. 人民邮电出版社, 2001.

[7] 邵雨舟. 毕业生就业跟踪系统的设计与实现[J]. 电脑知识与技术, 2019, 15(21):87-89.DOI:10.14004/j.cnki.ckt.2019.2336.

[8] 熊瑛. 高校毕业生就业跟踪调查系统的设计与实现[J]. 信息与电脑(理论版), 2021, 33(17):116-119.

[9] 陈锟. 河南省高校毕业生就业跟踪调查系统设计与开发[D]. 大连理工大学, 2015.

[10] 魏燕. 高校毕业生就业跟踪调查系统的研究[D]. 浙江工业大学, 2012.

[11] 傅伟, 王浩, 蒋道霞, 庄小将. 基于B/S的毕业生就业跟踪系统的设计与实现[J]. 兰州石化职业技术学院学报, 2014, 14(02):32-34.

[12] 杨佳怿. 高校毕业生就业跟踪调查系统研究[J]. 河南科技, 2015(10):4-6.

[13] 李文纯, 刘天法. 高校大学毕业生追踪调查系统的设计与应用[J]. 教育信息, 2005(13):40-41.

[14] 郭剑毅, 申立中, 马桂芳, 温琪, 张世华, 车文刚. 基于C/S与B/S的高校科研管理信息系统的设计与实现[J]. 计算机工程与应用, 2003(01):212-214.

[15] 卢致伟. 基于Web的高校毕业生就业信息管理系统设计与实现[D]. 厦门大学, 2014.

[16] 赵瑛. 美国高校毕业生就业现状及其启示[J]. 中国冶金教育, 1999(01):35-37.DOI:10.16312/j.cnki.cn11-3775/g4.1999.01.011.


引用说明:

引用以上内容的用户,必须同意以下内容,否则请勿引用!

  1. 出于自愿而使用本文,了解引用本文的风险,且同意自己承担引用本文的风险。
  2. 利用本文内容构建的任何信息内容以及导致的任何版权纠纷和法律争议及后果和作者无关,作者对此不承担任何责任。
  3. 在任何情况下,对于因引用本文而导致的任何难以合理预估的损失(包括但不仅限于商业利润损失、业务中断与业务信息丢失),作者概不承担任何责任。
  4. 必须了解使用本文内容的风险,作者不对其提供二次维护服务,也不提供任何有关资料。

相关文章
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 Ant Design Pro Vue 创建前端项目,配置动态路由和菜单。通过具体案例,展示了如何快速搭建高效、易维护的项目框架。
115 62
|
7天前
|
存储 JavaScript 前端开发
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统,基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化,提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合,但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI,既能利用Vue的快速开发优势,
52 13
|
14天前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
|
1月前
|
XML Java 数据库连接
SpringBoot集成Flowable:打造强大的工作流管理系统
在企业级应用开发中,工作流管理是一个核心组件,它能够帮助我们定义、执行和管理业务流程。Flowable是一个开源的工作流和业务流程管理(BPM)平台,它提供了强大的工作流引擎和建模工具。结合SpringBoot,我们可以快速构建一个高效、灵活的工作流管理系统。本文将探讨如何将Flowable集成到SpringBoot应用中,并展示其强大的功能。
187 1
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
80 2
|
1月前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
45 0
|
3月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的服装商城管理系统
基于Java+Springboot+Vue开发的服装商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的服装商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
181 2
基于Java+Springboot+Vue开发的服装商城管理系统
|
2月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,包括版本兼容性、安全性、性能调优等方面。
176 1
|
3月前
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
299 1
|
1月前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
下一篇
DataWorks