idea+vue+mySQL

### 设置和运行 Vue.js 项目连接到 MySQL 数据库 #### 配置开发环境 为了确保能够顺利地在 IntelliJ IDEA 中设置并运行 Vue.js 项目以连接至 MySQL 数据库，推荐使用 JDK1.8 版本作为 Java 开发工具包，并安装最新版的 IntelliJ IDEA 来提供良好的集成体验[^1]。 #### 安装必要的插件和支持 对于 Vue.js 的支持，在 IntelliJ IDEA Ultimate Edition 或者通过安装 Volar 插件可以在 Community Edition 上获得完整的编辑器功能。这包括语法高亮、智能感知等功能，有助于提高编码效率。 #### 创建 Spring Boot 后端工程 由于前后端分离架构的应用程序通常会有一个独立的服务端接口供前端调用，因此可以先创建一个基于 Spring Boot 的 Maven 工程用于处理业务逻辑并与数据库交互。选择合适的目录位置后，按照提示完成新项目的初始化工作，记得勾选 Web 和 JPA 组件以便于后续操作[^2]。 #### 连接 MySQL 数据库 在 `src/main/resources` 文件夹下的 `application.properties` 文件中添加如下配置项来指定要使用的数据源： ```properties spring.datasource.url=jdbc:mysql://localhost:3306/boot_shiro_vue_stu?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC spring.datasource.username=root spring.datasource.password=password spring.jpa.hibernate.ddl-auto=update ``` 上述代码片段定义了一个指向本地主机上名为 `boot_shiro_vue_stu` 的 MySQL 数据库实例的数据源URL；同时设置了用户名 (`root`) 及密码 (`password`) ，并且指定了字符集为 UTF-8 编码方式。 #### 构建 RESTful API 接口 利用 Spring Data JPA 提供的功能快速搭建实体类及其对应的仓库接口（Repository），从而实现对学生信息表的操作方法封装。例如： ```java @Entity public class Student { @Id private Long id; // ... other fields and getters/setters ... } @RepositoryRestResource(collectionResourceRel="students", path="students") public interface StudentRepository extends JpaRepository<Student,Long> {} ``` 这段Java代码展示了如何声明一个简单的Student实体对象以及关联它的存储库接口，允许客户端应用程序通过HTTP请求访问这些资源。 #### 前端部分：Vue CLI 脚手架生成项目模板 借助命令行工具 vue-cli 初始化一个新的单页面应用(SPA)，此过程中可以选择预设选项来自动生成所需的文件结构与依赖关系。完成后将整个项目导入IDEA即可享受更佳的工作流优化特性[^3]。 #### 实现跨域资源共享(CORS) 为了让前端发出的AJAX 请求能被服务器正确接收响应而不受同源策略限制的影响，需调整Spring Security的安全过滤链规则或者直接修改全局CORS设定： ```java @Bean public CorsConfigurationSource corsConfigurationSource() { final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(true); config.addAllowedOrigin("*"); config.setMaxAge(3600L); config.addAllowedHeader("*"); config.addAllowedMethod("*"); source.registerCorsConfiguration("/**", config); return source; } ``` 以上示例中的Java函数实现了开放式的 CORS 政策，即任何来源都可以向该API发起请求。