由于篇幅限制，我无法提供完整的源代码和文档。但我可以提供一个核心的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（或其他配置的端口）。

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

在Vue中使用Element UI时，如果你遇到了$message提示框被Dialog遮罩层遮挡的问题，可以通过调整$message的z-index来解决。Element UI的$message方法返回的是一个Message实例，你可以在调用时设置zIndex属性。

解决方案：

1. 在调用$message时直接设置zIndex：

this.$message({
  message: '这是一条消息',
  zIndex: 3000 // 设置一个比Dialog的zIndex更高的值
});

2. 如果你需要全局设置zIndex，可以在Vue的原型上添加一个自定义方法，在该方法内统一设置zIndex：

// main.js 或者其他初始化的文件
Vue.prototype.$myMessage = (options) => {
  if (typeof options === 'string') {
    options = {
      message: options
    };
  }
  options.zIndex = 3000; // 设置一个高于Dialog的zIndex值
  return this.$message(options);
};

然后在组件中使用this.$myMessage来代替this.$message。

请确保设置的zIndex值在比Dialog的zIndex值更高的情况下，这样$message提示框就不会被遮挡了。

在Vue 3中，要将el-table中的复选框设置为单选，可以通过@selection-change事件来控制。以下是一个简单的实现方法：

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([{...}, {...}, ...]); // 表格数据
const selectedRow = ref(null); // 当前选中的行
 
// 处理选择变化
function handleSelectionChange(selection) {
  if (selection.length > 1) {
    // 如果已经有选中项，再次选中会清除之前的选择
    this.selectedRow = selection[0];
    this.$refs.multipleTable.clearSelection();
    // 选中当前参数中的第一项
    this.$refs.multipleTable.toggleRowSelection(this.selectedRow, true);
  } else {
    this.selectedRow = selection[0];
  }
}
</script>

在这个例子中，我们定义了一个名为selectedRow的响应式引用来保存当前选中的行。我们通过@selection-change事件处理函数handleSelectionChange来控制选中项的数量，当选中项超过一个时，清除之前的选择，并且只保留最新选中的那一项。这样就实现了复选框的单选功能。

创建Vue脚手架项目：

# 安装vue-cli
npm install -g @vue/cli
 
# 创建一个新项目
vue create my-project
 
# 进入项目目录
cd my-project
 
# 启动项目
npm run serve

用Tomcat部署Vue项目(Vue 2)：

1. 构建Vue项目：

# 进入项目目录
cd my-project
 
# 构建项目
npm run build

2. 将构建好的dist/目录中的内容复制到Tomcat的webapps目录下的某个文件夹中，例如ROOT。
3. 启动Tomcat服务器：

# 进入Tomcat的bin目录
cd /path/to/tomcat/bin
 
# 启动Tomcat
./startup.sh

用Nginx部署Vue项目(Vue 2)：

1. 构建Vue项目：

# 进入项目目录
cd my-project
 
# 构建项目
npm run build

2. 将构建好的dist/目录中的内容移动到Nginx的服务器目录下，例如/usr/share/nginx/html。
3. 修改Nginx配置文件（通常是/etc/nginx/nginx.conf或者/etc/nginx/conf.d/default.conf），设置静态文件服务。

server {
    listen       80;
    server_name  localhost;
 
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

4. 重启Nginx服务器：

# 重启Nginx
sudo nginx -s reload

确保在执行这些步骤之前，你的系统已经安装了Node.js、npm、Tomcat和Nginx。