目 录
1可行性分析 3
1.1项目开发背景 3
1.2项目开发意义 3
1.3技术可行性分析 3
1.4操作可行性分析 3
2项目开发计划 5
2.1编写目的 5
2.2项目功能描述 5
3需求分析 6
3.1系统需求分析 6
3.2系统流程图 6
3.3数据描述 6
3.3.1数据流图 6
3.4系统E-R图 7
3.5需求规定 8
3.5.1功能需求 8
3.5.2性能需求 9
3.5.3运行需求 9
3.5.4其他需求 9
4系统概要设计 10
4.1总体设计 10
4.1.1总体设计原理 10
4.1.2系统功能模块设计 10
4.1.3功能分析 11
4.2数据库设计 11
4.2.1数据库概念设计 11
4.2.2数据库逻辑结构设计 12
5详细设计 15
5.1程序设计过程 15
5.1.1登陆界面设计 15
5.1.2病员管理界面设计 16
5.1.3预约管理界面设计 17
5.1.4病员注册界面设计 18
5.1.5网上挂号界面设计 19
5.1.6挂号查询界面设计 20
5.2程序设计效果 20
5.2.1 管理员登录 20
5.2.2病员管理 21
5.1.3预约管理 22
5.2.4病员注册 23
5.2.5网上挂号 24
5.2.6挂号查询 25
5.3程序流程设计 25
6 技术简介 27
7 设计总结及心得体会 28
8 参考文献 29
2项目开发计划
2.1编写目的
此系统在可行性分析的基础上，进一步的说明对医院预约挂号系统的要求，准确的定义出医院预约挂号系统要完成的任务，确定该系统要完成哪些工作，使系统尽可能的满足用户的要求，尽可能的简单方便的运行。
2.2项目功能描述
医院挂号系统主要功能包括：后台管理和前台操作，其中：
后台管理主要包括：管理员登录，病员信息管理、医生信息管理、科室信息管理、预约信息管理、相关业务的查询和系统维护等；
管理员登录：管理员输入自己的姓名和密码，进行登录，登录成功后进入后台管理系统。
用户管理：在数据库中存储有各角色用户的信息信息，当某个角色的信息需要变化是时，可以随时进行信息的变更包括增加、删除、修改等功能，同时数据库中信息相应变化，并保持数据的时效性和完整性。
专家信息管理主要包括：专家信息的增、删、改、查等。查询预约该专家的患者数量及各方面的情况,如预约量超过专家的可以预约的人数后(大于某一自定的数量) 时,会显示该医生可预约号为0，方便患者在进行预约时查看可以有效防止预约成功由于人数原因而不能就诊的情况。
科室信息管理主要包括：科室信息的增、删、改、查等。查询预约该科室的各方面的信息情况,如科室负责人和科室人数，科室介绍等。
预约信息管理主要包括：随时查询患者的预约信息,如患者姓名、病例、所属科室等,而且可及时更新数据库数据。
前台操作主要包括：病员注册、网上挂号、科室查询、挂号查询等；
病员注册：病员想要挂号，需要先进行注册，把数据传入数据库后。通过登录进入挂号页面进行挂号。
网上挂号：病员登录后，选择相应的科室，选择想预约的医生，然后选择预约时间等，点击预约完成网上预约挂号。
科室查询：病员无需登录，点击科室信息，里面会显示许多的科室信息，如果想看特定的科室，可以输入科室名称，进行科室查询。
挂号查询：病员无需登录，点击挂号查询进入查询页面，通过输入自己的身份证进行查询自己已挂号信息和状态等。
3需求分析
3.1系统需求分析
目前，门诊一直是困扰医院提高服务质量的一个复杂环节,特别是医疗水平高、门诊量大的医院,而造成门诊质量难以提高的因素主要有两方面:
一方面集中式挂号,就诊人员流量不均、具有不确定性,有明显的就诊高峰和低谷。高峰期病人挂号排队长,就诊时间长,医生熟人插号现象,环境拥挤混乱,医生问诊时间短、不仔细、态度差。而低谷期,医生无病人看、溜号,医院资源浪费。
另一方面专家号难挂,出现倒号、炒号现象,严重损害病人利益,影响到医院的声誉。而采用网上预约挂号,可有效的解决这一现象,还通过有效的身份验证,杜绝倒、炒专家号的现象,提高医院门诊服务质量,取得良好的社会效益和经济效益。
为了解决这一问题，我们需要一种能够方便快捷的挂号方式来满足各方面的需求，减少排队挂号的痛苦和时间的浪费，而本课题所研究的基于vue和node.js的前后端分离式开发的医院网上挂号预约系统正好是为了解决这一问题而设计的方案，因此，本系统拥有很大的用户需求。

<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div>
        <img src="../assets/yiyuan.jpg" alt="" />
        <span>医院挂号预约系统</span>
      </div>
      <el-button @click="logout">退出</el-button>
    </el-header>
    <!-- 页面主题区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <!-- 侧边栏菜单区域 -->
        <el-menu
          background-color="rgb(25, 82, 129)"
          text-color="#fff"
          active-text-color="#fff"
          :unique-opened="true"
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
          :default-active="activePath"
        >
          <!-- 一级菜单 -->
          <el-submenu
            :index="item.id+''"
            v-for="item in menulist"
            :key="item.id"
          >
            <template slot="title">
              <span>{{ item.authName }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item
              :index="'/' + subItem.path"
              v-for="subItem in item.children"
              :key="subItem.id"
              @click="saveNavState('/' + subItem.path)"
            >
              <template slot="title">
                <span>{{ subItem.authName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 右侧内容主体 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data: function () {
    return {
      menulist: [
        {
          id: 105,
          authName: '病员',
          path: null,
          children: [
            {
              id: 107,
              authName: '病员管理',
              path: 'patient',
              children: []
            }
          ]
        },
        {
          id: 108,
          authName: '医生',
          path: null,
          children: [
            {
              id: 110,
              authName: '医生管理',
              path: 'doctor',
              children: []
            }
          ]
        },
        {
          id: 116,
          authName: '科室',
          path: null,
          children: [
            {
              id: 118,
              authName: '科室管理',
              path: 'department',
              children: []
            }
          ]
        },
        {
          id: 119,
          authName: '预约',
          path: null,
          children: [
            {
              id: 120,
              authName: '预约管理',
              path: 'appointmentManage',
              children: []
            }
          ]
        }

      ],
      // 是否折叠
      isCollapse: false,
      // 保存激活地址
      activePath: ''
    }
  },
  created () {
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: {
    logout () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
    },
    // 保存链接的激活状态
    saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  background-color: rgb(26, 102, 133);
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
  padding-left: 15px;
  div {
    display: flex;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
    }
    span {
      margin-left: 15px;
      color: #fff;
    }
  }
}
.el-aside {
  background-color: rgb(25, 82, 129);
  .el-menu {
    border-right: none;
  }
}
.el-main {
  background-color: #eaedf1;
}
.iconfont {
  margin-right: 10px;
}
.toggle-button {
  background-color: rgb(67, 123, 185);
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.el-footer {
  height: 100px;
}
</style>