项目实训四（2021-07-05）

第二周计划

学习基础语言及前后端架构，各组进行系统模块研发和调试。我负责的是饮食识别模块，主要功能是上传图片，识别图片。需要做的工作是搭建前端窗口并在前端调用算法嵌入接口实现饮食识别核心功能。

前端vue框架

Vue.js是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的的设计。vue.js的核心特点是可组合的视图组件。一个页面映射为组件树。划分组件可维护、可重用、可测试，也就是一个页面由多个组件组合而成。vue中实现组件引入：

1. import导入需要引入的组件文件 ：
2. 注册组件:
3. 在需要引入组件的文件中加上组件标签:

饮食识别窗口雏形搭建

第一个窗口，实现上传图片功能，并设置input的position为absolute使其不按文档流排版，并设置其包裹整个布局。

   <!-- 第一个窗口-->
    <div id="myModel">
        <div class="model-content">
            <div id="input_img_father_div">
                <!--设置input的position为absolute，使其不按文档流排版，并设置其包裹整个布局 -->
                <!-- 设置opactity为0，使input变透明 -->
                <!-- 只接受jpg，gif和png格式 -->
                <input id="upload_input" onchange="changeUploadImg()" type="file" accept="image/*"/>
                <!-- 自定义按钮效果 -->
                <div id="input_img_btn_div">
                    <span id="input_img_btn_span">点击上传图片</span>
                    <img id="upload" style="vertical-align: middle; overflow: hidden"/>
                </div>
            </div>
            <p style="margin-top: 9%;">
                <button id="uploadPhoto" v-on:click="uploadPhoto">确定</button>
                <button id="closeModel" v-on:click="closeModel" style="margin-left: 30px;">取消</button>
            </p>
        </div>
    </div>

第二个窗口，需要调用算法嵌入接口实现饮食识别并显示概率及类别：

 <!-- 第二个窗口-->
    <div id="modelResult">
        <div class="model-content">
            <div style="float: left; width: 200px; height: 220px; margin-top: 5%; margin-left: 10%">
                <img src="temp.jpg" style="width: auto; height: auto; max-width: 200px; max-height: 220px">
                <br>
                <span style="font-size: 24px; font-weight: bold; display: inline-block; margin-top: 5%">食谱名称</span>
            </div>
            <div style="float: left; margin-top: 4%; margin-left: 14%">
                <span style="color: red; font-size: 24px; font-weight: bold; display: inline-block; margin-top: 18%">XXX % 概率</span>
                <br>
                <span style="color: red; font-size: 24px; font-weight: bold; display: inline-block; margin-top: 5%">XXX % 概率</span>
                <br>
                <span style="font-size: 24px; font-weight: bold; display: inline-block; margin-top: 20%">是否识别正确</span>
                <br>
                <button v-on:click="distinTrue">是</button>
                <button v-on:click="distinFalse" style="margin-left: 30px;">否</button>
            </div>
        </div>
    </div>

窗口雏形：