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

1. 项目的目录结构及介绍

ginyi-spring-vue/
├── backend/                      # 后端代码目录
│   ├── src/                      # 源代码目录
│   │   ├── main/                # 主代码目录
│   │   │   ├── java/            # Java源代码目录
│   │   │   │   └── com/ginyi/   # 包路径
│   │   │   └── resources/       # 资源文件目录
│   │   │       ├── application.properties  # Spring Boot配置文件
│   │   │       └── ...          # 其他资源文件
│   │   └── test/                # 测试代码目录
│   ├── pom.xml                  # Maven项目配置文件
│   └── ...
├── frontend/                     # 前端代码目录
│   ├── src/                      # 源代码目录
│   │   ├── assets/              # 静态资源目录
│   │   ├── components/          # 组件目录
│   │   ├── views/               # 页面目录
│   │   ├── App.vue              # 根组件
│   │   └── main.js              # 主入口文件
│   ├── package.json             # 项目配置文件
│   ├── vue.config.js            # Vue配置文件
│   └── ...
├── README.md                    # 项目说明文件
└── ...

目录结构说明

• backend: 后端代码目录，包含Java源代码和相关资源文件。
• frontend: 前端代码目录，包含Vue.js源代码和相关配置文件。
• README.md: 项目说明文件，包含项目简介、安装和使用指南。

2. 项目的启动文件介绍

后端启动文件

后端启动文件位于 backend/src/main/java/com/ginyi/Application.java，内容如下：

package com.ginyi;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

前端启动文件

前端启动文件位于 frontend/package.json，相关脚本如下：

"scripts": {
    "serve": "vue-cli-service serve",    // 启动开发服务器
    "build": "vue-cli-service build",    // 构建生产版本
    "lint": "vue-cli-service lint"       // 代码格式检查
}

启动前端开发服务器命令：

npm run serve

3. 项目的配置文件介绍

后端配置文件

后端配置文件位于 backend/src/main/resources/application.properties，常见配置如下：

server.port=8080                      # 服务端口号
spring.datasource.url=jdbc:mysql://localhost:3306/ginyi  # 数据库连接URL
spring.datasource.username=root        # 数据库用户名
spring.datasource.password=123456      # 数据库密码
spring.jpa.hibernate.ddl-auto=update   # Hibernate ddl自动更新策略

前端配置文件

前端配置文件位于 frontend/vue.config.js，常见配置如下：

module.exports = {
    publicPath: '/',                   // 基本URL
    outputDir: 'dist',                 // 输出文件目录
    assetsDir: 'static',               // 静态资源目录
    lintOnSave: process.env.NODE_ENV !== 'production',  // 是否在保存时检查
    devServer: {
        port: 8081,                    // 开发服务器端口号
        proxy: {
            '/api': {                   // API代理配置
                target: 'http://localhost:8080',
                changeOrigin: true,
                pathRewrite: {'^/api': ''}
            }
        }
    }
}

以上是Ginyi Spring Vue项目的目录结构、启动文件和配置文件的详细介绍，希望对您有所帮助。

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