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

RouYi-Vue前后端分离

1、项目启动

（1）环境准备

JDK >= 1.8 (推荐1.8版本)
Mysql >= 5.7.0 (推荐5.7版本)
Redis >= 3.0
Maven >= 3.0
Node >= 12
1
2
3
4
5

（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: 数据库密码
1
2
3
4
5
6
7
8
9
10
11

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

(♥◠‿◠)ﾉﾞ  若依启动成功   ლ(´ڡ`ლ)ﾞ  
 .-------.       ____     __        
 |  _ _   \      \   \   /  /    
 | ( ' )  |       \  _. /  '       
 |(_ o _) /        _( )_ .'         
 | (_,_).' __  ___(_ o _)'          
 |  |\ \  |  ||   |(_,_)'         
 |  | \ `'   /|   `-'  /           
 |  |  \    /  \      /           
 ''-'   `'-'    `-..-'    
1
2
3
4
5
6
7
8
9
10

在这里插入图片描述

（3）前端运行

# 进入项目目录
cd ruoyi-ui

# 安装依赖
npm install

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

# 本地开发 启动项目
npm run dev
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述

打开浏览器，输入：(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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

/**
 * 返回成功消息
 * 
 * @return 成功消息
 */
public static AjaxResult success()
{
    return AjaxResult.success("操作成功");
}
1
2
3
4
5
6
7
8
9

/**
 * 返回成功消息
 * 
 * @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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述

（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.ruoyigroupId>
           <artifactId>ruoyi-commonartifactId>
       dependency>
dependencies>
1
2
3
4
5
6
7

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

在这里插入图片描述

    <dependency>
        <groupId>com.ruoyigroupId>
        <artifactId>ruoyi-hisartifactId>
    dependency>
1
2
3
4

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

在这里插入图片描述

        <dependency>
            <groupId>com.ruoyigroupId>
            <artifactId>ruoyi-hisartifactId>
            <version>${ruoyi.version}version>
        dependency>
1
2
3
4
5

如果有问题记得刷新一下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(),'');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

在这里插入图片描述

3.2 启动项目

记得开redis

在这里插入图片描述

3.3 更新左侧栏目

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

在这里插入图片描述

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

在这里插入图片描述

3.4 生成代码

下载代码并解压，得到：

在这里插入图片描述

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

所以会创建出目录结构：

+医院管理

科室管理

– 科室

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

4.重新启动

重启前后端

在这里插入图片描述

相关阅读:
Linux内核面试题（3）
采集Nginx日志的几种方式
 java毕业设计计算机组成原理虚拟仿真实验系统mybatis+源码+调试部署+系统+数据库+lw
C Primer Plus(6) 中文版第11章字符串和字符串函数 11.4 自定义输入/输出函数
 C++学习笔记（三）
Vue-extend和VueComponent
【vue3】【element-plus】icon显示不出来
 Maven的总结
 「技术人生」第9篇：如何设定业务目标
 java计算机毕业设计基于springboo+vue的大学生社团管理系统
原文地址：https://blog.csdn.net/hcz666/article/details/126040322