技术栈介绍

SpringBoot+Vue+MyBatis+MySQL 是一套典型的全栈技术组合，适用于构建文博资源库等中小型管理系统。SpringBoot 提供后端 RESTful API，Vue 负责前端交互，MyBatis 操作 MySQL 数据库，实现高效数据管理。

---

环境准备

• 后端环境：JDK 1.8+、Maven 3.6+、SpringBoot 2.7.x、MySQL 5.7+
• 前端环境：Node.js 14+、Vue 2.x、Vue CLI 4.x
• 开发工具：IntelliJ IDEA（后端）、VSCode（前端）

---

后端部署（SpringBoot + MyBatis）

1. 数据库配置
   创建 MySQL 数据库（如 museum_db），执行提供的 SQL 脚本初始化表结构。在 application.yml 中配置数据库连接：

   spring:
     datasource:
       url: jdbc:mysql://localhost:3306/museum_db?useSSL=false
       username: root
       password: yourpassword
       driver-class-name: com.mysql.cj.jdbc.Driver
   

2. 启动后端服务
   通过 Maven 安装依赖后，运行主类 MuseumApplication，默认端口为 8080：

   mvn spring-boot:run
   

---

前端部署（Vue）

1. 安装依赖
   进入前端项目目录（如 museum-frontend），安装 npm 依赖：

   npm install
   

2. 配置代理
   修改 vue.config.js，确保 API 请求代理到后端地址：

   devServer: {
     proxy: {
       '/api': {
         target: 'http://localhost:8080',
         changeOrigin: true
       }
     }
   }
   

3. 启动前端服务
   运行开发服务器，默认访问 http://localhost:8081：

   npm run serve
   

---

核心功能实现

1. 文物信息管理（MyBatis 示例）

• Mapper 接口：定义数据库操作方法（如 selectByCondition）。
• XML 映射文件：编写动态 SQL 实现多条件查询：

  <select id="selectByCondition" resultType="Artifact">
    SELECT * FROM artifact 
    <where>
      <if test="name != null">name LIKE CONCAT('%', #{name}, '%')</if>
      <if test="era != null">AND era = #{era}</if>
    </where>
  </select>
  

2. 前后端数据交互（Vue + Axios）

• API 请求封装：

  export function getArtifactList(params) {
    return axios.get('/api/artifact/list', { params });
  }
  

• 页面调用：

  methods: {
    async fetchData() {
      const res = await getArtifactList({ era: '唐代' });
      this.list = res.data;
    }
  }
  

---

常见问题解决

• 跨域问题：确保后端添加 @CrossOrigin 注解或通过 Nginx 配置代理。
• MySQL 连接失败：检查账号权限及 useSSL=false 参数。
• 前端路由 404：在 Nginx 中配置 try_files $uri $uri/ /index.html。

---

源码结构说明

• 后端：controller（接口层）、service（业务逻辑）、mapper（数据库操作）。
• 前端：src/views（页面组件）、src/api（接口封装）、src/router（路由配置）。

通过以上步骤，可快速部署并运行文博资源库系统。如需完整源码，可从 GitHub 或 Gitee 搜索相关关键词获取。