菜鸟修行之路----项目实战：微人事项目之项目概述

菜鸟修行之路----项目实战：微人事项目之项目概述

​ 修行之路艰辛，与君共勉！！

​ 从即日起，通过对于github上非常热门的前后端分离开发的开源项目：微人事管理系统的全面学习以及自主手写代码实现。

​ 完成对于Spring Boot以及前后端分离开发的学习。继续加油！！！。

1.前后端分离技术

前后端分离开发，简单来说，就是前端代码与后端服务器代码分开来写。

传统web开发模式：前端采用JSP开发。

​ 前端–》HTML静态页面–》后端–》JSP

缺点：前后端聚合在一起，开发效率低下。

前后端分离开发特点：

• 前端编写客户端代码，后端编写服务器代码，并且提供数据接口。
• 前端通过Ajax请求来访问后端的数据接口，将Model展示到View中即可。
• 前后端的开发者只需要提前设计好接口文档（URL、参数、数据类型等），然后分别独立开发，最后前后端进行集成，真正实现了前后端应用的解耦合，极大的提升了开发效率。

前端HTML–》Ajax–》RESTful后端数据接口

具体架构如下：

2.微人事项目概述

2.1 项目简介

​ 人事管理系统式一种常见的企业后台管理系统，主要提供员工资料管理、人事管理、工资管理、统计管理以及系统管理等功能。

2.2 技术架构

​ 本项目采用前后端分离技术进行开发。

​ 前端采用Vue+ElementUI来构建SPA（单页面应用：通过动态重写当前页面来实现与用户交互），并且实现了前端的多样化，前端可以是PC端页面，也可以是移动端页面（Android、iOS），还可以是微信小程序。

​ 后端服务器以Spring boot为主框架。

• ​ 使用Spring Security实现后端权限认证
• ​ 使用Mybatis操作MySQL数据库
• ​ 使用Redis实现缓存
• ​ 使用阿里的druid数据库连接池
• ​ 使用WebSocket实现在线聊天

2.3 项目模块

根据需求分析，本项目主要有以下模块，后面博客也是分别以下面模块进行章节分类。

• 登录模块
• 动态加载用户菜单
• 邮件发送
• 员工资料导入导出
• 在线聊天

3.项目环境搭建

3.1 前端项目构建

项目环境：Vue 4.2.2

前端项目采用Vue+ElementUI实现。并且Vue项目采用Webpack来构建。

首先在本地安装Node.js环境，安装好后，在安装Vue。

在Vue 3.0以上版本就可以采用图形化界面创建Vue项目。

前端项目构建步骤：

1.在cmd中运行下面命令，打开Vue的图形化界面。

vue ui

2.在Vue的图形化界面中，创建项目，创建完成后，就可以将项目导入到IDEA中，在IDEA中进行快速开发。

3.2 后端项目构建

在IDEA中创建一个Spring boot工程，添加spring-boot-start-web依赖，其他框架的依赖在模块实现部分添加。

采用Maven进行项目管理。

    <groupId>com.rookie_vhrgroupId>
    <artifactId>rookie_vhrartifactId>
    <version>1.0-SNAPSHOTversion>

后端项目环境：

JDK 1.8

        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-webartifactId>
            <version>2.2.5.RELEASEversion>
        dependency>

3.3 数据库脚本参见github仓库中，数据字典不在描述。

至此： Spring Boot项目实战正式开始，虽然本项目是github上面的开源项目，但是会后续完全手写代码实现一遍，正好对于Spring Boot的一个学习检测以及web项目的整体学习和各类框架的学习！！！！！！