基于 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.slys888.cn/product/43.html

更新時間：2026-11-09 03:07:12