创建基于SpringBoot和Vue.js的校园疫情防控系统-优快云博客

创建基于SpringBoot和Vue.js的校园疫情防控系统可遵循以下分步方案设计，包含核心技术选型与功能实现路径：

一、系统架构设计

技术栈组成：

后端：SpringBoot 2.7 + MyBatis-Plus + Spring Security + Redis
前端：Vue3 + Element Plus + ECharts + Axios
数据层：MySQL 8.0 + Redis
爬虫：Python + Scrapy（独立服务）
部署：Nginx + Docker

二、核心功能模块实现

1. 多角色登录认证（Spring Security+JWT）

// Spring Security配置核心代码片段
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
            .authorizeRequests()
            .antMatchers("/admin/**").hasRole("ADMIN")
            .antMatchers("/teacher/**").hasRole("TEACHER")
            .antMatchers("/student/**").hasRole("STUDENT")
            .anyRequest().authenticated()
            .and()
            .addFilter(new JwtAuthenticationFilter(authenticationManager()))
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    }
}

2. 疫情数据爬虫（Python Scrapy定时任务）

# 示例爬虫（以国家卫健委数据为例）
class EpidemicSpider(scrapy.Spider):
    name = 'ncov'
    start_urls = ['http://www.nhc.gov.cn/xcs/yqtb/list_gzbd.shtml']

    def parse(self, response):
        items = response.css('ul.list > li > a::attr(href)').getall()
        for url in items[:5]:  # 抓取最新5条
            yield scrapy.Request(url, callback=self.parse_detail)

    def parse_detail(self, response):
        item = NcovItem()
        item['publish_date'] = response.css('#pages > div.con > div.sec_title::text').get()
        item['new_cases'] = re.search(r'新增确诊病例(\d+)例', response.text).group(1)
        yield item

注意：需配置Redis作为分布式爬虫队列，并设置Scrapy定时任务每天9点自动执行

3. 疫情可视化看板（Vue+ECharts）

<template>
  <div ref="chart" style="width:600px;height:400px"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    this.initChart()
  },
  methods: {
    async initChart() {
      const { data } = await axios.get('/api/epidemic/stats')
      const chart = echarts.init(this.$refs.chart)
      chart.setOption({
        title: { text: '校园疫情趋势分析' },
        tooltip: { trigger: 'axis' },
        xAxis: { data: data.dates },
        yAxis: { type: 'value' },
        series: [{
          name: '体温异常人数',
          type: 'line',
          data: data.values
        }]
      })
    }
  }
}
</script>

三、关键数据库表设计

CREATE TABLE `sys_user` (
  `user_id` BIGINT PRIMARY KEY AUTO_INCREMENT,
  `username` VARCHAR(50) UNIQUE NOT NULL,
  `password` VARCHAR(100) NOT NULL,
  `role` ENUM('admin','teacher','student') NOT NULL,
  `create_time` DATETIME DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE `health_report` (
  `report_id` BIGINT PRIMARY KEY AUTO_INCREMENT,
  `user_id` BIGINT NOT NULL,
  `temperature` DECIMAL(3,1) NOT NULL,
  `location` VARCHAR(200),
  `is_risk_area` BOOLEAN DEFAULT 0,
  `report_date` DATE NOT NULL,
  FOREIGN KEY (user_id) REFERENCES sys_user(user_id)
);

CREATE TABLE `epidemic_data` (
  `data_id` INT PRIMARY KEY AUTO_INCREMENT,
  `publish_date` DATE NOT NULL,
  `city` VARCHAR(50) NOT NULL,
  `new_local_cases` INT DEFAULT 0,
  `update_time` DATETIME DEFAULT CURRENT_TIMESTAMP
);

四、创新点设计建议

智能风险预警：通过分析学生历史轨迹数据（需申请页面添加行程报备功能）与最新确诊病例轨迹进行时空碰撞检测
疫情溯源图谱：使用Neo4j图数据库构建传播关系图谱
移动端适配：基于Vant4开发微信小程序版本

五、项目部署方案

本地开发

# 后端启动
mvn spring-boot:run -Dspring.profiles.active=dev

# 前端启动
cd frontend && npm run serve

生产部署

# docker-compose.yml示例
version: '3'
services:
  backend:
    image: openjdk:11
    command: java -jar /app.jar
    volumes:
      - ./target/campus-epidemic.jar:/app.jar
    ports:
      - "8080:8080"
    depends_on:
      - redis

  frontend:
    image: nginx:alpine
    volumes:
      - ./dist:/usr/share/nginx/html
    ports:
      - "80:80"

  redis:
    image: redis:6-alpine
    ports:
      - "6379:6379"