发表于: 2021-07-02 21:22:26

2 1863


今天完成的事情:JS知识巩固,angular 任务添加部件、


明天计划的事情:检查用angular框架做的 任务, 尽可能完善完成; JS知识巩固,

收获:

看到个问题HTML的语义化,还蒙了一下。一查:(要做到牢记)

1、HTML语义化,故名思意,就是写的HTml结构,是用相对应的有一定语义的英文字母表示的,标记的,因为HTML本身就是标记语言。不仅对自己来说,容易阅读,书写。别人看你的代码和结构也容易理解,甚至对一些不是做网页开发的人来说,也容易阅读。那么,以后再开发的过程中,尽量使用官方的有语义的标签,不要再使用一堆无意义的标签去堆结构。怎么知道,页面结构是否语义化,那就要看HTML结构,在去掉CSS样式表之后,是否,依然能很好的呈现内容的结构,代码结构。也就是说,脱掉css的外衣,依然头是头,脚是脚。赤裸裸的完整的一篇文档。这也就是,语义化之后文档的效果。

2、其实语义化,也无非就是在使用标签的时候多使用有英文语义的标签。语义化的(X)HTML文档有助于提升你的网站对访客的易用性,对于搜索引擎或者爬虫软件来说,则有助于它们建立索引,并可能给予一个较高的权值。


今天搞懂了很多之前疑惑的问题:(上传文件;灵活使用接口;使用了组件库;angular  TS文件中动态修改HTML样式)



下面 干货 呈上~! 

在服务内写获取数据请求,及上传请求:

使用了异步的方法:

  //rxjs 获取异步数据
  getRxjsData(listModul: any) {
    return new Observable((observer) => {
      setTimeout(() => { // 定时器,经过多久后下面代码被执行
        const url = 'a/article/search'; // 请求地址
        this.http.get<any>(`/ajax/${url}`, { params: listModul }).subscribe((acc) => {
          this.ser = acc;
          observer.next(this.ser); // 成功所返回的数据
          // observer.error("数据"); // 失败返回的数据
        });
      }, 100);
    });

  };


  // 新增个 article
  postRxjsData(textModul: any) {
    return new Observable((ever) => {
      setTimeout(() => { // 定时器,经过多久后下面代码被执行
        const api = '/a/u/article'; // 请求地址
        this.http.post<any>(api,
          "title=" + textModul.title +
          "&type=" + textModul.type +
          "&status=" + textModul.status +
          "&img=" + textModul.img +
          "&content=" + textModul.content +
          "&url=" + textModul.url +
          "&industry=" + textModul.industry,
          httpjson).subscribe((text) => {
            this.text = text;
            ever.next(this.text);
          });
      }, 100);
    })
  }

在服务内写请求模块可以灵活引用在需要用到的组件内,在请求数据及上传数据时候还需要配置代理跨域:

{
    "/a": {
        "target""http://dev.admin.carrots.ptteng.com",
        "secure""false",
        "changeOrigin"true
    }
}


还写了另外两个较小的请求:

  // 上线
  xian(top:any) {
    this.leng.status = top;
    let api = "/a/u/article/status"; // 请求地址
    this.http.put<any>(api, "id=" + this.leng.id + "&status=" + this.leng.status).subscribe((response: any=> {
      this.shangXian = response;
    });
  };
  // 删除
  del(a:any) {
    this.leng.id = a;
    let ulr = "/a/u/article/"+ this.leng.id// 请求地址
    this.http.delete<any>(ulr).subscribe((response: any=> {
      this.dele = response.code;
    });
    alert("已删除")
  };


了解到 angular 项目中怎样实现 TS文件对HTML文件得样式动态修改:

HTML中:在需要修改的元素上添加下面内容,

[ngStyle]="{'background-color': submit , 'cursor': noSubmit}"


TS文件中,声明上面写的 “submit”,“noSubmit ” 两个变量,在 TS 文件中给两个变量添加相应该添加的属性,就达到了想要的效果:

 // 初始值;

submit = '#43aa3a';

noSubmit = 'not-allowed';


    // 进行判断,满足要求改变其属性,来达到改变HTML的样式。 

 if (response.code === 0) {

    this.check = true;
    this.disabled = true;
    this.percent = "#43aa3a";
    this.not = "not-allowed";
    this.submit = '#6deb62';
    this.noSubmit = '';
 }




返回列表 返回列表
评论

    分享到