零基础若依前后端框架起步

环境准备

  • 环境: jdk、maven、node.js、vue
  • IDE:webstorm、idea
  • 数据库:mysql、redis

材料

  • 若依前后端分离框架:https://gitee.com/y_project/RuoYi-Vue
    • 下载 zip 到本地解压。
  • 若依文档:http://doc.ruoyi.vip/ruoyi-vue/

过程

安装

底层环境安装配置:

  • jdk安装:
    • 官网下载jdk傻瓜式安装后,配置系统环境变量
    • JAVA_HOMED:\Program Files\Java\jdk1.8.0_131
    • path:%JAVA_HOME%\jre\bin;%JAVA_HOME%\bin
  • maven安装:
    • 下载maven后解压即可,配置系统环境变量
    • MAVEN_HOMED:\Program Files\apache-maven-3.8.3
    • path:%MAVEN_HOME%\bin
  • node.js安装:
    • 官网下载安装包傻瓜式安装,会自动安装chocolatey(windows下的包管理工具,类似mac的homebrew、linux的yum、apt),会自动安装npm(js包管理工具,类比python的pip),甚至会自动配置环境变量。
  • Vue安装:
    • npm install vue-cli -g-g代表全局)

IDE安装:

  • intelij idea安装:
    • 官网下载后傻瓜式安装
    • IDE中配置maven(建议不要用IDE默认捆绑的maven,而是用自行下载解压后的maven,因为以后很多maven项目InteliJ IDEA会自动下载很多依赖,可能会越来越臃肿,需要放到一个空间比较大的磁盘中)
      • Maven home pathD:/Program Files/apache-maven-3.8.3
  • webstorm安装:
    • 官网下载后傻瓜式安装

数据库安装配置:

  • mysql安装:
    • 官网下载mysql后傻瓜式安装,配置环境变量
    • path:C:\Program Files\MySQL\MySQL Shell 8.0\bin\
  • redis安装:
    • 官方不支持Windows版本的Redis,因此官网上不提供下载:https://github.com/tporadowski/redis/releases
    • 选择zip格式下载,解压即可,配置环境变量
    • path:D:\Redis-x64-5.0.14

运行

mysql数据库建库

在mysql数据库中,新建一个数据库ry-vue,并对这个数据库执行两个sql文件:ry_2021xxxx.sqlquartz.sql

修改若依项目中数据库的配置信息,修改账号/密码:

  • ruoyi-admin–>src–>main–>resources–>application-druid.yml

账号/密码无需用引号包起来(也可以加单/双引号)。

启动redis服务器

进入到redis的解压目录下,用cmd执行:

redis-server.exe redis.windows.conf

即可启动redis服务器(保持该cmd窗口打开状态)。

如果没有创建ry-vue数据库并在IDE中完成mysql数据库配置,或没有先启动redis服务器,在InteliJ IDEA中运行项目可能会报错导致失败。

InteliJ IDEA 打开若依项目

若依 zip 解压后,用InteliJ IDEA 打开项目:定位到\RuoYi-Vue-master\pom.xml。然后“open as project”以项目方式打开。(maven项目)

  • pom.xml就说明这是一个maven项目。
  • InteliJ IDEA 会自动下载依赖到此前设置好的maven路径中。

ruoyi-admin–>src–>main–>java–>com.ruoyi–>RuoYiApplication.java

Run–>Run ‘RuoYiApplication’,则会自动 build 项目,然后运行。

运行如果出现以下图案则表示运行成功:

(♥◠‿◠)ノ゙  若依启动成功   ლ(´ڡ`ლ)゙  
 .-------.       ____     __        
 |  _ _   \      \   \   /  /    
 | ( ' )  |       \  _. /  '       
 |(_ o _) /        _( )_ .'         
 | (_,_).' __  ___(_ o _)'          
 |  |\ \  |  ||   |(_,_)'         
 |  | \ `'   /|   `-'  /           
 |  |  \    /  \      /           
 ''-'   `'-'    `-..-'    

后端运行成功可以通过(http://localhost:8080)访问,但是不会出现静态页面,会返回:

欢迎使用RuoYi后台管理框架,当前版本:v3.7.0,请通过前端地址访问。

可以继续部署ruoyi-ui前端,然后通过前端地址来访问。

Webstorm 打开若依项目

用Webstorm打开项目:定位到RuoYi-Vue-master\ruoyi-ui,打开ruoyi-ui这个文件夹即可。

用cmd或webstorm自带的terminal终端,进入到ruoyi-ui,然后安装依赖:

cd ruoyi-ui
npm install 
//或可以通过以下临时更换镜像源方式加速完成依赖安装
npm install --registry=https://registry.npm.taobao.org

启动项目

npm run dev

就会自动跳转到localhost:80前端。
初始登录账号/密码为:admin/admin123

你可能感兴趣的:(spring,vue,spring,vue)