本地电脑启动若依前后分离的项目

我会带着你远行 2023-01-04 14:45 163阅读 0赞

# 一. 问题背景 #

> 最近想玩玩前后分离的项目，看看怎么弄的。我了解有2个比较受欢迎的前后端分离项目：mall和ruoyi。这两个开源项目好像都挺火的。考虑到mall项目太庞大，部署起来可能遇到挺多bug，所以拿若依项目入手了

# 二. 步骤 #

## 2.1 下载源码 ##

去[gitee页面下载][gitee]即可。

*注：gitee的工程中已经包含了后端源码和前端源码（前端源码在ruoyi-ui文件夹）*

## 2.2 搭建环境 ##

1.  windows系统上安装node.js，这个去百度找教程
2.  windows系统上安装MySQL，我选择8.0版本
3.  Linux系统安装redis，我选择5.0.4版本

*注：以上软件都可去百度找教程即可*

## 2.3 导入数据库 ##

> 用IDEA打开从gitee上下载的RuoYi-Vue项目，找到ruoyi-admin模块，在数据库中创建名为ry-vue的数据库，依据如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70_pic_center]

> 执行sql文件夹中的sql脚本，如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70_pic_center 1]

## 2.4 下载Vue.js插件 ##

> 由于idea不能识别vue项目，需要下载Vue.js插件。

## 2.5 打包后端项目 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70_pic_center 2]

## 2.6 启动后端 ##

> 运行ruoyi-admin模块中的`RuoYiApplication`类的`main()`方法即可

## 2.7 构建并启动前端项目 ##

### 2.7.1 切换npm镜像源并安装依赖 ###

> 点击idea的terminal，进入ruoyi项目所在的目录，再进入ruoyi-ui文件夹，输入如下：

# 切换镜像源
    npm install --registry=https://registry.npm.taobao.org
    # 安装依赖
    npm install

### 2.7.2 运行前端项目 ###

> 输入如下：

npm run dev

> 或者如下：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70_pic_center 3]

> 启动完成时，它会自动弹出界面。如果不弹出，访问如下网址即可：

- Local:   http://localhost:80/
    - Network: http://192.168.0.106:80/

## 2.8 访问首页 ##

访问[http://localhost:80/][http_localhost_80]即可

[gitee]: https://gitee.com/y_project/RuoYi-Vue
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/6cdfa90dd4df403fba10a63259fde34d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221119/3d574fc358ce4534a718ac24f1b862b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221119/ddb309ca0fc346f6bc1aa946eb727718.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221119/35bac814b0a048deaf87d7398599e01e.png
[http_localhost_80]: http://localhost:80/