10.27复习day —— 药销系统分页前（上）

登陆界面

1.auto
水平方向 —— 占据尽量多的空间
margin:auto —— 水平居中
2.块状：block
main、div、p
特点：
独占一行
水平方向占满父元素可用空间（所以得设置宽度）
垂直方向占据空间由其内容大小决定
行内：inline
span、input、img
一行显示多个
宽高由内容决定
不可设置宽高
行内块：inline-block
一行显示多个
可设宽高
元素转换：display
3.vw和vh 和浏览器窗口大小有关的单位

动态的；随着浏览器窗口大小的变化而动态计算宽高值

假设浏览器宽度1000px，则1vw = 浏览器窗口宽度的1% = 10px

浏览器高度1000px，则1vh = 浏览器窗口高度的1% = 10px

rem 相对长度单位；用来修饰元素的宽度、高度，是相对于根元素 html 的字体大小

浏览器的默认字体大小是16px，所以1rem等于16px

4.文本内容对齐 text-align :center

5.字体大小 font-size6.

6.<p></p>段落标签；块状

<span></span>一块内容；行内

7.<input> placeholder属性：提供可描述输入字段预期值的提示信息

inline类型

8.<br>换行

9.边框边角弧度：border-radius

修饰长方形，50%就是一个正圆

10.flex box

主轴对齐：justify-content: center;

从轴对齐： align-content: center;

---------------------------------------------------------------------------------------------------------------------------

登录功能

11.事件处理

先获取元素对象：document.querySelector('tag标签名/id属性值/css选择器/class属性值')

或

document.getElementByTagName("")

documrnt.getElementByClassName("")

document.getElementById("")

addEventListener:

// 鼠标点击事件
element.addEventListener("click", handleFunc )

// 键盘事件
element.addEventListener("keydown", handleFunc )

DOM对象事件属性:

// 键盘事件
element.onkeydown = handleFunc

// 鼠标点击事件
element.onclick = handleFunc

12. 浏览器没渲染，就找元素 => <script>放body后面

页面加载后才执行

window.addEventListener('load', () => {

})

或

window.onload = () => {

}

13.和服务端进行通讯：jquery库

jQuery库里面的 ajax()方法可以和服务端进行HTTP消息的收放

jquery库引入到页面里：<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>；放代码前面

jQuery构建请求消息

请求方法为GET、POST

$.ajax({
type: 'GET',
url : '/api/mgr/signin',
})

$.ajax({
type: 'POST',
url : '/api/mgr/signin',
data: {
username:'byhy',
password:'abc',
}
})

或

$.get('/api/mgr/signin')

$.post('/api/mgr/signin', {

username:'byhy',

password:'abc' }

)

url参数都是urlencode格式：https://www.baidu.com/s?wd=iphone&rsv_spt=1

拼接较为麻烦，可以使用浏览器内置的 URLSearchParams 类型，URLSearchParams对象的方法 toString ,可以将对象序列化为 urlencoded 格式

var queryStr = new URLSearchParams({code:'6000001', time:'2022-02-23' }).toString()

$.get(`http://localhost/api/stock?${queryStr}`)

或

使用jQuery 的 param 方法

var queryStr = $.param({code:'6000001', time:'2022-02-23' })

$.get(`http://localhost/api/stock?${queryStr}`)

data消息体一般为urlencode格式和json格式

urlencode格式：data参数如果是 Object，缺省行为就是转化为 urlencode格式

json格式：JSON 的stringify方法，可以序列化js对象为JSON格式的字符串

$.ajax({
url: '/api/mgr/signin',
type: 'POST',
contentType（消息头) : 'application/json',
data: JSON.stringify({ username: 'byhy', password:'88888888'}),
})

jQuery解析响应消息

$.ajax({
url: '/api/mgr/signin',
type: 'POST',
data: 'username=byhy&password=88888888',

// 正确返回；回调函数被传入3个参数：data 从服务端返回的数据，textStatus 返回的状态文本描述，xhr XMLHttpRequest的扩展类型jqXHR的对象
success: function(data, textStatus, xhr) {
// 获取状态码
console.log(textStatus);
// 获取所有消息头
console.log(xhr.getAllResponseHeaders());
// 获取某个消息头
console.log(xhr.getResponseHeader("content-length"));

    //获取响应消息体的数据

    console.log(data)

    console.log(data.ret)

    console.log(data.msg)
},

// 错误
error:function (xhr, textStatus, errorThrown ){
console.error(`${xhr.status} \n${textStatus} \n${errorThrown }`)
}
})