基于 Vue、ExtJS 与 Spring Boot 的双版本通讯录管理系统设计与实现

引言

随着企业信息化建设的不断深入，通讯录管理系统已成为组织内部沟通协作的基础设施。不同团队对前端技术栈的偏好各异：部分团队青睐现代轻量级的 Vue.js 生态，而传统企业环境则可能已深度绑定 ExtJS 框架。为满足多样化需求，本文介绍如何利用 Spring Boot 构建统一后端，同时提供 Vue 和 ExtJS 两套前端实现，打造双版本通讯录管理系统。该系统不仅支持联系人管理、分组、搜索等核心功能，还兼具良好的可扩展性和维护性。

1. 系统总体架构

系统采用前后端分离架构：

后端：Spring Boot + Spring MVC + Spring Data JPA + MySQL，提供 RESTful API，负责数据持久化、业务逻辑和权限控制（可根据需要扩展）。
前端版本 A：Vue 3 + Vue Router + Pinia + Element Plus + Axios，构建现代化单页应用（SPA）。
前端版本 B：ExtJS 7 + 原生 AJAX，构建传统重量级企业级界面。

两套前端共用同一套后端接口，通过 HTTP 协议交互，数据格式为 JSON。这种设计保证了业务逻辑的统一，同时让用户根据习惯选择前端。

2. 后端设计（Spring Boot）

2.1 技术选型

Spring Boot 3.x：快速构建独立运行的应用。
Spring Data JPA：简化数据库操作。
MySQL 8.0：存储联系人数据。
Lombok：减少样板代码。
Validation：请求参数校验。

2.2 数据模型

核心实体为 Contact（联系人）和 Group（分组），关系为一对多。

`java @Entity @Data public class Contact { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; private String phone; private String email; private String company; private String address; @ManyToOne @JoinColumn(name = "group_id") private Group group; }

@Entity
@Data
public class Group {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String name;
@OneToMany(mappedBy = "group", cascade = CascadeType.ALL)
private List contacts;
}
`

2.3 REST API 设计

提供如下接口：

GET /api/groups：获取分组列表
POST /api/groups：新建分组
PUT /api/groups/{id}：更新分组
DELETE /api/groups/{id}：删除分组
GET /api/contacts?name=&groupId=：分页查询联系人
POST /api/contacts：新增联系人
PUT /api/contacts/{id}：修改联系人
DELETE /api/contacts/{id}：删除联系人

控制器示例：

`java @RestController @RequestMapping("/api/contacts") @RequiredArgsConstructor public class ContactController { private final ContactService contactService;

@GetMapping
public Page list(@RequestParam(required = false) String name,
@RequestParam(required = false) Long groupId,
Pageable pageable) {
return contactService.findContacts(name, groupId, pageable);
}

@PostMapping
public Contact create(@Valid @RequestBody Contact contact) {
return contactService.save(contact);
}
// 其他方法省略
}
`

2.4 跨域与安全

通过 @CrossOrigin 或全局配置允许前端域名访问。可集成 Spring Security + JWT 实现认证授权（本文从简）。

3. Vue 版本实现

3.1 项目结构

使用 Vite 创建 Vue 3 项目，安装 Vue Router、Pinia、Element Plus、Axios。视图包括联系人列表、编辑表单、分组管理。

src/
├── api/          # Axios 封装及接口定义
├── stores/       # Pinia 状态管理
├── views/
│   ├── ContactList.vue
│   └── GroupManager.vue
├── router/
└── App.vue

3.2 核心组件

ContactList.vue 使用 Element Table 展示数据，配合 SearchBar 和分页：

<template>
<el-table :data="contacts">
<el-table-column prop="name" label="姓名" />
<el-table-column prop="phone" label="电话" />
<el-table-column prop="email" label="邮箱" />
<el-table-column label="分组">
<template #default="scope">{{ scope.row.group?.name }}</template>
</el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button @click="edit(scope.row)">编辑</el-button>
<el-button type="danger" @click="remove(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>

使用 Pinia 管理联系人列表状态，Axios 调用后端接口：

// api/contact.js
import axios from 'axios';
export const getContacts = (params) => axios.get('/api/contacts', { params });
export const createContact = (data) => axios.post('/api/contacts', data);
// ...

优点是响应式开发体验好、组件生态丰富。

4. ExtJS 版本实现

4.1 项目搭建

使用 ExtJS 7 的 Sencha Cmd 或直接通过 CDN 引入。这里采用 CDN 引入方式快速演示。

<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/7.5.1/build/classic/theme-neptune/resources/theme-neptune-all.css">
<script src="https://cdn.sencha.com/ext/gpl/7.5.1/build/ext-all.js"></script>

4.2 视图与数据绑定

使用 Ext.grid.Panel 展示联系人，Store 配置 proxy 指向后端 API：

`javascript Ext.define('Contacts.view.ContactList', { extend: 'Ext.grid.Panel', title: '通讯录', store: { fields: ['id', 'name', 'phone', 'email', 'groupId'], proxy: { type: 'ajax', url: '/api/contacts', reader: { type: 'json', rootProperty: 'content' } }, autoLoad: true }, columns: [ { text: '姓名', dataIndex: 'name', flex: 1 }, { text: '电话', dataIndex: 'phone', flex: 1 }, { text: '邮箱', dataIndex: 'email', flex: 1 }, { text: '操作', renderer: function(value, meta, record) { return ''; } } ], dockedItems: [{ xtype: 'pagingtoolbar', store: 'this.store', dock: 'bottom' }] });

Ext.application({
name: 'Contacts',
launch: function() {
Ext.create('Contacts.view.ContactList', { renderTo: Ext.getBody() });
}
});
`

ExtJS 具备强大的表格和表单组件，适合企业级复杂界面。

5. 双版本整合与部署

5.1 开发环境

后端运行在 localhost:8080。Vue 开发服务器（默认 5173）、ExtJS 页面可通过简单 HTTP 服务器（如 serve）运行在另一端口，需处理跨域。

5.2 生产部署

将 Vue 构建的静态文件（dist）和 ExtJS 静态文件放置于 Spring Boot 的 src/main/resources/static 不同子目录下，如 /vue-app 和 /extjs-app，后端通过配置 CORS 允许请求来源。访问方式：

http://localhost:8080/vue-app/ 使用 Vue 版本
http://localhost:8080/extjs-app/ 使用 ExtJS 版本

可通过 Nacos 或类 Nginx 反向代理实现统一入口。

6. 与展望

本文详细阐述了基于 Spring Boot 后端同时提供 Vue 和 ExtJS 两个版本前端的通讯录管理系统解决方案。Vue 版本适合追求轻量、现代化开发体验的团队；ExtJS 版本满足传统企业应用需求。后端统一管理业务逻辑和数据，保证了双版本功能一致性。未来可引入 GraphQL、WebSocket 实现实时更新，或增加联系人智能分组、权限精细控制等特性，进一步提升系统价值。

双版本设计符合技术多元化的现状，为不同背景的开发者提供了灵活选择，具有较高的实用性和借鉴意义。

如若转载，请注明出处：http://www.wdsrw.com/product/43.html

更新时间：2026-10-26 23:57:31