uniapp开发小程序/移动app---Four---再次开发前端原创

Hello，小伙伴大家好，我们上节课讲了前后端，前后端的那个开发，呃，前端调用接口，然后向后台向后端发送那个图片后，后来处处理完数那个图片之后，将实的结果返回回来，他目前是这个样子。啊，我们把这个结尾出来一下，就是已经看到它的识别结果了，对吧，但是这样看肯定不美观对吧，我们还要区分那个植物和动物识别，所以呃，本视频我们来改造一下这个前端页面，让它。就是区分动物植物识别哈。首先我们先那个新建一个页面。我们肯定不能在主页点那个图片给触发吧，那样太难受了，对吧。我们新建一个页面叫API use，就是我们要使用我们的API，对吧？好，我们新建。

新建完之后，我们把之前写好的那个事件与方法给他。放到这里，然后改个名字。Image。然后我们把主页也改造一下，改成。Go。这里不改了，我们在我我们把它给它直接直接删掉啊。我在这里加两个。叫动物识别。植物识别，好，我们再加一个方法叫。Go。全值为一，因为我们后台不是写的那个。Type唯一的时候是动物，Type为二的时候是植物，对吧？好，我们在这一写。

传入一个爱。我们需要那个跳转到那个API页面，对吧，根据我们上节课学的东西。在这个跳转跳转跳页面跳转里边这个。就用它我们来直接写。小穿一个URL。我们需要跳转到API对吧，还需要传输参数的太多。这是我们传的爱TYPE1TYPE为二。哈哈，我看一下。现在是这样的，对吧。我们可以点，你看我们可以点了。但是点完之后它是没没啥效果对吧，我们把这个页面给完善一下。因为我们不是传输参数嘛，所以我们先在这个页面里边接收一下参数。Lo。

Op，你先打一下op，看看这op是啥？好了，Op是个tap tap对吧，我们拿的就是我们有要的就是tap对吧。所以我们聊的是op菜。我们知道菜之后，就可以判断出是动物识别还是食物识别了。所以我们需要。给他加一个那个动态的导航，导航栏，在这个界面里边，API界面设置导航条。这个看给他写的这个。我复制过来。我们可以判断，当。我们先把这个参考给复制一下哈。当这个唯一的时候，他肯定是。动物世界是吧，对吧。

按的时候，它肯定是那个植物识别。否则的话就是。说的话给他，呃，未知。然后我们还要把还还要，就是因为我们像后台传照片的时候，需要告诉他是动物识别还是植物识别，所以这个菜谱我们不能写死了，不能是写死唯一了，我们也要加一个。亮亮。让它默认为零。然后。在这里复一下直。这里也复制完成了，然后我们把这个方法再改造一下，让让它等于那个。

我们的这个菜。这里已经改造完成了。我们来看一下运用效果。殿下，动物识别。为啥是未未知呢，看一下啊。Open，点菜吧。植物识别是什么？那动物识别呢？动物数学是一。非常正确呀，为啥会出现这个错误呀？哦，忘了这里啊，这里这里傻逼了，这里应该是LF，不然他会直接判断完之后又给你来一遍，对吧，他不是二对吧啊。相当于，呃，我们已，我们已经完成了，那继续。现在我们需要在这里。

放一个就是我们要上传图片之后，要看一下我们上传的是什么图片，对吧，所以我们在这写一个image。这个也我们也需要多台绑定，我们给他一个。默认知。这是我们这个logo，我们把这个，我把这个复制复制过来。然后。这里不是我们把那图片图片给提交吗。对吧，所以。我们我们图片的啊，这里我们在那个。主页之前写的时候，我们也写过这图片改变了对吧，所以这里我们我们已经不用动了，就直接这样就可以了。呃，现在再看一下效果。我们加一个。触发时间加个按钮，然后触发这个时间。

好，来看一下效果。点动物识别。啊，这图片没有设置那个样式啊，点上传图片。哦，没有突发事件啊。好。我们等下上传图片。还是用哈士奇来测试。好，看到了吧，这里已经识别出来了，这照片变成哈士奇了，对吧，剩下的我们就需要。在这里就是把把我们。返回的那个结果给他显示一下对吧，首先看这个参数。这个。这个在在里面对吧，里面包括。还有这个我们。

我们要的肯定是里边的数据对吧？啊，我们取我们取一下这个数据啊。啊，对。我打印一下。这个数据我们取的肯定是，然后里面有五个。我们就把这五个结果，这些数据等会也要处理一下。我们要的是。哎。嗯，我之前写的那个是加了一个u list，大家也可以去。去。就这个差价市场，在那个差价市场。然后我我家的好像是的。

对，我加的这个T表格来返回这个数据如何导入呢？点那个使用IX导入插件。然后确定。我们插件已经导导进导入进来了，插件如何使用呢。我们看一下它说明哈。这是这是他们，他是他演示的。根据他这个说法，我们需要把这些文件都给导入进来。我们也选他直接导入进来。C整理代码好看吗？然后需要注册一下。这这是这是他他他的模拟数据，咱们不用管，然后这要选择啊，什么世界咱们都不用管，咱们是为只是为了展示，所以。先把这个怎么也给他拷贝下来。就是思维工程师，我就是思维工程师，然后整理一下代码。

你可以，你具体怎么用，你可以看它这上面都都有写对吧，呃，字体对这些样式left s这这这些都有对吧。我们呃是left对齐吧，把给删掉。这个编辑编辑我们也不需要，我们只是有展示展示数据。啊，It check处这这不用管，直接删掉就可以了，It check它它有它应该有说明是否开启，多选我们肯定不开启啊。展示出去是没必要开启的啊，这是。我们已经把它给拿到手了，是呃，接下来就是把我们的数据给接入进来。Table。呃，我们是要这个对吧，这就是我们提学的数据。我们就直接。

Table等于这个。好。等到编译成功，我们先看一下，我们现在还没有。嗯，他他已经显示这块对吧，智能影响是刚才我们copy到人家的思维工程师吧，我们是。但是有时候人家插件写的好好的，对吧。你看他俩已经出来了，对吧，因为我们没有改，其他的就是。他内幕是有的，但是其他的是没有的，对吧，剩下的我们也要自己改好。但是这个数据我们已经拿到手对吧，数据格式是这样的，有name和score。对吧。我们需要的是什么？我们，我们肯定需要。穿一个。把哈士奇全放到这里，然后告诉这是识别什么，然后这是识别度对吧，然后这边放个序号，好我们来改造。

这个放我们的序号，序号从从从一开始，它虽然是它是默认从零开始的，所以我们要加个一，然后第二个我们放的是它的名字对吧，是哈士奇的名字，第三个我们要放的是这个看一下。是可能性吧。我们也给他放过来，但是可能性数据。你看是不是不好看，对吧，对吧。但是我们先再让大家看一下它的数据是什么样子的，就是展示的是什么样子的。好。好，他是这个样子是吧，是不是非常难看是吧。这个是我我们把它这个颜色都给它删掉啊，颜色不不好看，我们把这个给它改掉，我们第一个是序号。改成序号第二个是那个。

呃。名字。媳妇，对吧。品种吧，我感觉品种。第三个是那个可能性。啊，这个数据当然也不好看，对吧，所以我们要加一个隔离序。叫什么呢？叫嗯，直接就。什么？就他吧。得，他把它直接传进来。我们学校反馈的是啥？他不是。那个所有的数据吗。你把它转成字符串数据，然后给它截取前几个就可以了，对吧。我先把它乘100啊，你看它都是00点几几对吧。

零点几几几几几，我们要把它转化成百分百分比制的，先要给它乘100。然后我们，然后我们把它转换成字符串，截取前几位。我们从零开始接三个来看一下。哦。这个。在41横啊，就在这里加一个逗号。还有就是我们要在这里使用一下啊，叫什么，它叫。对。看下效果。

哦。是97点，然后1.1.0对吧，就我们要再往后边截俩，让它小了点后两位，因为刚才我们是截了三个嘛，所以我们要结够五个。结个五个，那就在这里变成五。然后我们给它加上百分号。这里看这里就已经非趁看了，对吧，是吧。还有就是我们再测试一下植物识别，看什么样子的。在植物识别，我们也给他传一个哈士奇，看看会会发挥什么结果啊，告诉你这不是植物，可能性多高多高对吧？

我们这节课就讲到这里，主要就是讲一下这个。前呃前前前端就是分。类型处理，动物识别植物识别啊。嗯，我们下节课就是讲如何部署到服务器，还有就部署到服务器的一些事项，至于前端页面那个样式什么的，要你们自己调干，根据你们自己喜欢的啊，你们可以在这加个列表什么的，或者加个动态按钮啊，后背背景来回动作啥的，这都要看你们自己了，对吧？咱们功能讲解就到这里了，就是主要功能实现就已经完成了，接下来就是部署到服务器。然后再去部署到服务器，主要主要就是要还要注册一个证书，证书这里去那个腾讯云是可以注册的。恩，然后我们需要配置就是代理服务器嘛，啊，我们这节课就讲到这里啊。