项目实训七

131 阅读 0 评论 87 点赞

我是靠谱客的博主可耐火龙果，最近开发中收集的这篇文章主要介绍项目实训七，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前端总体实现构思

前端技术选型

技术困难及解决方式

功能

vue入口文件main.js的编写

总体结构介绍

前端背景代码实现

前端总体实现构思

前端技术选型

前端使用vue+element plus实现，element plus 是饿了么团队基于vue3 推出的UI库，能有效提升界面的美观程度

技术困难及解决方式

由于手写识别需要手绘板，于2022年2月7日新推出的vue3是较为方便和新的前端开发方式，使用vue+vite 进行前端工具的开发，但是在使用后发现实现手绘板的功能的esign组件不支持vite，于是更改为使用vue CLI脚手架，因为vite 在vue3出现之后逐渐普及，因而在一些老组件如esign无法支持，在之前的vue学习中也花费较多时间学习了vue CLI脚手架的使用，相比vite开发的前端而言，vue CLI的运行速度明显较慢，同为前端运行程序，vite比vue CLI 快10-100倍，但由于实现功能局限性问题，只能使用vue CLI。

功能

前段主要体现手写识别，画笔粗细调整，画笔颜色调整，清空画板，橡皮擦，绘制功能，手机上传图片进行识别功能，电脑上传图片功能，生成latex格式的公式进行复制的功能，生成公式图片进行下载使用的功能。

vue入口文件main.js的编写

import { createApp } from 'vue'
import App from './App.vue'
import vueEsign from 'vue-esign'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { VueClipboard } from '@soerenmartius/vue3-clipboard'
createApp(App).use(vueEsign).use(ElementPlus).use(VueClipboard).mount('#app')

总体结构介绍

<template>所包含的是页面模板，<script>所包含的内容是页面模板，<style>所包含的是页面样式，实现时由于不存在登录和页面跳转的情况，于是实现功能的代码放在一个文件下，即app.vue。

前端背景代码实现

在背景的编程中，写了三个组件，在背景图片选定后，为增加美观程度，使用800个dom结构进行旋转，产生类似于星星状的图案

star文件夹下 index.js实现星星旋转

星星的密集程度，数字越大越多

let stars = ref(800)

星星的看起来的距离,值越大越远,可自行调制到自己满意的样子

let r = ref(500)

返回一个 render 函数

return () => {
return h(
'div',
{ class: 'stars' },
Array.from({ length: stars.value }).map(() => {
let s = Math.random() * 0.7
let curR = r.value + Math.random() * 280
return h('div', {
class: 'star',
style: {
transformOrigin: `0 0 ${curR * 1}px `,
transform: `translate3d(-10px,-700px,-${curR}px) rotateY(${Math.random() * 360}deg) rotateX(${Math.random() * 70}deg) scale(${s},${s})`,
width: '2px',
height: '2px',
background: '#f7f7b6',
position: 'absolute',
top: '0',
left: '0',
backfaceisibility: 'hidden',
},
})
})
)
}

vue背景代码实现

.bg {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
z-index: -999;
background-image: url(./assets/img/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
text-align: center;
display: flex;
flex-direction: row; // row 左水平 | row-reverse 右水平 | column 上垂直 | column-reverse 下垂直
justify-content: center; // flex-start 左对齐 | flex-end 右对齐 | center 居中 | space-between 两端对齐 | space-around 两端对齐左右空
align-items: center; // 上对齐 | flex-end 下对齐 | center 垂直居中 | baseline
项目的第一行文字的基线对齐
| stretch;;