项目实训进度记录【3.8-3.15】

3.10-3.12 摘要

配置后端数据库，让前后端连通，并完成登录功能。

过程

bug: Invalid bound statement (not found)
原因：发现ManagerMapper.xml中的的id是”findALL“，而接口ManagerMapper中相应方法名为”findAll“，导致找不到该方法。所以解决方案：将xml文件中的findALL两个L小写即可。
（解决org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)问题）
controller：展示，给前端交互
service：处理业务逻辑， *** 作、计算等
mapper：数据库 *** 作
entity：数据库映射
@Autowired负责从容器中拿出实例好的对象
前端使用axios发异步请求，url写成后端提供数据的地址即可。

3.13

开小组会议，把组员都加入到仓库中，帮助大家把项目拉下来，检查前后端配置是否成功，讲解前后端项目中每一个文件夹和文件的含义，演示登录，演示如何完成前后端联通，讲解几种经典的控制台报错的含义、原因和解决方案（主要是404、500和跨域问题）。（然后大家快乐地吃了一顿呷哺呷哺外卖，我吃的是番茄锅）

3.14-3.15 摘要

完成图片转文字功能的前端页面和前后端连接，但还未调用真正的OCR接口。

过程

1.我试图将一个图片充满整个页面，使用element-ui的el-image组件，总是加载失败，而且fix属性的值要求是string类型而示例给的是array类型，导致了错误，改为string类型后也没有起到作用。所以最后用了原生HTML的< img/ >标签，并在< style >中为该元素设置overflow: hidden。
2.vue-cli创建的项目中的页面总是有白边，把全部样式删掉也去除不掉–>隐藏的body标签默认有8px的margin/padding，可以在vue的< style >中去除掉：body{ margin: 0; padding: 0;}
3.我希望header+footer+main撑满整个页面
（1）尝试固定header在顶部，footer在底部，滑动滚轮时只变化main：
a. 尝试在< style >(css)中将header和footer的position属性改为fix的，并设置top: 0或bottom: 0，但这样main的位置就会非常奇怪。我没有深究原因，不过通过f12我发现，vue默认是flex布局，和之前学的盒模型中很多属性名称和用法不一样，这可能是导致奇怪结果的原因之一。
b. 尝试用element-ui的固钉组件包装header和footer：header、main、footer变为横向排版（不过可以通过改变container的detection属性设置为纵向排版）。但一方面，这种方式构建的元素树逻辑上是错误的，所以我不想用；另一方面，header和footer固定挤占了很大屏幕空间，使得中间有效部分变窄，并不好看。所以放弃这种方式。
（2）让main内容最小情况下header和footer分别位于屏幕顶端和底端，当main内容增多，允许header和footer超出屏幕
——解决方案：将main部分的display属性设置为block（否则height设置无效），并将min-height属性值设为恰好满足条件的高度值。
但这样做的隐患是当main不够大，该网页在更大屏幕的电脑上将出现底部白边。
——解决方案：将main的min-height属性用calc(100vh - 140px)计算得到（注意 ‘-’ 前后必须有空格！）（CSS 使用calc()获取当前可视屏幕高度）
另外，我发现如果设置的是container的height属性为calc(100vh)，也可以实现header和footer固定位置。
附：百分比不生效原理：当你让一个元素的高度设定为百分比高度时，是相对于父元素的高度根据百分比来计算高度。当没有给父元素设置高度（height）时或设置的高度值百分比不生效时，浏览器会根据其子元素来确定父元素的高度，所以当无法根据获取父元素的高度，也就无法计算自己高度。 换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果，也就是一个null值，浏览器不会对这个值有任何的反应。(前端高度自适应 height和min-height 百分比 不生效原因)