带你跑eladmin开源项目

女爷i 2023-02-14 02:22 6阅读 0赞

### 带你跑ELADMIN后台管理系统开源项目 ###

> 作者：江南骚年  
> 
> 
> ### 文章目录 ###
> 
>  *   *   *  带你跑ELADMIN后台管理系统开源项目
>          *   *  前言
>              *  项目简介
>              *  准备环境
>              *   *  Redis数据库安装配置
>                  *  mysql配置
>                  *  后台spring
>                  *  前端配置

#### 前言 ####

最近开始稍微接触了点框架，本来是想学点开源项目什么的，但学起来耗得时间长，所以公众号和博客的文章都慢慢的停更了许久。之前的java多线程和反射都还没弄透，更别说java源码和JVM了，学习这件事真的需要坚持、耐心和不断总结 。github上满是开源项目，建议找一个适合的项目练练，看看它用到的技术，一个个吃透了，以后用到相同的技术就越发熟练，看代码如同行云流水，毫不费劲。今天就推荐一个十分火爆的开源项目el-admin后台管理系统，结合前端Vue使用 ，是一个不错的开胃菜。

--------------------

#### 项目简介 ####

一个基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue的前后端分离的后台管理系统

开发文档： https://docs.auauz.net/  
体验地址： https://auauz.net/

账号密码： `admin/123456` (默认密码都是123456)

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th align="center">后端源码</th> 
   <th align="center">前端源码</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>github</td> 
   <td align="center">https://github.com/elunez/eladmin</td> 
   <td align="center">https://github.com/elunez/eladmin-web</td> 
  </tr> 
  <tr> 
   <td>码云</td> 
   <td align="center">https://gitee.com/elunez/eladmin</td> 
   <td align="center">https://gitee.com/elunez/eladmin-web</td> 
  </tr> 
 </tbody> 
</table>

这是用流行框架spring boot和vue实现的前后端分离的后台管理系统，不要被前后端分离吓到了，只是前后端的代码放在不同的地方而已，没有什么特别重要的技术难点。

--------------------

#### 准备环境 ####

上面已经给出了项目的源码，把前后端的源码下下来就行了，之后要准备什么呢？当然是准备跑项目的环境了，可以分为前端和后端的运行环境。在项目里，是需要后端的，所以先配置后端环境。那我们如何知道应该配好怎样的环境呢？看github项目的介绍，README文档里面也有介绍，以后可以直接看README就行了。既然是个Java项目，当然应该有Java的环境啦，这个可以直接用IDEA代替，社区版的也行，项目的文件就用IDEA打开就是了。

--------------------

##### Redis数据库安装配置 #####

如果没有，可在公众号内回复**redis**获取。下载好后，应首先配置它的环境变量。分别打开redis-servr.exe和redis-cli.exe，如下：

![redis][]![redis启动][redis 1]

--------------------

##### mysql配置 #####

项目里的eladmin.sql文件为MySQL启动脚本，了解后，并不是双击运行。前提应该有mysql和数据库管理器吧，没有mysql可以在公众号内的软件工具哪里找，应该有，记得配置环境变量。另外管理工具就别用SQL Server了，sqlyog也不错，官网有社区版的，就下的慢，推荐链接：https://pan.baidu.com/s/1PcVVkucLRf-49lHDPl6syA 提取码：w27i 。先建一个项目数据库。

![创建数据库][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu_size_16_color_FFFFFF_t_70_pic_center]

接着用记事本或其他打开项目sql脚本，全选粘贴在询问一栏，并再次全选右键执行查询或摁F9。

![sql查询][sql]  
结果没报错即可，都不要关闭这些。

--------------------

##### 后台spring #####

如果没有还有spring这个框架，不用太担心，这样大部分是框架依赖，所以交给IDEA去干就行了，前提是别把网断了，需要下依赖包。如何让IDEA自动下呢？在文件那点击setting设置，在Build,Execute那的Maven选项。

![导入依赖][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu_size_16_color_FFFFFF_t_70_pic_center 1]**自动导入Maven项目**

![mport-ij][]

![字节码版本][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu_size_16_color_FFFFFF_t_70_pic_center 2]  
上图把编译器生成的字节码类型改为和jdk相同版本，我这里用jdk11编译，不然会报“不支持java 5版本，请使用6及以上版本”。更具体的操作可以自己搜索解决，比较简单。同样在项目的配置文件pom.xml里，需要添加相应的依赖属性。

> //添加下面几个，如果没有就加上去  
> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>  
> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>  
> <java.version>11</java.version>  
> <maven.compiler.source>11</maven.compiler.source>  
> <maven.compiler.target>11</maven.compiler.target>

这时候还不能自动下载依赖包，可以手动刷新或者说重新导入项目，右键项目文件，在maven选项那点reimport就行了。

![重新导入][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu_size_16_color_FFFFFF_t_70_pic_center 3]  
耐心等待后，就可以启动后台了，在eladmin-system下找到Apprun的Java文件，运行它。  
![项目启动文件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu_size_16_color_FFFFFF_t_70_pic_center 4]  
结果如下，没报错就行！  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu_size_16_color_FFFFFF_t_70_pic_center 5][]

--------------------

##### 前端配置 #####

前端配置比较容易出错，报错了直接在命令行输出一大堆信息，关键是解决起来非常麻烦。配置前端呢主要是为了能让大家在本地就能看到效果，只有后端的项目，再好，没前端相辅相成，项目跑的也没意思！同样的套路，同样的逼数！首先咱们找到前端的文件夹，发现里面是没有前端的依赖的，这个不足为奇。那咱们就需要配置依赖了。主要是node.js , node.js 是一个基于 Chrome V8 引擎的 JavaScirpt 运行环境，可以用于服务端编程。我们把它下载后需要**配置它的环境变量**，目的是为了用他的包管理工具npm(nodejs package management)，那有什么用呢?

1  允许用户从NPM服务器下载别人编写的第三方包到本地使用
      2  允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用
      3  允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用

在这之前，把文件夹里的package.json包修改一下，找到script那里，添加如下：

"scripts": {	//如果没有以下，则添加
        "dev": "vue-cli-service serve",
    	"start": "node index.js",
        "server": "nodemon index.js --ignore client",
    	"build": "vue-cli-service build",
      },

我们下翻，还能看到前端的依赖dependencies和环境需要的版本，node在8.9及以上，npm在3.0.0及以上。

"engines": {
        "node": ">=8.9",
        "npm": ">= 3.0.0"
      },

之后说白了，npm就是帮我们把前端需要的依赖给下了，方便生成前端页面。具体的nodejs的下载安装配置，可以搜索相关文章，这里就不多讲了。命令行‘npm -v’查看npm版本，能看到输出，说明配置成功。

> npm config set registry https://registry.npm.taobao.org  
> \-g //设置淘宝镜像，加快下载依赖

cd进入前端文件夹内，输入"npm install"，开始下载依赖，之后文件夹内会多出node\_modules文件夹，命令行中不出现报错就行，报错的话可能有几个原因。

> 1.  网络原因，下载中断了，或下载较慢
> 2.  package依赖包没配置好，应先配置好
> 3.  版本低，检查一下
> 4.  如果不是以上原因，可能是某一个具体因素导致的，就需要仔细查看命令行报错了，很可能是某个依赖没有下好，可以直接进入文件夹查看，如果没有则真的没下好，可以：npm  
>     uninstall xxx;再npm install xxx，重新来一遍。

--------------------

然后一切顺利，“npm run build: prod”；“npm run dev”；前端就跑起来了！结果如下：

![eladmin][]  
当然我们不只是纯粹为了演示项目，像里面的配置啊什么的，技术还需要我们一步一步吃透。要学会解决问题，学习路上总有风雨，只要努力专研，还是会有所收获的！如果有更多问题就关注公众号吧！加群了解更多！这次就分享到这了。

最后附上：  
[blog][]  
[博客园][Link 1]

[redis]: https://img-blog.csdnimg.cn/20200531093506213.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu,size_16,color_FFFFFF,t_70#pic_center
[redis 1]: https://img-blog.csdnimg.cn/20200531093545795.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/2020053110421664.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu,size_16,color_FFFFFF,t_70#pic_center
[sql]: https://img-blog.csdnimg.cn/20200531093646199.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200531093753426.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu,size_16,color_FFFFFF,t_70#pic_center
[mport-ij]: https://img-blog.csdnimg.cn/20200531093822889.PNG#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20200531094000871.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20200531094242220.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20200531094302865.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20200531094336323.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu,size_16,color_FFFFFF,t_70#pic_center
[eladmin]: https://img-blog.csdnimg.cn/20200531101424186.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvYnVsbGlu,size_16,color_FFFFFF,t_70#pic_center
[blog]: https://maliaoblog.cn
[Link 1]: https://www.cnblogs.com/coderma/