项目实训-vue（四）

项目实训-前端工作（四）

1. 项目前端概述

在本次的创新实训中，我们所做的项目是多模态的医疗图像辅助诊断系统，其中用户端是通过小程序进行开发的，而医生端以及医院系统是通过web页面的方式开发的。
在进行医院系统开发时主要使用的框架是Vue+element ui，使用 Vue 进行开发，因为它提供响应式数据绑定、组件化开发、易学易用且性能优化的优势。结合 Element UI，可以利用其丰富的组件库、一致的设计风格和详细的文档，快速构建高质量的企业级应用，显著提升开发效率和用户体验。

2. 项目整体框架

从下图中可以看到我们前端项目的整体框架：

其中主要的代码以及文件在src目录下，下面简单介绍一下各个目录下代码的作用。

• assets目录 主要用来存放全局css样式以及图片
• router目录 主要存放该项目的路由信息
• voews目录 用来存放该项目的全部页面

以上便是该项目web前端的整体架构。

3. 系统首页

系统首页的实现主要在文件HomeNew.vue中，如下图中所示：

在系统的首页需要展示该医院系统的介绍图片，因此需要实现图片的轮播图效果。具体的实现上，为了简化代码的书写，可以使用Vue中的v-for指令来一次渲染多个重复类型元素，并在展示时为其绑定图片展示的信息，可以用来判断该元素是否需要展示，从而实现轮播的效果。

v-for的相关介绍如下：

具体实现：

<div class="bd">
        <ul style="position: relative; width: 100%; height: 650.812px">
          <li
            v-for="(image, index) in images1"
            :key="index"
            :style="{
              position: 'absolute',
              width: '100%',
              left: '0px',
              top: '0px',
              display: currentIndex1 === index ? 'block' : 'none',
            }"
          >
            <a href=""><img :src="image.src" :alt="image.alt" /></a>
          </li>
        </ul>
      </div>
      <div class="fd">
        <ul>
          <li
            v-for="(image, index) in images1"
            :key="index"
            :class="{ on: currentIndex1 === index }"
            @click="changeImage(index)"
          >
            <img :src="image.buttonSrc" alt="" />
          </li>
        </ul>
      </div>

通过上述代码来显示html元素。

import buttonSrc from "@/assets/imgs/枫叶.png";

export default {
  name: "HomeNewView",
  data() {
    return {
      currentIndex1: 0, // 默认显示第x张图片
      images1: [
        {
          src: "https://www.sph.com.cn/Sites/Uploaded/UserUpLoad/20210811/20210811104542.jpg",
          alt: "Image 1",
          buttonSrc: buttonSrc, // 按钮图片
        },
        {
          src: "https://www.sph.com.cn/Sites/Uploaded/UserUpLoad/20230818/20230818170748.jpg",
          alt: "Image 2",
          buttonSrc: buttonSrc, // 按钮图片
        },
        {
          src: "https://www.sph.com.cn/Sites/Uploaded/UserUpLoad/20230428/20230428171118.png",
          alt: "Image 3",
          buttonSrc: buttonSrc, // 按钮图片
        },
      ],
    };
  },
  methods: {
    changeImage(index) {
      this.currentIndex1 = index;
    },
  },
};

通过上述代码实现数据的绑定以及点击切换图片的功能。

大致的实现效果如上图中所示。

4. 实现新闻轮播

除了上述方法之外，还可以使用element-ui中的组件来实现轮播图的效果，可以在下面的链接中选择需要使用的轮播效果，并按照element-ui的教程简单进行配置即可快速开始该组件库的使用。
https://element.eleme.cn/#/zh-CN/component/carousel

<div class="block">
        <el-carousel height="150px">
          <el-carousel-item v-for="(image, index) in images2" :key="index">
            <!--  <h3 class="small">{{ item }}</h3> -->
            <img :src="image.src" :alt="image.alt" />
          </el-carousel-item>
        </el-carousel>
</div>

通过使用element-ui可以使用较少的代码实现很好的效果，便于进行前端的开发，使我们能够将注意力主要集中在业务的完成上，而不用花费过多的时间在前端设计上。

除此之外可以利用Vue的生命周期来实现自动轮播效果。Vue的生命周期如下所示：

mounted() {
    setInterval(() => {
      this.currentIndex2 = (this.currentIndex2 + 1) % this.images2.length;
    }, 2000);
  },
  methods: {
    changeImage(index) {
      this.currentIndex1 = index;
    },
    changeSlide(index) {
      this.currentIndex2 = index;
    },
  },

5. 总结

通过合理使用Vue的指令，以及element-ui中的组件可以较为快速地开发前端页面，通过使用Vue的生命周期可以完成一些传统意义上难以实现的复杂功能。