“眼护士”视力保健App

在这篇文章中，我们将详细介绍如何使用 Java、SpringBoot、MySQL、Vue 来构建一款简单的 “眼护士”视力保健App。我们将涵盖以下功能模块：

视力检查

视力保健

视力知识库

眼镜选购

专家答疑

后台管理

技术栈

前端: Vue.js

后端: SpringBoot

数据库: MySQL

工具: unaipp（用于生成API接口）

功能模块设计

1. 视力检查模块

该模块允许用户进行视力自检，支持E字表的在线测试，并记录测试结果。

数据库设计

创建一个名为 vision_test 的表，记录用户的视力测试数据。

sql

CREATE TABLE vision_test (

    id INT AUTO_INCREMENT PRIMARY KEY,

    user_id INT NOT NULL,

    test_date DATETIME DEFAULT CURRENT_TIMESTAMP,

    vision_score DECIMAL(3,2),

    color_blind_status VARCHAR(10) NULL

);

后端实现

在SpringBoot中，我们需要提供一个API来进行视力测试数据的保存。

VisionTestController.java

java

@RestController

@RequestMapping("/api/test")

public class VisionTestController {

    @Autowired

    private VisionTestService visionTestService;

    // 视力测试接口

    @PostMapping("/submit")

    public ResponseEntity<?> submitVisionTest(@RequestBody VisionTestRequest request) {

        VisionTestResult result = visionTestService.saveTestResult(request);

        return ResponseEntity.ok(result);

    }

}

VisionTestService.java

java

@Service

public class VisionTestService {

    @Autowired

    private VisionTestRepository visionTestRepository;

    // 保存视力测试结果

    public VisionTestResult saveTestResult(VisionTestRequest request) {

        VisionTestResult result = new VisionTestResult();

        result.setUserId(request.getUserId());

        result.setVisionScore(request.getVisionScore());

        result.setColorBlindStatus(request.getColorBlindStatus());

        visionTestRepository.save(result);

        return result;

    }

}

前端实现

在Vue.js中，用户提交视力测试结果后，前端将数据发送给后端API。

html

<template>

  <div>

    <h2>视力自测</h2>

    <form @submit.prevent="submitTest">

      <label for="visionScore">视力得分:</label>

      <input type="number" v-model="visionScore" />

      

      <label for="colorBlindStatus">色盲检测结果:</label>

      <select v-model="colorBlindStatus">

        <option value="normal">正常</option>

        <option value="colorBlind">色盲</option>

      </select>

      

      <button type="submit">提交</button>

    </form>

  </div>

</template>

<script>

export default {

  data() {

    return {

      visionScore: null,

      colorBlindStatus: "normal"

    };

  },

  methods: {

    async submitTest() {

      const response = await this.$axios.post('/api/test/submit', {

        userId: 1,  // 假设当前用户ID为1

        visionScore: this.visionScore,

        colorBlindStatus: this.colorBlindStatus

      });

      alert("测试结果已提交！");

    }

  }

}

</script>

2. 视力保健模块

该模块为用户提供眼保健操视频教程，并根据用户信息给出护眼方案。

数据库设计

创建一个表 eye_exercise 来存储眼保健操视频信息。

sql

CREATE TABLE eye_exercise (

    id INT AUTO_INCREMENT PRIMARY KEY,

    video_url VARCHAR(255) NOT NULL,

    description TEXT

);

后端实现

EyeExerciseController.java

java

@RestController

@RequestMapping("/api/exercise")

public class EyeExerciseController {

    @Autowired

    private EyeExerciseService eyeExerciseService;

    // 获取眼保健操视频列表

    @GetMapping("/list")

    public ResponseEntity<List<EyeExercise>> getAllExercises() {

        List<EyeExercise> exercises = eyeExerciseService.getAllExercises();

        return ResponseEntity.ok(exercises);

    }

}

EyeExerciseService.java

java

@Service

public class EyeExerciseService {

    @Autowired

    private EyeExerciseRepository eyeExerciseRepository;

    // 获取所有眼保健操视频

    public List<EyeExercise> getAllExercises() {

        return eyeExerciseRepository.findAll();

    }

}

前端实现

在Vue.js中，我们显示眼保健操视频的列表，用户可以点击查看视频。

html

<template>

  <div>

    <h2>眼保健操</h2>

    <ul>

      <li v-for="exercise in exercises" :key="exercise.id">

        <p>{{ exercise.description }}</p>

        <a :href="exercise.videoUrl" target="_blank">点击观看视频</a>

      </li>

    </ul>

  </div>

</template>

<script>

export default {

  data() {

    return {

      exercises: []

    };

  },

  async created() {

    const response = await this.$axios.get('/api/exercise/list');

    this.exercises = response.data;

  }

}

</script>

3. 视力知识库

提供视力保健相关的文章，支持点赞、评论和收藏。

数据库设计

创建一个 knowledge_article 表来存储视力保健文章。

sql

CREATE TABLE knowledge_article (

    id INT AUTO_INCREMENT PRIMARY KEY,

    title VARCHAR(255) NOT NULL,

    content TEXT NOT NULL,

    author VARCHAR(100),

    created_at DATETIME DEFAULT CURRENT_TIMESTAMP

);

后端实现

KnowledgeArticleController.java

java

@RestController

@RequestMapping("/api/article")

public class KnowledgeArticleController {

    @Autowired

    private KnowledgeArticleService articleService;

    // 获取所有文章

    @GetMapping("/list")

    public ResponseEntity<List<KnowledgeArticle>> getAllArticles() {

        List<KnowledgeArticle> articles = articleService.getAllArticles();

        return ResponseEntity.ok(articles);

    }

}

前端实现

展示视力保健文章列表，支持点赞和评论。

html

<template>

  <div>

    <h2>视力保健文章</h2>

    <ul>

      <li v-for="article in articles" :key="article.id">

        <h3>{{ article.title }}</h3>

        <p>{{ article.content }}</p>

        <button @click="likeArticle(article.id)">点赞</button>

        <button @click="commentArticle(article.id)">评论</button>

      </li>

    </ul>

  </div>

</template>

<script>

export default {

  data() {

    return {

      articles: []

    };

  },

  async created() {

    const response = await this.$axios.get('/api/article/list');

    this.articles = response.data;

  },

  methods: {

    likeArticle(articleId) {

      // 处理点赞逻辑

    },

    commentArticle(articleId) {

      // 处理评论逻辑

    }

  }

}

</script>

结语

通过以上代码，我们实现了“眼护士”视力保健App的核心功能模块，包括视力检查、眼保健操、视力知识库等。此App为用户提供了方便快捷的视力检测、护眼方案、专家答疑等服务，帮助用户更好地保护眼睛健康。通过SpringBoot作为后端，Vue作为前端技术栈，结合MySQL数据库，可以构建一个高效、稳定的视力保健平台。

随着技术的不断发展，未来可以进一步增加更多智能功能，如基于AI的视力预测、个性化推荐等，提升用户体验。

希望本文的代码示例能够帮助大家了解如何实现类似功能，推动视力保健应用的发展。