项目实训-前端工作(四)
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的生命周期可以完成一些传统意义上难以实现的复杂功能。