从零搭建新闻出版部门实用SpringBoot+MySQL+Vue基础档案管理系统

一、准备环境与工具（可直接复制安装）

1.1 后端环境

• JDK 17：下载地址 https://adoptium.net/zh-CN/temurin/releases/?version=17，安装后配置环境变量JAVA_HOME为安装路径，Path添加%JAVA_HOME%\bin
• MySQL 8.0：下载地址 https://dev.mysql.com/downloads/mysql/8.0.html，安装时设置root密码为Admin@123456（后续配置默认用这个）
• IntelliJ IDEA 社区版：下载地址 https://www.jetbrains.com/idea/download/other.html，找最新的202x.x Community版本

1.2 前端环境

• Node.js 18.x LTS：下载地址 https://nodejs.org/zh-cn/，安装后打开cmd输入node -v、npm -v确认版本
• VS Code：下载地址 https://code.visualstudio.com/

二、后端项目搭建（SpringBoot）

2.1 创建SpringBoot项目

打开IDEA → New Project → Spring Initializr，按以下配置：

• Group：com.xwcb
• Artifact：archive
• Name：archive
• Package name：com.xwcb.archive
• Java：17
• Spring Boot：3.2.5

点击Next，勾选以下依赖后Finish：

• Spring Web
• Spring Data JPA
• MySQL Driver
• Lombok

2.2 配置数据库与基础设置

打开src/main/resources/application.properties，清空后复制以下内容：

```properties 数据库配置 spring.datasource.url=jdbc:mysql://localhost:3306/xwcb_archive?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true spring.datasource.username=root spring.datasource.password=Admin@123456 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver JPA配置 spring.jpa.hibernate.ddl-auto=update spring.jpa.show-sql=true spring.jpa.properties.hibernate.format_sql=true spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect 端口配置 server.port=8080 ```

2.3 创建数据库

打开MySQL Workbench/Navicat，连接后执行以下SQL：

```sql CREATE DATABASE xwcb_archive DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; ```

2.4 编写实体类、Controller、Service、Repository

在com.xwcb.archive下创建entity、controller、service、repository四个包。

entity/Archive.java：

```java package com.xwcb.archive.entity; import jakarta.persistence.; import lombok.Data; @Entity @Table(name = "t_archive") @Data public class Archive { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; // 档案编号（新闻出版专用：GB/T 7159-2019 可自定义前缀） @Column(nullable = false, unique = true, length = 30) private String code; // 档案名称 @Column(nullable = false, length = 100) private String name; // 档案类型：0-图书 1-报纸 2-期刊 3-音像制品 @Column(nullable = false) private Integer type; // 责任者 @Column(nullable = false, length = 50) private String author; // 出版时间 @Column(nullable = false, length = 20) private String publishDate; // 存放位置 @Column(nullable = false, length = 50) private String location; } ```

repository/ArchiveRepository.java：

```java package com.xwcb.archive.repository; import com.xwcb.archive.entity.Archive; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.stereotype.Repository; @Repository public interface ArchiveRepository extends JpaRepository { } ```

service/ArchiveService.java：

```java package com.xwcb.archive.service; import com.xwcb.archive.entity.Archive; import com.xwcb.archive.repository.ArchiveRepository; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; @Service public class ArchiveService { @Autowired private ArchiveRepository archiveRepository; // 新增档案 public Archive save(Archive archive) { return archiveRepository.save(archive); } // 查看所有档案 public List findAll() { return archiveRepository.findAll(); } // 删除档案 public void deleteById(Long id) { archiveRepository.deleteById(id); } // 修改档案 public Archive update(Long id, Archive archive) { Archive oldArchive = archiveRepository.findById(id).orElse(null); if (oldArchive != null) { oldArchive.setCode(archive.getCode()); oldArchive.setName(archive.getName()); oldArchive.setType(archive.getType()); oldArchive.setAuthor(archive.getAuthor()); oldArchive.setPublishDate(archive.getPublishDate()); oldArchive.setLocation(archive.getLocation()); return archiveRepository.save(oldArchive); } return null; } } ```

controller/ArchiveController.java：

```java package com.xwcb.archive.controller; import com.xwcb.archive.entity.Archive; import com.xwcb.archive.service.ArchiveService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.; import java.util.HashMap; import java.util.List; import java.util.Map; @RestController @RequestMapping("/api/archive") @CrossOrigin(origins = "") // 允许跨域 public class ArchiveController { @Autowired private ArchiveService archiveService; // 统一返回格式 private Map result(Integer code, String msg, Object data) { Map map = new HashMap<>(); map.put("code", code); map.put("msg", msg); map.put("data", data); return map; } @PostMapping("/add") public Map add(@RequestBody Archive archive) { try { Archive saved = archiveService.save(archive); return result(200, "新增成功", saved); } catch (Exception e) { return result(500, "新增失败（编号重复或必填项为空）", null); } } @GetMapping("/list") public Map list() { List list = archiveService.findAll(); return result(200, "查询成功", list); } @DeleteMapping("/delete/{id}") public Map delete(@PathVariable Long id) { try { archiveService.deleteById(id); return result(200, "删除成功", null); } catch (Exception e) { return result(500, "删除失败", null); } } @PutMapping("/update/{id}") public Map update(@PathVariable Long id, @RequestBody Archive archive) { Archive updated = archiveService.update(id, archive); if (updated != null) { return result(200, "修改成功", updated); } else { return result(500, "修改失败（档案不存在）", null); } } } ```

点击IDEA右上角ArchiveApplication启动类的绿色三角形，启动后端。

三、前端项目搭建（Vue3+Element Plus）

3.1 创建Vue3项目

打开cmd，切换到后端项目同级目录，执行：

```bash npm create vite@latest archive-ui -- --template vue cd archive-ui npm install npm install element-plus axios ```

3.2 配置Element Plus与Axios

打开src/main.js，清空后复制：

```javascript import { createApp } from 'vue' import './style.css' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import axios from 'axios' const app = createApp(App) app.config.globalProperties.$axios = axios.create({ baseURL: 'http://localhost:8080/api/archive' }) app.use(ElementPlus) app.mount('app') ```

3.3 编写档案管理页面

打开src/App.vue，清空后复制：

```vue ```

3.4 启动前端

在archive-ui目录下的cmd执行：

```bash npm run dev ```

复制输出的Local地址（如http://localhost:5173/）到浏览器打开，即可使用。