Vue + SpringBoot 项目实战指南：基于 `https://github.com/1327398885/vue-springboot.git`

Vue + SpringBoot 项目实战指南：基于 https://github.com/1327398885/vue-springboot.git

vue-springboot 项目地址: https://gitcode.com/gh_mirrors/vu/vue-springboot

项目目录结构及介绍

项目基于Vue.js作为前端技术栈，配合SpringBoot为后端服务，实现前后端分离的设计理念。以下是对项目主要目录结构的解析：

前端（通常位于client或直接在根目录）

• src
  • components: 包含各种Vue组件。
  • views: 不同的页面视图，每个.vue文件对应一个页面。
  • assets: 静态资源如图片、样式等。
  • network: Axios请求接口封装层，用于与后端API交互。
  • store: Vuex的状态管理模块（如果项目使用）。
  • router: 路由配置，定义应用的路由规则。
  • App.vue: 应用主入口文件。
  • main.js: Vue应用的入口文件，初始化Vue应用。

后端（通常在server或直接在根目录）

• src/main/java
  • com.example.demo （或项目命名空间）
    • controller: 控制器层，处理HTTP请求。
    • service: 服务层，包含业务逻辑。
    • repository: 数据访问对象，对接数据库。
    • model: 实体模型，映射数据库表结构。
    • config: 配置文件夹，包含SpringBoot的配置类。
• pom.xml: Maven项目配置文件，指定依赖项和构建指令。
• application.properties: 或者可能是application.yml，存放SpringBoot的配置信息，如数据库连接、服务端口等。

项目的启动文件介绍

前端启动

• 使用命令行工具CD至前端项目目录（如client），运行npm install或yarn以安装依赖。
• 安装完成后，执行npm run serve（或yarn serve），这将启动Vue的开发服务器，默认监听在localhost:8080。

后端启动

• CD至后端项目目录，确保已安装Java Development Kit (JDK)。
• 执行mvn spring-boot:run，或在IDE（如IntelliJ IDEA, Eclipse）中作为Spring Boot项目运行，服务默认端口通常是8081，除非在application.properties中有自定义设置。

项目的配置文件介绍

application.properties/yml

• SpringBoot配置文件，一般位于server/src/main/resources。
  • server.port: 指定服务启动的端口号。
  • spring.datasource: 包括数据库URL、用户名、密码和驱动类名，用于配置数据源。
  • mybatis.mapper-locations: 映射文件的位置，如果你使用了MyBatis。
  • spring.profiles.active: 活动环境配置，可以用来切换不同的配置环境（比如开发、测试、生产）。

package.json (前端)

• Vue项目的配置文件，定义脚本命令、依赖版本等。
  • "scripts"部分定义了一系列命令快捷方式，例如"serve": "vue-cli-service serve"用于启动本地开发服务器。

请注意，具体文件结构和配置可能依据项目的实际需求有所不同，务必参照实际项目中的文件和注释进行调整和理解。

vue-springboot 项目地址: https://gitcode.com/gh_mirrors/vu/vue-springboot