基于Java-SpringBoot+vue实现的前后端分离信息管理系统设计和实现

news/2024/4/28 11:48:08

基于Java-SpringBoot+vue实现的前后端分离信息管理系统设计和实现

博主介绍:多年java开发经验,专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域
作者主页 央顺技术团队
Java毕设项目精品实战案例《1000套》
欢迎点赞 收藏 ⭐留言
文末获取源码联系方式

文章目录

  • 基于Java-SpringBoot+vue实现的前后端分离信息管理系统设计和实现
  • 前言:
  • 主要功能说明
  • 功能截图:
  • 主要代码实现:
  • 获取源码:

前言:

当今社会,随着科学技术的发展,以及市场经济的多元化,使人才的流动速度大大增加,因此也对党建工作的管理层面工作带来了空前且复杂的挑战, 从而使得如何高效的开展管理党建工作成为了亟待解决的问题。为此将高速发展的信息科学技术引入到党建工作管理的应用中,力求合理有效的提升全面各项工作的进展,实现以人为本的科学发展思想和意识,是一种高效可实现的方法。 Java作为一种面向对象的、可以撰写跨平台应用软件的程序设计语言,其技术具有卓越的通用性、高效性、平台移植性以及安全性,如今已广泛应用于 PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网等方面,大大方便了人们的生活、工作和娱乐。 而基于Java技术的党建工作管理平台,结合了Java技术,从而可起到规范党群业务流程,提高党群工作管理效率,对于党群工作定期提醒,以及完 成情况后的及时反馈,有效地提升党群工作管理的标准化程度的作用;进而实现党群工作的网上信息交流和交互办公,图片资料保存与共享等功能。

主要功能说明

用户登录、修改密码、首页介绍、数据可视化树状图展示、用户管理、菜单管理、权限控制、角色管理、部门管理、角色管理、组织架构管理、系统sql监控、日志管理、通知公告管理、要闻管理、组织风采管理、资料管理、查看、上传富文本等、和查看下载附件信息。组织发展管理、考试管理以及退出等

功能截图:

登陆:根据用户角色权限进行登录、用户角色灵活控制。
在这里插入图片描述
系统主页:
在这里插入图片描述
用户管理:用户的模糊查询、添加、选择部门、角色和职位等信息、以及修改和删除等
在这里插入图片描述
职位管理:职位的模糊查询、添加、权限控制以及修改和删除等
在这里插入图片描述
菜单管理:菜单通过角色权限灵活控制、具体到按钮级别
在这里插入图片描述
SQL监控:
在这里插入图片描述
切面日志管理:
在这里插入图片描述
组织架构: 组织架构的模糊查询、添加、权限控制以及修改和删除等
在这里插入图片描述
通知公告模块:通知公告的模糊查询、添加、权限控制以及修改和删除等。和富文本笔记内容
在这里插入图片描述
在这里插入图片描述
新闻模块:
在这里插入图片描述
在这里插入图片描述
组织风采模块:
在这里插入图片描述
在这里插入图片描述
资料管理模块:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
组织发展模块:
在这里插入图片描述
在线考试模块:
在这里插入图片描述
修改密码模块
在这里插入图片描述

主要代码实现:

用户登录验证

/*** 登录相关** @author lyy* */
@RestController
public class SysLoginController extends AbstractController {@Autowiredprivate SysUserService sysUserService;@Autowiredprivate SysUserTokenService sysUserTokenService;@Autowiredprivate SysCaptchaService sysCaptchaService;/*** 验证码*/@GetMapping("captcha.jpg")public void captcha(HttpServletResponse response, String uuid)throws IOException {response.setHeader("Cache-Control", "no-store, no-cache");response.setContentType("image/jpeg");//获取图片验证码BufferedImage image = sysCaptchaService.getCaptcha(uuid);ServletOutputStream out = response.getOutputStream();ImageIO.write(image, "jpg", out);IOUtils.closeQuietly(out);}/*** 登录*/@PostMapping("/sys/login")public Map<String, Object> login(@RequestBody SysLoginForm form)throws IOException {boolean captcha = sysCaptchaService.validate(form.getUuid(), form.getCaptcha());
//		if(!captcha){
//			return R.error("验证码不正确");
//		}//用户信息SysUserEntity user = sysUserService.queryByUserName(form.getUsername());//账号不存在、密码错误if(user == null || !user.getPassword().equals(new Sha256Hash(form.getPassword(), user.getSalt()).toHex())) {return R.error("账号或密码不正确");}//账号锁定if(user.getStatus() == 0){return R.error("账号已被锁定,请联系管理员");}//生成token,并保存到数据库R r = sysUserTokenService.createToken(user.getUserId());return r;}/*** 退出*/@PostMapping("/sys/logout")public R logout() {sysUserTokenService.logout(getUserId());return R.ok();}

shiro权限拦截放行:

/*** Shiro配置** @author lyy*/
@Configuration
public class ShiroConfig {@Bean("securityManager")public SecurityManager securityManager(OAuth2Realm oAuth2Realm) {DefaultWebSecurityManager securityManager = new DefaultWebSecurityManager();securityManager.setRealm(oAuth2Realm);securityManager.setRememberMeManager(null);return securityManager;}@Bean("shiroFilter")public ShiroFilterFactoryBean shiroFilter(SecurityManager securityManager) {ShiroFilterFactoryBean shiroFilter = new ShiroFilterFactoryBean();shiroFilter.setSecurityManager(securityManager);//oauth过滤Map<String, Filter> filters = new HashMap<>();filters.put("oauth2", new OAuth2Filter());shiroFilter.setFilters(filters);Map<String, String> filterMap = new LinkedHashMap<>();filterMap.put("/webjars/**", "anon");filterMap.put("/druid/**", "anon");filterMap.put("/app/**", "anon");filterMap.put("/sys/login", "anon");filterMap.put("/swagger/**", "anon");filterMap.put("/v2/api-docs", "anon");filterMap.put("/swagger-ui.html", "anon");filterMap.put("/swagger-resources/**", "anon");filterMap.put("/captcha.jpg", "anon");filterMap.put("/aaa.txt", "anon");filterMap.put("/virtuel/**", "anon");filterMap.put("/image/**", "anon");filterMap.put("/**", "oauth2");shiroFilter.setFilterChainDefinitionMap(filterMap);return shiroFilter;}@Bean("lifecycleBeanPostProcessor")public LifecycleBeanPostProcessor lifecycleBeanPostProcessor() {return new LifecycleBeanPostProcessor();}@Beanpublic AuthorizationAttributeSourceAdvisor authorizationAttributeSourceAdvisor(SecurityManager securityManager) {AuthorizationAttributeSourceAdvisor advisor = new AuthorizationAttributeSourceAdvisor();advisor.setSecurityManager(securityManager);return advisor;}

前端vue element登录:

<template><div class="site-wrapper site-page--login"><div class="site-content__wrapper"><div class="site-content"><div class="brand-info"><h1 class="brand-info__text">信息管理系统</h1></div><div class="login-main"><h3 class="login-title">系统登录</h3><el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon><el-form-item prop="userName"><el-input v-model="dataForm.userName" placeholder="帐号"></el-input></el-form-item><el-form-item prop="password"><el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input></el-form-item><el-form-item prop="captcha"><el-row :gutter="20"><el-col :span="14"><el-input v-model="dataForm.captcha" placeholder="验证码"></el-input></el-col><el-col :span="10" class="login-captcha"><img :src="captchaPath" @click="getCaptcha()" alt=""></el-col></el-row></el-form-item><el-form-item><el-button class="login-btn-submit" type="danger" @click="dataFormSubmit()">登录</el-button></el-form-item></el-form></div></div></div></div>
</template><script>import { getUUID } from '@/utils'export default {data () {return {dataForm: {userName: '',password: '',uuid: '',captcha: ''},dataRule: {userName: [{ required: true, message: '帐号不能为空', trigger: 'blur' }],password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],captcha: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]},captchaPath: ''}},created () {this.getCaptcha()},methods: {// 提交表单dataFormSubmit () {this.$refs['dataForm'].validate((valid) => {if (valid) {this.$http({url: this.$http.adornUrl('/sys/login'),method: 'post',data: this.$http.adornData({'username': this.dataForm.userName,'password': this.dataForm.password,'uuid': this.dataForm.uuid,'captcha': this.dataForm.captcha})}).then(({data}) => {if (data && data.code === 0) {this.$cookie.set('token', data.token)this.$router.replace({ name: 'home' })} else {this.getCaptcha()this.$message.error(data.msg)}})}})},// 获取验证码getCaptcha () {this.dataForm.uuid = getUUID()this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`)}}}
</script><style lang="scss">.site-wrapper.site-page--login {position: absolute;top: 0;right: 0;bottom: 0;left: 0;//background-color: rgba(38, 50, 56, .6);overflow: hidden;&:before {position: fixed;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;content: "";background-image: url(~@/assets/img/login_bg.jpg);background-size: cover;}.site-content__wrapper {position: absolute;top: 0;right: 0;bottom: 0;left: 0;padding: 0;margin: 0;overflow-x: hidden;overflow-y: auto;background-color: transparent;}.site-content {min-height: 100%;padding: 30px 500px 30px 30px;}.brand-info {margin: 220px 100px 0 90px;color: #fff;}.brand-info__text {margin:  0 100px 220px 200px;font-size: 100px;font-weight: 400;text-transform : uppercase;}.brand-info__intro {margin: 10px 0;font-size: 16px;line-height: 1.58;opacity: .6;}.login-main {position: absolute;top: 0;right: 0;padding: 150px 60px 180px;width: 470px;min-height: 100%;background-color: #fff;}.login-title {font-size: 16px;}.login-captcha {overflow: hidden;> img {width: 100%;cursor: pointer;}}.login-btn-submit {width: 100%;margin-top: 38px;}}
</style>

获取源码:

大家点赞、收藏、关注、评论啦
🍅查看下方微信号获取联系方式 📝
🚀🚀🚀精彩系列推荐
Java毕设项目精品实战案例《1000套》
精彩专栏推荐订阅:在下方专栏

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.cpky.cn/p/11227.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

Apache Spark

一、Apache Spark 1、Spark简介 Apache Spark是用于大规模数据 (large-scala data) 处理的统一 (unified) 分析引擎。 Spark官网 Spark最早源于一篇论文Resilient Distributed Datasets: A Fault-Tolerant Abstraction for In-Memory Cluster Computing,该论文是由加州大学柏…

RabbitMQ安装及使用笔记

RabbitMQ安装及使用笔记 RabbitMQ是一个开源的消息代理软件&#xff0c;它实现了高级消息队列协议&#xff08;AMQP&#xff09;&#xff0c;用于在分布式系统中进行消息传递。 1.安装 利用docker load命令加载mq镜像 docker load -i mq.tar 基于Docker来安装RabbitMQ&#xff…

JVM快速入门(2)HotSpot和堆、新生区、永久区、堆内存调优、JProfiler工具分析OOM原因、GC(垃圾回收)、JVM经典面试笔试题整理

5.6 HotSpot和堆 5.6.1 Hotspot 三种JVM&#xff1a; Sun公司&#xff0c;HotspotBEA&#xff0c;JRockitIBM&#xff0c;J9 VM&#xff0c;号称是世界上最快的Java虚拟机 我们一般学习的是&#xff1a;HotSpot 5.6.2 堆 Heap&#xff0c;一个JVM只有一个堆内存&#xff0c…

2024年腾讯云最新优惠活动整理汇总

随着云计算技术的不断发展&#xff0c;越来越多的企业和个人开始选择将业务迁移到云端。腾讯云作为国内领先的云计算服务提供商&#xff0c;不仅提供了稳定、安全的云服务&#xff0c;还通过一系列的优惠活动&#xff0c;为用户带来了实实在在的福利。2024年&#xff0c;腾讯云…

docker 部署 gitlab-ce 16.9.1

文章目录 [toc]拉取 gitlab-ce 镜像创建 gitlab-ce 持久化目录启停脚本配置配置 gitlab-ce编辑 gitlab-ce 配置文件重启 gitlab-ce配置 root 密码 设置中文 gitlab/gitlab-ce(需要科学上网) 拉取 gitlab-ce 镜像 docker pull gitlab/gitlab-ce:16.9.1-ce.0查看镜像是不是有 Vo…

如何在极狐GitLab 自定义 Pages 域名、SSL/TLS 证书

本文作者&#xff1a;徐晓伟 GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 本文主要讲述了在极狐GitLab 用户…