創建項目已經完成了
qq交流羣 974178910 535620886
最終效果體驗
http://dadandmother.cn/stt/

這節課我們來講下頁面跳轉以及底部選項
開發工具: Hbuilder X
完整代碼已上傳github https://github.com/dmhsq/image-recognition-flask-uniapp
bilibili教程視頻 https://www.bilibili.com/video/BV1R5411H7r2/
底部有視頻教程
上節課我們講了頁面開發我們給logo加了個點擊事件而且默認識別爲動物識別
這節課我們改造下

改造

後端改造
前端再開發
完整代碼
- index
- apiuse
教程視頻

後端改造

原本我們得後端是這樣的默認調用動物識別

return json.dumps(delImg(1,cont))

現在改造成

 type = int(request.form['type'])
 return json.dumps(delImg(type,cont))

前端再開發

新建apiuse頁面

新增三個變量

data() {
   
   
			return {
   
   
				type: 0,
				imgSrc: '/static/logo.png',
				tableList:[]
			}
		},

將index.vue中的goTest() 複製到 apiuse中並改成delImg 如下

methods: {
   
   
			delImg() {
   
   
				let vm = this;
				uni.chooseImage({
   
   
					count: 1,
					success: function(res) {
   
   
						vm.imgSrc = res.tempFilePaths[0];
						uni.uploadFile({
   
   
							url: 'http://localhost:8087/file',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
   
   
								'type': vm.type
							},
							success: function(ress) {
   
   
								console.log(ress)
								let str = unescape(ress.data.replace(/\\u/g, "%u"));
								console.log(JSON.parse(str).result)
								vm.tableList = JSON.parse(str).result
								// let str =  unescape(request.data.replace(/\\u/g, "%u"));
							}
						})
					}
				});
			}
		}

增加圖片預覽以及點擊上傳圖片按鈕

<image :src="imgSrc"></image>
<button type="default" @click="delImg()">上傳圖片</button>

修改index.vue

在index.vue中將點擊圖片觸發事件移除
改爲

<view @click="goUse(1)">動物識別</view>
<view @click="goUse(2)">植物識別</view>

goUse(i) 爲跳轉到apiuse並傳參數事件傳參數type區別動植物識別
如下

goUse(i){
   
   
	uni.navigateTo({
   
   
		url:'../apiuse/apiuse?type='+i
	})
}

apiuse頁面接收參數以及展示數據

接收type參數

在onLoad()中接收如下
uni.setNavigationBarTitle()爲動態設置導航條
判斷type爲1設置爲動物識別 2爲植物否則爲未知

onLoad(op) {
   
   
			console.log(op.type)
			let type = op.type
			this.type = type;
			if (type == 1) {
   
   
				uni.setNavigationBarTitle({
   
   
					title: '動物識別'
				});
			} else if (type == 2) {
   
   
				uni.setNavigationBarTitle({
   
   
					title: '植物識別'
				});
			} else {
   
   
				uni.setNavigationBarTitle({
   
   
					title: '未知'
				});
			}
		},

處理數據並賦值給tableList

unescape(ress.data.replace(/\u/g, “%u”)); 將
data: “{“result”: [{“score”: 0.5343812, “name”: “\u975e\u690d\u7269”}], “log_id”: 1355808146727108608}”
轉換爲

console.log(ress)
let str = unescape(ress.data.replace(/\\u/g, "%u"));
console.log(JSON.parse(str).result)
vm.tableList = JSON.parse(str).result

插件市場引入t-table插件

鏈接 : https://ext.dcloud.net.cn/plugin?id=413

按步驟導入即可

引用組件

apiuse.vue引入組件

import tTable from '@/components/t-table/t-table.vue';
import tTh from '@/components/t-table/t-th.vue';
import tTr from '@/components/t-table/t-tr.vue';
import tTd from '@/components/t-table/t-td.vue';

註冊組件

components: {
   
   
			tTable,
			tTh,
			tTr,
			tTd
		},

使用

<view class="box">
			<t-table border="2"  >
				<t-tr font-size="14"  align="left">
					<t-th align="left">序號</t-th>
					<t-th align="left">品種</t-th>
					<t-th align="left">可能性</t-th>
				</t-tr>
				<t-tr font-size="12" color="#5d6f61" align="right" v-for="(item,index) in tableList" :key="item.id">
					<t-td align="left">{
  
  { index+1 }}</t-td>
					<t-td align="left">{
  
  { item.name }}</t-td>
					<t-td align="left">{
  
  { item.score | delScore}}</t-td>
				</t-tr>
			</t-table>
		</view>

由於數據是這樣的

所以我們要這樣寫 v-for的使用

因爲score: 0.5343812數據太長不好看所以我們加個過濾器

filters:{
			delScore(val){
				let value = val*100;
				let str = (value+"").substr(0,5)+"%"
				return str;
			}
		},

效果如下

完整代碼

index

<template>
	<view class="content">
		<image class="logo" :src="imgSrc" ></image>
		<view class="text-area">
			<text class="title">{
  
  {title}}</text> 
		</view>
		<view @click="goUse(1)">動物識別</view>
		<view @click="goUse(2)">植物識別</view>
	</view> 
</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				title: 'Hello',
				imgSrc: '/static/logo.png'
			}
		},
		onLoad() {
    
    

		},
		methods: {
    
    
			goUse(i){
    
    
				uni.navigateTo({
    
    
					url:'../apiuse/apiuse?type='+i
				})
			}
		}
	}
</script>

<style>
	.content {
    
    
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
    
    
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
    
    
		display: flex;
		justify-content: center;
	}

	.title {
    
    
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

apiuse

<template>
	<view>
		<image :src="imgSrc"></image>
		<button type="default" @click="delImg()">上傳圖片</button>
		<view class="box">
			<t-table border="2"  >
				<t-tr font-size="14"  align="left">
					<t-th align="left">序號</t-th>
					<t-th align="left">品種</t-th>
					<t-th align="left">可能性</t-th>
				</t-tr>
				<t-tr font-size="12" color="#5d6f61" align="right" v-for="(item,index) in tableList" :key="item.id">
					<t-td align="left">{
  
  { index+1 }}</t-td>
					<t-td align="left">{
  
  { item.name }}</t-td>
					<t-td align="left">{
  
  { item.score | delScore}}</t-td>
				</t-tr>
			</t-table>
		</view>
	</view>
</template>

<script>
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	export default {
    
    
		components: {
    
    
			tTable,
			tTh,
			tTr,
			tTd
		},
		filters:{
    
    
			delScore(val){
    
    
				let value = val*100;
				let str = (value+"").substr(0,5)+"%"
				return str;
			}
		},
		data() {
    
    
			return {
    
    
				type: 0,
				imgSrc: '/static/logo.png',
				tableList:[]
			}
		},
		onLoad(op) {
    
    
			console.log(op.type)
			let type = op.type
			this.type = type;
			if (type == 1) {
    
    
				uni.setNavigationBarTitle({
    
    
					title: '動物識別'
				});
			} else if (type == 2) {
    
    
				uni.setNavigationBarTitle({
    
    
					title: '植物識別'
				});
			} else {
    
    
				uni.setNavigationBarTitle({
    
    
					title: '未知'
				});
			}
		},
		methods: {
    
    
			delImg() {
    
    
				let vm = this;
				uni.chooseImage({
    
    
					count: 1,
					success: function(res) {
    
    
						vm.imgSrc = res.tempFilePaths[0];
						uni.uploadFile({
    
    
							url: 'http://localhost:8087/file',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
    
    
								'type': vm.type
							},
							success: function(ress) {
    
    
								console.log(ress)
								let str = unescape(ress.data.replace(/\\u/g, "%u"));
								console.log(JSON.parse(str).result)
								vm.tableList = JSON.parse(str).result
								// let str =  unescape(request.data.replace(/\\u/g, "%u"));
							}
						})
					}
				});
			}
		}
	}
</script>

<style>

</style>

教程視頻

4.再次開發前端

大家好，我是代碼哈士奇，是一名軟件學院網絡工程的學生，因爲我是“狗”，狗走千里喫肉。想把大學期間學的東西和大家分享，和大家一起進步。但由於水平有限，博客中難免會有一些錯誤出現，有紕漏之處懇請各位大佬不吝賜教！博客主頁：https://blog.csdn.net/qq_42027681。
騰訊雲+社區專欄https://cloud.tencent.com/developer/column/90853

未經本人允許，禁止轉載

後續會推出

前端：vue入門 vue開發小程序等
後端： java入門 springboot入門等
服務器：mysql入門服務器簡單指令雲服務器運行項目
python：推薦不溫卜火一定要看哦
一些插件的使用等

大學之道亦在自身，努力學習，熱血青春
如果對編程感興趣可以加入我們的qq羣一起交流：974178910

有問題可以下方留言，看到了會回覆哦

uni-app實戰教程-----H5移動app以及小程序(五)---再次開發前端

改造