B258202的博客

项目实训(十五) —— 结束总结

B258202 — Mon, 26 Jul 2021 19:48:20 +0800

经过一个月的工作，所负责的项目模块功能已经全部完成了。此篇作为项目实训最后的博客。在连数据库、后端传入前端、for循环遍历展示、分页、弹窗、上传、接识别、排版等大的功能模块实现后，又依据测试组反馈进行了调整。最后的这周，除了文档类的工作之外，也仅剩下了回应项目消息、辅助整理一点代码的事情了。值此，将所做的结果加以整理记录： 1. 模块主页根据登录用户的ID，在数据库内查找食谱信息，将结果展示在主页面。后端引入SQLAlchemy来映射数据库内的表，利用paginate方法实现分页，前.

项目实训(十四) —— 据测试结果改进

B258202 — Mon, 26 Jul 2021 19:28:31 +0800

大的功能全部实现后，进入的测试组反馈，我进行改进的阶段。在收到测试组的测试反馈文档后，我开展了此项工作。依据测试文档，一共七条问题： 1. 上传饮食成功后，结果识别按钮逻辑冗余。解决：对接成功后的识别界面，有着页面按键—确认识别弹窗—识别结果的按键逻辑，确实冗余。之前为了去掉前两步骤，想将识别的HTML揉合入我的主HTML，因规模太庞大而失败了。后来转化思路，研读了识别的HTML界面与功能的关系，发现真正涉及图片识别出结果的是一个按键调用的一个函数。于是直接将前两步骤的窗口隐藏掉，将初

项目实训(十三) —— 识别对接

B258202 — Mon, 26 Jul 2021 19:23:28 +0800

项目实训已经到了最后一周，接下来是有关项目最后三篇博客了。按照规定一周至少更新三篇博客，但是工作内容决定我的工作会是前紧后松。为了使最后一周也有充实的内容可写，我便把工作记录博客匀了匀，实际完成该内容的时间大约提前博客记录一周。上篇之后，剩下的较大的功能就是上传食谱后与识别的对接了。有关这项工作，首先与专攻识别的同学进行了沟通，将识别原先的“手动选择图片—识别”改为了“后端传入新传的图片—识别”。专攻识别的同学顺利为我达成了后者的需求。接下来我便先调通该代码，再融入到自己的跳转逻辑内。调通代

项目实训(十二) —— 远程数据库

B258202 — Mon, 19 Jul 2021 19:55:51 +0800

之前都是在本地数据库进行简单的数据读写操作，进一步升华数据的操作便是连接操作远程库了。本文就简单描述连接远程数据库并配合分页展示数据、普通上传数据的过程。之前的分页功能，需要class映射一张表，内部数据即可自动分页。但一般数据库select的结果是二维list，无法复用分页功能。这一点造成了较大困扰，大约经历如下方案后得以解决： 1.映射数据库多个表到多个class内，自主筛选。结果一旦经历筛选，就变成了list，无法保持class，最终放弃。 2.联系数据库同学，提供根据用户ID筛选后，结果建立

项目实训(十一) —— 详情页弹窗

B258202 — Mon, 19 Jul 2021 19:16:37 +0800

页面展示的数据，有些过长，换行不一。为了更好地统一布局效果，指导老师及经理提点为：增加详情窗口，并在原页面统一一行，超出部分省略。于是本篇就介绍这一块的实现过程。首先确定为弹窗的形式，那么之前的CSS弹窗遮罩效果复写如下： /*结果页面弹窗*/ .window_appear_r{ position: relative; top: 130px; background: ghostwhite; width: 20%; height: 45%; border

项目实训(十) —— 分页功能移植

B258202 — Mon, 19 Jul 2021 18:59:05 +0800

有关“饮食记录”模块，后期主要解决了三大难点，本周三篇就分别记录解决这些难点的过程。首先本篇是记录分页功能的实现，这一块主要是受到同类功能的同学的大力帮助，在装好东西后，移植调整便基本实现了。首先导入关键的头文件： from flask_sqlalchemy import SQLAlchemy 再声明一些数据库配置： # 数据库配置，以下是本地数据库连接法数据库配置 mysql://username:password@hostname/database app.config['SQL

项目实训(九) —— 上传页调整

B258202 — Fri, 16 Jul 2021 16:34:39 +0800

有关上传页面，之前已经变为了弹窗形式，接下来本文主要记录输入框的调整和上传后防止跳转的问题。 1. 输入框调整：

后者文本较长，类型改为textarea，可以输入行满时自动另起一行。

再经过CSS排版后，就有了如下效果：

2. 上传后强制不切换：

点
</article>
<article>
<h1>项目实训(八) —— HTML弹窗</h1>
<p>B258202 — Mon, 12 Jul 2021 21:56:51 +0800</p>
先前的工作结果，主要是围绕着一份app.py，以及三份HTML和对应的CSS。切换页面既是url和HTML的切换。为了贴合项目要求，今日致力于“食谱上传”功能的弹窗式出现，结果便是合并了show和upload的HTML，将后者内容塞入前者并以弹窗的模式触发。

upload部分的HTML代码借助div嵌套塞入show.html，并在div标签内注明class和id，便于控制（调用自写的js函数，后文再做解释），还有样式的调整：

<div class="window_behind" id='uplo
</article>
<article>
<h1>项目实训(七) —— HTML排版</h1>
<p>B258202 — Mon, 12 Jul 2021 19:36:10 +0800</p>
先前的工作已经实现了基本的功能：读取数据库table展示食谱，上传图片及文字描述并插入数据库table内。但HTML排版问题一直没探究过，于是本篇旨在记录CSS和HTML配合的简单排版的过程。

中体来说就是要在HTML的字段写明class或id，再在CSS内定义某个class或id的各种样式属性，当然也包括定义<input.../>、<h3>...</h3>、<p>等官方统一的字段。

先前的HTML很简陋，只用到了极少的标签类型。为了更方便地实现排版，引入
</article>
<article>
<h1>项目实训(六) —— flask将数据库数据传向HTML</h1>
<p>B258202 — Thu, 08 Jul 2021 16:06:35 +0800</p>
本篇记录将flask内容读入前端的经验。

flask将后端数据传入前端有固定的语句。以根目录绑定的函数为例(以下最后一行)：

@app.route('/')
def show():
    result = read_data(user_ID)  # 读数据库并传到变量result内
    data = np.array(result)      # 列表转化为数组，便于操作
    # print(data)
    number = data.shape[0]       # 获取数组行数，即为
</article>
<article>
<h1>项目实训(五) —— flask连接数据库</h1>
<p>B258202 — Thu, 08 Jul 2021 15:38:57 +0800</p>
上篇已经准备好了一个本地的PostgreSQL数据库，要实现用户饮食记录的展示和上传，就需要建立一张表，并实现flask读取以及写入数据库的操作。

首先新建立一张表，内含饮食记录所需要的各项属性：

CREATE TABLE  ourfood(
   ID              INT,
   NAME           CHAR(10),
   Time            CHAR(20),
   FoodPic           CHAR(100),
   FoodName       
</article>
<article>
<h1>项目实训(四) —— 数据库准备</h1>
<p>B258202 — Tue, 06 Jul 2021 22:47:45 +0800</p>
经过第一周的学习和制作，已经实现了本地文字及图片的html展示、文件上传到本地、flask控制html之间的跳转等基本功能。但都是基于本地内容的操作，而真正需要的是与数据库的连接，flask实现对数据库内容进行读写操作。于是接下来就是有关数据库的学习和实践。

实训规划要用的数据库是PostgreSQL ，明确目标后，首先下载并安装了PostgreSQL 10，用于构建自己的数据库进行操作。

打开应用附带的psql控制台，登录自己的数据库账户之后就可以展开对数据库table的操作，主要是控制台键入相应的S
</article>
<article>
<h1>项目实训(三) —— HTML简单制作</h1>
<p>B258202 — Sat, 03 Jul 2021 13:58:19 +0800</p>
为完成“饮食记录”界面，初步构想就是将文字和对应的图片展现在html上，暂时不考虑美工排版，仅致力于内容展现和跳转按钮的实现。基于此，本文主要记录简单html内容的堆放。

<head>字段只是为网页取名以及规定展现格式，格式默认UTF-8不做改动。

剩下的编辑主要是<body>字段，这里展示仅简单用到了部分控制手段：

<h数字>包裹的控制文本和字相对大小；

展现图片；

<p>换行；

<inpu
</article>
<article>
<h1>项目实训(二) —— route基本学习</h1>
<p>B258202 — Fri, 02 Jul 2021 22:08:17 +0800</p>
环境配置之后，接下来入手的是对flask的学习。

经过网上查阅资料加以尝试实现，得出一点对于flask的看法：flask的一个目的在于，帮助.py代码内部实现对.html文件的跳转，并设置功能函数供.html内的按键来调用。此篇便是简单总结以上相关的经历。

.py文件内，导入flask包后，使用最多的语句显然是：

@app.route('/')

@app.route('/函数名')

第一条会绑定其下一行的函数，并在app run()执行后，以本地根目录的形式展现函数的功能；而第二条的，会绑定函数
</article>
<article>
<h1>项目实训(一) —— 项目实训初期工作</h1>
<p>B258202 — Wed, 30 Jun 2021 21:38:42 +0800</p>
项目实训正式开幕后，项目介绍、项目工作分配事宜迅速展开，实训的工作内容随之得到了具体的落实。

我领到的是“饮食记录”模块的任务，其中主要包含“用户食谱的记录展示”和“用户上传菜品记录”两大内容，同时涉及网页前端界面展现和后端功能实现，所用到的语言为python，此外还需要flask、Vue等重要的网页编辑框架。

第一次接触网页前后端开发的项目，一切都要从零学起，边学边用。首先要进行的便是环境的配置。

环境配置在反复查网，同学交流的过程中顺利完成，这里仅展现一些环境配置的...
</article>
</main></body></html>