【无标题】

仟仟千千芊芊

已于 2022-05-12 22:04:54 修改

阅读量150

点赞数

文章标签： html

于 2022-05-08 00:01:56 首次发布

本文链接：https://blog.youkuaiyun.com/redciel/article/details/124627816

版权

十一周周报

一·前端与后端连接

问题1

在这里插入图片描述
解决方法：检查发现是由于还没有提取数据他就要执行，所以读取值为空，添加ngif，即可解决·

问题2：

需要输入id才可以提取到图片，如何确定返回的id值并且让请求的网址变化
解决方法：在这里插入图片描述

问题3

在这里插入图片描述

可以在后台预览，但是无法响应。
解决方法，放弃使用get函数从后台请求，直接用src请求图片

首先获取到ID值

let url1='http://localhost:3000/files';
     this.http.get(url1).subscribe (response=>{this.file=response
      console.log(this.file[0].id);

生成请求图片的动态链接

 this.url2='http://localhost:3000/files/'+this.file[0].id;

前台调用：img [src]="url2"
注：一定要写中括号，才是调用变量，如果是直接写src，调用的就会是字符串的网址，而不是后台的链接！！！！

问题4

在这里插入图片描述
解决方法：将数组初始化

public url2:Array<string>=[''];

问题5

循环过后排版错乱，无法和原来的本地显示一样正确排版
解决办法：放弃原来使用的ng-zorror模板格式，使用tailwindcss格式

<div class="grid grid-cols-4  gap-4">

注：还是tailwindcss好用！！！！

问题6

数据库的内容已经删除干净，但是依然有内容返回界面，解决方法：

public url2:Array<string>=[];

将初始化的值定义为空

问题7

注册界面逻辑问题
解决代码

 if(this.user.name==''||this.user.name==null){
               alert("请输入用户名！");
               console.log(this.user.name);
           }else if(this.user.pwd==''||this.user.pwd==null){
            console.log(this.user.name);
               alert("请输入密码！");
           }

二·界面优化

登录界面

原界面
在这里插入图片描述
修改后的界面

注册界面

原界面
在这里插入图片描述
修改后的界面

数据库

原界面
在这里插入图片描述

问题1

在这里插入图片描述
嵌套后的网格不能横向展示
解决办法：发现是逻辑问题，ngif要放在网格的前面

问题4

当界面自动延伸的时候，footer无法正常延伸到底部
解决方法：

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}