java-springboot兰竹网络科技员工出行碳排放管理系统 基于SpringBoot的企业员工通勤碳足迹监控平台 SpringBoot+MVC的绿色出行量化与减排激励系统计算机毕业设计

java-springboot兰竹网络科技员工出行碳排放管理系统41reo046计算机毕业设计(配套有源码 程序 mysql数据库 论文)
本套源码可以在文本联xi,先看具体系统功能演示视频领取,可分享源码参考。

“双碳”目标下,员工每一次打卡出行都在生成看不见的数据,把公里数、油耗、交通方式换算成实时碳排量,让减排从口号变成可量化、可排名、可兑换的积分,就是这套系统存在的全部理由。

它把业务拆成 18 张表,页面端对应 18 个一级菜单,点一点就能办完所有事:

  1. 员工:账号、姓名、手机、性别、年龄、头像、积分、余额,一键实名。

  2. 管理员:用户名、密码、头像、角色,后台权限中枢。

  3. 系统简介:标题、副标题、内容、三张轮播图,随时更新品牌故事。

  4. 公告信息分类:分类名称,让公告不再一团乱麻。

  5. 公告信息:标题、简介、分类、发布人、头像、点击数、点赞/踩、收藏数、图片、内容,热度实时刷新。

  6. 在线留言:留言人 id、用户名、头像、留言/回复内容、图片,双向沟通。

  7. 论坛交流:帖子标题、内容、父节点、用户 id、用户名、头像、置顶状态,员工自建低碳圈子。

  8. 商品分类:分类名称,积分商城灵活扩展。

  9. 商品信息:条码、名称、分类、图片、规格、品牌、上架时间、介绍、单限、库存、赞/踩、点击/评论数、积分、价格、收藏数,低碳商品随换随走。

  10. 购物车:商品表名、用户/商品 id、名称、图片、数量、单价,一键结算。

  11. 收藏表:用户 id、商品 id、名称、图片、类型、推荐类型、备注,想换随时收藏。

  12. 地址:收货人、电话、地址、是否默认,积分兑换包邮到家。

  13. 订单:订单编号、商品表名、用户/商品 id、名称、图片、数量、价格、总价格、支付类型、状态、地址、电话、收货人、物流、备注、审核、用户角色,完整电商闭环。

  14. 碳排放:记录标题、图片、行驶里程、平均油耗、燃烧标准、节约排放、记录时间、员工账号/姓名,出行数据秒级换算。

  15. 商品信息评论:关联表 id、用户 id、头像、用户名、评论/回复内容,互动有反馈。

  16. Token 表:用户 id、用户名、表名、角色、token、过期时间,多端登录安全可控。

  17. 配置文件:参数名称、参数值、URL,全局开关秒改。

  18. 员工积分与余额:内置字段,随订单、出行自动增减。

一句话总结:把“出行-碳排-积分-商城”装进 18 个功能盒子,盒子之间数据互通、积分联动,员工多骑一次单车、多省一升油,屏幕上的积分和排名就会实时跳动,让减排像游戏一样上瘾。

注:以上是纯课题毕业设计功能介绍,并非实际开发完成,最终开发完成的毕业设计程序以下面的的环境软件、功能图和界面为准。

系统所需要的环境软件:idea、eclipse+mysql5.7、8.0+Navicat+JDK1.8+tomcat7.0

三 系统的设计

3.1 系统性能需求

(1)员工在前台页面各种操作可及时得到反馈。

(2)该平台是提供给多个员工使用的平台,员工使用之前需要注册登录。登录验证后,员工才可进行各种操作[10]。

(3)管理员用户拥有信息添加,修改和删除等权限。

(4)数据库表设计简单,各表之间联系直观清晰明了。

(5)界面布局设计简洁合理,能够让员工具有更加流畅且愉悦的体验。

3.2 需求分析

作为一款员工出行碳排放管理系统,面向的是大多数学者,软件的界面设计简洁清晰,员工可轻松掌握使用技巧。在调查之后,获得员工以下需求:

(1)员工注册登录后,可进入系统解锁更多功能,员工将信息加入到后台数据库。

(2)员工不仅可以查看商品信息,而且还可以自行搜索商品信息。

(3)管理员具有权限,对商品信息进行添删改查等[11]。

(4)可以点击信息详情页进行查看。

(5)管理员可以发布公告信息。

3.3可行性分析

3.3.1经济可行性

本项目经济可行性,主要是考虑前期所需的投入和后期项目上线后维护费用,服务器费用和后期产生的经济效益是否能保证整个项目的运行。

在前期投入方面,由于开发工具都是开源免费的,所以开发工具花费比较小,主要是开发人力资源的投入[12]。在保证项目的质量下,这方面的支出还是比较少的。

另外项目完成交付之后,项目的推广也需要一部分支出,这部分也是非常重要的环节,用户使用数目的多少将直接决定后期的盈利。在上线时还要考虑后期管理和维护的费用。

从以上分析来看,前期的投入和后期收益,可以保证整个项目运转前提下,获得的额外盈利还是可观的。

3.3.2技术可行性

本次开发主要是为了打造区别于传统的高校管理形式的系统。在网络允许条件下,用户可在任何地方任何场所进入系统浏览相关内容。软件的主要逻辑是:用户进入系统页面然后进行各种点击操作,处理用户各种点击操作请求,业务逻辑处理以及访问数据库几个过程;如果把这三个功能放在一块,代码会显得很复杂,对后期的维护很不方便。于是,笔者经过查询相关资料最终决定采用B/S设计模式,B/S模式将代码按照功能分为三层,提高扩展性和维护性[13]。

系统将采用Windows+Tomcat+MySQL+Java的组合开发完成,技术已经被很多人采用,并被反复证明是有效成熟的,因此成功率一般比较高。此外,成熟技术经过长期使用、补充和优化,其优化度、可操作性和经济性均良好。后台数据的处理则是通过Java和 SpringBoot合作。软件把用户提交的数据经过后端系统的处理后,供以用户查看和操作。

在确定好开发环境的整个项目大致方向之后,笔者循序渐进地学习相关技术,早日完成开发。由此看来,技术可行性也是没有问题的。

3.3.3社会可行性

在这个交通便捷、信息通畅的时代,人们可以选择的管理方式渐渐多了起来,对于网络、系统的依赖也越来越大。电子信息、教学界都需要快速的发展和进步。这些行业的发展对人们有着很大的影响。对我们的祖国才能更迅速的发展起来,以完成党和国家的百年奋斗目标。而把科技发展和工业发展连接起来,二者相互推动进在目前看来是一个大的趋势。现在正是各个国家比拼各自科技的时代,这样一来,员工出行碳排放管理系统就变得十分重要。同时,员工出行碳排放管理系统大大提升了使用者的使用体验,符合当今社会的发展背景和发展方向[14]。

3.4系统用例分析

本系统分为两部分进行设计,后台主体分别是员工和管理员;其用例分别如下:

管理员用例图如图3-1所示。

图3-1 管理员用例图

员工用例图如图3-2所示。

图3-2 员工用例图

3.5软硬件需求

浏览器:IE 8.1(推荐6.0以上)

代码开发平台:Eclipse

开发使用语言:Java

JDK版本:JDK_8

数据库管理系统软件:Mysql

运行平台:Windows 7

运行环境:Tomcat

3.6系统流程图

本系统登录流程图,如图3-3所示。

图3-3 登录流程图

本系统添加信息流程图,如图3-4所示。

图3-4 添加信息流程图

四 系统设计

4.1系统设计总体描述

总体上看,员工出行碳排放管理系统具有注册登录、商品信息、论坛交流、公告信息等功能模块。以下为几个主要模块简单介绍:

注册登录:提供给员工注册登录的页面,完成员工的注册登录功能。

个人中心:对个人信息进行更新。

商品信息:管理员点击商品信息页面查询或删除商品信息。

碳排放:管理员点击碳排放页面添加或删除碳排放信息。

系统总体功能结构图如下所示:

图4-1系统总体结构图

4.2数据库设计

4.2.1 数据库系统

构建一个员工出行碳排放管理系统数据库是必不可少的,而我们使用的是MySQL关系数据库,开发工具是时下热门的Navicat for MySQL开发。MySQL有着信息卓越、服务稳定并且开源,可以不用担心费用问题,对于个人的管理及维护上也十分便捷,Navicat有着简洁的界面和稳定的开发环境,还拥有着优秀的图形用户界面。

4.2.2数据库实体及属性

在线留言E-R图4-2所示。

图4-2在线留言E-R图

论坛交流E-R图4-3所示。

图4-3论坛交流E-R图

员工信息E-R图4-4所示。

图4-4员工信息E-R图

碳排放E-R图4-5所示。

图4-5碳排放E-R图

商品信息E-R图4-6所示。

图4-6商品信息E-R图

以上是本系统的各个实体,对其实体属性进行分析和整合,得到了该系统的E-R图。系统E-R图如图4-7 所示:

                               图 4-7系统E-R图

五 系统的实现

5.1前台员工功能的实现

注册账号成功且登录系统后,员工即可进入主页查看首页、商品信息、论坛交流、公告信息、在线留言,并开始执行业务操作,如图5-1所示:

图5-1 系统首页界面

在注册流程中,员工在Vue前端填写必要信息(如员工账号、密码等)并提交。前端将这些信息通过HTTP请求发送到Java后端。后端处理这些信息,检查员工账号是否唯一,并将新员工数据存入MySQL数据库。完成后,后端向前端发送注册成功的确认,前端随后通知员工完成注册。这个过程实现了新员工的数据收集、验证和存储。,如图5-2所示:

图5-2员工注册界面

以下是注册代码;

<script>

export default {

        data() {

                return {

                        ruleForm: {

                        },

            pageFlag : '',

                        tableName:"",

                        rules: {},

                };

        },

        mounted(){

        this.pageFlag = this.$storage.get("pageFlag");

                let table = this.$storage.get("loginTable");

                this.tableName = table;

        },

        created() {

    

        },

        destroyed() {

                          },

        methods: {

                // 获取uuid

                getUUID () {

                        return new Date().getTime();

                },

                close(){

                        this.$router.push({ path: "/login" });

                },

        yonghutouxiangUploadChange(fileUrls) {

            this.ruleForm.touxiang = fileUrls;

        },

        // 多级联动参数

                // 注册

                login() {

                        var url=this.tableName+"/register";

                                        if((!this.ruleForm.yonghuzhanghao) && `yonghu` == this.tableName){

                                                this.$message.error(`用户账号不能为空`);

                                                return

                                        }

                                                

                                        if((!this.ruleForm.yonghuxingming) && `yonghu` == this.tableName){

                                                this.$message.error(`用户姓名不能为空`);

                                                return

                                        }

                                        

                                        if((!this.ruleForm.mima) && `yonghu` == this.tableName){

                                                this.$message.error(`密码不能为空`);

                                                return

                                        }

                                        

                                        if((this.ruleForm.mima!=this.ruleForm.mima2) && `yonghu` == this.tableName){

                                                this.$message.error(`两次密码输入不一致`);

                                                return

                                        }

                                        

                                        

                                        if(`yonghu` == this.tableName && this.ruleForm.lianxidianhua&&(!this.$validate.isMobile(this.ruleForm.lianxidianhua))){

                                                this.$message.error(`联系电话应输入手机格式`);

                                                return

                                        }

                                        

                                        

            if(this.ruleForm.touxiang!=null) {

                this.ruleForm.touxiang = this.ruleForm.touxiang.replace(new RegExp(this.$base.url,"g"),"");

            }

                                        

                        this.$http({

                                url: url,

                                method: "post",

                                data:this.ruleForm

                        }).then(({ data }) => {

                                if (data && data.code === 0) {

                                        this.$message({

                                                message: "注册成功",

                                                type: "success",

                                                duration: 1500,

                                                onClose: () => {

                                                        this.$router.replace({ path: "/login" });

                                                }

                                        });

                                } else {

                                        this.$message.error(data.msg);

                                }

                        });

                }

        }

};

</script>

在登录流程中,员工首先在Vue前端界面输入账号和密码。这些信息通过HTTP请求发送到Java后端。后端接收请求,通过与MySQL数据库交互验证员工凭证。如果认证成功,后端会返回给前端,允许员工访问系统。这个过程涵盖了从员工输入到系统验证和响应的全过程。如图5-3所示;

                     图5-3员工登录界图

以下是登录代码;

  mounted() {

    let menus = menu.list();

    this.menus = menus;

    for (let i = 0; i < this.menus.length; i++) {

      if (this.menus[i].hasBackLogin=='是') {

        this.roles.push(this.menus[i])

      }

    }

  },

  created() {

    this.getRandCode()

  },

  destroyed() {

            },

  components: {

  },

  methods: {

    //注册

    register(tableName){

                this.$storage.set("loginTable", tableName);

        this.$storage.set("pageFlag", "register");

                this.$router.push({path:'/register'})

    },

    // 登陆

    login() {

                if (!this.rulesForm.username) {

                        this.$message.error("请输入用户名");

                        return;

                }

                if (!this.rulesForm.password) {

                        this.$message.error("请输入密码");

                        return;

                }

                if(this.roles.length>1) {

                        if (!this.rulesForm.role) {

                                this.$message.error("请选择角色");

                                return;

                        }

                        let menus = this.menus;

                        for (let i = 0; i < menus.length; i++) {

                                if (menus[i].roleName == this.rulesForm.role) {

                                        this.tableName = menus[i].tableName;

                                }

                        }

                } else {

                        this.tableName = this.roles[0].tableName;

                        this.rulesForm.role = this.roles[0].roleName;

                }

                this.$http({

                        url: `${this.tableName}/login?username=${this.rulesForm.username}&password=${this.rulesForm.password}`,

                        method: "post"

                }).then(({ data }) => {

                        if (data && data.code === 0) {

                                this.$storage.set("Token", data.token);

                                this.$storage.set("role", this.rulesForm.role);

                                this.$storage.set("sessionTable", this.tableName);

                                this.$storage.set("adminName", this.rulesForm.username);

                                this.$router.replace({ path: "/index/" });

                        } else {

                                this.$message.error(data.msg);

                        }

                });

    },

    getRandCode(len = 4){

                this.randomString(len)

    },

    randomString(len = 4) {

      let chars = [

          "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k",

          "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v",

          "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G",

          "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",

          "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2",

          "3", "4", "5", "6", "7", "8", "9"

      ]

      let colors = ["0", "1", "2","3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]

      let sizes = ['14', '15', '16', '17', '18']

      let output = [];

      for (let i = 0; i < len; i++) {

        // 随机验证码

        let key = Math.floor(Math.random()*chars.length)

        this.codes[i].num = chars[key]

        // 随机验证码颜色

        let code = '#'

        for (let j = 0; j < 6; j++) {

          let key = Math.floor(Math.random()*colors.length)

          code += colors[key]

        }

        this.codes[i].color = code

        // 随机验证码方向

        let rotate = Math.floor(Math.random()*60)

        let plus = Math.floor(Math.random()*2)

        if(plus == 1) rotate = '-'+rotate

        this.codes[i].rotate = 'rotate('+rotate+'deg)'

        // 随机验证码字体大小

        let size = Math.floor(Math.random()*sizes.length)

        this.codes[i].size = sizes[size]+'px'

      }

    },

  }

};

商品信息:在商品信息页面的搜索栏中输入商品名称、商品分类、商品品牌、价格,进行查询,可以查看到商品等信息,如有需要可以添加到购物车、立即购买收藏或者评论等操作,如图5-4所示:

图5-4商品信息页面

个人中心:在个人中心页面可以对个人信息和修改密码、碳排放、我的发布、我的订单、我的地址、我的收藏进行详细操作,如图5-5所示:

图5-5个人中心页面

5.2 后台管理员功能的实现

管理员在员工出行碳排放管理系统设计与实现后台网站的登录界面中,首先需要进行身份验证。详细的管理员登录界面如图5-6所示:

                                图5-6管理员登录界面图

管理员登录系统后可以进行的一些操作,对用户信息进行管理。这个系统除了对用户信息进行添加,查询,更改以及删除操作之外,还可以管理包括系统首页、个人中心、员工、碳排放、商品分类、商品信息、论坛交流、在线留言、系统管理、订单管理等,如图5-7所示:

图5-7管理员首页界面

员工在视图层(view层)进行交互,比如点击“添加”按钮或填写员工需求信息表单。这些员工动作被视图层捕获并作为请求发送给相应的控制器层(control1er层)。控制器接收到这些请求后,调用服务层(service层)以执行相关的业务逻辑,例如验证输入数据的有效性和与数据库的交互。服务层处理完这些逻辑后,进一步与数据访问对象层(DAO层)交互,后者负责具体的数据操作如查询、添加、更新或删除员工,并将操作结果返回给控制器。最终,控制器根据这些结果更新视图层,以便员工可以看到最新的信息或相应的操作反馈。在员工页面的输入栏中输入员工账号、员工姓名进行查询,可以查看到员工详细信息,并根据需要进行更改或者删除等操作如图5-8所示:

图5-8员工界面

管理员可以在商品分类界面进行商品分类的管理,包括添删改查操作,可以根据商品分类,查询到相应的商品分类,并进行添删改查操作。该模块实现的界面如图5-9所示:

图5-9商品分类界面

碳排放在视图层(view层)进行交互,比如点击“修改”按钮或填写碳排放需求信息表单。这些碳排放动作被视图层捕获并作为请求发送给相应的控制器层(control1er层)。控制器接收到这些请求后,调用服务层(service层)以执行相关的业务逻辑,例如验证输入数据的有效性和与数据库的交互。服务层处理完这些逻辑后,进一步与数据访问对象层(DAO层)交互,后者负责具体的数据操作如查询、修改、更新或删除碳排放,并将操作结果返回给控制器。最终,控制器根据这些结果更新视图层,以便碳排放可以看到最新的信息或相应的操作反馈。在碳排放页面的输入栏中输入记录标题进行查询,可以查看到碳排放详细信息,并根据需要进行修改或者删除等如图5-10所示:

图5-10碳排放界面

管理员可以在商品信息界面进行商品信息的管理,包括添删改查操作,可以根据商品名称、商品分类、商品品牌、价格,查询到相应的商品信息,并进行添加或者删除操作。该模块实现的界面如图5-11所示:

图5-11 商品信息界面

管理员可以在论坛交流界面进行论坛交流的管理,包括删改查操作,可以根据帖子标题,查询到相应的论坛交流,并进行删改查操作。该模块实现的界面如图5-12所示:

图5-12论坛交流界面

管理员可以在在线留言界面进行在线留言的管理,包括删改查操作,可以根据用户名,查询到相应的在线留言,并进行删改查操作。该模块实现的界面如图5-13所示:

图5-13在线留言界面

管理员点击“系统管理”会显示出所有的轮播图管理、关于我们、公告信息、系统简介、公告信息分类,并进行修改或删除等操作。该模块实现的界面如图5-14所示:

图5-14系统管理界面

源码无偿分享,文未领取

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值