【开源免费】Vue+SpringBoot打造通讯录管理系统，初学者入门实战项目

ゝ一纸荒年。 2023-09-24 14:02 52阅读 0赞

> **作者主页**：[Designer 小郑][Designer]  
> **作者简介**：3年JAVA全栈开发经验，专注JAVA技术、系统定制、远程指导，致力于企业数字化转型，CSDN学院、蓝桥云课认证讲师。

--------------------

<table> 
 <thead> 
 <tr> 
 <th>标题</th> 
 <th>说明</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>项目类型</td> 
 <td>开源项目</td> 
 </tr> 
 <tr> 
 <td>项目名称</td> 
 <td> 通讯录管理系统 \color{red}{通讯录管理系统} 通讯录管理系统</td> 
 </tr> 
 <tr> 
 <td>Git 仓库</td> 
 <td><a href="https://gitee.com/yyzwz/address-book-system" rel="nofollow">https://gitee.com/yyzwz/address-book-system</a></td> 
 </tr> 
 <tr> 
 <td>增值服务</td> 
 <td>【 文档、部署、讲解 \color{red}{文档、部署、讲解} 文档、部署、讲解】 <a href="https://bbs.csdn.net/topics/617132402" rel="nofollow">https://bbs.csdn.net/topics/617132402</a></td> 
 </tr> 
 <tr> 
 <td>项目编码</td> 
 <td>ky012</td> 
 </tr> 
 </tbody> 
</table>

![在这里插入图片描述][47ee63f1ba9c441ea67a91b75fb3ac06.png_pic_center]

--------------------

#### 目录 ####

*  零、通讯录管理系统简介
 *   *  一、ExtJS 版本
     *   *  前端
         *  后端
         *  数据库
         *  模块预览
     *  二、Vue.js 版本
     *  三、免责声明

--------------------

## 零、通讯录管理系统简介 ##

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

![在这里插入图片描述][8c357d782fdb4aca997fe8ddfc7f7dfa.png_pic_center]

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

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

--------------------

### 一、ExtJS 版本 ###

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

#### 前端 ####

*  Extjs
 *  JQuery

#### 后端 ####

*  SpringBoot
 *  Jpa

#### 数据库 ####

*  MySql 8.0.30

#### 模块预览 ####

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

![在这里插入图片描述][c0d83f4584404d9c9ec21d5100645e54.png_pic_center]

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

提示：请注意验证码在表单右边哦！

![在这里插入图片描述][4b3d0559219d45e7a6a5307c3964c65f.png_pic_center]

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

![在这里插入图片描述][47ee63f1ba9c441ea67a91b75fb3ac06.png_pic_center]

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

![在这里插入图片描述][86550bc61b7248bfbaf347c915593884.png_pic_center]

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

![在这里插入图片描述][6387db9055aa4e25b35835d745d1f101.png_pic_center]

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

![在这里插入图片描述][72f25b2945614dc6a17a59ccfee75e32.png_pic_center]

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

![在这里插入图片描述][1aa25d9e39214369b1b67aa5b7784d57.png_pic_center]

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

![在这里插入图片描述][f5b2765b6ea1472fafee7b50598331fd.png_pic_center]

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

![在这里插入图片描述][36a7e4a73c9d4b99a1e2dbfb1c498ad3.png_pic_center]

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

![在这里插入图片描述][22dd1534115a40ac9918de54b787348b.png_pic_center]

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

![在这里插入图片描述][887f8d1b3c24430c8041321714902e8f.png_pic_center]

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

![在这里插入图片描述][9ffb1ded0ef94d9f8567582165097f98.png_pic_center]

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

![在这里插入图片描述][72a044ff92724da49e6ce6821af40e32.png_pic_center]

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

![在这里插入图片描述][ce6dc355118a4dd3a07e816fca3c2dc7.png_pic_center]

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

![在这里插入图片描述][c8a31a7d507c4e1ea0ba19e5e2b3d010.png_pic_center]

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

![在这里插入图片描述][cd79497f460e483b9e500a1f8f4b70bd.png_pic_center]

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

![在这里插入图片描述][e26d95f7a17b4130b124a4c179359b46.png_pic_center]

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

![在这里插入图片描述][1080fbbbd44747f18122c4172fbc448e.png_pic_center]

--------------------

### 二、Vue.js 版本 ###

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

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

![在这里插入图片描述][261cd768871948f7a822bdd8d60b9842.png_pic_center]

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

![在这里插入图片描述][07e31998fe214379b05ad1ebaa32b236.png_pic_center]

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

![在这里插入图片描述][3729ba7d986f4a38801dbbee7b32d0f1.png_pic_center]

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

![在这里插入图片描述][e43a33be6b3d4af4b439a251ffd73afa.png_pic_center]

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

![在这里插入图片描述][16b2109a02034835bfbf1be5dc33bfa7.png_pic_center]

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

![在这里插入图片描述][65107f96ff3344479f25709c6bbb342f.png_pic_center]

还有一些图表，本项目采用了 Antv 产品，有兴趣的朋友可以了解看看，如果要 Echarts 可以到 Extjs 版本的项目查看。  
![在这里插入图片描述][64dc3918eb8645a6b18ca2d6288795f0.png_pic_center]

![在这里插入图片描述][b3e41c71255d42c2962956c4744ab11e.png_pic_center]

![在这里插入图片描述][312182c5defe44659cf0d25e35f0c2ae.png_pic_center]

![在这里插入图片描述][4c38f52eaf8f4e28a7cb2bbf13a6a3a2.png_pic_center]

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

![在这里插入图片描述][6b6ee33d424d4c7e875c50ee606b30da.png_pic_center]

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

![在这里插入图片描述][13bf06bb421d4b0fb3b063a13815e515.png_pic_center]

--------------------

### 三、免责声明 ###

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

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

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

--------------------

![在这里插入图片描述][2dbad68bbe2a4f03a6f42ef58545fdd2.png_pic_center]

[Designer]: https://blog.csdn.net/qq_41464123
[47ee63f1ba9c441ea67a91b75fb3ac06.png_pic_center]: https://img-blog.csdnimg.cn/47ee63f1ba9c441ea67a91b75fb3ac06.png#pic_center
[8c357d782fdb4aca997fe8ddfc7f7dfa.png_pic_center]: https://img-blog.csdnimg.cn/8c357d782fdb4aca997fe8ddfc7f7dfa.png#pic_center
[c0d83f4584404d9c9ec21d5100645e54.png_pic_center]: https://img-blog.csdnimg.cn/c0d83f4584404d9c9ec21d5100645e54.png#pic_center
[4b3d0559219d45e7a6a5307c3964c65f.png_pic_center]: https://img-blog.csdnimg.cn/4b3d0559219d45e7a6a5307c3964c65f.png#pic_center
[86550bc61b7248bfbaf347c915593884.png_pic_center]: https://img-blog.csdnimg.cn/86550bc61b7248bfbaf347c915593884.png#pic_center
[6387db9055aa4e25b35835d745d1f101.png_pic_center]: https://img-blog.csdnimg.cn/6387db9055aa4e25b35835d745d1f101.png#pic_center
[72f25b2945614dc6a17a59ccfee75e32.png_pic_center]: https://img-blog.csdnimg.cn/72f25b2945614dc6a17a59ccfee75e32.png#pic_center
[1aa25d9e39214369b1b67aa5b7784d57.png_pic_center]: https://img-blog.csdnimg.cn/1aa25d9e39214369b1b67aa5b7784d57.png#pic_center
[f5b2765b6ea1472fafee7b50598331fd.png_pic_center]: https://img-blog.csdnimg.cn/f5b2765b6ea1472fafee7b50598331fd.png#pic_center
[36a7e4a73c9d4b99a1e2dbfb1c498ad3.png_pic_center]: https://img-blog.csdnimg.cn/36a7e4a73c9d4b99a1e2dbfb1c498ad3.png#pic_center
[22dd1534115a40ac9918de54b787348b.png_pic_center]: https://img-blog.csdnimg.cn/22dd1534115a40ac9918de54b787348b.png#pic_center
[887f8d1b3c24430c8041321714902e8f.png_pic_center]: https://img-blog.csdnimg.cn/887f8d1b3c24430c8041321714902e8f.png#pic_center
[9ffb1ded0ef94d9f8567582165097f98.png_pic_center]: https://img-blog.csdnimg.cn/9ffb1ded0ef94d9f8567582165097f98.png#pic_center
[72a044ff92724da49e6ce6821af40e32.png_pic_center]: https://img-blog.csdnimg.cn/72a044ff92724da49e6ce6821af40e32.png#pic_center
[ce6dc355118a4dd3a07e816fca3c2dc7.png_pic_center]: https://img-blog.csdnimg.cn/ce6dc355118a4dd3a07e816fca3c2dc7.png#pic_center
[c8a31a7d507c4e1ea0ba19e5e2b3d010.png_pic_center]: https://img-blog.csdnimg.cn/c8a31a7d507c4e1ea0ba19e5e2b3d010.png#pic_center
[cd79497f460e483b9e500a1f8f4b70bd.png_pic_center]: https://img-blog.csdnimg.cn/cd79497f460e483b9e500a1f8f4b70bd.png#pic_center
[e26d95f7a17b4130b124a4c179359b46.png_pic_center]: https://img-blog.csdnimg.cn/e26d95f7a17b4130b124a4c179359b46.png#pic_center
[1080fbbbd44747f18122c4172fbc448e.png_pic_center]: https://img-blog.csdnimg.cn/1080fbbbd44747f18122c4172fbc448e.png#pic_center
[https_gitee.com_yyzwz_template]: https://gitee.com/yyzwz/template
[261cd768871948f7a822bdd8d60b9842.png_pic_center]: https://img-blog.csdnimg.cn/261cd768871948f7a822bdd8d60b9842.png#pic_center
[07e31998fe214379b05ad1ebaa32b236.png_pic_center]: https://img-blog.csdnimg.cn/07e31998fe214379b05ad1ebaa32b236.png#pic_center
[3729ba7d986f4a38801dbbee7b32d0f1.png_pic_center]: https://img-blog.csdnimg.cn/3729ba7d986f4a38801dbbee7b32d0f1.png#pic_center
[e43a33be6b3d4af4b439a251ffd73afa.png_pic_center]: https://img-blog.csdnimg.cn/e43a33be6b3d4af4b439a251ffd73afa.png#pic_center
[16b2109a02034835bfbf1be5dc33bfa7.png_pic_center]: https://img-blog.csdnimg.cn/16b2109a02034835bfbf1be5dc33bfa7.png#pic_center
[65107f96ff3344479f25709c6bbb342f.png_pic_center]: https://img-blog.csdnimg.cn/65107f96ff3344479f25709c6bbb342f.png#pic_center
[64dc3918eb8645a6b18ca2d6288795f0.png_pic_center]: https://img-blog.csdnimg.cn/64dc3918eb8645a6b18ca2d6288795f0.png#pic_center
[b3e41c71255d42c2962956c4744ab11e.png_pic_center]: https://img-blog.csdnimg.cn/b3e41c71255d42c2962956c4744ab11e.png#pic_center
[312182c5defe44659cf0d25e35f0c2ae.png_pic_center]: https://img-blog.csdnimg.cn/312182c5defe44659cf0d25e35f0c2ae.png#pic_center
[4c38f52eaf8f4e28a7cb2bbf13a6a3a2.png_pic_center]: https://img-blog.csdnimg.cn/4c38f52eaf8f4e28a7cb2bbf13a6a3a2.png#pic_center
[6b6ee33d424d4c7e875c50ee606b30da.png_pic_center]: https://img-blog.csdnimg.cn/6b6ee33d424d4c7e875c50ee606b30da.png#pic_center
[13bf06bb421d4b0fb3b063a13815e515.png_pic_center]: https://img-blog.csdnimg.cn/13bf06bb421d4b0fb3b063a13815e515.png#pic_center
[2dbad68bbe2a4f03a6f42ef58545fdd2.png_pic_center]: https://img-blog.csdnimg.cn/2dbad68bbe2a4f03a6f42ef58545fdd2.png#pic_center