最近发现了一个很好的后台管理系统，界面美观简洁，很好看，采用了Springboot，vue，element技术栈，如果项目地址取决于管理后台，所以，先从GitHub上拉下来，在本地运行看看效果。一、管理系统界面二、本地部署1、克隆项目到本地#进入项目目录cd/Users/kaiyiwang/Code/java/gitclonegit@gitee.com:y_project/RuoYi-Vue.git2。前端工程#进入前端工程cd/Users/kaiyiwang/Code/java/RuoYi-Vue/ruoyi-ui#建议不要直接使用cnpm安装依赖，会出现各种奇怪的bug。npminstall--registry=https://registry.npm.taobao.org#安装依赖npminstall#搭建生产环境npmrunbuild:proddist文件夹即可解决npm下载速度慢的问题会在ui文件夹下生成3.后端工程#进入后端工程目录cd/Users/kaiyiwang/Code/java/RuoYi-Vue/ruoyi#maven编译打包#source~/.bash_profile(reloadmvn)mvncleaninstall-DskipTests注意：执行完成后会在/Users/kaiyiwang/Code/java/RuoYi-Vue/ruoyi/target/文件夹下生成一个ruoyi.jar文件。4.nginx配置文件附件见：文末需要修改的部分，我用红色标注了5.IDEA导入项目5.1，IDEA在本地导入项目，然后pom.xml-》maven下载包5.2，创建数据库，导入数据创建数据库ry-vue并导入数据脚本ry_20191008.sql，quartz.sql5.3，修改数据库连接，编辑resources目录下的application-druid.ymlurl：服务器地址用户名：账号密码：密码5.4，修改日志，上传路径因为是在Mac本地运行，所以需要修改固定配置路径logback.xml来更改日志路径application.yml更改上传路径：#文件路径示例（Windows配置D:/ruoyi/uploadPath,Linux配置/home/ruoyi/uploadPath)profile:/Users/kaiyiwang/Code/java/other/ruoyi/uploadPath5.5,系统运行ning后台操作：打开并运行com.ruoyi.RuoYiApplication.java如果只启动后台系统，在浏览器地址栏输入127.0.0.1:8080会显示：前台操作：#进入项目目录cdruoyi-ui#本地开发启动项目npmrundev启动成功：?ruoyi-uigit:(master)?npmrundev>ruoyi@2.2.0dev/Users/kaiyiwang/Code/java/RuoYi-Vue/ruoyi-ui>vue-cli-serviceserveINFOStartingdevelopmentserver...10%building2/2modules0active?「wds」:Projectisrunningathttp://0.0.0.0:1024/?「wds」:webpack输出是sservedfrom/??wds?:内容不是来自webpack而是来自/Users/kaiyiwang/Code/java/RuoYi-Vue/ruoyi-ui/public???wds?:404s将回退到/index.html98%afteremittingCopyPlugine完成在74119ms12:08:50AM成功编译应用程序运行于：-本地：http://localhost:1024/-网络：http://192.168.1.3:1024/请注意，开发版本未优化。要创建生产构建，请运行npmrunbuild。前后端系统启动后，在浏览器地址栏输入http://localhost:1024/（默认账号admin/admin123），弹出登录页面。如果可以正确显示登录页面，并且可以登录成功，并且菜单和页面显示正常，则说明环境搭建成功。此时虽然可以打开前端页面，但是无法访问后台系统，因为无法连接redis，所以需要启动redismac来安装redis。方法：①使用mac包管理工具brew一行命令即可安装。如果没有安装brew，首先在命令行输入以下命令安装brew。/usr/bin/ruby-e"$(curl-fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"②、安装redisbrewinstallredis@3.2#@后可以指定版本后跟版本号如果你需要在你的PATH中首先有redis@3.2运行：echo'exportPATH="/usr/local/opt/redis@3.2/bin:$PATH"'>>~/.zshrcTohavelaunchd现在启动redis@3.2并在登录时重新启动：brewservicesstartredis@3.2或者，如果您不想/不需要后台服务，您可以运行：/usr/local/opt/redis@3.2/bin/redis-server/usr/local/etc/redis.conf③。使用redis服务1.启动redis服务#brewservicesstartredisbrewservicesstartredis@3.22。关闭redis服务brewservicesstopredis3.重新启动redis服务brew服务重新启动redis4。打开图形界面redis-cli启动redis服务，然后刷新网页获取验证码，登录：brewservicesstartredis@3.2输入验证码，我们可以看到漂亮的后台界面，至此，本地安装成功^_^：3.前端vue-element-admin这个项目的前端框架是另一个优秀的开源框架vue-element-admin，所以我们在修改页面的时候，一定要知道如何前端框架是可以的，不然不知道怎么下手。先看官方文档，对框架有个全局的了解：vue-element-admin前端框架文档Vue使用了新的JavaScriptES6语法，所以首先要了解这些新语法：JavascriptES6快速学习打包工具学习webpack快速入门，然后就可以使用webpack和Vue进行组件开发Webpack初体验这篇博文是2017年写的一篇Vue基础学习文章，不想看官方文档的可以学习这篇文档来掌握主要基础点：Vue.前端框架作者在学习了js基础知识后，写了一系列博文来帮助我们进一步了解vue-element-admin框架：手把手教你使用vue后台系列一（基础篇）相关文章：Centos7部署依赖前后端分离项目如果框架若一前后端分离项目导入IDEA运行若一-vue官方文档Mac安装redis最简单方法JavascriptES6快速学习vue-element-admin前端框架文档
