Java SpringBoot + Vue 实现REST API跨域与接口设计

"本次实验是关于构建一个基于Web的REST API，主要使用Java的Spring Boot框架和MyBatis来处理数据库操作，同时前端利用JavaScript的Vue框架和ElementUI组件库。实验涉及的关键技术包括跨域问题的解决、RESTful API的设计以及前后端交互。" 在此次"Web实验REST API1"中，我们主要关注以下几个知识点： 1. 跨域问题与@CrossOrigin注解：在开发Web应用时，由于浏览器的安全策略，不同源的请求会被阻止，这被称为跨域问题。@CrossOrigin注解是Spring Boot提供的解决方案，它可以添加到Controller或方法级别，允许来自特定源的请求访问。在这个实验中，由于本地服务器分别运行在8080和8081端口，所以需要使用@CrossOrigin来允许8080端口的Web应用访问8081端口的API。 2. Spring Boot：Spring Boot是Spring框架的一个扩展，它简化了创建独立、生产级别的基于Spring的应用。在本实验中，MySpringBootApplication是Spring Boot的启动类，包含main方法，用于启动应用程序并建立本地服务器。 3. MyBatis：MyBatis是一个持久层框架，它支持定制化SQL、存储过程以及高级映射。在实验中，通过MyBatis实现了对数据库的增删改查操作。在demo.dao和resources.dao中，定义接口方法并在对应的DAO类中编写SQL语句。 4. RESTful API设计：REST（Representational State Transfer）是一种软件架构风格，用于设计网络应用程序。@RequestMapping注解用于声明RESTful API接口，例如`@RequestMapping("/reservation")`，这个接口可以接收GET、POST、PUT、DELETE等HTTP方法，对资源进行操作。@CrossOrigin注解则解决了在API接口调用中可能出现的跨域问题。 5. 前端技术栈：前端部分采用了JavaScript的Vue框架，它是一个轻量级的MVVM框架，用于构建用户界面。ElementUI是一个基于Vue的组件库，提供了一系列的UI组件。前端代码结构包括router（路由配置）、network（网络请求配置）以及各个组件如App.vue（主组件）、MainView.vue（总体框架）等，它们共同构成了一个完整的前端应用。 6. 数据交互：前端通过Vue的axios库或者自定义的request.js封装的网络请求与后端API接口进行交互，获取或发送数据。例如，通过接口访问数据库资源，展示预约人数、座位信息、个人预约详情等。 这个实验涵盖了Web开发的核心技术和流程，从数据库设计到API接口开发，再到前端页面的构建和数据交互，为开发者提供了全面的实践机会。