搭建一个
医院管理系统是一个复杂的任务，通常需要考虑用户管理、挂号、医生排班、病历管理、药品管理、权限控制等多个模块。下面我会为你提供一个**简化版的 Spring Boot + Vue
医院管理系统的搭建流程和基础代码结构**，它包括：
- Spring Boot 后端：RESTful API、数据库连接、用户登录接口
- Vue 前端：页面展示、登录页、首页、Axios 请求封装
- 数据库：MySQL 示例表结构
---
## ✅ 一、项目结构
### 后端（Spring Boot）
```
src
├── main
│ ├── java
│ │ └── com.example.hospital
│ │ ├── HospitalApplication.java
│ │ ├── controller
│ │ │ └── UserController.java
│ │ ├── model
│ │ │ └── User.java
│ │ ├── repository
│ │ │ └── UserRepository.java
│ │ └── config
│ │ └── CorsConfig.java
│ └── resources
│ └── application.yml
│ └── data.sql
```
### 前端（Vue3 + Vite）
```
src
├── assets
├── components
├── views
│ ├── Login.vue
│ └── Home.vue
├── router
│ └── index.js
├── App.vue
└── main.js
```
---
## ✅ 二、后端 Spring Boot 搭建
### 1. `application.yml`
```yaml
spring:
datasource:
url: jdbc:mysql://localhost:3306/hospital?use
SSL=false&serverTimezone=UTC
username: root
password: root
driver-class-name: com.mysql.cj.jdbc.Driver
jpa:
hibernate:
ddl-auto: update
show-sql: true
server:
port: 8080
```
### 2. `HospitalApplication.java`
```java
package com.example.hospital;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class HospitalApplication {
public static void main
(String[] args
) {
SpringApplication.run
(HospitalApplication.class, args
);
}
}
```
### 3. `User.java`
(实体类
)
```java
package com.example.hospital.model;
import jakarta.persistence.*;
@Entity
@Table
(name = "users"
)
public class User {
@Id
@GeneratedValue
(strategy = GenerationType.IDENTITY
)
private Long id;
private String username;
private String password;
private String role;
// Getters and Setters
}
```
### 4. `UserRepository.java`
```java
package com.example.hospital.repository;
import com.example.hospital.model.User;
import org.springframework.data.jpa.repository.JpaRepository;
public interface UserRepository extends JpaRepository<User, Long> {
User findByUsername
(String username
);
}
```
### 5. `UserController.java`
```java
package com.example.hospital.controller;
import com.example.hospital.model.User;
import com.example.hospital.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping
("/api/users"
)
public class UserController {
@Autowired
private UserRepository userRepository;
@PostMapping
("/login"
)
public User login
(@RequestBody User user
) {
return userRepository.findByUsername
(user.getUsername
());
}
}
```
### 6. `CorsConfig.java`
```java
package com.example.hospital.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings
(CorsRegistry registry
) {
registry.addMapping
("/**"
)
.allowedOrigins
("http://localhost:5173"
)
.allowedMethods
("GET", "POST", "PUT", "DELETE"
)
.allowCredentials
(true
);
}
}
```
### 7. `data.sql`
```sql
INSERT INTO users
(username, password, role
) VALUES
('admin', '123', 'admin'
);
```
---
## ✅ 三、前端 Vue3 搭建
### 1. 安装依赖
```bash
npm create vue@latest hospital-frontend
cd hospital-frontend
npm install
npm install axios vue-router
```
### 2. `Login.vue`
```vue
<template>
<div>
<h2>登录</h2>
<input v-model="username" placeholder="用户名">
<input v-model="password" placeholder="密码" type="password">
<button @click="login">登录</button>
<p v-if="error">{{ error }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
import axios from 'axios'
const username = ref
(''
)
const password = ref
(''
)
const error = ref
(''
)
const login = async
() => {
try {
const res = await axios.post
('http://localhost:8080/api/users/login', { username: username.value, password: password.value }
)
localStorage.setItem
('user', JSON.stringify
(res.data
))
window.location.href = '/home'
} catch
(err
) {
error.value = '登录失败，请检查用户名或密码'
}
}
</script>
```
### 3. `Home.vue`
```vue
<template>
<div>
<h2>欢迎 {{ user.username }}</h2>
<p>角色：{{ user.role }}</p>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const user = ref
(null
)
onMounted
(() => {
const userData = localStorage.getItem
('user'
)
if
(userData
) {
user.value = JSON.parse
(userData
)
}
}
)
</script>
```
### 4. `router/index.js`
```js
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
const routes = [
{ path: '/', component: Login },
{ path: '/home', component: Home }
]
const router = createRouter
({
history: createWebHistory
(),
routes
}
)
export default router
```
### 5. `main.js`
```js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp
(App
).use
(router
).mount
('#app'
)
```
---
## ✅ 四、数据库结构（MySQL）
```sql
CREATE DATABASE hospital;
USE hospital;
CREATE TABLE users
(
id BIGINT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR
(50
) NOT NULL UNIQUE,
password VARCHAR
(100
) NOT NULL,
role VARCHAR
(20
) NOT NULL
);
```
---
## ✅ 五、运行项目
### 启动后端
```bash
./mvnw spring-boot:run
```
### 启动前端
```bash
npm run dev
```
访问 `http://localhost:5173` 即可看到登录页。
---
##
扫一扫
2405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
