什么叫界面设计_山东今天重大新闻_315影视行业_谷歌推广app

HIS（Hospital Information System，医院信息系统）系统的业务说明，并展示如何使用单例模式在Spring Boot中实现。

HIS系统业务说明

HIS系统是一个全面管理医院内部各种信息的系统，包括但不限于患者信息管理、医生信息管理、科室管理、预约挂号、诊疗记录、药品管理、费用结算等。以下是HIS系统的一些关键业务功能：

患者信息管理：录入、查询、修改患者的个人信息。
医生信息管理：录入、查询、修改医生的基本信息及排班情况。
科室管理：管理医院内的各个科室及其相关信息。
预约挂号：患者可以通过系统进行在线预约挂号。
诊疗记录：记录患者的就诊过程、诊断结果、治疗方案等。
药品管理：管理医院内的药品库存、采购、消耗等情况。
费用结算：计算并管理患者的医疗费用。

以患者信息管理为例前后端功能实现

后端

下面详细介绍如何在Spring Boot中实现患者信息管理的功能。我们将涵盖以下几个方面：

实体类定义：定义患者信息的数据模型。
数据访问层：使用Spring Data JPA来操作数据库。
服务层：封装业务逻辑。
控制器层：处理HTTP请求。
数据库配置：配置Spring Boot连接数据库。

1. 实体类定义

首先，定义一个Patient实体类来表示患者信息。

java

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;@Entity
public class Patient {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;private String name;private String gender;private Integer age;private String address;private String phoneNumber;// Getters and Setterspublic Long getId() {return id;}public void setId(Long id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getGender() {return gender;}public void setGender(String gender) {this.gender = gender;}public Integer getAge() {return age;}public void setAge(Integer age) {this.age = age;}public String getAddress() {return address;}public void setAddress(String address) {this.address = address;}public String getPhoneNumber() {return phoneNumber;}public void setPhoneNumber(String phoneNumber) {this.phoneNumber = phoneNumber;}
}

2. 数据访问层

使用Spring Data JPA来简化数据库操作。创建一个PatientRepository接口。

java

import org.springframework.data.jpa.repository.JpaRepository;public interface PatientRepository extends JpaRepository<Patient, Long> {// 可以在这里添加自定义查询方法
}

3. 服务层

创建一个PatientService类来封装业务逻辑。

java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;
import java.util.Optional;@Service
public class PatientService {@Autowiredprivate PatientRepository patientRepository;public List<Patient> getAllPatients() {return patientRepository.findAll();}public Optional<Patient> getPatientById(Long id) {return patientRepository.findById(id);}public Patient savePatient(Patient patient) {return patientRepository.save(patient);}public void deletePatient(Long id) {patientRepository.deleteById(id);}public Patient updatePatient(Long id, Patient updatedPatient) {return patientRepository.findById(id).map(patient -> {patient.setName(updatedPatient.getName());patient.setGender(updatedPatient.getGender());patient.setAge(updatedPatient.getAge());patient.setAddress(updatedPatient.getAddress());patient.setPhoneNumber(updatedPatient.getPhoneNumber());return patientRepository.save(patient);}).orElseGet(() -> {updatedPatient.setId(id);return patientRepository.save(updatedPatient);});}
}

4. 控制器层

创建一个PatientController类来处理HTTP请求。

java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;import java.util.List;
import java.util.Optional;@RestController
@RequestMapping("/api/patients")
public class PatientController {@Autowiredprivate PatientService patientService;@GetMappingpublic List<Patient> getAllPatients() {return patientService.getAllPatients();}@GetMapping("/{id}")public ResponseEntity<Patient> getPatientById(@PathVariable Long id) {Optional<Patient> patient = patientService.getPatientById(id);if (patient.isPresent()) {return ResponseEntity.ok(patient.get());} else {return ResponseEntity.notFound().build();}}@PostMappingpublic Patient createPatient(@RequestBody Patient patient) {return patientService.savePatient(patient);}@PutMapping("/{id}")public ResponseEntity<Patient> updatePatient(@PathVariable Long id, @RequestBody Patient patientDetails) {Patient updatedPatient = patientService.updatePatient(id, patientDetails);return ResponseEntity.ok(updatedPatient);}@DeleteMapping("/{id}")public ResponseEntity<Void> deletePatient(@PathVariable Long id) {patientService.deletePatient(id);return ResponseEntity.noContent().build();}
}

5. 数据库配置

在application.properties或application.yml中配置数据库连接信息。

application.properties

properties

spring.datasource.url=jdbc:mysql://localhost:3306/his_db?useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5Dialect

application.yml

yaml

spring:datasource:url: jdbc:mysql://localhost:3306/his_db?useSSL=false&serverTimezone=UTCusername: rootpassword: rootjpa:hibernate:ddl-auto: updateshow-sql: trueproperties:hibernate:dialect: org.hibernate.dialect.MySQL5Dialect

6. 初始化数据库

确保您的MySQL数据库中有名为his_db的数据库。如果没有，可以手动创建：

sql

CREATE DATABASE his_db;

7. 运行应用程序

启动Spring Boot应用程序。

java

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class HisSystemApplication {public static void main(String[] args) {SpringApplication.run(HisSystemApplication.class, args);}
}

8、测试

启动应用程序后，您可以使用Postman或其他工具来测试API：

获取所有患者：GET请求 http://localhost:8080/api/patients
获取单个患者：GET请求 http://localhost:8080/api/patients/1
添加患者：POST请求 http://localhost:8080/api/patients，请求体为JSON格式的患者信息
更新患者：PUT请求 http://localhost:8080/api/patients/1，请求体为JSON格式的更新后的患者信息
删除患者：DELETE请求 http://localhost:8080/api/patients/1

前端

接下来我们将介绍如何在前端使用Vue.js实现患者信息管理的功能。我们将创建一个简单的Vue.js应用，与之前实现的Spring Boot后端进行交互。

1. 创建 Vue.js 项目

首先，确保您已经安装了Node.js和npm。然后使用Vue CLI创建一个新的Vue项目。

bash

npm install -g @vue/cli
vue create his-frontend
cd his-frontend

在创建过程中，可以选择默认配置或者手动选择特性。

2. 安装 Axios

Axios 是一个基于 Promise 的 HTTP 库，用于浏览器和 Node.js 中发起 HTTP 请求。我们将使用它来与后端 API 进行通信。

bash

npm install axios

3. 创建组件

我们将创建几个组件来管理患者信息：PatientList.vue、PatientForm.vue 和 App.vue。

App.vue

这是主组件，负责路由和整体布局。

vue

<template><div id="app"><router-view></router-view></div>
</template><script>
export default {name: 'App'
}
</script><style>
/* Add some basic styles */
body {font-family: Arial, sans-serif;
}.container {max-width: 800px;margin: 0 auto;padding: 20px;
}button {margin-right: 10px;
}
</style>

PatientList.vue

显示患者列表，并提供添加新患者的按钮。

vue

<template><div class="container"><h1>Patient List</h1><button @click="showForm = true">Add New Patient</button><table v-if="patients.length" border="1"><thead><tr><th>ID</th><th>Name</th><th>Gender</th><th>Age</th><th>Address</th><th>Phone Number</th><th>Actions</th></tr></thead><tbody><tr v-for="patient in patients" :key="patient.id"><td>{{ patient.id }}</td><td>{{ patient.name }}</td><td>{{ patient.gender }}</td><td>{{ patient.age }}</td><td>{{ patient.address }}</td><td>{{ patient.phoneNumber }}</td><td><button @click="editPatient(patient)">Edit</button><button @click="deletePatient(patient.id)">Delete</button></td></tr></tbody></table><p v-else>No patients found.</p><PatientForm v-if="showForm" @close-form="showForm = false" @add-patient="addPatient" /></div>
</template><script>
import axios from 'axios';
import PatientForm from './PatientForm.vue';export default {components: {PatientForm},data() {return {patients: [],showForm: false,editingPatient: null};},created() {this.fetchPatients();},methods: {fetchPatients() {axios.get('http://localhost:8080/api/patients').then(response => {this.patients = response.data;}).catch(error => {console.error('There was an error fetching the patients!', error);});},addPatient(patient) {axios.post('http://localhost:8080/api/patients', patient).then(response => {this.patients.push(response.data);this.showForm = false;}).catch(error => {console.error('There was an error adding the patient!', error);});},editPatient(patient) {this.editingPatient = { ...patient };this.showForm = true;},deletePatient(id) {axios.delete(`http://localhost:8080/api/patients/${id}`).then(() => {this.patients = this.patients.filter(patient => patient.id !== id);}).catch(error => {console.error('There was an error deleting the patient!', error);});}}
};
</script>

PatientForm.vue

用于添加或编辑患者信息的表单。

vue

<template><div class="container"><h2>{{ editingPatient ? 'Edit Patient' : 'Add New Patient' }}</h2><form @submit.prevent="handleSubmit"><label for="name">Name:</label><input type="text" id="name" v-model="patient.name" required /><label for="gender">Gender:</label><select id="gender" v-model="patient.gender" required><option value="Male">Male</option><option value="Female">Female</option><option value="Other">Other</option></select><label for="age">Age:</label><input type="number" id="age" v-model.number="patient.age" required /><label for="address">Address:</label><input type="text" id="address" v-model="patient.address" required /><label for="phoneNumber">Phone Number:</label><input type="text" id="phoneNumber" v-model="patient.phoneNumber" required /><button type="submit">{{ editingPatient ? 'Update' : 'Add' }}</button><button type="button" @click="$emit('close-form')">Cancel</button></form></div>
</template><script>
import axios from 'axios';export default {props: ['editingPatient'],data() {return {patient: {name: '',gender: '',age: null,address: '',phoneNumber: ''}};},watch: {editingPatient(newVal) {if (newVal) {this.patient = { ...newVal };} else {this.resetForm();}}},methods: {handleSubmit() {if (this.editingPatient) {this.updatePatient();} else {this.addPatient();}},addPatient() {axios.post('http://localhost:8080/api/patients', this.patient).then(response => {this.$emit('add-patient', response.data);this.resetForm();}).catch(error => {console.error('There was an error adding the patient!', error);});},updatePatient() {axios.put(`http://localhost:8080/api/patients/${this.patient.id}`, this.patient).then(response => {this.$emit('close-form');this.$emit('update-patient', response.data);}).catch(error => {console.error('There was an error updating the patient!', error);});},resetForm() {this.patient = {name: '',gender: '',age: null,address: '',phoneNumber: ''};}}
};
</script>

4. 配置路由

在src/router/index.js中配置路由。

javascript

import Vue from 'vue';
import Router from 'vue-router';
import PatientList from '@/components/PatientList.vue';Vue.use(Router);export default new Router({routes: [{path: '/',name: 'PatientList',component: PatientList}]
});

5. 修改 main.js

确保路由已正确引入。

javascript

import Vue from 'vue';
import App from './App.vue';
import router from './router';Vue.config.productionTip = false;new Vue({router,render: h => h(App)
}).$mount('#app');