基于vue的简易图像识别系统（用于毕设-含代码）

毕设宇航

于 2024-09-04 13:19:24 发布

阅读量64

点赞数 3

文章标签： vue.js 课程设计前端 QQ767172261

本文链接：https://blog.csdn.net/2301_78240361/article/details/141890833

版权

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"
]//微信小程序

毕设宇航

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于vue的简易图像识别系统（用于毕设-含代码）

基于vue的简易图像识别系统（用于毕设-含代码）
复制链接

扫一扫