vue编写的鸟类分类前端界面

最新推荐文章于 2024-07-02 10:47:57 发布

qq_27569027

最新推荐文章于 2024-07-02 10:47:57 发布

阅读量584

点赞数

文章标签： vue项目实践

本文链接：https://blog.csdn.net/qq_27569027/article/details/102477216

版权

本文档描述了一个使用Vue框架开发的鸟类信息分类前端项目，涵盖了从项目创建到功能实现的全过程。主要功能包括登录界面、导航菜单、鸟类信息展示、图片与音频判断等。项目采用Element-UI组件库，利用axios与后端交互，并通过NatApp实现内网穿透。

摘要由CSDN通过智能技术生成

需求

各种科目的鸟类的信息介绍
对两张鸟类图片进行判断，看AR分类结果是否正确
对两段鸟类声音进行判断，看AR分类结果是否正确

涉及到的功能

登录界面
因为是在内网使用，也就不需要注册功能，所以有简单的登陆即可。输入的账号密码，需要和从后端获取到的账号密码进行对比验证。
导航菜单栏
鸟类信息介绍页面，简单的从后端获取图片文字，在前端进行显示
图片信息判断页面，页面包括：图片信息显示和判断表单
声音信息判断页面，页面包括：声音信息显示和判断表单
页面之间的路由切换
与后端，用vue的axios进行交互，获取信息和传递结果。
使用NatApp实现内网穿透，获得一个在同一内网中的其他用户都可以访问的网址。

项目步骤

1. 首先，在VScode里面新建一个vue项目，具体新建过程，见以下博客

https://blog.csdn.net/qq_27569027/article/details/101262812

2. 在components文件夹下新建一个page.vue页面，作为首页，该页面主要是导航菜单栏，使用的是element-UI组件

1）在该项目中引入element-UI，方法如下

 首先在项目终端中，输入 `npm i element-ui -S`
 然后在`main.js`文件中加入以下代码块

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

2）使用element-UI的Container 布局容器组件，效果图如下：

在这里插入图片描述
在Header处放置系统Logo，Aside处放置导航菜单栏，Main处放置做好的子页面。

在Aside处，选用element-UI的NavMenu 导航菜单，效果如下：
在这里插入图片描述
布局，也就是template部分的代码如下：

在main标签中，加入了<router-view></router-view>，就是说在main这一块区域，显示地是路由到的子页面，当点击菜单栏选项的时候，main区域会出现相应的子页面。
方法：
在element-UI原本的导航菜单栏的el-menu设置如下：

 <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">

我们需要修改成：

<el-menu
     :default-active="this.$route.path"
     router
     class="el-menu-vertical-demo"
     @open="handleOpen"
     @close="handleClose">

在method中的方法也需要做相应的修改：

methods: {
   
      handleOpen(key, keyPath) {
   
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
   
        console.log(key, keyPath);
      },
      goTo(path) {
   
      this.$router.replace(path);
      }
  }

引入本地图片的方法：
1.把图片放到src/assets文件夹下
2.标签中写法如下

<el-image :src="birdTitle"></el-image>

3.data中return如下：

data () {
   
    return {
   
      msg: '鸟类类型标注系统',
      birdTitle: require("@/assets/title.jpg"),     
    }
  },

如此，就可以把图片引入到相应的位置

路由部分即router的index.js，把page页面当做父页面，其他页面作为子页面，路由配置如下：

import Vue from 'vue'
import Router from 'vue-router'

import birdsort from '@/components/birdsort'
import birdsound from '@/components/birdsound'
import page from '@/components/page'
import ostrich from '@/components/birds/ostrich'
import Login from '@/components/views/TheLogin'


Vue.use(Router)

export default new Router({
   
  mode: