# exercise

**Repository Path**: john66t/exercise

## Basic Information

- **Project Name**: exercise
- **Description**: 123332424321432
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-28
- **Last Updated**: 2025-05-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目说明

## 一、项目目的与背景

本项目 `aliyun_springbootvue_demo` 旨在构建一个简单的前后端分离应用示例，帮助开发者快速上手 Spring Boot 和 Vue.js 的组合开发。同时，结合阿里云的云服务，为后续项目部署到云端提供基础参考。

## 二、项目功能介绍

### 1. 用户登录功能

- **前端**：提供一个简单的登录界面，用户输入用户名和密码后，点击登录按钮，前端将请求数据发送到后端 `/api/login` 接口。
- **后端**：接收前端传来的用户名和密码，查询数据库，验证用户信息。

### 2. 学生信息管理功能

- 前端
    - 登录成功后，用户可以看到学生列表页面，显示所有学生的姓名、性别和描述信息。
    - 提供新增、编辑和删除学生信息的功能。
- 后端
    - 提供 `/students` 接口，包括增删改查4个方法。
    - 通过 MyBatis-Plus对数据库中的学生信息表进行操作。

## 三、技术选型

### 前端

- **Vue.js**：一个渐进式 JavaScript 框架，用于构建用户界面。它采用组件化开发模式，使代码易于维护和扩展。
- **Vue Router**：Vue.js 的官方路由管理器，用于实现单页面应用的路由功能。
- **Axios**：一个基于 Promise 的 HTTP 客户端，用于发送 HTTP 请求与后端进行数据交互。
- **Vue CLI**：快速搭建 Vue 项目的工具，提供了项目模板和开发环境配置。

### 后端

- **Spring Boot**：简化 Spring 应用开发的框架，提供了自动配置和嵌入式服务器，使开发人员可以快速搭建独立的、生产级别的 Spring 应用。
- **MyBatis-Plus**：MyBatis 的增强工具，简化了数据库操作，提供了通用的 CRUD 方法和代码生成器。
- **MySQL**：开源的关系型数据库管理系统，用于存储用户信息和学生信息。
- **Maven**：项目构建和依赖管理工具，用于管理项目的依赖和编译打包。

### Nginx

- **负载均衡**：Nginx 可以作为反向代理服务器，将客户端的请求分发到多个后端服务器上，实现负载均衡。这样可以提高系统的可用性和性能，避免单个服务器负载过高。
- **静态资源服务**：Nginx 能够高效地处理静态资源，如 HTML、CSS、JavaScript、图片等。在本项目中，前端打包后的静态文件可以由 Nginx 直接提供服务，减少后端服务器的压力。
- **反向代理**：通过配置 Nginx 的反向代理规则，可以将前端和后端的请求进行区分和转发。例如，将所有以 `/api` 开头的请求转发到后端 Spring Boot 服务器，其他请求则直接返回前端的静态页面。

### 其他

- **Git**：版本控制系统，用于项目代码的管理和协作开发。
- **Bash 脚本**：用于项目的自动化部署和启动，如 `backend-start.sh` 和 `frontend-start.sh` 脚本。

## 四、项目结构

```text
/opt/project/self/aliyun_springbootvue_demo
├── backend                          # 后端项目（Maven工程）
│   ├── .gitignore                   # Git忽略文件配置
│   ├── pom.xml                      # Maven依赖配置
│   └── src
│       ├── main
│       │   ├── java
│       │   │   └── com
│       │   │       └── example
│       │   │           └── demo
│       │   │               ├── controller
│       │   │               │   ├── LoginController.java
│       │   │               │   └── StudentController.java
│       │   │               ├── entity
│       │   │               │   ├── StudentInfo.java
│       │   │               │   └── UserInfo.java
│       │   │               ├── mapper
│       │   │               │   ├── StudentInfoMapper.java
│       │   │               │   └── UserInfoMapper.java
│       │   │               └── service
│       │   │                   ├── StudentInfoService.java
│       │   │                   └── UserInfoService.java
│       │   │           └── DemoApplication.java
│       │   └── resources
│       │       ├── application.yaml # 数据库配置
│       │       └── logback-spring.xml # 日志配置
│   └── target                       # 编译输出目录（自动生成）
├── frontend                         # 前端项目（Vue工程）
│   ├── package.json                 # 依赖管理
│   ├── src
│   │   ├── App.vue
│   │   ├── Login.vue
│   │   ├── StudentList.vue
│   │   ├── main.js
│   │   └── router
│   │       └── index.js
│   └── vue.config.js                # 前端配置
├── doc
│   ├── backend-start.sh             # 后端启动脚本
│   ├── db.sql                       # 数据库脚本
│   ├── frontend-start.sh            # 前端启动脚本
│   └── nginx.conf                   # Nginx 配置文件
```

## 五、部署与运行

### 1. 数据库初始化

- 执行 `doc/db.sql` 文件中的 SQL 语句，创建数据库和表，并插入初始数据。

### 2. 后端启动

- 执行 `doc/backend-start.sh` 脚本，根据提示选择全量编译并启动或仅重启服务。

### 3. 前端启动

- 执行 `doc/frontend-start.sh` 脚本，进行依赖安装和项目编译。

### 4. Nginx 配置

- 使用 `doc/nginx.conf` 配置文件，实现反向代理和静态资源服务。



通过以上步骤，你可以在本地运行该项目，访问 `http://localhost:8082` 即可看到登录页面。若使用 Nginx 部署，访问配置的域名或 IP 地址即可。