vue编写的鸟类分类前端界面_鸟类分类代码

需求

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

涉及到的功能

1. 登录界面
   因为是在内网使用，也就不需要注册功能，所以有简单的登陆即可。输入的账号密码，需要和从后端获取到的账号密码进行对比验证。
2. 导航菜单栏
3. 鸟类信息介绍页面，简单的从后端获取图片文字，在前端进行显示
4. 图片信息判断页面，页面包括： 图片信息显示和判断表单
5. 声音信息判断页面，页面包括： 声音信息显示和判断表单
6. 页面之间的路由切换
7. 与后端，用vue的axios进行交互，获取信息和传递结果。
8. 使用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`文件中加入以下代码块
1
2

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

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">
1
2
3
4
5

我们需要修改成：

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

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

methods: {
   
      handleOpen(key, keyPath) {
   
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
   
        console.log(key, keyPath);
      },
      goTo(path) {
   
      this.$router.replace(path);
      }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

3.data中return如下：

data () {
   
    return {
   
      msg: '鸟类类型标注系统',
      birdTitle: require("@/assets/title.jpg"),     
    }
  },
1
2
3
4
5
6
7
8

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

路由部分即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 
1
2
3
4
5
6
7
8
9
10
11
12