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. 必须了解使用本软件的风险,作者不承诺提供一对一的技术支持、使用担保,也不承担任何因本软件而产生的难以预料的问题的相关责任。


相关文章
|
6月前
|
JavaScript Java 关系型数据库
基于springboot的项目管理系统
本文探讨项目管理系统在现代企业中的应用与实现,分析其研究背景、意义及现状,阐述基于SSM、Java、MySQL和Vue等技术构建系统的关键方法,展现其在提升管理效率、协同水平与风险管控方面的价值。
|
6月前
|
搜索推荐 JavaScript Java
基于springboot的儿童家长教育能力提升学习系统
本系统聚焦儿童家长教育能力提升,针对家庭教育中理念混乱、时间不足、个性化服务缺失等问题,构建科学、系统、个性化的在线学习平台。融合Spring Boot、Vue等先进技术,整合优质教育资源,提供高效便捷的学习路径,助力家长掌握科学育儿方法,促进儿童全面健康发展,推动家庭和谐与社会进步。
|
6月前
|
JavaScript Java 关系型数据库
基于springboot的古树名木保护管理系统
本研究针对古树保护面临的严峻挑战,构建基于Java、Vue、MySQL与Spring Boot技术的信息化管理系统,实现古树资源的动态监测、数据管理与科学保护,推动生态、文化与经济可持续发展。
|
6月前
|
监控 安全 JavaScript
2025基于springboot的校车预定全流程管理系统
针对传统校车管理效率低、信息不透明等问题,本研究设计并实现了一套校车预定全流程管理系统。系统采用Spring Boot、Java、Vue和MySQL等技术,实现校车信息管理、在线预定、实时监控等功能,提升学校管理效率,保障学生出行安全,推动教育信息化发展。
|
7月前
|
存储 JavaScript Java
基于springboot的大学公文收发管理系统
本文介绍公文收发系统的研究背景与意义,分析其在数字化阅读趋势下的必要性。系统采用Vue、Java、Spring Boot与MySQL技术,实现高效、便捷的公文管理与在线阅读,提升用户体验与信息处理效率。
|
6月前
|
人工智能 Java 关系型数据库
基于springboot的画品交流系统
本项目构建基于Java+Vue+SpringBoot+MySQL的画品交流系统,旨在解决传统艺术交易信息不透明、流通受限等问题,融合区块链与AI技术,实现画品展示、交易、鉴赏与社交一体化,推动艺术数字化转型与文化传播。
|
6月前
|
JavaScript Java 关系型数据库
基于springboot的高校运动会系统
本系统基于Spring Boot、Vue与MySQL,实现高校运动会报名、赛程安排及成绩管理的全流程信息化,提升组织效率,杜绝信息错漏与冒名顶替,推动体育赛事智能化发展。
|
6月前
|
JavaScript 安全 Java
基于springboot的大学生兼职系统
本课题针对大学生兼职信息不对称、权益难保障等问题,研究基于Spring Boot、Vue、MySQL等技术的兼职系统,旨在构建安全、高效、功能完善的平台,提升大学生就业竞争力与兼职质量。
|
6月前
|
JavaScript Java 关系型数据库
基于springboot的美食城服务管理系统
本系统基于Spring Boot、Java、Vue和MySQL技术,构建集消费者服务、商家管理与后台监管于一体的美食城综合管理平台,提升运营效率与用户体验。

热门文章

最新文章

下一篇
开通oss服务