Vue/ExtJS+SpringBoot打造双版本通讯录管理系统

简介: Vue/ExtJS+SpringBoot打造双版本通讯录管理系统

零、通讯录管理系统简介

本文介绍的通讯录管理系统分为两个版本,分别是 ExtJS 版本和 Vue.js 版本

ExtJS 版本是大三《数据库编程》的课程设计,Vue 版本是工作后因个人兴趣编写的版本,如有不足之处敬请谅解。

所有源代码及数据库文件在文章底部,需要请自取,谢谢!


一、ExtJS 版本

extjs文件夹下的项目是一个基于 ExtJSSpringBoot 的通讯录管理系统,模拟了通讯录记录的业务流程,主要包含通讯录类型模块、通讯录明细模块、用户管理、菜单权限管理、图表分析大屏这五个模块。

前端

  • Extjs
  • JQuery

后端

  • SpringBoot
  • Jpa

数据库

  • MySql 8.0.30

模块预览

首先是 ExtJS 版本的登陆页,是暗黑风格的登陆模块,登陆界面需要输入标准三大套件:账号、密码、验证码,如下所示。

当然也有注册页面,注册就要多填一些数据,实现逻辑大致一样,如下图所示。

提示:请注意验证码在表单右边哦!

登陆之后就是主页了,主页就让人看着清爽,简简单单几个静态的打字,如下图所示。

第一个模块是用户管理模块,用于管理可以进入到这个系统的用户,如下图所示。

当然对于用户可以进行基于姓名的条件查询,表单有点简陋,如下图所示。

第二个模块就是权限管理模块,这个模块管理了管理员用户分别有哪些菜单权限,Vue 版本对齐进行了深入优化,角色可自由定义增删。

下面这个是菜单管理模块,功能可以对标 Vue 版本的菜单支持模块,用于管理模块和源代码路径的映射关系,如下图所示。

第四个模块是管理类型管理模块,也就是通讯录的类型,如朋友、同学、家人等,支持增删改查导出操作,如下图所示。

当然朋友类型的添加界面也要展示一下,如下图所示。

删除的提示界面也一样,整个系统都是这样的一个二次确认提示框。

第五个就是通讯录管理模块,正儿八经的管理通讯录的数据,可以看到密密麻麻的测试数据,如下图所示。

对于这么正儿八经的模块,当然也支持条件查询,那就是关系类型的条件查询,如下图所示。

第六个模块就是通讯录查询模块,这个模块是视图的定位,就是用来查询的,虽然没什么用,但做都做了,还是保留着吧,如下图所示。

第七个模块是图表管理模块,展示各类通讯录的分布情况,看起来黄蓝对比色还不错,图下图所示。

当然了,用户既然能登进来,肯定能修改自己的密码,修改密码的界面如下图所示。

为了在课程设计中拿高一点的分数,我还写了个大屏,套了个模板,数据来源于自己的 API 接口,这不就成了,拿了个优秀,嘿嘿~ 大屏界面如下图所示。

各位同学可能想问了,我如果去开发这套系统,是则么样的感受呢?那就是打开 Eclipse 然后顶着屏幕的感受啦,就像下面这张图这样,你快盯他!

ExtJS 版本的数据库很简单,总共就六张表,图下图所示。


二、Vue.js 版本

Vue.js 版本的通讯录系统,采用了 https://gitee.com/yyzwz/template 这个项目作为开发模板。

Vue 版本的登陆界面如下所示,用户需要输入登陆账号、密码和图形验证码。

项目支持企业微信扫码登陆,当然需要在项目后端配上你自己企业的 ID 和应用 ID,如下图所示。

登陆成功后,进入到主页面,如下图所示。点击每一个常用模块可以快速进入对应的模块,不用再依次选菜单了。

朋友类型模块如下所示,你可以在这个模块中维护朋友类型的数据,朋友类型数据要在通讯录明细模块中引用。

通讯录明细模块如下所示,你可以在这里维护通讯录数据。

通话记录模块如下图所示,是通讯录明细的一个扩展,维护朋友之间的联系维度。

还有一些图表,本项目采用了 Antv 产品,有兴趣的朋友可以了解看看,如果要 Echarts 可以到 Extjs 版本的项目查看。

当然你可以在这个项目上进行二次开发,扩展你的非标需求,就像下图这样。

另外本项目将所有的文件,封装成了一个云盘模块,其他模块如果涉及到文件上传、下载预览等业务时,只需调用写好的组件即可完成,简化开发量。


三、项目源代码

源代码地址:
GitEE:https://gitee.com/yyzwz/address-book-system
GitHub:https://github.com/yyzwz/address-book-system
CSDN:https://gitcode.net/qq_41464123/address-book-system

四、免责声明

  • 本项目开源,仅供个人学习使用,转发 / 商用授权请联系作者,否则后果自负
  • 作者拥有本软件构建后的应用系统全部内容所有权及独立的知识产权。
  • 如有问题,欢迎在仓库 Issue 留言,看到后会第一时间回复。相关意见会酌情考虑,但没有一定被采纳的承诺或保证。

下载本系统代码的用户,必须同意以下内容,否则请勿下载

  1. 出于自愿而使用/开发本软件,了解使用本软件的风险,且同意自己承担使用本软件的风险。
  2. 利用本软件构建的网站的任何信息内容以及导致的任何版权纠纷和法律争议及后果和作者无关,作者对此不承担任何责任。
  3. 在任何情况下,对于因使用或无法使用本软件而导致的任何难以合理预估的损失(包括但不仅限于商业利润损失、业务中断与业务信息丢失),作者概不承担任何责任。
  4. 必须了解使用本软件的风险,作者不承诺提供一对一的技术支持、使用担保,也不承担任何因本软件而产生的难以预料的问题的相关责任。
    关,作者对此不承担任何责任。
  5. 在任何情况下,对于因使用或无法使用本软件而导致的任何难以合理预估的损失(包括但不仅限于商业利润损失、业务中断与业务信息丢失),作者概不承担任何责任。
  6. 必须了解使用本软件的风险,作者不承诺提供一对一的技术支持、使用担保,也不承担任何因本软件而产生的难以预料的问题的相关责任。


相关文章
|
20天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 Ant Design Pro Vue 创建前端项目,配置动态路由和菜单。通过具体案例,展示了如何快速搭建高效、易维护的项目框架。
95 62
|
12天前
|
XML Java 数据库连接
SpringBoot集成Flowable:打造强大的工作流管理系统
在企业级应用开发中,工作流管理是一个核心组件,它能够帮助我们定义、执行和管理业务流程。Flowable是一个开源的工作流和业务流程管理(BPM)平台,它提供了强大的工作流引擎和建模工具。结合SpringBoot,我们可以快速构建一个高效、灵活的工作流管理系统。本文将探讨如何将Flowable集成到SpringBoot应用中,并展示其强大的功能。
45 1
|
18天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
36 2
|
21天前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
30天前
|
存储 安全 Java
打造智能合同管理系统:SpringBoot与电子签章的完美融合
【10月更文挑战第7天】 在数字化转型的浪潮中,电子合同管理系统因其高效、环保和安全的特点,正逐渐成为企业合同管理的新宠。本文将分享如何利用SpringBoot框架实现一个集电子文件签字与合同管理于一体的智能系统,探索技术如何助力合同管理的现代化。
61 4
|
30天前
|
前端开发 Java Apache
SpringBoot实现电子文件签字+合同系统!
【10月更文挑战第15天】 在现代企业运营中,合同管理和电子文件签字成为了日常活动中不可或缺的一部分。随着技术的发展,电子合同系统因其高效性、安全性和环保性,逐渐取代了传统的纸质合同。本文将详细介绍如何使用SpringBoot框架实现一个电子文件签字和合同管理系统。
53 1
|
1月前
|
文字识别 安全 Java
SpringBoot3.x和OCR构建车牌识别系统
本文介绍了一个基于Java SpringBoot3.x框架的车牌识别系统,详细阐述了系统的设计目标、需求分析及其实现过程。利用Tesseract OCR库和OpenCV库,实现了车牌图片的识别与处理,确保系统的高准确性和稳定性。文中还提供了具体的代码示例,展示了如何构建和优化车牌识别服务,以及如何处理特殊和异常车牌。通过实际应用案例,帮助读者理解和应用这一解决方案。
|
17天前
|
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 的前后端分离的后台管理系统
31 0
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,包括版本兼容性、安全性、性能调优等方面。
148 1
|
2月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的服装商城管理系统
基于Java+Springboot+Vue开发的服装商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的服装商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
153 2
基于Java+Springboot+Vue开发的服装商城管理系统