手把手教你学若依！仅用18张图片

本篇文章首尾呼应，建议从头开始看。后续有时间源码会上传GitHub！

1.前言

手把手教你如何搭建项目，搭建项目的步骤以及流程。

本篇文章以若依脚手架来进行实践。首先在官网上下载若依springboot前后分离项目，并且启动运行前后分离项目。

注意：前端启动项目需要下载依赖，后端启动项目需要修改数据库和redis。项目里面有两张sql表，导入到Navicat即可。

接下来我们将进入正题！！！

在开发当中，第一件事就算根据UI设计师的设计图片来进行数据库的定制，定制数据库是整个开发首当其冲最为重要一层，就好比基建的地基一样，一旦没有建设好，重蹈覆彻的时间、精力成本将会大大的增加。在项目初期务必和团队协商完成数据库的设计!

#创建his_dept表，并导入数据
CREATE TABLE `his_dept` (
  `dept_id` bigint 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 '备注',
  `dept_sort` int DEFAULT NULL,
  PRIMARY KEY (`dept_id`)
) ENGINE=InnoDB AUTO_INCREMENT=24 DEFAULT CHARSET=utf8 COMMENT='科室表';

#提前导入相关数据，给后续工作做准备
insert into his_dept (dept_id,dept_name,dept_code,dept_num,dept_leader,dept_phone,`status`,create_by,create_time,update_by,update_time,remark)
values (10,'盖亚','HIS-NK',1,'惠城院','15812668818',0,'詹詹',now(),'admin',now(),'');
insert into his_dept (dept_id,dept_name,dept_code,dept_num,dept_leader,dept_phone,`status`,create_by,create_time,update_by,update_time,remark)
values (11,'戴拿','HIS-NK',1,'惠城院','15812668818',0,'詹詹',now(),'admin',now(),'');
insert into his_dept (dept_id,dept_name,dept_code,dept_num,dept_leader,dept_phone,`status`,create_by,create_time,update_by,update_time,remark)
values (12,'泰罗','HIS-NK',1,'惠城院','15812668818',0,'詹詹',now(),'admin',now(),'');
insert into his_dept (dept_id,dept_name,dept_code,dept_num,dept_leader,dept_phone,`status`,create_by,create_time,update_by,update_time,remark)
values (13,'赛罗','HIS-NK',1,'惠城院','15812668818',0,'詹詹',now(),'admin',now(),'');
insert into his_dept (dept_id,dept_name,dept_code,dept_num,dept_leader,dept_phone,`status`,create_by,create_time,update_by,update_time,remark)
values (14,'雷欧','HIS-NK',1,'惠城院','15812668818',0,'詹詹',now(),'admin',now(),'');
insert into his_dept (dept_id,dept_name,dept_code,dept_num,dept_leader,dept_phone,`status`,create_by,create_time,update_by,update_time,remark)
values (19,'赛罗','HIS-NK',1,'惠城院','15812668818',0,'詹詹',now(),'admin',now(),'');
insert into his_dept (dept_id,dept_name,dept_code,dept_num,dept_leader,dept_phone,`status`,create_by,create_time,update_by,update_time,remark)

2.设计页面

这是我们接下来要实现的成品图，整一个开发都会围腰这个页面来进行，逐一实现以下的功能。

在若依脚手架里面已经就可以进行简单的页面设计，点击→系统管理→菜单管理 就可以进行设计，并且设置各项路由。

点击左上角的 “新增” 就可以了。首先我们先新增个主目录再到分支。由图片来演示！

这下我们的系统就会有增删改查这些按钮了，只需要后期通过我们的后端代码来呈现页面。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xaYdMMTJ-1626893440343)(D:\JS\typora笔记\Java\图片存储\若依9.png)]

如果细心的读者就可以清楚看出，设计的页面和若依脚手架本身写好的岗位管理十分的相似，所以我们我们接下来前后端代码实现都参考岗位管理的代码去做参考，去实现。

3.实现查询功能

1. package com.ruoyi.project.his.domain;

   首先需要创建和数据库对应的实体类

2. package com.ruoyi.project.his.mapper;

   创建mapper实现类

有了mapper 当然mybatis的配置文件一定也不能少

在 resources.mybatis.hisHisDeptMapper.xml创建文件

3. package com.ruoyi.project.his.service;

package com.ruoyi.project.his.service.impl;

4. package com.ruoyi.project.his.controller;

将后端有关于查询的方法全部都实现了，接下来实现前端页面的设计。

5. 前端页面若依早就给我们写好了，只需要根据我们自身的需求对该页面进行扩展即可，我们将参考前端项目的“ruoyi-ui.src.views.system.post.index.vue”页面，对该页面进行修改。
   还需要在src.api中创建his目录和dept.js文件。完整路径src.api.dept.js，作用就是用于封装，在.vue文件中导入即可使用。

第一个修改处

第二个修改处

第三个修改处

第一个添加处

全局：将dept/index.vue文件中的内容进行修改，将所有的有关select查询的post都改成dept。

script标签里所有内容除外

例如：postName→deptName，岗位→产品。即可

这样我们就完成了页面，并且实现了查询的功能！！！

4.实现新增功能

接下来我们只需要做后端即可，后端无疑就四个文件，我们逐一去添加

1. resources.mybatis.his.HisDeptMapper.xml进行添加

	<insert id="insertDept" parameterType="HisDept" keyProperty="deptId" useGeneratedKeys="true">
		insert into his_dept(
		<if test="deptId != null and deptId != 0">dept_id,</if>
		<if test="deptCode != null and deptCode != ''">dept_code,</if>
		<if test="deptName != null and deptName != ''">dept_name,</if>
		<if test="deptNum != null and deptNum != 0">dept_num,</if>
		<if test="deptLeader != null and deptLeader != ''">dept_leader,</if>
		<if test="deptPhone != null and deptPhone != ''">dept_phone,</if>
		<if test="deptSort != null and deptSort != 0">dept_sort,</if>
		<if test="status != null and status != ''">status,</if>
		<if test="remark != null and remark != ''">remark,</if>
		<if test="createBy != null and createBy != ''">create_by,</if>
		create_time
		)values(
		<if test="deptId != null and deptId != 0">#{deptId},</if>
		<if test="deptCode != null and deptCode != ''">#{deptCode},</if>
		<if test="deptName != null and deptName != ''">#{deptName},</if>
		<if test="deptNum != null and deptNum != 0">#{deptNum},</if>
		<if test="deptLeader != null and deptLeader != ''">#{deptLeader},</if>
		<if test="deptPhone != null and deptPhone != ''">#{deptPhone},</if>
		<if test="deptSort != null and deptSort != 0">#{deptSort},</if>
		<if test="status != null and status != ''">#{status},</if>
		<if test="remark != null and remark != ''">#{remark},</if>
		<if test="createBy != null and createBy != ''">#{createBy},</if>
		sysdate()
		)
	</insert>

2. 在业务层service.IHisDeptService接口添加

    int insertDept(HisDept hisDept);

3. 在实现类中实现未实现方法，service.impl.HisDeptServiceImpl类中添加以下方法

    @Override
    public int insertDept(HisDept hisDept) {
        return hisDeptMapper.insertDept(hisDept);
    }

4. 控制器controller.HisDeptController类

    @PreAuthorize("@ss.hasPermi('his:dept:add')")
    @Log(title = "产品管理", businessType = BusinessType.INSERT)
    @PostMapping
    public AjaxResult add(@Validated @RequestBody HisDept hisDept){
        hisDept.setCreateBy(SecurityUtils.getUsername());
        return toAjax(hisDeptService.insertDept(hisDept));
    }

就是这么简单，新增功能就实现了。

5. 但前端还没修改好，由于点击新增后会弹出一个窗口，填写信息，我们需要将填写的信息进行自定义。

根据图片来进行修改即可

5.实现删除功能

1. 添加mybatis.his.HisDeptMapper.xml内容

    <delete id="deleteByIds" parameterType="Long">
        delete from his_dept where dept_id in
        <foreach collection="array" item="deptId" open="(" separator="," close=")">
            #{deptId}
        </foreach>
    </delete>

2. service.IHisDeptService

    int deleteDeptByIds(Long [] ids);

3. service.impl.HisDeptServiceImpl

    @Override
    public int deleteDeptByIds(Long[] ids) {
        return hisDeptMapper.deleteByIds(ids);
    }

4. controller.HisDeptController

    @PreAuthorize("@ss.hasPermi('his:dept:remove')")
    @Log(title = "产品管理", businessType = BusinessType.DELETE)
    @DeleteMapping("/{deptIds}")
    public AjaxResult remove(@PathVariable Long[] deptIds) {
        return toAjax(hisDeptService.deleteDeptByIds(deptIds));
    }

5. 修改页面删除按钮

6.实现导出功能

1. controller.HisDeptController添加内容

@Log(title = "产品管理", businessType = BusinessType.EXPORT)
//如果没有创建权限则注释即可
@PreAuthorize("@ss.hasPermi('his:dept:export')")
@GetMapping("/export")
public AjaxResult export(HisDept hisDept)
{
    List<HisDept> list = hisDeptService.selectDeptList(hisDept);
    ExcelUtil<HisDept> util = new ExcelUtil<HisDept>(HisDept.class);
    return util.exportExcel(list, "产品数据");
}

2. 需要用导出功能时，必须在实体类中添加@Excel注解，并且如果是数字，则需要cellType进行处理；String类型将不需要处理

3. 修改页面

7.实现修改功能

1. 添加mybatis.his.HisDeptMapper.xml内容

   	<select id="selectDeptById" parameterType="Long" resultMap="HisDeptResult">
   		<include refid="selectDeptVo"/>
   		where dept_id = #{deptId}
   	</select>
   
   	<update id="updateDept" parameterType="HisDept">
   		update his_dept
   		<set>
   			<if test="deptId != null and deptId != 0">dept_id=#{deptId},</if>
   			<if test="deptCode != null and deptCode != ''">dept_code=#{deptCode},</if>
   			<if test="deptName != null and deptName != ''">dept_name=#{deptName},</if>
   			<if test="deptNum != null and deptNum != 0">dept_num=#{deptNum},</if>
   			<if test="deptLeader != null and deptLeader != ''">dept_leader=#{deptLeader},</if>
   			<if test="deptPhone != null and deptPhone != ''">dept_phone=#{deptPhone},</if>
   			<if test="deptSort != null and deptSort != 0">dept_sort=#{deptSort},</if>
   			<if test="status != null and status != ''">status=#{status},</if>
   			<if test="remark != null and remark != ''">remark=#{remark},</if>
   			<if test="updateBy != null and updateBy != ''">update_by=#{updateBy},</if>
   			update_time = sysdate()
   		</set>
   		where dept_id = #{deptId}
   	</update>
   

2. service.IHisDeptService

//根据主键查询
HisDept selectDeptById(Long id);
//修改
int updateDept(HisDept hisDept);

3. service.impl.HisDeptServiceImpl

    @Override
    public HisDept selectDeptById(Long id) {
        return hisDeptMapper.selectDeptById(id);
    }

    @Override
    public int updateDept(HisDept hisDept) {
        return hisDeptMapper.updateDept(hisDept);
    }

4. controller.HisDeptController

    @PreAuthorize("@ss.hasPermi('his:dept:edit')")
    @Log(title = "产品管理", businessType = BusinessType.UPDATE)
    @PutMapping
    public AjaxResult edit(@Validated @RequestBody HisDept dept)
    {
        dept.setUpdateBy(SecurityUtils.getUsername());
        return toAjax(hisDeptService.updateDept(dept));
    }

    @PreAuthorize("@ss.hasPermi('his:dept:query')")
    @GetMapping(value = "/{deptId}")
    public AjaxResult getInfo(@PathVariable Long deptId)
    {
        return AjaxResult.success(hisDeptService.selectDeptById(deptId));
    }

5. 由于新增和修改是同一字段，稍微修改即可，这里将不做演示！！！

代码有空会上传github的