一周Spring Boot + VUE 入门 （3）-- 从脚手架开始

为什么需要脚手架？

软件技术发展到现在，实际的应用系统已经极其复杂，如果你想从头开发一个软件系统，从入门到实用的项目，路途是如此的遥远，遥远...，遥远到你失去了继续往下走的勇气。

如果你想建一个房子，给自己一个温暖的家，需要大量专业的知识。如果你想完全凭借一腔热情从头开发做，很可能会造出一个谁也不敢住的“危房”，浪费宝贵的时间和建材。比较好的方式是你选择一个自己满意的“脚手架”，脚手架有基础的地基、上下水等房间都公共部分都已经帮你做好了，你所做的工作就是在脚手架的约束下，仿照样板房，按照自己的喜好添砖加瓦，搭建起一个又一个大小、功能不一的房间，最终送给自己一个安全的家。选用脚手架，虽然你可能觉得受约束，但是能保证你走在正确的道路上，而且节省了你很多时间。

如果你在gitee上搜索Spring Boot + VUE，可以找到大量的非常优秀的脚手架，比较著名的有Pig（lengleng (log4j) - Gitee.com），JEECG BOOT（JEECG官方 (jeecg) - Gitee.com），等等，你可以根据自己的需求做出选择。

RuoYi脚手架介绍

在此，我想介绍我非常喜欢的RuoYI（若依 (y_project) - Gitee.com）。我的项目也是以RuoYi为脚手架开发。Ruoyi 完全开源，文档详尽，结构简单，逻辑清晰，功能齐全，形态丰富，具有Spring Boot，Spring Cloud等多种形态，以及非分离版、分离版、微服务版、最近又增加了移动版。不像很多开源软件，给你一个粗糙的开源版本，然后弄一个精致的商业版收费，因此，在此向RuoYi的作者致以真诚的敬意！感谢作者的辛勤付出。

脚手架已经帮我们做好了管理系统需要的用户管理、权限、菜单、部门等，涵盖了系统需要的基础功能，另外，还额外提供了代码生成功能，代码生成功能虽然不如JEECG，但是操作简单，可以为我们生成基础的增删查改页面，在此基础上学习，以及进一步以此为基础开发我们的应用系统，都提供了极大的便利。

作者撰写了非常详细的文档介绍 | RuoYi，足够详细，可以经常过来看一下。遇到问题，百度一下也会搜索到大量的RuoYi的技术资料，一般问题都能获得解决。

因为作者提供的文档非常详细，所以如果是第一次接触，你可能很容易陷进去。所以我们从最简单的开始，Step by Step，小步快跑，逐步进入RuoYi美妙的世界。

安装RuoYi脚手架

1、下载RuoYi-Vue系统

首先从RuoYi的vue版本RuoYi-Vue: 🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本下载完整的程序包

2、安装ry-vue数据库

打开MySQL，然后打开我们强大的数据库管理工具navicat，打开本地MySQL数据库，然后选中localhost本地数据库，右键找到【新建数据库】，点击，打开新建数据库界面

 

数据库名称是 ry-vue，当然你也可以起其他的名字，然后在配置文件中修改数据库名称，字符集注意选择utf8，最好是utf8mb4，排序规则选择utf8mb4_general_ci，然后确定。

打开新建的数据库ry-vue，在数据库名称ry-vue点击右键，选择【运行SQL文件】，然后找到下载的RuoYi目录中sql目录的ry_XXXX.sql 数据库文件，点【开始】运行

 等待数据库文件运行完成，我们就应该能看到创建好的表。同样的方法，把quartz.sql文件也执行一下（可选）。

3、打开redis

进入redis目录，右键打开命令工具Cmder，然后输入redis-server，显示如下界面，表示redis已经启动，访问端口是6379.

你可能会问Redis是什么，简单说，Redis是一个key-value数据库，那为什么我们有MySQL了，还要redis呢？因为Redis具有极高的性能，能读的速度是110000次/s,写的速度是81000次/s，而且支持的数据类型很丰富 –Strings, Lists, Hashes, Sets 及 Ordered Sets 数据类型。而且具有原子性，就是所有操作要么成功执行，要么失败完全不执行。不会出现执行到中间中断的问题。为什么redis性能这么高呢，因为redis主要是运行在内存中，也可以持久化保存到磁盘上，但是主要是在内存中，所以具有极高的读写性能，但是数据不能太大了，所以我们用redis保存用户的登陆认证信息等数据量不大，但是需要频繁读写的数据。

后端程序运行

在Idea中【新建项目】，从【现有项目】，然后选择下载的RuoYi-Vue-maste目录，系统会自动添加依赖，这个可能时间比较久，慢慢等待，等待......，

一直到能看到RuoYi-Vue-master目录，右下角的处理依赖的进度条停止了，就说明Ieda已经准备好项目了。

打开ruoyi-admin目录下面的resources目录，找到目录中的application-druid.yml文件，修改mysql数据库的数据库（默认是ry-vue，如果你创建库的时候修改了，在这里做相应修改），你的MySQL的用户名和密码修改成同你的数据库安装配置的一致。你可以顺便打开aoolication.yml配置文件看一下，不需要修改。

resources下面是重要的配置文件，程序运行的一些参数在yml文件中进行配置。@application.yml文件是系统的基础的配置参数，例如redis的地址和端口等，application-druid.yml是数据读写的参数，例如打开MySQL数据库的库名称，用户名和密码等核心的信息。注意yml文件是通过缩进来区分不同的级别，同一列（就是缩进一样的行）属于一个级别，而且不能用tab缩进，只能用空格，大小写还是敏感的，注释前面加#。

这些工作完成后，开始启动主程序RuoYiApplication，找到ruoyi-admin下的src的main下的com.ruoyi下的RuoYiApplication，右键，电子【运行RuoYiApplication】或者右上角的运行按键，

 如果屏幕下方出现“若依启动成功”，那就表示后端程序顺利启动起来了，我们查看一下，可以看到，后端是在8080端口提供数据读写的服务。如果你想脱离开前端，直接同后端进行数据操作，可以下载postman进行操作，具体我们再讲。

 这是，如果你在浏览器输入localhost:8080,会看到提示，

 

前端程序运行

前端比较简单，进入下载目录的ruoyi-ui，右键打开Cmder命令窗口，然后输入

npm install --registry=https://registry.npmmirror.com

或者

npm install （比较慢一些）

会下载很多组件，比较慢，到目录的node_modules目录下（如果你遇到问题重新安装，可以删掉这个目录，用ump install重新安装），请耐心等待

等下载完后，在命令窗口运行

npm run dev

直到出现

 表示前端已经顺利运行了，我们在浏览器输入http://locahost，就可以看到RuoYI的登陆界面了，

用户名是admin，密码是admin123，验证码按照公式中输入结果，点击登陆，就进入系统了

 RuoYi 基本功能

我们先简单了解一下RuoYi的基本功能，主要体现在系统管理，一个系统需要的用户管理（每个部门有哪些用户），角色管理（权限管理的重要部分，不同角色定义不同的权限，例如教学管理人员能修改成绩，教师只能输入成绩等，可以设置教学管理人员角色和教师角色，就不用每个用户都设置权限，把设置好权限的角色授权给某个用户就可以了），菜单管理（将来开发的模块需要添加到菜单中），部门管理（用户属于不同的部门，有些用户只能查看本部门的数据，有些用户可以查看全部的数据，可以根据部门设置），岗位管理（不同用户可以工作在不同的岗位），字典设置（通过字典对名称进行编码，便于规范管理，例如成绩只有优，良，中，差，没有优秀，良好，中等这样）。

 在系统工具中有代码生成，可以基于数据库，帮我们生成一套前后端的代码，非常方便。以此为基础修改和开发，会节省大量的时间，也不容易出错。

 好的。今天的脚手架就介绍到这里，如果在安装中遇到问题，可以在网上找到大量的介绍文章和视频，也可以查看RuoYi的手册，

介绍 | RuoYi