1、项目导学与开发环境搭建

各位同学，欢迎来到《OA系统前后端分离开发实战》的第一课。

说实话，我见过太多人一上来就撸代码，结果环境配了三天，项目跑不起来。嗯，咱们不干那种事。这一章，咱们先把地基打牢。

OA系统概述

OA系统，说白了就是办公自动化系统。你想想看，公司里请假、报销、审批、公告，这些流程如果全靠纸质单据跑，效率有多低？

我参与过的第一个OA项目，是给一家中型企业做的。当时他们还在用Excel表格走审批，一个请假单要打印三份，找三个人签字。后来我们上线了系统，效率提升了不止一倍。

咱们这门课要做的OA系统，包含几个核心模块：

  • 用户管理：登录、注册、权限控制
  • 流程审批：请假、报销等申请与审批
  • 公告管理：发布、查看公司公告
  • 个人中心：个人信息、待办事项

这些功能，几乎每个公司都会用到。学会了，你就能独立开发一套完整的企业级应用。

前后端分离架构介绍

为什么咱们要用前后端分离？

我记得2018年之前，很多项目还是用JSP或者Thymeleaf，前端页面和后端代码混在一起。改个按钮颜色都要重启服务器，别提多难受了。

前后端分离，就是把前端和后端拆成两个独立的项目：

  • 前端：负责页面展示和用户交互，用Vue.js、React等框架
  • 后端：负责业务逻辑和数据存储，提供RESTful API接口

这样做的好处很明显：

  • 前后端可以并行开发，互不干扰
  • 前端可以独立部署，用Nginx就能搞定
  • 后端接口可以复用，给App、小程序都能用

核心架构图（文字版）

浏览器 → Nginx（静态资源） → Vue.js前端 → 调用API → Spring Boot后端 → MySQL数据库

咱们这门课，前端用Vue 3 + Element Plus，后端用Spring Boot 2.x + MyBatis Plus。这套组合，是目前中小型项目的主流选择。

开发工具安装与配置

工欲善其事，必先利其器。下面我把每个工具的安装要点说清楚。

JDK 安装

咱们用JDK 8，稳定，生态好。我建议用Oracle JDK或者OpenJDK都行。

# 下载JDK 8
# 配置环境变量
JAVA_HOME = C:\Program Files\Java\jdk1.8.0_202
PATH = %JAVA_HOME%\bin

# 验证安装
java -version
# 输出：java version "1.8.0_202"

小技巧：我个人习惯把JDK装在非C盘，避免系统盘空间不足。另外，记得配置JAVA_HOME，很多框架依赖这个变量。

Node.js 安装

前端项目依赖Node.js。咱们用LTS版本，长期支持，稳定可靠。

# 下载Node.js 16 LTS
# 安装后验证
node -v   # v16.20.0
npm -v    # 8.19.4

我曾经遇到过一个坑：npm下载依赖特别慢。后来配置了淘宝镜像，速度飞起。

# 配置淘宝镜像
npm config set registry https://registry.npmmirror.com

Maven 安装

Maven是Java项目的构建工具。咱们用它管理依赖、打包项目。

# 下载Maven 3.8.x
# 配置环境变量
MAVEN_HOME = D:\apache-maven-3.8.6
PATH = %MAVEN_HOME%\bin

# 验证安装
mvn -v

注意：Maven默认的中央仓库在国外，下载依赖很慢。一定要配置阿里云镜像！

在 conf/settings.xml 中添加：

<mirrors>
  <mirror>
    <id>aliyunmaven</id>
    <mirrorOf>central</mirrorOf>
    <name>阿里云公共仓库</name>
    <url>https://maven.aliyun.com/repository/public</url>
  </mirror>
</mirrors>

Git 安装

版本控制是团队协作的基石。咱们用Git管理代码。

# 下载Git
# 安装后配置用户名和邮箱
git config --global user.name "Your Name"
git config --global user.email "your@email.com"

# 验证
git --version

我个人习惯用Sourcetree或者GitKraken作为图形化工具，但命令行也得会。毕竟面试的时候，面试官可不会让你点鼠标。

创建项目骨架

环境配好了，咱们来创建项目骨架。

后端项目（Spring Boot）

我推荐用Spring Initializr快速生成项目。访问 https://start.spring.io/，选择：

  • Project: Maven Project
  • Language: Java
  • Spring Boot: 2.7.x
  • Dependencies: Spring Web, MyBatis Framework, MySQL Driver, Lombok

生成后，导入IDEA。项目结构如下：

oa-backend/
├── src/
│   ├── main/
│   │   ├── java/com/example/oa/
│   │   │   ├── controller/    # 控制器层
│   │   │   ├── service/       # 业务逻辑层
│   │   │   ├── mapper/        # 数据访问层
│   │   │   ├── entity/        # 实体类
│   │   │   └── OaApplication.java  # 启动类
│   │   └── resources/
│   │       ├── application.yml     # 配置文件
│   │       └── mapper/             # XML映射文件
│   └── test/
└── pom.xml

前端项目（Vue 3）

用Vue CLI创建前端项目：

# 安装Vue CLI
npm install -g @vue/cli

# 创建项目
vue create oa-frontend

# 选择Vue 3 + Babel + Router + Vuex

# 安装Element Plus
npm install element-plus --save

项目结构：

oa-frontend/
├── src/
│   ├── views/          # 页面组件
│   ├── router/         # 路由配置
│   ├── store/          # 状态管理
│   ├── api/            # API接口封装
│   ├── components/     # 公共组件
│   ├── App.vue         # 根组件
│   └── main.js         # 入口文件
├── public/
├── package.json
└── vue.config.js

避坑指南：我曾经在创建Vue项目时，忘记安装Router和Vuex，后面手动加特别麻烦。所以创建时直接勾选上，省事。

本章小结

这一章，咱们做了三件事：

  1. 了解了OA系统是什么，以及咱们要做什么
  2. 理解了前后端分离架构的优势
  3. 安装了JDK、Node.js、Maven、Git，并创建了前后端项目骨架

环境搭好了，下一章咱们就开始写代码了。你想想看，是不是有点小激动？

记住，开发环境配好了，后面才能顺风顺水。如果遇到问题，别慌，检查一下环境变量和版本号，八成能解决。

咱们下节课见。

← 上一章 📖 返回目录 下一章 →