在Linux openEuler系统上部署前后端分离的Spring Boot + Vue项目，你需要按照以下步骤操作：

1. 安装Java环境：

   确保系统已安装Java，并配置好JAVA\_HOME环境变量。

2. 安装和配置数据库（如MySQL）：

   创建数据库和用户，导入初始数据。

3. 安装和配置Maven：

   用于编译Spring Boot项目。

4. 安装Node.js和npm：

   Vue项目需要Node.js环境来构建。

5. 配置后端服务：

   • 检出Spring Boot项目代码。
   • 在项目中配置数据库连接和其他必要配置。
   • 使用Maven打包项目。
   • 运行Spring Boot应用。

6. 配置前端服务：

   • 检出Vue项目代码。
   • 安装依赖：npm install。
   • 构建项目：npm run build。
   • 将构建好的静态文件放到Spring Boot项目的静态资源目录下或者通过配置Nginx作为静态资源服务器。

7. 配置反向代理服务器（Nginx）：

   • 安装Nginx。
   • 配置Nginx，设置前端资源代理和后端API接口代理。

8. 部署应用并启动：

   • 启动数据库服务。
   • 启动后端Spring Boot应用。
   • 配置好Nginx。
   • 通过系统服务或者直接命令行启动Nginx。

以下是一个简化的示例配置，仅供参考：

后端Maven配置（pom.xml）

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

Nginx 配置文件（/etc/nginx/nginx.conf或/etc/nginx/conf.d/your-project.conf）

server {
    listen 80;
 
    location / {
        root /path/to/your/frontend/build;
        try_files $uri $uri/ /index.html;
    }
 
    location /api/ {
        proxy_pass http://localhost:8080; # 假设后端运行在8080端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

启动后端Spring Boot应用

java -jar your-backend-application.jar

启动Nginx

systemctl start nginx

确保所有配置正确无误，并根据实际环境调整端口、路径和配置。记得开放必要的防火墙端口以允许外部访问。

在Vue 3 + Vite项目中，如果在构建后动态加载的图片资源不显示，可能是因为资源处理配置不正确。确保图片资源被正确地处理和引用。

解决方法：

1. 配置Vite：

   确保vite.config.js中正确配置了assetsInlineLimit，并且图片资源的大小没有超过这个限制。如果图片资源较大，可以考虑将其放在静态文件夹中，并通过Vite提供的静态文件服务来访问。

2. 静态文件夹：

   将图片资源放在项目的public文件夹中，这个文件夹中的资源会被直接复制到构建的输出目录，并且可以通过相对路径从应用中访问。

3. 路径问题：

   确保图片资源的路径是正确的。如果你是通过组件动态导入图片，确保导入的路径是相对于当前文件的。

4. Base PublicPath：

   如果你的应用是部署在子路径下，需要在vite.config.js中设置base选项来正确地设置公共路径。

5. 版本兼容问题：

   确保所有的依赖都是最新的或者是兼容的版本，有时候旧的版本可能会导致资源加载不正确。

6. 构建配置检查：

   查看Vite的官方文档，确保所有的资源处理插件都被正确安装和配置。

7. 调试工具：

   使用浏览器的开发者工具来检查网络请求，查看图片资源的请求URL和响应情况。

8. 缓存问题：

   清除浏览器缓存或者使用无痕模式查看是否是缓存导致的问题。

以下是一个简单的示例，展示如何在Vue 3 + Vite项目中引用静态图片：

<template>
  <div>
    <!-- 直接通过public文件夹引用 -->
    <img src="/logo.png" alt="Logo" />
    <!-- 通过src导入的方式 -->
    <img :src="imageSrc" alt="Dynamic Image" />
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
// 如果图片小于assetsInlineLimit，会被Base64处理
const imageSrc = ref(new URL('./assets/small-image.png', import.meta.url).href);
 
// 如果图片较大，放在public文件夹中
// <img src="/large-image.png" alt="Large Image" />
</script>

确保在vite.config.js中配置了正确的base和assetsInlineLimit：

export default defineConfig({
  base: './', // 如果应用部署在子路径下
  assetsInlineLimit: 4096, // 小于4kb的资源将被Base64处理
  // ...其他配置
});

如果以上方法都不能解决问题，可以考虑查看Vite的官方GitHub仓库的Issues页面，看看是否有其他开发者遇到了类似的问题，或者提出一个新的Issue来寻求帮助。

在Vue.js中使用Element UI的Carousel组件实现跑马灯轮播图效果，并将图片放置在当前目录下的img文件夹中，可以按照以下步骤操作：

1. 确保Element UI已经正确安装并在项目中引入。
2. 在Vue组件中使用<el-carousel>组件来创建跑马灯，并使用<el-carousel-item>组件来放置图片。
3. 将图片放置在项目的src/assets/img目录下（如果没有该目录，请创建它）。
4. 使用require函数或者import语法来动态加载图片。

以下是一个简单的示例代码：

<template>
  <div>
    <el-carousel height="200px">
      <el-carousel-item v-for="item in images" :key="item">
        <img :src="item" alt="carousel image">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      // 假设你有多张图片放在 img 目录下
      images: [
        require('@/assets/img/1.jpg'),
        require('@/assets/img/2.jpg'),
        require('@/assets/img/3.jpg')
      ]
    };
  }
};
</script>
 
<style>
/* 确保图片充满 carousel 的高度 */
.el-carousel__item img {
  width: 100%;
  height: 100%;
  display: block;
}
</style>

在这个例子中，images数组包含了图片的路径，我们使用require函数来确保webpack可以处理这些图片文件，并将它们包含在最终的打包文件中。@是Vue CLI项目中src目录的别名。

请确保你的项目配置允许使用require和import来加载图片资源。如果你的图片已经放置在了public文件夹，那么你可以直接通过静态资源的方式来引用它们，例如<img src="/img/1.jpg" alt="carousel image">，但是这种方式不利于资源的管理和处理。使用require或import的方式可以更好地利用webpack的打包工具，将资源作为模块来处理。

由于篇幅限制，我无法提供完整的源代码和文档。但我可以提供一个核心的SpringBoot控制器示例，以及Vue组件的核心代码。

SpringBoot控制器示例（部分）:

@RestController
@RequestMapping("/api/v1/users")
public class UserController {
 
    @Autowired
    private UserService userService;
 
    @PostMapping
    public ResponseEntity<?> createUser(@Valid @RequestBody User user) {
        User userSaved = userService.save(user);
        return ResponseEntity.ok(userSaved);
    }
 
    // 其他API端点...
}

Vue组件核心代码（部分）:

<template>
  <div>
    <input v-model="user.username" placeholder="Username" />
    <input v-model="user.email" placeholder="Email" />
    <button @click="register">Register</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      user: {
        username: '',
        email: ''
      }
    };
  },
  methods: {
    register() {
      axios.post('/api/v1/users', this.user)
        .then(response => {
          // 处理响应
        })
        .catch(error => {
          // 处理错误
        });
    }
  }
};
</script>

以上代码展示了如何在SpringBoot后端创建一个控制器来处理用户注册的请求，以及如何在Vue前端创建一个表单来接收用户输入并发送注册请求。这只是一个简化的示例，实际系统中还会涉及更多细节，如用户验证、权限控制、支付集成等。

// 用户实体类User的一部分代码，展示了如何使用@Data和@Builder注解简化构造函数
@Data
@Builder
public class User {
    private Long id;
    private String username;
    private String password; // 密码应该加密存储
    private String email;
    private Boolean enabled;
    // ...其他属性和方法
}
 
// 角色实体类Role的一部分代码，展示了如何使用@Data和@Builder注解简化构造函数
@Data
@Builder
public class Role {
    private Long id;
    private String name;
    private String description;
    // ...其他属性和方法
}
 
// 用户服务UserService接口的一部分代码，展示了如何定义服务层的接口
public interface UserService {
    UserDetails loadUserByUsername(String username) throws UsernameNotFoundException;
    User saveUser(User user);
    User updateUser(User user);
    // ...其他方法
}
 
// 用户服务UserServiceImpl的一部分代码，展示了如何实现服务层的接口
@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserRepository userRepository;
    @Autowired
    private RoleRepository roleRepository;
    @Autowired
    private BCryptPasswordEncoder passwordEncoder;
 
    @Transactional
    public User saveUser(User user) {
        user.setPassword(passwordEncoder.encode(user.getPassword())); // 加密密码
        return userRepository.save(user);
    }
 
    // ...其他方法的实现
}

这个代码实例展示了如何使用Spring Data JPA和Spring Security来创建一个用户管理系统。在User和Role实体类中，使用了@Data和@Builder注解来简化构造函数并自动生成getter、setter、equals、hashCode和toString方法。在UserService接口和UserServiceImpl实现类中，展示了如何定义和实现用户相关的服务方法，并在保存用户时加密密码。这个例子是一个很好的实践，展示了如何在实际应用中使用Spring Boot和Vue.js进行开发。

以下是一个简化的示例，展示了如何在Spring Boot后端和Vue前端之间实现数据交互：

后端代码 (Spring Boot):

// UserController.java
@RestController
@RequestMapping("/api/users")
public class UserController {
 
    @GetMapping
    public ResponseEntity<List<User>> getAllUsers() {
        // 假设有一个服务层来获取用户列表
        List<User> users = userService.findAll();
        return ResponseEntity.ok(users);
    }
 
    // ...其他CRUD操作
}

前端代码 (Vue.js):

// User.vue
<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      users: []
    };
  },
  methods: {
    fetchUsers() {
      this.$http.get('/api/users')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error('Error fetching users:', error);
        });
    }
  },
  created() {
    this.fetchUsers();
  }
};
</script>

在这个例子中，Spring Boot后端提供了一个REST API来获取用户列表，而Vue前端通过axios（或其他HTTP客户端）在组件的created生命周期钩子中向该API发送请求，并将响应渲染到模板中。这是前后端交互的典型方式。

由于篇幅所限，我将提供一个简化的代码示例，展示如何使用Spring Boot创建一个简单的RESTful API，用于学生宿舍信息的管理。

// StudentDormitoryController.java
import org.springframework.web.bind.annotation.*;
 
@RestController
@RequestMapping("/api/dormitory")
public class StudentDormitoryController {
 
    // 假设有一个服务层用于处理业务逻辑
    // @Autowired
    // private StudentDormitoryService studentDormitoryService;
 
    // 添加学生宿舍信息
    @PostMapping("/add")
    public String addStudentDormitory(@RequestBody StudentDormitoryInfo info) {
        // 调用服务层的方法来添加信息
        // studentDormitoryService.add(info);
        return "添加成功";
    }
 
    // 修改学生宿舍信息
    @PostMapping("/edit")
    public String editStudentDormitory(@RequestBody StudentDormitoryInfo info) {
        // 调用服务层的方法来修改信息
        // studentDormitoryService.edit(info);
        return "修改成功";
    }
 
    // 删除学生宿舍信息
    @GetMapping("/delete/{id}")
    public String deleteStudentDormitory(@PathVariable("id") Long id) {
        // 调用服务层的方法来删除信息
        // studentDormitoryService.delete(id);
        return "删除成功";
    }
 
    // 查询学生宿舍信息
    @GetMapping("/query")
    public List<StudentDormitoryInfo> queryStudentDormitory() {
        // 调用服务层的方法来查询信息
        // return studentDormitoryService.query();
        return Collections.emptyList(); // 假设的返回值
    }
}
 
// StudentDormitoryInfo.java
public class StudentDormitoryInfo {
    private Long id;
    private String studentName;
    private String dormitoryNumber;
    // 省略getter和setter方法
}

在这个示例中，我们定义了一个StudentDormitoryController，它提供了对学生宿舍信息进行增删改查的RESTful API。每个方法都接收适当的请求并返回响应。这里没有实现服务层的逻辑，因为这需要具体的业务逻辑实现。

这个示例展示了如何使用Spring Boot创建RESTful API，并且如何通过@RestController和@RequestMapping注解来映射请求到对应的处理方法。在实际应用中，你需要实现StudentDormitoryService中定义的方法，并将其注入到控制器中，以便控制器可以调用业务逻辑。

该项目涉及到的核心代码和配置不在这里详细展示，但我们可以提供一个简化的示例来说明如何在Spring Boot中配置一个简单的RestController。

package com.example.schedulingystem.controller;
 
import com.example.schedulingystem.entity.Schedule;
import com.example.schedulingystem.service.ScheduleService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
 
import java.util.List;
 
@RestController
@RequestMapping("/api/schedules")
public class ScheduleController {
 
    private final ScheduleService scheduleService;
 
    @Autowired
    public ScheduleController(ScheduleService scheduleService) {
        this.scheduleService = scheduleService;
    }
 
    @GetMapping
    public List<Schedule> getAllSchedules() {
        return scheduleService.findAll();
    }
 
    @PostMapping
    public Schedule createSchedule(@RequestBody Schedule schedule) {
        return scheduleService.save(schedule);
    }
 
    @GetMapping("/{id}")
    public Schedule getScheduleById(@PathVariable Long id) {
        return scheduleService.findById(id);
    }
 
    @PutMapping("/{id}")
    public Schedule updateSchedule(@PathVariable Long id, @RequestBody Schedule schedule) {
        schedule.setId(id);
        return scheduleService.save(schedule);
    }
 
    @DeleteMapping("/{id}")
    public void deleteSchedule(@PathVariable Long id) {
        scheduleService.deleteById(id);
    }
}

在这个示例中，我们定义了一个ScheduleController，它提供了对调度信息的基本CURD操作。这个Controller使用了@RestController和@RequestMapping注解来标识这是一个控制器，并且所有的请求都映射到/api/schedules路径下。每个方法都通过相应的HTTP方法（GET, POST, PUT, DELETE）进行标注，并处理与之对应的业务逻辑。

这个示例展示了如何在Spring Boot项目中创建一个简单的Restful API控制器，但是要实现完整的系统，还需要实现相应的服务层、仓库层代码，以及前端的Vue代码。

在宝塔面板中部署SpringBoot+Vue项目主要包括以下步骤：

1. 准备工作：购买云服务器，安装宝塔面板，登录宝塔面板。
2. 安装环境：在宝塔面板中安装Java环境（例如OpenJDK），Nginx，MySQL，Redis等。
3. 上传文件：将SpringBoot的jar包和Vue项目的构建产物上传至云服务器指定目录。
4. 配置数据库：在宝塔面板中配置MySQL数据库，并导入数据。
5. 配置Nginx：设置反向代理，将Vue项目的请求代理到对应的本地端口，SpringBoot应用代理到jar运行的端口。
6. 配置自启动：设置SpringBoot应用的自启动，确保服务器重启后应用也能自动运行。

以下是部署的示例步骤：

# 安装Java环境
yum install java-1.8.0-openjdk
 
# 安装Nginx
yum install nginx
 
# 安装MySQL
yum install mysql
 
# 安装Redis
yum install redis
 
# 启动服务
systemctl start nginx
systemctl start mysqld
systemctl start redis
 
# 设置开机自启
systemctl enable nginx
systemctl enable mysqld
systemctl enable redis
 
# 上传文件到 /www/wwwroot/your-domain.com/ 目录
# 上传SpringBoot jar 包到 /www/wwwroot/your-domain.com/springboot 目录
# 上传Vue项目构建产物到 /www/wwwroot/your-domain.com/vue-app 目录
 
# 配置Nginx
# 编辑 Nginx 配置文件
vi /www/server/panel/vhost/your-domain.com.conf
 
# 添加以下内容
server {
    listen 80;
    server_name your-domain.com;
 
    location / {
        root /www/wwwroot/your-domain.com/vue-app;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
 
    location /api/ {
        proxy_pass http://127.0.0.1:8080/; # SpringBoot 应用端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}
 
# 重载 Nginx 配置
bt reload
 
# 启动SpringBoot应用
nohup java -jar /www/wwwroot/your-domain.com/springboot/your-app.jar > /dev/null &
 
# 如果需要，配置自动化部署脚本，实现持续集成部署

注意：

• 替换 your-domain.com 为你的域名。
• 替换 /www/wwwroot/your-domain.com/springboot/your-app.jar 为你的SpringBoot jar包路径。
• 替换 /www/wwwroot/your-domain.com/vue-app 为你的Vue项目构建产物路径。
• 确保安全组和云服务器防火墙规则允许访问相应端口。
• 根据项目具体需求调整配置，例如端口号、数据库连接等。

该系统的核心功能可能包括用户注册登录、宠物猫信息录入、认养流程管理、公告发布等。以下是一个简化的示例，展示如何使用Spring Boot和Vue.js创建一个简单的系统框架。

后端（Spring Boot）:

1. 实体类：Cat.java 用于定义宠物猫信息。

@Entity
public class Cat {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String breed;
    private String description;
    // 省略getter和setter
}

2. Repository接口：用于数据访问。

public interface CatRepository extends JpaRepository<Cat, Long> {
}

3. 服务层：处理业务逻辑。

@Service
public class CatService {
    @Autowired
    private CatRepository catRepository;
 
    public List<Cat> getAllCats() {
        return catRepository.findAll();
    }
 
    public Cat getCatById(Long id) {
        return catRepository.findById(id).orElse(null);
    }
 
    public Cat saveCat(Cat cat) {
        return catRepository.save(cat);
    }
 
    // 省略其他业务方法
}

4. 控制器层：提供API接口。

@RestController
@RequestMapping("/cats")
public class CatController {
    @Autowired
    private CatService catService;
 
    @GetMapping
    public ResponseEntity<List<Cat>> getAllCats() {
        return ResponseEntity.ok(catService.getAllCats());
    }
 
    @PostMapping
    public ResponseEntity<Cat> saveCat(@RequestBody Cat cat) {
        return ResponseEntity.ok(catService.saveCat(cat));
    }
 
    // 省略其他控制器方法
}

前端（Vue.js）:

1. 安装Vue CLI并创建项目。
2. 使用Vue Router设置路由。
3. 使用Axios进行HTTP请求。
4. 展示宠物猫信息列表和表单。

// 假设有一个Cat.vue组件
<template>
  <div>
    <h1>所有猫咪</h1>
    <ul>
      <li v-for="cat in cats" :key="cat.id">
        {{ cat.name }} - {{ cat.breed }}
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      cats: []
    };
  },
  created() {
    this.fetchCats();
  },
  methods: {
    async fetchCats() {
      try {
        const response = await axios.get('/api/cats');
        this.cats = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

注意： 这只是一个简化的示例，实际的系统可能需要更复杂的逻辑，包括用户认证、权限控制、分页、搜索等功能。

部署和运行：

1. 打包前端应用：npm run build（在Vue.js项目目录内）。
2. 将生成的dist/目录内容放到Spring Boot项目的src/main/resources/static目录。
3. 运行Spring Boot应用：mvn spring-boot:run（在Spring Boot项目目录内）。
4. 访问前端应用：http://localhost:8080（或其他配置的端口）。

安全和生产部署注意事项：