基于Vue和SpringBoot的党史数字档案馆系统搭建实战指南

一、开发环境准备与工具安装

在开始编写代码之前，必须确保本地开发环境已经配置好以下基础软件。请严格按照以下版本号进行安装，避免因版本不兼容导致启动失败。

1. JDK 1.8 安装与配置

后端基于Spring Boot开发，必须安装JDK。下载地址：https://www.oracle.com/java/technologies/javase-jdk8-downloads.html。安装完成后，需配置环境变量：

• 新建系统变量 JAVA_HOME，值为JDK安装路径（例如 C:\Program Files\Java\jdk1.8.0_301）。
• 编辑 Path 变量，添加 %JAVA_HOME%\bin。
• 验证：打开CMD输入 java -version，出现版本号即成功。

2. Node.js 16.x 安装

前端使用Vue 3，需要Node环境。下载地址：https://nodejs.org/dist/v16.14.0/node-v16.14.0-x64.msi。安装过程一路Next即可。验证：CMD输入 node -v。

3. MySQL 8.0 数据库安装

下载社区版：https://dev.mysql.com/downloads/mysql/。安装时设置root密码为 123456（本教程统一使用此密码，后续配置需一致）。开启MySQL服务。

4. 开发工具

• 后端IDE：IntelliJ IDEA (Community Edition即可)。
• 前端IDE：VS Code。
• 接口测试：Postman。

二、数据库设计与数据初始化

我们需要设计两张核心表：用户表（用于管理员登录）和档案表（存储党史资料）。请在MySQL客户端执行以下SQL脚本。

1. 建库建表脚本

```sql CREATE DATABASE IF NOT EXISTS party_history_db DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_unicode_ci; USE party_history_db; -- 用户表 CREATE TABLE `sys_user` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '用户ID', `username` varchar(50) NOT NULL COMMENT '用户名', `password` varchar(100) NOT NULL COMMENT '密码', `role` varchar(20) DEFAULT 'ADMIN' COMMENT '角色', PRIMARY KEY (`id`), UNIQUE KEY `uk_username` (`username`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='系统用户表'; -- 党史档案表 CREATE TABLE `party_archive` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '档案ID', `title` varchar(200) NOT NULL COMMENT '档案标题', `category` varchar(50) NOT NULL COMMENT '分类（如：重大事件、重要会议）', `publish_date` date DEFAULT NULL COMMENT '发生日期', `content` text COMMENT '档案详情内容', `cover_image` varchar(500) DEFAULT NULL COMMENT '封面图片URL', `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '录入时间', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='党史档案表'; -- 初始化管理员数据 (密码: 123456) INSERT INTO `sys_user` (`username`, `password`, `role`) VALUES('admin', '123456', 'ADMIN'); -- 插入测试数据 INSERT INTO `party_archive` (`title`, `category`, `publish_date`, `content`) VALUES ('中共一大召开', '重要会议', '1921-07-23', '中国共产党第一次全国代表大会于1921年7月23日在上海法租界望志路106号召开...'); ```

三、后端核心业务代码实现

后端使用Spring Boot + MyBatis架构。打开IDEA，创建一个新的Spring Boot项目。

1. 项目依赖 (pom.xml)

在创建项目时勾选 Spring Web, MySQL Driver, MyBatis Framework, Lombok。或者直接复制以下依赖到pom.xml：

```xml org.springframework.boot spring-boot-starter-web org.mybatis.spring.boot mybatis-spring-boot-starter 2.2.2 mysql mysql-connector-java runtime org.projectlombok lombok true ```

2. 数据库配置

编辑 src/main/resources/application.yml，务必注意时区和驱动类的配置：

```yaml server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/party_history_db?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai&useSSL=false username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver mybatis: mapper-locations: classpath:mapper/.xml type-aliases-package: com.party.archive.entity ```

3. 实体类与Mapper

创建包结构：com.party.archive.entity, com.party.archive.mapper, com.party.archive.controller。

编写档案实体类 PartyArchive.java：

```java package com.party.archive.entity; import lombok.Data; import java.util.Date; @Data public class PartyArchive { private Long id; private String title; private String category; private Date publishDate; private String content; private String coverImage; private Date createTime; } ```

编写Mapper接口 PartyArchiveMapper.java：

```java package com.party.archive.mapper; import com.party.archive.entity.PartyArchive; import org.apache.ibatis.annotations.Select; import java.util.List; public interface PartyArchiveMapper { @Select("SELECT FROM party_archive ORDER BY create_time DESC") List

findAll(); } ```

4. 业务控制层

编写 ArchiveController.java，提供跨域支持和API接口：

```java package com.party.archive.controller; import com.party.archive.entity.PartyArchive; import com.party.archive.mapper.PartyArchiveMapper; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.List; @RestController @RequestMapping("/api/archive") @CrossOrigin(origins = "") // 允许前端跨域访问 public class ArchiveController { @Autowired private PartyArchiveMapper archiveMapper; @GetMapping("/list") public List getArchiveList() { return archiveMapper.findAll(); } } ```

在主启动类上添加Mapper扫描注解：@MapperScan("com.party.archive.mapper")。运行主类，后端服务启动在8080端口。

四、前端页面开发与接口对接

前端使用Vue 3 + Element Plus构建。打开VS Code终端。

1. 项目初始化

执行命令创建项目：

```bash npm init vue@latest party-archive-web cd party-archive-web npm install npm install axios element-plus ```

2. 配置Element Plus与Axios

编辑 src/main.js，全局引入组件库：

```javascript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' const createApp = createApp(App) createApp.use(ElementPlus) createApp.mount('app') ```

创建 src/utils/request.js 封装Axios：

```javascript import axios from 'axios' const request = axios.create({ baseURL: 'http://localhost:8080', timeout: 5000 }) export default request ```

3. 档案列表页开发

修改 src/App.vue，编写一个包含表格和分页的档案展示页：

```html ```

五、系统启动与功能验证

代码编写完毕，现在进行全链路启动测试。

1. 启动后端

在IDEA中找到带有 @SpringBootApplication 的主类，点击绿色三角运行按钮。观察控制台日志，确认出现 Started PartyArchiveApplication in X seconds 且没有报错信息。

2. 启动前端

在VS Code终端中执行：

```bash npm run dev ```

终端会输出本地访问地址，通常是 http://localhost:5173 或 http://localhost:3000。

3. 功能验证

• 打开浏览器访问前端地址。
• 页面应显示“党史数字档案馆”红色标题。
• 下方表格应直接显示从数据库读取出的“中共一大召开”等测试数据。
• 打开浏览器开发者工具（F12） -> Network，可以看到 api/archive/list 请求状态码为200，返回了JSON数据。

至此，一个基于前后端分离架构的党史数字档案馆系统原型已成功落地。后续可根据需求在 PartyArchive 实体中增加文件上传字段，或在前端增加富文本编辑器进行内容管理。