若依框架保姆级入门使用
若依框架保姆级入门使用
前言
目的： 使用若依框架搭建一个简易的SpringBoot+Vue员工管理系统
数据库表：
部门表
id
dept_name
dept_code
dept_phone
dept_manager //部门经理
员工表
id
staff_name
staff_code // 工号
staff_age
staff_sex // 字典
staff_phone
staff_address
staff_img // 员工照片
staff_dept_id // 员工部门id
克隆源码
浏览器搜索若依，选择
RuoYi-Vue
RuoYi-Vue
RuoYi-Vue
重要的事情说三遍，进入gitee
下面这个页面（注意红色框起来的部分）
我们点击右上角克隆
复制git地址
在你的电脑某个文件夹里将项目克隆下来，我这里为了演示直接克隆在桌面了
没有git的直接下载
使用IDEA打开项目，第一阶段就完成了~~~
接下来我们先来运行代码
运行
后端
Maven配置
设置Maven配置，File -> Setting -> Buid,Execution,Development -> Build Tools -> Maven ，将配置文件选择成你的，需要一些Maven知识
配置完成之后，点OK稍等一会让它下载依赖
启动Redis
由于若依使用到了redis，所以在运行之前我们需要运行Redis，只需要运行即可，不需要懂操作
自己网上找教程下载redis后打开
这样就算启动了
配置数据库
打开Navicat，右击localhost -> 新建数据库
数据库新建完成之后，右击数据库 -> 运行SQL文件
运行完成之后，右击staff -> 表，点击刷新
然后来到项目，找ruoyi-admin下面的数据库配置文件application-druid.yml
修改配置：数据库名和链接数据库的账号密码
此时数据库配置完毕~~
启动
点击右上角运行按钮进行启动
终端出现**“若依启动成功”**就说明后端启动成功了~~
接下来，我们去启动前端项目
前端
电脑上得安装node环境
电脑上得安装node环境
电脑上得安装node环境
重要的事情说三遍
打开ruoyi-vue，在克隆下来的项目里面找
终端运行
npm install
等待一会，下载完依赖
然后在终端输入命令
npm run dev
出现下面的页面，前端就算运行成功了，点击地址进入浏览器
出现上面的页面，第二阶段结束~~
接下来开发业务代码
开发
部门表
id
dept_name
dept_code
dept_phone
dept_manager //部门经理
员工表
id
staff_name
staff_code // 工号
staff_age
staff_sex // 字典
staff_phone
staff_address
staff_img // 员工照片
staff_dept_id // 员工部门id
部门管理
建表
输入表名字，就直接叫dept了
点击确定，我们的部门表就生成好了
新建业务模块
右击项目名称，新建模块，选择maven
点击finish
在左边目录看到我们刚才新建的模块
模块创建完成之后，来到根目录的pom.xml文件
dependency
<dependency>
<groupId>com.ruoyi</groupId>
<artifactId>ruoyi-staff</artifactId>
<version>${ruoyi.version}</version>
</dependency>
modules
<modules>
<module>ruoyi-admin</module>
<module>ruoyi-framework</module>
<module>ruoyi-system</module>
<module>ruoyi-quartz</module>
<module>ruoyi-generator</module>
<module>ruoyi-common</module>
<module>ruoyi-staff</module>
</modules>
**
新建菜单
菜单类型选目录
菜单类型选目录
菜单类型选目录
代码生成
通过浏览器登陆进入系统
找到代码生成功能
点击导入，在弹出窗中选择自己刚才创建的表，点击确定
会出现一条数据
点击编辑
设置一些代码生成的规则
上级菜单选择新建的信息管理
点击提交
设置完成之后，生成代码
点击之后会生成代码包，解压后得到下面结构的文件
- main文件里面就是后端代码
- vue文件里面就是前端代码
- xxx.sql是菜单的sql文件
然后来到后端项目
将mian文件复制到src下面，全部进行覆盖
需要对controller层进行一些处理
来到ruoyi-admin
创建目录staff，将ruoyi-staff的controller层里面的代码复制移动到ruoyi-admin/staff
最后删除ruoyi-staff的controller文件夹
来到ruoyi-admin的pom.xml文件
dependency
<dependency>
<groupId>com.ruoyi</groupId>
<artifactId>ruoyi-staff</artifactId>
</dependency>
刷新依赖
此时ruoyi-staff下面的文件会报错
我们将鼠标悬浮在报错的地方，点击添加到common
如果ruoy-admin/controller/staff文件不报错就合适了
这样后端代码就好了，重新启动
前端代码
views目录下新建模块
将前端页面代码复制进来
将前端接口代码复制进来
执行菜单sql文件
效果
职工管理
建表
代码生成
按照前面的步骤把代码复制进项目，重新启动项目
部门设置成下拉框新增
<el-form-item label="部门id" prop="staffDeptId">
<el-select v-model="form.staffDeptId" placeholder="请选择部门">
<el-option
v-for="(item) in deptList"
:key="item.id"
:label="item.deptName"
:value="parseInt(item.id)"
></el-option>
</el-select>
</el-form-item>
getDeptList() {
listDept({
pageNum: 1,
pageSize: 1000
}).then(res => {
this.deptList = res.rows
})
},
sql联查
对于上述数据，如果我们想要在职工列表展示他的部门信息，就需要使用sql将部门信息也联查出来
第一步
/**
* 部门 不是数据库中的字段
*/
private Dept dept;
public Dept getDept() {
return dept;
}
public void setDept(Dept dept) {
this.dept = dept;
}
第二步
<resultMap type="Staff" id="StaffResult">
<result property="id" column="id" />
<result property="staffName" column="staff_name" />
<result property="staffCode" column="staff_code" />
<result property="staffAge" column="staff_age" />
<result property="staffSex" column="staff_sex" />
<result property="staffPhone" column="staff_phone" />
<result property="staffAddress" column="staff_address" />
<result property="staffImg" column="staff_img" />
<result property="staffDeptId" column="staff_dept_id" />
<association property="dept" resultMap="com.ruoyi.staff.mapper.DeptMapper.DeptResult"></association>
</resultMap>
<sql id="selectStaffVo">
select
s.*,
d.*
from staff s left join dept d on s.staff_dept_id = d.id
</sql>
<!-- <sql id="selectStaffVo">-->
<!-- select id, staff_name, staff_code, staff_age, staff_sex, staff_phone, staff_address, staff_img, staff_dept_id from staff-->
<!-- </sql>-->
效果
完结撒花
入门级教程就到此结束了，祝大家成功，后面可以自己扩展