发表于： 2021-07-15 21:54:36
0 2030
今天完成的事情：完成了项目的一个页面的接口，第二个页面进行中，深度思考。。
明天计划的事情：完成新增页面，，点击按钮添加 input 输入框
疑问：项目的接口文档写有点复杂，没有搞懂
收获：
类型文档：获取 data 文档类型
export class QrdataResult extends JsonResult {
private _data: QrdataModel[];
public get data(): QrdataModel[] {
return this._data;
}
public set data(value: QrdataModel[]) {
this._data = value;
}
}
页面的ts方法 ：
async getList(searchParams): Promise<void> {
try {
const data: QrdataResult = await this.qrdatatManageService.getQrdatatList(searchParams);
const { data: list } = data;
this.dataList = list || [];
this.total = data.total;
this.loading = false;
} catch (e) {
this.showMessageService.errMsg(e.message || this.constantService.getConstantValue('TIP').Common_Error_Tip);
}
}
HTML内将获取到的 data 文档展现：
<tbody>
<tr *ngFor="let item of dataList; let i = index">
<td>{{i + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.remark}}</td>
<td>{{item.createAt | date:"MM/dd/yy"}}</td>
<td>{{item.scanId }}</td>
<td>{{item.tagId}}</td>
<td>
重要的接口文档：
qrdatsManage: {
add: ' /a/u/temp',
search: () => {
return `${urlConfig.qrdatsManage.add}/search`;
},
detail: (id: number) => {
return `${urlConfig.qrdatsManage.add}/${id}`;
},
status: (id, statsu) => {
return `${urlConfig.qrdatsManage.add}/${id}/status/${statsu}`;
},
},
深度思考：
DOM操作：
DOM是一套对文档的内容进行抽象和概念化的方法在现实世界里，人们对所谓的'世界对象模型'都不会陌生，例如，当用'汽车'、'房子'和'树'等名词来称呼日常生活环境里的事物时，我们都可以百分百的肯定对方知道我们说的是什么，这是因为人们在对这些名词所代表的的东西有着相同的认知。于是，当对别人说"汽车停在车库里"时，可以断定他们不会理解为"小鸟关在壁橱里"
我们的"世界对象模型"不进可以用来描述客观存在的事物，还可以同来描述抽象概念。例如，假设有个人想我问路，而我给出的答案是"左边第三栋房子"，这个答案有没有意义取决于那个人能够理解"左边"和"第三"的含义。如果他不会数数或者分不清左右，则不管他是否理解这几个概念，我的回答对他都不会有任何的帮助。在现实世界中，正是因为大家对抽象的"世界对象模型"有着基本的共识，人们才能用非常简单的话来表达出复杂的含义并得到对方的理解。
而DOM的定义则是由W3C所制定的标准，定义为"一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地访问和修改文档的内容`、结构和样式。"
节点：
节点这个词是一个网络用语，代表了网络中的一个连接点。一个网络就是由一些节点构成的集合。
在现实世界中，一切事物都由原子构成。原子就是现实世界的节点。但是原子同样还可以进一步分解为更细小的亚原子微粒。这些亚原子微粒同样也是节点。
DOM也是同样的情况。文档是由节点构成的集合，只不过此时的节点是文档树上的树枝和树叶而已。
在DOM中有许多不同类型的节点。就像原子包含着亚原子微粒那样，也有很多类型的DOM节点包含着其他类型的节点。接下来我们先看看其中的三种：元素节点、文本节点和属性节点。
元素节点：
在DOM中的原子就是元素节点。
像是我们现在所看到的这个网页，我们在编写时，会用到诸如<body>、<head>、<p>这些元素。如果把Web上的文档比作一座大厦，那么元素就是建造这座大厦的砖块，这些元素在在文档中的布局形成了文档的结构。元素可以包含其他的元素，在我们所看到的页面页中，内容都被包含在在一个<section>元素的内部。而唯一没有被包含在其他元素中的唯一元素是'<html>'，他和我们的节点树的根元素，其他的所有元素都被包含在'<html>'中。
文本节点：
元素节点只是节点类型的一种。如果一份文档完全有一些空白元素构成，他将有一个结构，但这份文档本身将不会包含什么内容。
在我们的ppt首页中，'<p>'元素包含着文本，'分享人：刘洪利'。他就是一个文本节点。在html文档里，文本节点总是被包含在元素节点的内部。
属性节点：
属性节点用来对元素做出更具体的描述。例如，几乎所有的元素都有一个title属性，而我们可以利用这个属性对包含在元素里的东西做出准确的描述：'<p title="a gentle reminder">这是一个带有温馨提示的p标签</p>'
在DOM中，title="a gentle reminder"是一个属性节点。因为属性总是被放在起始标签里，所以属性节点总是被包含在元素节点中。并非所有的标签都包含着属性，但是所有的属性都被元素包含。
常见的DOM操作：
获取DOM
通过使用 getElementById() 方法匹配元素的id属性来访问元素节点，对元素节点进行操作
通过使用 getElementsByTagName() 方法匹配元素的tagName来访问元素节点，对元素节点进行操作
通过使用 getElementsByClassName() 方法匹配元素的className来访问元素节点，对元素节点进行操作
值得注意的是， getElementsByTagName() 和 getElementsByClassName() 这两种方法因为其访问的是节点中的可能为复数的属性，所以得到的会是一个以数组的形式来体现出来的元素节点集合，我们可以通过打印获取到的DOM节点来判断类型
DOM事件：
onclick事件---当用户点击时执行
onload事件---当用户进入时执行
onunload事件---用用户离开时执行
onmouseover事件---当用户鼠标指针移入时执行
onmouseout事件---当用户鼠标指针移出时执行
onmousedown事件---当用户鼠标摁下时执行
onmouseup事件---当用户鼠标松开时执行
document.getElementById("fname")
document.getElementsByClassName('ui')
document.getElementsByTagName("p");
onblur事件---当对象失去焦点时发生
onchange事件---当对象域的值被改变时发生
button 事件---属性可返回一个整数，指示当事件被触发时哪个鼠标按键被点击。
jQ 常用的修改DOM结构的方法：
a. 新增节点的类型 JQ对象 DomString（<span>hello world </span>） 以及 function return 对象
b. 新增节点如果是已经存在的， 那么可以达到移动的效果(先删除 后添加)
parentNode.append((Node || DomString)) 在父级节点后面追加一个元素
parentNode.prepend((Node || DomString)) 在父级节点前面追加一个元素
refNode.after((Node || DomString)) 在参考节点redNode后面添加一个元素
refNode.before((Node || DomString)) 在参考节点redNode前面添加一个元素
refNode.remove() 删除参考节点refNode元素(包含它的子节点)
neborNode.previousSibling :获取已知节点的相邻的上一个节点
nerbourNode.nextSlbling: 获取已知节点的下一个节点
cloneNode(true | false); 复制某个节点
返回列表
评论