MyBatis 集成与后端配置

添加 MyBatis 依赖
在 pom.xml 中引入 MyBatis 和 MySQL 驱动：

<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>3.0.3</version>
</dependency>
<dependency>
    <groupId>com.mysql</groupId>
    <artifactId>mysql-connector-j</artifactId>
    <scope>runtime</scope>
</dependency>

配置数据库连接
在 application.yml 中设置数据源和 MyBatis 扫描路径：

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

mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.example.museum.model

创建实体与映射文件

定义实体类
示例实体类 Artifact.java：

@Data
public class Artifact {
    private Integer id;
    private String name;
    private String era;
    private String location;
}

编写 Mapper 接口
创建 ArtifactMapper.java：

@Mapper
public interface ArtifactMapper {
    List<Artifact> selectAll();
    int insert(Artifact artifact);
}

XML 映射文件
在 resources/mapper/ArtifactMapper.xml 中配置 SQL：

<mapper namespace="com.example.museum.mapper.ArtifactMapper">
    <select id="selectAll" resultType="Artifact">
        SELECT * FROM artifacts
    </select>
    <insert id="insert" parameterType="Artifact">
        INSERT INTO artifacts(name, era, location)
        VALUES(#{name}, #{era}, #{location})
    </insert>
</mapper>

Vue 前端与 API 对接

安装 Axios
在 Vue 项目中运行：

npm install axios

创建 API 服务
在 src/api/artifact.js 中定义接口：

import axios from 'axios';

export const getArtifacts = () => {
    return axios.get('http://localhost:8080/api/artifacts');
};

export const addArtifact = (data) => {
    return axios.post('http://localhost:8080/api/artifacts', data);
};

前端调用示例
在 Vue 组件中调用接口：

import { getArtifacts, addArtifact } from '@/api/artifact';

export default {
    methods: {
        fetchData() {
            getArtifacts().then(response => {
                this.artifacts = response.data;
            });
        },
        submitForm() {
            addArtifact(this.formData).then(() => {
                this.fetchData();
            });
        }
    }
}

项目部署流程

打包后端应用
使用 Maven 生成可执行 JAR：

mvn clean package

启动后端服务
运行生成的 JAR 文件：

java -jar target/museum-0.0.1-SNAPSHOT.jar

构建前端静态资源
在 Vue 项目目录下执行：

npm run build

配置 Nginx 代理
将前端 dist 目录内容部署到 Nginx，并配置代理：

server {
    listen 80;
    server_name museum.example.com;

    location / {
        root /path/to/dist;
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://localhost:8080;
    }
}

关键注意事项

1. 跨域问题
   后端需添加 @CrossOrigin 注解或全局 CORS 配置：

   @Configuration
   public class CorsConfig implements WebMvcConfigurer {
       @Override
       public void addCorsMappings(CorsRegistry registry) {
           registry.addMapping("/**")
               .allowedOrigins("*")
               .allowedMethods("GET", "POST");
       }
   }
   

2. 数据库初始化
   建议使用 Flyway 或 Liquibase 管理数据库版本：

   <dependency>
       <groupId>org.flywaydb</groupId>
       <artifactId>flyway-core</artifactId>
   </dependency>
   

3. 生产环境配置
   通过 application-prod.yml 分离环境配置：

   spring:
     profiles:
       active: prod
   

完整源码可参考 GitHub 仓库：springboot-vue-museum（示例链接需替换为实际项目地址）。