創建專案已經完成了
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加了個點擊事件 而且默認識別為動物識別
這節課我們改造下
改造
- 后端改造
- 前端再開發
- 新建apiuse頁面
- 修改index.vue
- apiuse頁面接收引數以及展示資料
- 接收type引數
- 處理資料并賦值給tableList
- 插件市場引入t-table插件
- 參考組件
- 效果如下
- 完整代碼
- 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>
教程視頻
<iframe id="f8HlfUDV-1612087041772" src="https://v.qq.com/txp/iframe/player.html?vid=f3225ktp99w" allowfullscreen="true" data-mediaembed="tencent"></iframe>
4.再次開發前端
??大家好，我是代碼哈士奇，是一名軟體學院網路工程的學生，因為我是“狗”，狗走千里吃肉，想把大學期間學的東西和大家分享，和大家一起進步，但由于水平有限，博客中難免會有一些錯誤出現，有紕漏之處懇請各位大佬不吝賜教！博客主頁：https://blog.csdn.net/qq_42027681，
騰訊云+社區專欄https://cloud.tencent.com/developer/column/90853
未經本人允許，禁止轉載
后續會推出
前端：vue入門 vue開發小程式 等
后端： java入門 springboot入門等
服務器：mysql入門 服務器簡單指令 云服務器運行專案
python：推薦不溫卜火 一定要看哦
一些插件的使用等
大學之道亦在自身，努力學習，熱血青春
如果對編程感興趣可以加入我們的qq群一起交流：974178910
有問題可以下方留言，看到了會回復哦
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/255257.html
標籤：其他