笔记day06

上周内容回顾

后续项目中需要用到前端、后端、数据库三方面知识
所以课程中涵盖了三方面内容

  • MySQL基本操作

  • 基本SQL语句

  • 字段类型

  • 字段约束

  • 外键约束

  • 表查询关键字

  • 多表查询思路

  • 可视化软件

  • 表查询实战演练

  • pymysql模块

本周内容概要

  • 软件开发架构

  • socket模块

  • 前端核心

    HTML、CSS、JavaScript
    jQuery、Bootstrap、fontawesome、elementui

本周内容详细

软件开发架构

CS架构
    C:client 客户端
    S:server 服务端
    客户端需要基于互联网访问服务端才可以体验到服务端提供的服务
    小弊端:要想体验服务需要提前下载对应的客户端 稍微有点麻烦!!!
      eg:
        1.手机(计算机)上各种各样的app其实就是一个个客户端
        2.客户端可以看成是一个个即将去消费的客人 服务端可以看成是一家家店
          客户端访问服务端就相当于是客人进店消费体验店里的服务
    服务端需要具备的三大条件
      1.要有固定的地址
      2.24小时不间断服务
      3.能够承受高并发(可以服务很多人)
​
BS架构
    B:broswer 浏览器
  S:server 服务器
    浏览器充当所有服务端的客户端 用户无需下载对应的客户端 使用浏览器即可
    (浏览器可以直接访问淘宝、京东、抖音、微信、qq)
    但是使用浏览器访问服务端和使用专门的客户端访问服务端 页面样式和功能可能会有所区别
        BS架构给了我们一种启发>>>:统一接口
  
BS架构的本质也是CS架构

socket模块

该模块专门用于计算机之间的远程数据交互
​
socket基本操作
import socket
# 1.产生一个socket对象
server = socket.socket()  # 括号内不传参数 默认采用的网络协议是TCP协议(后续可自行了解)
# 2.绑定一个固定的地址(IP PORT)
"""
IP地址:接入互联网的计算机都必须有一个IP地址 相当于身份证号
PORT号:计算机用于管理自身多个应用程序的方式
"""
server.bind(('127.0.0.1', 8080))  # 127.0.0.1是本地回环地址 只有自己的计算机才可以访问
# 3.半链接池(节省资源)
server.listen(5)
# 4.等待客户端链接
sock, addr = server.accept()  # sock用于数据交互 addr客户端地址
# 5.朝客户端发送数据
sock.send(b'hello I am from server')
# 6.接收客户端的数据
data = sock.recv(1024)
print('客户端发送过来的数据:',data)
​
​
import socket
# 1.产生一个socket对象
client = socket.socket()
# 2.链接服务端(IP PORT)
client.connect(('127.0.0.1', 8080))
# 3.接收服务端发送过来的数据
data = client.recv(1024)
print('来自于服务端的数据:',data)
# 4.朝服务端发送数据
client.send(b'hello I am from client')

前端简介

前端(前台接待员)
    任何与用户直接打交道的界面 都可以称之为是前端
后端(幕后操作者)
    不直接与用户打交道 主要负责业务核心逻辑的执行
"""
开玩笑:IT行业存在一个鄙视链
    后端程序员  >  运维、测试、前端、产品经理
"""
​
前端核心知识
    HTML
    构建网页的骨架     类似于光着身子的蜡笔小新
  CSS
    调节HTML样式            类似于给蜡笔小新穿衣服、化妆
  JavaScript
    控制动态效果           类似于让拉比小新跳舞
 
代码模拟
    代码模拟服务端 浏览器充当客户端请求数据
  无法直接交互 数据格式需要符合HTTP协议(超文本传输协议)

HTML

超文本标记语言 是构建网页的骨架(也可以笼统说所有浏览器展示出来的花里胡哨的页面都是有它构建而来)
    eg:淘宝 京东 拼夕夕
"""
浏览器上肉眼看到的内容肯定不是内部真正的模样!!! 内部肯定需要对应一段代码
"""
1.文件结构
    <html>
    <head>浏览器不直接展示出来的内容</head>
    <body>浏览器会直接展示出来的内容</body>
  </html>
2.语法注释
    <!--注释内容-->
3.标签分类
    双标签:一部分双标签很多情况下都可以在内部嵌套其他标签
    <h1></h1>
  单标签
    <img/>
4.head内常见标签
    title               网页小标题
  style                 内部编写css代码
  link                  通过href属性引入外部css文件
  script                内部编写js代码或者通过src属性引入外部js文件
5.body内常见标签
    5.1.基本标签
    h1~h6       标题标签
    u i s b 下划线、斜体、删除线、加粗
    p               段落标签
    hr          水平分割线
    br          换行符
  5.2.常见符号
    &nbsp;  空格符
    &gt;        大于号(避免普通文本的符号与html标签符号冲突)
    &lt;        小于号(避免普通文本的符号与html标签符号冲突)
    &yen;   羊角符
    5.3.布局标签
    div         专门做页面的前期规划布局(使用频率最高)
    span        专门提供普通文本的内容(使用频率较低)
    5.4.常见标签
    a               链接标签  href属性跳转网页
    img         图片标签  src属性展示图片
  5.5.列表标签
    ul  
        li
            无序列表  
            页面上只要是有规则排列的横向或者竖向的多行内容 一般都是无序列表
  5.6.表格标签
    table       模拟excel表格存储数据的样式
        thead  表头
        tr   一行
            th/td 
      tbody  表单
        tr   一行
            td
    5.7.表单标签(重要)
    form                        能够通过前端页面获取用户数据并且发送给后端
        action参数
        控制数据提交的后端地址
        input标签         获取用户数据
            type属性
            text            普通文本
          password  密文展示
          radio         单选
          checkbox  多选
          date          日历
          email         邮箱
          file          获取文件
          submit        触发提交数据动作的按钮
          reset         重置按钮
          button        普通按钮
      select标签      下拉框
            option标签    一个个下拉选项
      textarea标签     一次性获取大段文本内容
​
6.块儿级标签与行内标签
    块儿级标签独占浏览器窗口一行
  行内标签取决于内部文本 不独占一行

CSS选择器

层叠样式表  用于对html标签调整样式
"""
页面上很多标签都是相同的 但是样式又不同 如何区分???
    一般情况下我们都会给标签设置两个非常重要的属性
        id属性(指名道姓 精准查找)
            类似于标签的身份证号 同一个页面上id不能重复
            <div id='d1'></div>
        class属性(分类管理 批量查找)
            类似于分类管理 多个标签可以有相同的类名
            <div class='c1'></div>
            <p class='c2'></p>
            <span class='c1'></span>
"""
语法结构
    选择器 {样式名:样式值; 样式名:样式值;...}
注释语法
    /*注释内容*/
1.在调整标签样式之前我们得先学会如何查找标签
    1.1.基本选择器
    id选择器                                       #id值
    class选择器(类选择器)           .class值
    tag选择器(标签选择器)                标签名
    1.2.组合选择器
    """
    <div>div
      <span>div>span</span>
      <p>div>p
          <span>div>p>span</span>
      </p>
      <span>div>span</span>
    </div>
    <span>123</span>
    <span>321</span>
    前端会将标签嵌套的结构使用亲戚关系来表述
        儿子、后代、弟弟、哥哥、祖先
    """
        /*后代选择器>>>:空格*/
        /*div span {*/
        /*    color: red;*/
        /*}*/
        /*儿子选择器>>>:大于号*/
        /*div>span {*/
        /*    color: greenyellow;*/
        /*}*/
        /*毗邻选择器>>>:加号*/
        /*div+span {*/
        /*    color: red;*/
        /*}*/
        /*弟弟选择器>>>:小波浪号*/
        div~span {
            color: red;
        }
        混合使用
        div,span {
            color: red;
        }
        #d1,.c1,span {
            color: red;
        }
    1.3.伪类选择器
        a:hover {  鼠标悬浮动态加载样式
            color: red;
        }
2.选择器优先级
    只需要掌握以下两种情况即可
        1.选择器相同 
        就近原则
    2.选择器不同 
      行内式   > id选择器 > 类选择器 > 标签选择器

CSS样式操作

1.字体相关操作
    font-size           大小
  font-weight       粗细
  color                 三种
        red
        rgb()
      #4e4e4e
      ps:取色方式有很多
            方式1:pycharm取色
          方式2:软件自带截图
    text-align      布局
  text-decoration 文字修饰
        a标签自带下划线 需要我们自己处理
​
2.背景相关操作
    background-color: red;
  background-image: url('1.jpg');
​
3.边框相关操作
  border
  border-raduis
​
4.展示相关操作
    display:none  
    
5.盒子模型
    所有的标签都有四个重要的属性
    margin          外边距                 标签与标签之间的距离
    border          边框                   标签边框属性
    padding         内边距                 边框与标签内部文本的距离
    content         标签内容             标签内部文本
 
6.浮动布局
    所有的网站几乎都需要使用浮动才可以完成页面布局的操作
    float
    
7.溢出属性
    overflow:hidden
 
8.定位属性
    position:fixed
    
9.z-index
    前端页面其实是一个三维坐标系 z轴指向用户

JS

JavaScript跟Java没有任何关系 纯粹是为了当初蹭Java热度
JS也是一门编程语言

JS的代码结束符是分号 但是很多时候不写也没啥大问题 逻辑不是很严谨

'''学习阶段直接使用浏览器console界面编写js更加方便'''

1.变量与常量
	var name = 'jason'
  let name = 'jason'
  ps:var和let是申明变量的关键字 var是5.1版本之前通用的 let是5.1之后发明的
  	 var声明的变量作用于全局 let则可以声明局部名称空间变量
 	const pi = 3.14

2.注释语法
	// 单行注释
  /* 多行注释 */

3.基本数据类型
	回顾python基本数据类型
  	整型int、浮点型float、字符串str、列表list、字典dict、元组tuple、集合set、布尔值bool
 	JS基本数据类型
  	数值类型number、字符类型string、布尔类型boolean、undefined类型、对象类型object(array 自定义对象)

4.数据类型
	'''js中查看数据类型的方式  typeof'''
	1.数值类型number(包含了整型与浮点型)
  	let i = 11
    let f = 11.11
    NaN:Not A Number
  2.字符类型string
  	let name = 'jason'
    let name = "jason"
    let name = `多行文本`
    		格式化输出  `${变量名}`
    常见内置方法
    		js中的方法								python中的方法
    			.length									len()
        	.trim()									strip()\lstrip()\rstrip()
          .concat()								join()
          .slice()								索引切片
          .toLowerCase()					lower()
          .toUpperCase()					upper()
          .split()								split()
 	3.布尔类型boolean	
  			js中布尔值							  python中的布尔值
    			true										True
      		false										False
 	4.undefined类型
  			null的意思是空 undefined的意思是没有定义
 	5.对象object
  			数组 类似于python中的列表  []
    常见内置方法
    		js中的方法								python中方法
      		.length									len()
        	.push()									append()
          .pop()									pop()
          .unshift()							insert()
          .concat()								extend()
 	6.自定义对象
  			自定义对象 类似于python中的字典 {}
    			let obj1 = new Object()  # 空字典
      		let obj2 = {'name':'jason'}  # 自定义字典
        可以通过句点符的方式直接操作键值对

JS流程控制

js中的分支结构											python中的分支结构
let age = 18											age = 18
if(age>18){												if age > 18:
  console.log('猜大了')							print('猜大了')
}else if(age<18){									elif age < 18:
  console.log('猜小了')							print('猜小了')
}else{														else:
  console.log('猜对了')							print('猜对了')
}


js中的for循环											  python中的for循环
let l1 = [11, 22, 33, 44, 55]			 l1 = [11, 22, 33, 44, 55]	
for(let i=0;i<l1.length;i++){      for i in l1:
  console.log(l1[i])								 print(i)
}

js中的while循环											python中的while循环
let count = 1											count = 1
while(count < 10){								while count < 10:
  console.log(count)								print(count)
  count++;													count += 1
}

JS函数

js中的函数语法结构										python中的函数语法结构
function 函数名(形参){								def 函数名(形参):
  /*函数注释*/												 '''函数注释'''
  函数体代码														 函数体代码
  return 返回值												return 返回值
}
'''js中的函数形参与实参的个数可以不一致'''
function f1(){											def f1():
  console.log('hello js')							print('hello pythonn')
}			
f1()																f1()
f1(1,2,3,4)

function f2(a, b){									def f2(a, b):
  console.log(a, b)										print(a, b)
}
f2(1,2)															f2(1, 2)
f2()
f2(1)
f2(1,2,3,4,5)
'''js中函数体代码自带一个关键字arguments用于接收所有的实参'''
等价于python中*args和**kwargs的功能

JS内置对象

类似于python中的内置模块
js中的内置对象											python中的内置模块
Date对象													 time模块
let d1 = new Date()								import time
d1.toLocaleString()								time.strftime('%Y/%m/%d %X')

JSON对象														json模块
JSON.stringify()  								json.dumps()
JSON.parse()											json.loads()
																	
RegExp对象													re模块
let r1 = new RegExp('^ja$')	      re.findall('^ja$',待匹配的文本)
r1.test(待匹配的文本内容)

BOM操作

通过js代码与浏览器做交互		BOM:浏览器对象模型
1.window.open()  								浏览器打开全新的窗口
2.window.close()  							关闭浏览器窗口
3.window.navigator.userAgent 		获取浏览器信息
4.window.history.forward()    	浏览器前进一页
5.window.history.back()					浏览器后退一页
6.window.location.reload()			浏览器重新加载
7.window.location.href					获取页面地址
8.window.location.href = url  	重新指定访问地址
9.alter()												警告框
10.confirm()										确认框
11.prompt()											提示框
12.setTimeout()/clearTimeOut()	延时执行
13.setInterval()/clearInterval()循环执行

DOM操作

通过js代码与html页面做交互 DOM:文档对象模型
1.先学会如何查找标签
	核心
    document.getElementById()
    document.getElementsByClassName()
    document.getElementsByTagName()
 	扩展
  	parentElement            父节点标签元素
    children                 所有子标签
    firstElementChild        第一个子标签元素
    lastElementChild         最后一个子标签元素
    nextElementSibling       下一个兄弟标签元素
    previousElementSibling   上一个兄弟标签元素
  
2.操作标签
	1.创建标签
  	let aEle = document.createElement('a')
 	2.添加文本
  	aEle.innerText = '点我去搜狗'
 	3.设置属性
  	aEle.setAttribute('href','https://www.sogo.com/')
  4.文档操作
  	let divEle = document.getElementById('d1')
    divEle.append(aEle)
  5.样式操作
  	aEle.style.color = 'red'
	6.获取标签值
  	innerText		主要用于页面普通标签
    	只作用于内部文本 不识别标签
    innerHTML   主要用于页面普通标签
    	内部文本和标签都识别
    value				主要用于获取用户数据的标签
    	用于普通数据的获取
    files				主要用于获取用户数据的标签
    	用于文件数据的获取
  
3.事件
	"""
	html页面上JS代码的编写位置>>>:建议写在body内最下方
	当JS代码中涉及到标签查找 那么需要先确保页面上所有的标签全部加载完毕之后再查找避免报错 最简单的方式就是写在body内最下方(页面加载从上往下)
	"""
	类似于给标签绑定一些功能 让其在特定的条件下自动触发
  onclick        当用户点击某个对象时调用的事件句柄。
  ondblclick     当用户双击某个对象时调用的事件句柄。
  onfocus        元素获得焦点。    // 练习：输入框
  onblur         元素失去焦点。    应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
  onchange       域的内容被改变。   应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
  onkeydown      某个键盘按键被按下。应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
  onkeypress     某个键盘按键被按下并松开。
  onkeyup        某个键盘按键被松开。
  onload         一张页面或一幅图像完成加载。
  onmousedown    鼠标按钮被按下。
  onmousemove    鼠标被移动。
  onmouseout     鼠标从某元素移开。
  onmouseover    鼠标移到某元素之上。
  onselect      在文本框中的文本被选中时发生。
  onsubmit      确认按钮被点击，使用的对象是form。
  3.1.绑定事件的两种方式
  	方式1:先查找标签再绑定事件
      	<button id="d1">我是按钮1</button>
      	let btnEle = document.getElementById('d1')
        btnEle.onclick = function () {
            alert(123)
          	console.log(this)
        }
        '''上述绑定事件的函数内还可以用关键字this来指代当前被操作的标签'''
    方式2:先编写函数再赋值属性
      	<button id="d2" onclick="func1()">我是按钮2</button>
      	function func1() {
            confirm('哈哈哈')
        }
        
4.事件实战案例
	案例1:获取用户名和密码并校验是否正确 如果不正确展示提示信息
  			// 1.查找提交数据的按钮
        let btnEle = document.getElementById('d3');
        // 2.给按钮绑定一个点击事件
        btnEle.onclick = function () {
            // 3.获取用户输入的用户名和密码
            let userNameVal = document.getElementById('d1').value
            let passWordVal = document.getElementById('d2').value
            // 4.校验数据是否符合条件
            // 针对用户名不能填写jason
            if(userNameVal === 'jason'){
                document.getElementsByClassName('errors')[0].innerText = '用户名不能是jason'
            }
            // 针对密码不能为空
            if(passWordVal.length === 0){
                document.getElementsByClassName('errors')[1].innerText = '密码不能为空'
            }
        }
	案例2:省市联动
    	参考笔记或者博客即可
  案例3:搜索框内容变化
    	let inEle = document.getElementById('d1');
      // input框聚焦事件(鼠标点击选中)
      inEle.onfocus = function () {
          this.removeAttribute('placeholder')
      }
      // input框失去焦点时间(鼠标点击其他标签)
      inEle.onblur = function () {
          this.setAttribute('placeholder','switch掌机')
      }
	案例4:锻炼逻辑能力  动态展示时间
    	<script>
        // 1.查找标签
        let d1Ele = document.getElementById('d1');
        let d2Ele = document.getElementById('d2');
        let d3Ele = document.getElementById('d3');
        // 提前定义存储定时任务的变量
        let t = null;
        function showTime(){
            // 3.获取当前时间
            let cTimeObj = new Date();
            // 4.添加到input框中
            d1Ele.value = cTimeObj.toLocaleString()
        }
        // 2.给开始按钮绑定点击事件
        d2Ele.onclick = function () {
            if(!t){
                t = setInterval(showTime, 1000)  // 循环定时任务没开启一个都是全新的 变量t只能指代最后一个
            }
        }
        // 给结束按钮绑定点击事件
        d3Ele.onclick = function () {
            clearInterval(t)  // 只能结束t指代的那一个定时任务  只是把t指代的定时任务取消了 但是t的值并没有清空
            t = null;
        }
    </script>

作业

1.整理今日内容及博客
2.自行查阅博客练习事件绑定
3.预习博客 前端及django部分
 

 

posted @ 2022-09-04 22:26  呼长喜  阅读(14)  评论(0)  编辑  收藏  举报