基于springboot+vue的医院预约系统(前后端分离)

简介: 本系统采用springboot+vue整合开发,前端主要使用了Vue框架、Element UI和AJAX技术。项目后端主要使用了springboot等一系列框架和MyBatis以及Maven。这一套技术易于学习、操作和管理。数据库方面则是使用了MySQL数据库以及Navicat数据库管理工具,轻量,易于管理。

技术详情:


系统使用技术:springboot+mybatis


前端技术:ElementUI、ajax、node.js、js、css


开发工具:idea


数据库:mysql5.7


项目介绍:



本系统采用springboot+vue整合开发,前端主要使用了Vue框架、Element UI和AJAX技术。项目后端主要使用了springboot等一系列框架和MyBatis以及Maven。这一套技术易于学习、操作和管理。数据库方面则是使用了MySQL数据库以及Navicat数据库管理工具,轻量,易于管理。


功能概述:



本系统基本实现了项目需求中提出的各项内容,主要实现了前台部分、门诊医生部分、医技医生部分、药房部分和系统管理部分五个子系统,还有一个最高权限的超级管理员,所以分为6个角色。其中前台部分包含了现场挂号、退号、费用查询三个子模块;门诊医生部分包含了病历首页、检验申请、门诊确诊、药物处方、费用查询五个子模块;医技医生部分包含了患者检验、医技管理两个子模块;药房管理部分包含出药和药品管理两个子模块;系统管理部分包含科室管理、医生排班管理、用户管理三个子模块;超级管理员包含以上所有功能。


文档详情:



2021090516343341.png


部分功能:



由于角色较多,每个角色仅截图部分,下面我们来看看相关功能。


系统登录:


20210905163535608.png


超级管理员-系统首页


查看系统首页


20210905163559964.png


超级管理员-门诊管理


查看门诊信息,并进行操作


20210905163614266.png


超级管理员-排班


对各个科室的医生进行排班,当天挂号只能预约当天的医生


20210905163636484.png


超级管理员-用户管理


查看用户信息


20210905163708883.png


前台-挂号


对病人进行挂号操作


20210905163935546.png


医生-诊断


对病人进行诊断


20210905163734289.png


医生-开方


开立处方


20210905163757939.png


药师-出药


药师根据医生开具的药方就行出药


20210905163832960.png


药师-药品管理


对药品进行维护


20210905163917256.png


医技-医技维护


对医技进行操作


20210905164002287.png


后台部分代码:



/*
    * 加载挂号科室的信息*/
    @RequestMapping("/reception/regloaddep")
    public Map<String,Object> loading(){
        Map<String,Object> res=new HashMap<>();
        List<Departoptions> list = loadingS.sitRegDep();
        res.put("deps",list);
        return res;
    }
    /*
    * 获取并加载当前科室和号别的医生(有余号的)
    * */
    @RequestMapping("/reception/selbydoc")
    public Map<String,Object> SelBydoc(@RequestBody RegDepart regDepart){
        Map<String,Object> res=new HashMap<>();
        if(regDepart.getValue()==null||regDepart.getRegType()==null){//如果没有科室或号别就直接返回null
            return res;
        }
        //根据科室和号别获取医生(有问题,需要动态查询挂号信息,目前是静态)
        List<User> list = regService.getByDeReg(regDepart.getValue(), regDepart.getRegType());
        List<SelectK> list2= new ArrayList<>();
        for(User user1:list){
            list2.add(new SelectK(user1.getName(),user1.getId()));
        }
        res.put("doc",list2);
        if(regDepart.getRegType().equals("专家号")){
            res.put("type","50");
        }else if(regDepart.getRegType().equals("普通号")){
            res.put("type","20");
        }else res.put("type","");
        return res;
    }
    /**
     * 获取当前医生的余号,已经是实时的,已经判断了上下午
     * @param regDepart
     * @return
     */
    @PostMapping("/reception/getRgeNumber")
    public int getNumber(@RequestBody RegDepart regDepart){
        String docID=regDepart.getOptDoc();
        return regService.getRegNumber(docID)-regService.getNowNum(docID);
    }


前端部分代码:



<template>
  <div>
    <div style="overflow:hidden">
      <el-form ref="form" :model="form" label-width="80px" style="padding-top: 20px;">
        <div style="float: left; padding-left: 200px;">
          <el-form-item label="*科室名" class="kkk">
            <el-input v-model="form.depName" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="*类别" class="kkk">
            <el-input v-model="form.depType" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="*编号" class="kkk">
            <el-input v-model="form.depNum" placeholder="请输入内容"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <el-button icon="el-icon-search" type="primary" v-on:click="onSubmit()" style="width:120px; height: 50px;" round>搜索</el-button>
      <el-button icon="el-icon-plus" type="success" @click="dialogVisible = true" style="width:120px; height: 50px;" round>新增科室</el-button>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="40%" :append-to-body="true"
        :before-close="handleClose">
        <div style=" margin-left:100px ;">
          <el-form ref="form1" :model="childform" label-width="80px" style="padding-top: 20px;">
            <div style="">
              <el-form-item label="科室名称" class="kkk">
                <el-input v-model="childform.depName" placeholder="请输入内容"></el-input>
              </el-form-item>
              <el-form-item label="科室编号" class="kkk">
                <el-input v-model="childform.depNum" placeholder="请输入内容"></el-input>
              </el-form-item>
            </div>
            <div style="">
              <el-form-item label="科室类型" class="kkk">
                <el-input v-model="childform.depType" placeholder="请输入内容"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" v-on:click="addDepart()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div style="padding-left: 0px; margin-left: 250px; margin-top:20px ;">
      <el-table ref="multipleTable" :data="tableData" height="300" tooltip-effect="dark" border="true"
        :header-cell-style="{'text-align':'center'}"
        style="width: 80%; padding-left: 20px;">
        <el-table-column prop="depNum" label="编号" align="center" width="240">
        </el-table-column>
        <el-table-column prop="depName" label="科室名" align="center" width="240">
          <template slot-scope="scope">
            <span v-if="scope.row.show">
              <el-input size="mini" v-model="scope.row.depName"></el-input>
            </span>
            <span v-else>{{ scope.row.depName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="depType" label="类别" align="center" width="240">
          <template slot-scope="scope">
            <span v-if="scope.row.show">
              <el-input size="mini" v-model="scope.row.depType"></el-input>
            </span>
            <span v-else>{{ scope.row.depType }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="操作" align="center" width="340">
          <template slot-scope="scope">
            <span v-if="!scope.row.show">
              <el-button @click="editRow(scope.row)" type="text" size="small">编辑</el-button>
            </span>
            <span v-else><el-button @click="saveRow(scope.row)" type="text" size="small">保存</el-button></span>
            /<el-button @click="canRow(scope.row)" type="text" size="small">取消</el-button>
            <el-button v-on:click="deleteRow(scope.$index, tableData, scope.row)" type="text" size="small" style="width:100px; height: 50px;" round>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>


以上就是部分功能展示,从整体上来看,本系统功能是十分完整的,而且也与当前的热点话题关联,界面设计简洁大方,交互友好,数据库设计也很合理,规模适中,比较适合毕业设计和课程设计的相关应用。



相关文章
|
13天前
|
存储 安全 Java
Spring Boot 3 集成Spring AOP实现系统日志记录
本文介绍了如何在Spring Boot 3中集成Spring AOP实现系统日志记录功能。通过定义`SysLog`注解和配置相应的AOP切面,可以在方法执行前后自动记录日志信息,包括操作的开始时间、结束时间、请求参数、返回结果、异常信息等,并将这些信息保存到数据库中。此外,还使用了`ThreadLocal`变量来存储每个线程独立的日志数据,确保线程安全。文中还展示了项目实战中的部分代码片段,以及基于Spring Boot 3 + Vue 3构建的快速开发框架的简介与内置功能列表。此框架结合了当前主流技术栈,提供了用户管理、权限控制、接口文档自动生成等多项实用特性。
56 8
|
2月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 Ant Design Pro Vue 创建前端项目,配置动态路由和菜单。通过具体案例,展示了如何快速搭建高效、易维护的项目框架。
145 62
|
1月前
|
存储 JavaScript 前端开发
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统,基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化,提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合,但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI,既能利用Vue的快速开发优势,
130 13
|
1月前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
|
2月前
|
XML Java 数据库连接
SpringBoot集成Flowable:打造强大的工作流管理系统
在企业级应用开发中,工作流管理是一个核心组件,它能够帮助我们定义、执行和管理业务流程。Flowable是一个开源的工作流和业务流程管理(BPM)平台,它提供了强大的工作流引擎和建模工具。结合SpringBoot,我们可以快速构建一个高效、灵活的工作流管理系统。本文将探讨如何将Flowable集成到SpringBoot应用中,并展示其强大的功能。
496 1
|
2月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
171 2
|
2月前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
2月前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
72 0
|
4月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的服装商城管理系统
基于Java+Springboot+Vue开发的服装商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的服装商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
210 2
基于Java+Springboot+Vue开发的服装商城管理系统
|
3月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,包括版本兼容性、安全性、性能调优等方面。
217 1