前言：Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。☞☛简介
快速搭建vue项目✍☞☛Vue入手篇(一)，防踩雷(全网最详细教程)
私信获取源码，有问题可以关注留言或私信，计算机毕业设计(小程序，Web，Python等)☝
目录
一.启动Vue项目
①用vscode 安装地址 打开项目文件，右键点击在集成终端中打开，终端输入 npm run serve
②Ctrl+单击localhost就可以正常启动
二.登录页面
①页面代码如下所示，登录按钮绑定jump事件，处理登录状态
<div class="right">
<div class="登录界面">
<h1>ฅ՞•ﻌ•՞ ต欢迎</h1>
<h3>账号</h3>
<input class="text" type="text" v-model="username"
onfocus="javascript:if(this.value=='')this.placeholder='';"
onblur="javascript:this.placeholder='请输入账号';" placeholder="请输入账号">
<!-- js 方式添加的提示文字，当光标定位到 input 输入框中时，提示文字就会消失 -->
<h3>密码</h3>
<input class="text" type="text" v-model="password"
onfocus="javascript:if(this.value=='')this.placeholder='';"
onblur="javascript:this.placeholder='请输入密码';" placeholder="请输入密码">
<button class="btn" type="submit" @click="jump">登录 | ᐕ)⁾⁾</button>
</div>
</div>②定义jump事件，因为没有用数据库，所以预先定义账号和密码，当账号或密码为空时，浏览器就会弹出 “请输入账号或密码”，账号或密码错误时则提示 “账号或密码错误”
<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';
const router = useRouter();
const username = ref('');// 使用响应式变量存储
const password = ref('');
//极其简单粗暴的账号密码登录
const jump = () => {
// 预先定义的账号和密码
const correctUsername = 'MK';
const correctPassword = '666666';
// 判断是否输入了账号和密码
if (!username.value || !password.value) {
alert('请输入账号或密码！');
return;
}
if (username.value === correctUsername && password.value === correctPassword) {
// 登录成功，跳转到home页面
router.push('/home');
} else {
// 登录失败，提示账号或密码错误
alert('账号或密码错误！');
}
};
</script>③页面实现效果
三.首页
①页面代码如下所示，采用基本的HTML结构
<template>
<div class="wrap">
<div id="main">
<div id="click-section">
<div id="drawerboxes">
<div class="drawerbox active">
<button class="drawer-btn active" @click="slideTo(1)">图像识别<span class="drawer-head">1</span></button>
</div>
<div class="drawerbox">
<button class="drawer-btn" @click="slideTo(2)">语音识别<span class="drawer-head">2</span></button>
</div>
<div class="drawerbox">
<button class="drawer-btn" @click="slideTo(3)">文字识别<span class="drawer-head">3</span></button>
</div>
<div class="drawerbox">
<button class="drawer-btn" @click="slideTo(4)">其他识别<span class="drawer-head">4</span></button>
</div>
</div>
</div>
<div id="slide-section">
<div id="slide-bar">
<div id="bar"></div>
</div>
<div id="card-section">
<div id="card1" class="card">
<div class="card-small-title">MK§Vanstrong</div>
<div class="card-title">动物识别/植物识别</div>
<div class="card-content">利用各种设备采集的图像数据,AI可以快速准确地识别出不同物种,甚至包括濒危物种,对保护珍贵的野生动植物有着积极作用。</div>
<div class="card-img">
<img src="" alt="">
</div>
</div>
<div id="card2" class="card">
<div class="card-small-title">MK§Vanstrong</div>
<div class="card-title">语音识别/听歌识曲</div>
<div class="card-content">利用音频指纹技术,准确无误的从海量数据库中匹配度最高的那个音频数据,为用户带来舒适体验。 </div>
<div class="card-img">
<img src="" alt="">
</div>
</div>
<div id="card3" class="card">
<div class="card-small-title">MK§Vanstrong</div>
<div class="card-title">文字识别/数字识别</div>
<div class="card-content">通过将图像中的文字转换为可编辑的文本格式,广泛应用于信息检索、语言翻译等多个领域,极大地提升了信息处理的效率。</div>
<div class="card-img">
<img src="" alt="">
</div>
</div>
<div id="card4" class="card">
<div class="card-small-title">MK§Vanstrong</div>
<div class="card-title">敬请期待</div>
<div class="card-content">He said, one day you'll leave this world behind.So live a life you will remember.--The Nights(Avicii)</div>
<div class="card-img">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</template>②页面实现效果
四.识别功能
该Vue系统里有很多种识别功能，因此以动植物识别为例✍
3.1HTML
<template>
<div class="content-area">
<div class="card left-card">
<!-- 文件输入和上传按钮 -->
<input type="file" style="display: none" @change="handleFileChange" ref="fileInput" />
<el-button type="primary" round @click="pickFile">点击这里上传图片</el-button>
<!-- 如果图片路径存在，则显示图片 -->
<div class="img">
<img :src="imgSrc" alt="用户上传的图片" class="uploaded-image">
</div>
</div>
<div class="card right-card">
<!-- 右边卡片内容 -->
<h2 class="sbjg">识别结果为:</h2>
<div class="output">
<h3 class="qz"> 物种: <h2 class="hong">{{ result.name }}</h2>
</h3>
<h3 class="zxd"> 置信度: <h2 class="green">{{ result.score }}</h2>
</h3>
<h3 class="bk"> 百科: <h2>{{ result?.baike_info?.description || '没有可用的百科信息。' }}</h2>
</h3>
</div>
</div>
</div>
</template>3.2JS
注意这里的access_token 需要自己填上，☞✍获取access_token （目录3.3）
<script setup>
import { ref } from 'vue';
// 创建一个隐藏的文件输入元素用于选择图片
const fileInput = ref(document.createElement('input'));
fileInput.value.type = 'file';
fileInput.value.style.display = 'none';
// 用于存储用户选择的图片文件对象
const file = ref(null);
// 用于存储图片的src，以便在界面上显示
const imgSrc = ref('');
// 用于存储图片识别结果
const result = ref('');
// 用于控制上传状态的显示
const uploading = ref(false);
// 触发文件输入选择文件的方法
const pickFile = () => {
fileInput.value.click();
};
// 文件选择变化时的处理函数
const handleFileChange = () => {
// 检查是否有文件被选中
if (fileInput.value.files.length > 0) {
// 创建一个FileReader对象用于读取文件
const reader = new FileReader();
// 当读取操作成功时触发
reader.onload = (e) => {
// 设置图片src的值
imgSrc.value = e.target.result;
// 存储文件对象
file.value = fileInput.value.files[0];
// 上传图片
uploadImage(file.value);
};
// 开始读取文件为Data URL
reader.readAsDataURL(fileInput.value.files[0]);
}
};
// 上传图片到百度API并获取识别结果
const uploadImage = (selectedFile) => {
if (!selectedFile) return;
uploading.value = true; // 设置上传状态为true
const reader = new FileReader();
reader.onload = (e) => {
// 获取base64编码的图片数据
const base64Image = e.target.result;
// 定义accessToken和API的URL
const accessToken = 'XXXXXXXX';//自己填写
const baiduApiUrl = 'https://aip.baidubce.com/rest/2.0/image-classify/v1/animal';
// 使用cors-anywhere代理服务
const corsProxyUrl = 'http://localhost:8080/';
// 发送请求到百度API
fetch(corsProxyUrl + baiduApiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded', // 设置请求头部
'Accept': 'application/json', // 接受JSON格式的响应
},
body: `image=${encodeURIComponent(base64Image)}&access_token=${encodeURIComponent(accessToken)}`,
})
.then(response => {
if (!response.ok) {
throw new Error('网络响应有问题'); // 错误提示
}
return response.json(); // 尝试解析JSON格式的响应
})
.then(data => {
if (data.result && data.result.length > 0) {
// 获取识别结果中score最高的那个犬种名称和分数
const topResult = data.result[0];
result.value = {
name: topResult.name, // 设置识别出的犬种名称
score: topResult.score, // 设置识别出的分数
// 设置百科信息，如果不存在则显示默认文本
baike_info: {
description: topResult.baike_info?.description || '没有可用的百科信息。'
}
};
console.log('识别结果：', topResult); // 打印识别结果
} else {
console.error('API响应中没有result数据'); // 如果API响应中没有结果数据，则打印错误
}
})
.catch(error => {
console.error('图片识别失败：', error); // 打印识别失败的错误
})
.finally(() => {
uploading.value = false; // 上传完成后重置上传状态
});
};
reader.readAsDataURL(selectedFile); // 读取选中的文件为base64
};
</script>3.3CSS
css根据自己喜欢去设计就行
注意观察，上方JS里代码
const corsProxyUrl = 'http://localhost:8080/';// 使用cors-anywhere代理服务
cors-anywhere 是一个基于 node.js 的 HTTP 代理服务器，可以跨域访问其他网站提供的 HTTP API，从而解决前端跨域请求的问题。使用方法✍☞教程
3.4实现效果
五.识别结果
六.补充说明
我们在新建页面文件夹的时候，记得配置路由，否则会出现错误✘☺
Vue是在 router/index.js中添加或删除，微信小程序是在app.json中添加或删除
{
name: "admin",
path: '/admin',
component: () => import('../components/index/admin.vue'),
},//Vue"pages':[
"pages/home/home"
]//微信小程序
351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
