Ginyi-Spring-Vue 项目常见问题解决方案

Ginyi-Spring-Vue 项目常见问题解决方案

ginyi-spring-vue 重构Ruoyi-Vue！基于SpringBoot和Vue3，搭配Naive UI组件库，模块清晰，界面美观，可自主选择主题色，提高视觉舒适度！欢迎Star⭐! 项目地址: https://gitcode.com/gh_mirrors/gi/ginyi-spring-vue

一、项目基础介绍

Ginyi-Spring-Vue 是一个基于 SpringBoot 和 Vue3 的开源项目，搭配 Naive UI 组件库，提供了清晰模块和美观界面。该项目适用于快速开发平台，用户可以自主选择主题色以提升视觉舒适度。主要编程语言包括 Java、Vue、TypeScript 等。

二、新手常见问题及解决步骤

问题1：如何搭建和运行项目？

解决步骤：

1. 确保本地已安装 JDK 1.8+、Node.js 12.0+ 和 Git。
2. 克隆项目到本地：git clone https://github.com/Ginyi3705/ginyi-spring-vue.git
3. 进入项目目录，分别在前端和后端目录下执行以下命令安装依赖：
   • 前端：npm install
   • 后端：mvn clean install
4. 运行后端：
   • 执行 mvn spring-boot:run 或使用 IDE 启动 Spring Boot 应用。
5. 运行前端：
   • 执行 npm run serve，然后在浏览器中访问 http://localhost:8080。

问题2：如何配置数据库？

解决步骤：

1. 在 src/main/resources/application.yml 文件中配置数据库相关参数，如下所示：

   spring:
     datasource:
       driver-class-name: com.mysql.cj.jdbc.Driver
       url: jdbc:mysql://localhost:3306/ginyi?useUnicode=true&characterEncoding=UTF-8&useSSL=false
       username: root
       password: 123456
   

2. 确保数据库已创建，且数据库用户有足够的权限。
3. 运行后端，项目将自动创建表结构。

问题3：如何解决跨域问题？

解决步骤：

1. 在后端项目中添加跨域过滤器，例如在 SpringBootWebConfig 类中添加以下代码：

   @Bean
   public CorsFilter corsFilter() {
       final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
       final CorsConfiguration config = new CorsConfiguration();
       config.setAllowCredentials(true);
       config.addAllowedOrigin("*");
       config.addAllowedHeader("*");
       config.addAllowedMethod("*");
       source.registerCorsConfiguration("/**", config);
       return new CorsFilter(source);
   }
   

2. 确保过滤器在前端控制器之前添加。

以上就是针对 Ginyi-Spring-Vue 项目的常见问题及其解决步骤，希望对新手有所帮助。

ginyi-spring-vue 重构Ruoyi-Vue！基于SpringBoot和Vue3，搭配Naive UI组件库，模块清晰，界面美观，可自主选择主题色，提高视觉舒适度！欢迎Star⭐! 项目地址: https://gitcode.com/gh_mirrors/gi/ginyi-spring-vue