the result
一.启动Vue项目
1.用vscode 安装地址 -打开项目文件,右键点击在集成终端中打开,终端输入 npm run serve
然后:
2.Ctrl+单击localhost就可以正常启动
二.登录页面
1.页面代码如下所示,登录按钮绑定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>
2.定义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>
3.页面的实现效果
三.首页
1.页面代码如下所示,采用基本的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>
2.页面实现效果
四.识别功能
该Vue系统里有很多种识别功能,因此以动植物识别为例
4.1 HTML
<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>
4.2 JS
注意这里的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>
4.3CSS
css根据自己喜欢去设计就行
注意观察,上方JS里代码
const corsProxyUrl = 'http://localhost:8080/';// 使用cors-anywhere代理服务
cors-anywhere 是一个基于 node.js 的 HTTP 代理服务器,可以跨域访问其他网站提供的 HTTP API,从而解决前端跨域请求的问题。使用方法☞教程.
五.补充说明
我们在新建页面文件夹的时候,记得配置路由,否则会出现错误✘☺
Vue是在 router/index.js中添加或删除,微信小程序是在app.json中添加或删除。
{
name: "admin",
path: '/admin',
component: () => import('../components/index/admin.vue'),
},//Vue
"pages':[
"pages/home/home"
]//微信小程序