RouYi-Vue前后端分离 --- 项目的启动、登录功能是怎么实现的、怎么样创建新模块

最新推荐文章于 2024-04-11 11:17:34 发布
最新推荐文章于 2024-04-11 11:17:34 发布
阅读量1.3k 收藏 8
点赞数 2
分类专栏： SpringBoot 文章标签： vue.js 前端 javascript spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hcz666/article/details/126040322
版权

RouYi-Vue前后端分离

1、项目启动

（1）环境准备

JDK >= 1.8 (推荐1.8版本)
Mysql >= 5.7.0 (推荐5.7版本)
Redis >= 3.0
Maven >= 3.0
Node >= 12

（2）后台运行

  • 启动本地的Redis服务

在这里插入图片描述

在这里插入图片描述

1、前往Gitee下载页面(https://gitee.com/y_project/RuoYi-Vue (opens new window))下载解压到工作目录
2、导入到项目到idea中。
3、创建数据库ry-vue并导入数据脚本ry_2021xxxx.sql，quartz.sql
4、修改数据库连接，编辑resources目录下的application-druid.yml

# 数据源配置
spring:
    datasource:
        type: com.alibaba.druid.pool.DruidDataSource
        driverClassName: com.mysql.cj.jdbc.Driver
        druid:
            # 主库数据源
            master:
                url: 数据库地址
                username: 数据库账号
                password: 数据库密码

5、打开项目运行com.ruoyi.RuoYiApplication.java，出现如下图表示启动成功。

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

在这里插入图片描述

（3）前端运行

# 进入项目目录
cd ruoyi-ui

# 安装依赖
npm install

# 强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
npm install --registry=https://registry.npmmirror.com

# 本地开发 启动项目
npm run dev

在这里插入图片描述

打开浏览器，输入：(http://localhost:81 (opens new window)) 默认账户/密码 admin/admin123）
若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明环境搭建成功

在这里插入图片描述

2、登录实现

（1）生成验证码

1、前端代码实现
  • 基本思路

后端生成一个表达式：6+2=8

1+1=？@2

1+1=？转成图片，传到前端展示

8 存入到Redis中

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 代码实现

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

访问地址：http://localhost:81/dev-api/captchaImage

Vue获取图片请求的是前端，再反向代理映射到后端，解决跨域问题

/dev-api 被替换成 ’ ’ ，再映射到：http://localhost:8080，变成：http://localhost:8080/captchaImage

在这里插入图片描述

2、后端代码实现

在这里插入图片描述

/**
 * 验证码操作处理
 * 
 * @author ruoyi
 */
@RestController
public class CaptchaController
{
    @Resource(name = "captchaProducer")
    private Producer captchaProducer;

    @Resource(name = "captchaProducerMath")
    private Producer captchaProducerMath;

    @Autowired
    private RedisCache redisCache;
    
    @Autowired
    private ISysConfigService configService;
    /**
     * 生成验证码
     */
    @GetMapping("/captchaImage")
    public AjaxResult getCode(HttpServletResponse response) throws IOException
    {
        AjaxResult ajax = AjaxResult.success();
        boolean captchaEnabled = configService.selectCaptchaEnabled();
        ajax.put("captchaEnabled", captchaEnabled);
        if (!captchaEnabled)
        {
            return ajax;
        }

        // 保存验证码信息
        String uuid = IdUtils.simpleUUID();
        String verifyKey = CacheConstants.CAPTCHA_CODE_KEY + uuid;

        String capStr = null, code = null;
        BufferedImage image = null;

        // 生成验证码
        String captchaType = RuoYiConfig.getCaptchaType();
        if ("math".equals(captchaType))
        {
            String capText = captchaProducerMath.createText();
            capStr = capText.substring(0, capText.lastIndexOf("@"));
            code = capText.substring(capText.lastIndexOf("@") + 1);
            image = captchaProducerMath.createImage(capStr);
        }
        else if ("char".equals(captchaType))
        {
            capStr = code = captchaProducer.createText();
            image = captchaProducer.createImage(capStr);
        }

        redisCache.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);
        // 转换流信息写出
        FastByteArrayOutputStream os = new FastByteArrayOutputStream();
        try
        {
            ImageIO.write(image, "jpg", os);
        }
        catch (IOException e)
        {
            return AjaxResult.error(e.getMessage());
        }

        ajax.put("uuid", uuid);
        ajax.put("img", Base64.encode(os.toByteArray()));
        return ajax;
    }
}

/**
 * 返回成功消息
 * 
 * @return 成功消息
 */
public static AjaxResult success()
{
    return AjaxResult.success("操作成功");
}

/**
 * 返回成功消息
 * 
 * @param msg 返回内容
 * @return 成功消息
 */
public static AjaxResult success(String msg)
{
    return AjaxResult.success(msg, null);
}

/**
 * 返回成功消息
 * 
 * @param msg 返回内容
 * @param data 数据对象
 * @return 成功消息
 */
public static AjaxResult success(String msg, Object data)
{
    return new AjaxResult(HttpStatus.SUCCESS, msg, data);
}

在这里插入图片描述

（2）用户登录

1、前端代码实现

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2、后端代码实现

http://localhost:81/dev-api/login

在这里插入图片描述

在这里插入图片描述

  • 校验验证码

  • 校验用户名和密码

  • 生成Token

（3）获取用户角色和权限

1、前端代码实现

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2、后端代码实现

在这里插入图片描述

3、创建新模块

1.创建自己的模块

在这里插入图片描述

选择maven项目

我创建的是 com.ruoyi公司 出品的ruoyi-his项目

在这里插入图片描述

2.更新maven依赖

2.1 因为我的ruoyi-his模块 用到了ruoyi-common 所以：

在这里插入图片描述

<dependencies>
      <!-- 通用工具-->
       <dependency>
           <groupId>com.ruoyi</groupId>
           <artifactId>ruoyi-common</artifactId>
       </dependency>
</dependencies>

2.2 因为ruoyi-admin是启动模块，用到了我自己的ruoyi-his项目，所以：

在这里插入图片描述

    <dependency>
        <groupId>com.ruoyi</groupId>
        <artifactId>ruoyi-his</artifactId>
    </dependency>

2.3 根目录下的pom.xml：
< modules> 自动加入了我的ruoyi-his模块

在这里插入图片描述

        <dependency>
            <groupId>com.ruoyi</groupId>
            <artifactId>ruoyi-his</artifactId>
            <version>${ruoyi.version}</version>
        </dependency>

如果有问题 记得刷新一下maven

3.自动生成代码

3.1 数据库建设好

若依自带的sql文件在后端文件夹里面，导入即可

HIS项目涉及的sql文件是他们培训机构设计的，在下面提供了

目前他们只提供了一个科室表，就是一个单表

create table his_dept(
    dept_id bigint(20) primary key  NOT NULL AUTO_INCREMENT COMMENT '科室ID',
    dept_name varchar(50) NOT NULL COMMENT '科室名称',
    dept_code varchar(64) NOT NULL COMMENT '科室编码',
    dept_num bigint DEFAULT 0 COMMENT '当前挂号量',
    dept_leader varchar(64) DEFAULT '' COMMENT '负责人',
    dept_phone varchar(11) DEFAULT '' COMMENT '手机号码',
    `status` char(1) NOT NULL COMMENT '状态（0正常 1停用）',
    `create_by` varchar(64) DEFAULT '' COMMENT '创建者',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  `update_by` varchar(64) DEFAULT '' COMMENT '更新者',
  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
  `remark` varchar(500) DEFAULT NULL COMMENT '备注'
) comment '科室表';
 
insert into his_dept values(1,'内科','HIS-NK',1,'北京尚学堂','18612345678',0,'admin',now(),'admin',now(),'');
insert into his_dept values(2,'外科','HIS-WK',1,'北京尚学堂','18612345678',0,'admin',now(),'admin',now(),'');
insert into his_dept values(3,'骨科','HIS-GK',1,'北京尚学堂','18612345678',0,'admin',now(),'admin',now(),'');
insert into his_dept values(4,'儿科','HIS-EK',1,'北京尚学堂','18612345678',0,'admin',now(),'admin',now(),'');
insert into his_dept values(5,'妇科','HIS-FK',1,'北京尚学堂','18612345678',0,'admin',now(),'admin',now(),'');
insert into his_dept values(6,'泌尿外科','HIS-NK',1,'北京尚学堂','18612345678',0,'admin',now(),'admin',now(),'');
insert into his_dept values(7,'心内科','HIS-XK',1,'北京尚学堂','18612345678',0,'admin',now(),'admin',now(),'');
insert into his_dept values(8,'血液科','HIS-XYK',1,'北京尚学堂','18612345678',0,'admin',now(),'admin',now(),'');
insert into his_dept values(9,'放射科','HIS-FSK',1,'北京尚学堂','18612345678',0,'admin',now(),'admin',now(),'');
insert into his_dept values(10,'化验科','HIS-HSK',1,'北京尚学堂','18612345678',0,'admin',now(),'admin',now(),'');
insert into his_dept values(11,'精神科','HIS-JSK',1,'北京尚学堂','18612345678',0,'admin',now(),'admin',now(),'');

选中的his_dept是自己创建的，其他表是若依框架自带的

在这里插入图片描述

3.2 启动项目

记得开redis

在这里插入图片描述

在这里插入图片描述

3.3 更新左侧栏目

创建目录【医院管理】 路由地址：hospital

在这里插入图片描述

创建菜单【科室管理】 路由地址：dept

在这里插入图片描述

3.4 生成代码

下载代码并解压，得到：

在这里插入图片描述

【生成功能名】如果是‘科室’，他会创建一个menu名字叫’科室’ parent_id看自己指定的上级菜单

所以 会创建出目录结构：

+医院管理

  • 科室管理

    – 科室

这是不对的 所以不运行sql 具体看sql语句就明白了。

在这里插入图片描述

main是生成的后端代码 也是复制到src目录下

在这里插入图片描述

vue文件夹是生成的前端代码 复制到ui项目的src目录下

在这里插入图片描述

4.重新启动

重启前后端

在这里插入图片描述

@烟雨倾城ゝ
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
如何基于若依开发自己的独立模块
hutu1234567的博客
07-09 3406
有的人在基于若依开发自己的应用时，可能希望自己的应用使用自己的包名，同时保留若依的结构与包名，以便后续若依的升级。 两天来的实验，趟了不少的坑，以下是特别需要注意的事项： 由于自己应用独立于若依，其pom.xml不应继承若依父pom，但需要依赖用到的组件，如下： <dependency> <groupId>com.ruoyi</groupId> <artifactId>ruoyi-common</artifactId>
若依前后端分离项目部署文档（完整版）
04-07
第一部分：部署linux + nginx 第二部分：部署Windows+tomcat 第三部分：调用第三方api的跨域问题处理。 以及常见的部署后页面显示404 的问题处理。...高效率开发，使用代码生成器可以一键生成前后端代码。）
若依vue版本--添加自己的子模块项目
mind_me的博客
08-13 894
今天也是继续学习若依的vue版本使用，既然选择使用这个框架，那当然是要通过若依添加自己的模块。创建模块都会吧？模块名以现有的模块为准，都是用ruoyi为前缀，然后就是packaName，注意一下。下一步选择spring版本选2.7.x的就行。不要选3.x.x的。尽量选2版本的。依赖一个都不要勾选，给自己的模块一个纯净的依赖环境，后续根据需要手动在pom文件添加依赖即可。
若依管理系统搭建教程，ruoyi-vue环境搭建
m0_61634551的博客
01-21 1669
清理 node_modules 重新安装，试了不管用，最后直接使用下面的命令安装vue-cli-service解决了。在开发react-native的时候，不要使用cnpm，cnpm安装的模块路径比较奇怪，packager不能正常识别。所以，为了方便开发，我们最好是直接永久使用淘宝的镜像源，直接命令行的设置。打包Web工程，生成war/jar包文件。在执行运行项目命令之前，先运行这个命令。3.2设置参数，解决报错。
若依框架（前后端分离）——代码生成器使用详细教程（24年新版）
最新发布
weixin_45715650的博客
04-11 3655
在使用若依框架系统自带的代码生成器时，试了很多教程多多少少都运行不成功，花了大量的功夫找bug，可能是若依版本的限制，也可能是其他因素，所以在此写下这篇详细的搭建教程。一方面是为了帮助大家，一方面也是形成笔记，若是自己忘了，可以回来翻阅，更快上手。↓ ↓ ↓ 正文开始 ↓ ↓ ↓。
若依代码生成,自定义的模块,添加公开接口
u012765781的博客
03-01 4885
效果 步骤： 1：项目中新建模块，并解决项目依赖的关系 新建一个名为ruoyi-student的模块： 我们要在 RuoYi 整个项目下的pom.xml中引入刚刚新建的模块：（加入了才能识别出模块） 还需要在ruoyi-admin这个模块的pom.xml中引入刚刚新建的模块。（加入了才能访问路由） 由于自动生成的代码会用到ruoyi-common中的内容，我们需要将ruoyi-common引入到我们新建的模块中：（不做这个后面代码会报错，也会自动引入） 2：若依系统中新建一个目录 - ..
全面解析若依框架（springboot-vue前后分离--后端部分）
热门推荐
qq_46624276的博客
12-16 2万+
自定义隐藏列通过excludeFields数组来进行控制，在List getFields获取字段信息的时候将通过excludeFields来进行字段排除，使用hideColumn(“userId”)方法来隐藏，使用方法如下。
若依框架实战（前后端分离版）
weixin_62028569的博客
07-16 2666
校园请销假管理系统是一种使用信息化技术来管理学生请假和销假的系统。该系统可以提供学生请假的申请、审批以及销假的记录和统计功能，以提高请销假的效率和准确性，同时减轻相关工作人员的工作负担。
若依：IDEA下（若依前后端分离版Vue3）添加新模块
weixin_46178457的博客
02-04 1484
IDEA：若依（前后端分离）添加新模块
若依前后端分离框架学习-4：创建模块
liuzixin_lzx的博客
01-27 1万+
    前面三章，介绍了下若依前后端分离框架的登录过程中前端和后端的代码流程。本章，我们学习下如何创建自己的业务模块。 第一步，右键后端项目名称，新建模块 第二步，选择Maven项目 第三步，填写项目名称 第四步，填写模块名称，这里默认为xxx，并且下面的路径都只是到…\RuoYi-Vue， 我们可以直接改成…\RuoyiVue\ruoyi-xxx，这样模块名称也会跟着改变。     然后我们修改ruoyi-xxx下的p
若依Vue入门——项目运行篇
渣渣的博客
10-17 4665
讲解一下 若依前后端分离版(Ruoyi-Vue) 的使用过程吧。首先是如何在 IDEA 里面把若依的后端 Springboot 和 前端的 Vue 项目跑起来。 感觉这一篇文章，写的够小白了，步骤很细。如果有什么不明白的可以评论。
若依框架使用
cklzf的博客
06-08 1185
ruoyi-ui
vue3.0 vue-quill-editor.rar
09-19
vue3.0+vue-quill-editor+element富文本编辑引入可直接使用 可上传图片调整图片大小
RuoYi-Vue-Oracle（RuoYi）：基于SpringBoot的官方仓库，Spring Security，JWT，Vue＆Element的前替代分离权限管理系统
02-21
本仓库为RuoYi-Vue的Oracle版本，保持同步更新。 配套前端代码地址 。 前端采用Vue，Element UI。 初步采用Spring Boot，Spring Security，Redis＆Jwt。 权限认证使用Jwt，支持多终端认证系统。 支持加载动态权限...
本项目基于 RuoYi-Vue-Plus 进行二次开发扩展Flowable工作流功能，支持在线表单设计和丰富的工作流程设计能力
01-06
本项目基于 RuoYi-Vue-Plus 进行二次开发扩展Flowable工作流功能，支持在线表单设计和丰富的工作流程设计能力。本项目主要针对Flowable工作流场景开发，脚手架功能同步更新 RuoYi-Vue-Plus 项目。采用MIT开源协议，...
minio免费文件管理器，windows版本，若依RuoYi-Vue-Plus框架使用，有需要的可以下载，因为官网下载特别慢。
09-18
minio免费文件管理器，windows版本，若依RuoYi-Vue-Plus框架使用，有需要的可以下载，因为官网下载特别慢。
【若依框架学习】day1-启动项目
ly甲烷的博客
07-01 491
VSCode 打开文件夹 ruoyi-ui。更改package.json 中。若依开源框架，前后端分离项目，因为在此系统上禁止运行脚本。安装VSCode 设置以。
乐优商城服务器部署_大数据时代，独立部署的商城系统具有哪些优势？
weixin_39854288的博客
12-16 108
独立部署是把一个可部署软件包安装到一个指定IT环境上并让其按预定流程提供服务的过程。现如今，越来越多的商家开始搭建网上商城系统，从而为自己积攒多年的客户群体提供更为便捷的购物模式，让购物变得更加智能化。独立部署的商城系统具有哪些优势？就目前而言，商城系统搭建一般有两种模式，一种就是SaaS部署的模式，另一种就是独立部署的模式。而我们接下来主要聊聊独立部署的商城系统有哪些优势及注意事项。一、什么是独...
若依开源项目配置——Vue前后端分离版（一）
会者定离，一期一祈
09-10 3221
1.准备前后端项目 前端项目是vue，路径：https://gitee.com/y_project/RuoYi-Vue 后端是微服务版本，路径：https://gitee.com/y_project/RuoYi-Cloud 将前后端的项目分别下载好。 后端直接新建项目，选择Version Controll，然后直接从git中clone一份即可。 2.准备前端运行环境 准备前端数据库 本地新建ry-vue数据库，导入上图的sql语句（库名可以随便起，我用的是默认的数据库名称） 导入sql语句之后，请将前
javaee rouyi-vue框架项目
08-26
JavaEE Ruoyi-Vue框架项目是一个基于JavaEE和Vue.js的开发框架。它包含了一系列的子项目，如ruoyi-gateway, ruoyi-auth, ruoyi-system, ruoyi-gen, ruoyi-job等。 这些项目提供了一套完整的解决方案，用于构建企业级...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@烟雨倾城ゝ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值