Vue项目：细胞分裂检测演示
初衷：博士师兄毕业论文答辩需要web展示效果
本人情况：入坑前端三个月，自学了HTML、CSS、JS等。
项目功能：
- 展示不同数据库内的图片数据，每个库内有上千个图片
- 图片循环播放、停止播放、向前播放、向后播放
- 在图片上做标记，删除标记
- 实时显示、记录标记坐标值
实现过程：
（一）考虑到图片数量大，且分为不同的数据库，为存取方便，将所有图片数据放到服务器上，通过前后端通信实现图片展示，使用axios实现ajax数据传送，具体实现步骤为：
在项目入口main.js中引入axios：
import axios from 'axios'
Vue.prototype.$axios = axios;
在vue.config.js中配置axios通信所需地址：
const webpack = require('webpack')
module.exports = {
devServer:{
host:'localhost',
port:8080,
proxy:{
'/api':{
target:"http://192.168.199.213:5000",
changeOrigin:true,
pathRewrite:{
"/api":''
}
}
}
}
}
之后，在vue项目中需要使用后端传入数据的地方，就可以使用/api代表后端地址，这里我找到了图片数据库的地址：
loaddata(){ this.$axios.get('api/database') .then((res)=>{ this.databases = res.data.data //这里databases是所有数据库的名称 }) }
之后需要加载图片，则是在对应数据库之后加上该图片的相对位置：
imgdata(item){ this.$axios.get('api/list',{ params:{ database : item } }).then((res)=>{ this.images = res.data.data //取得图片相对地址 this.curIndex = 0 //第一张图片 }) }
注：数据库保存在api目录下的list中
就这样取到了图片的地址，之后需要显示图片时，引用该地址即可：
handlechange(){ this.cellimage = this.images[this,this.curIndex] //这里根据图片的curIndex找到图片地址 this.cellimgsrc = 'http://192.168.199.213:5000' +'/' + this.cellimage //图片真正的地址 }
（二）图片的播放，其实修改curIndex即可实现，不同的curIndex对应于不同的图片，调用handlechange函数即可：
向前播放：
Previousimage(){ if(this.curIndex > 0){ this.curIndex -- this.handlechange() } else{ console.log('当前为第一张图片') } }
向后播放：
Nextimage(){ if(this.curIndex < this.images.length){ this.curIndex ++ this.handlechange() } else{ console.log('当前为最后一张图片') clearTimeout(this.t) this.curIndex = 0 this.handlechange() //避免最后一张图片成空 } }
循环播放及停止：
Playimage(){ this.Play = (this.Play == false) if(this.Play == true){ this.t = setInterval(()=>{this.Nextimage()},500) } else{ console.log('停止自动播放图片') clearTimeout(this.t) } }
注：这里使用setInterval函数实现每经过固定时间500ms就调用一次后播函数，当Play变为false时，使用clearTimeout函数停止自动播放。
（三）在图片上做标记，采用convas画布实现
首先是布置画布，其次是放图片，当点击画布上的某个位置的时候，做一个红色的标记，当再次点击的时候，该标记消失。
<canvas class="canvas" width="835px" height="500px" id="canvas" @click = "imgclick"></canvas>
<div class="marker" v-for="(item,index) in markerArr"
:key="index" :style="{left:item.x,top:item.y}"
@click.stop="del_poit(index)">
</div>
<img class="canvas_bgp" :src= 'cellimgsrc'>/*canvas的大小需要在起标签内设置，否则会拉伸或缩小默认的大小*/
.canvas{ border:1px solid black; /*位置绝对*/ position: absolute; z-index: 999; } /*需要将img背景图的尺寸和canvas的尺寸设置相同*/ .canvas_bgp{ width: 835px; height: 500px; /*位置绝对*/ position: absolute; }
.marker{ width: 8px; height: 8px; position: absolute; /* border-color: red; */ background:red; /* color: red; */ /* font-size: 10px; */ top: 0; z-index: 999; }
注：这里画布和图片都是相对整个div位置绝对，因此需要在包含画布和图片的div的style中加入：position: relative。
这里画布与图片处于不同的z轴，通过z-index调整。
画出标记点，通过监听事件event实现，这里offset、layer函数可以获得坐标值，最后将这些坐标值都存入一个数组markerArr
imgclick(e){ e = e || window.event; //获取事件对象 this.x = e.offsetX || e.layerX; this.y = e.offsetY || e.layerY; this.pointadd++ this.obj = { point:this.pointadd, x:this.x+ 'px', y:this.y + 'px', } this.markerArr.push(this.obj); }
当需要删除这个标记时，这里每个标记有一个对应的pointadd值
del_poit(index){ this.pointadd--， this.markerArr.splice(index,1); }
（四）显示标记的坐标值，其实就是显示对应的x、y值
<p style="margin-left:20px">标记点坐标为：({{x}},{{y}})</p>
将这些标记以表格的形式显示出来
<table id="tables">
<tr>
<td>序号</td>
<td>x坐标</td>
<td>y坐标</td>
</tr>
<tr v-for="(item,index) in markerArr" :key="index">
<td>{{item.point}}</td>
<td>{{item.x}}</td>
<td>{{item.y}}</td>
</tr>
</table>
项目总结：
以上是项目进行两周的进度总结，从一开始的如何创建一个Vue项目，经历了数次安装卸载，也算是彻底摸清了Vue框架前端项目的创建过程，最近Vue已经更新到了版本4，但为求稳妥，在这个项目我还是使用了有较多公开教程的Vue3，之后再使用Vue开发项目。
前端项目开发，由简及难，分功能模块实现，另外由于本次项目不需要多个页面，因此没有再另外创建组件。两周的项目开发，经历了一周的试错阶段，2、3、4三个版本分别尝试，以后进一步熟悉了，我再对这三个版本使用时的不同展开对比。
