学习笔记15——前端和http协议

学习笔记系列开头惯例发布一些寻亲消息，感谢关注！

链接：https://baobeihuijia.com/bbhj/

• 关系

  • 客户端：对连接访问到的前端代码进行解析和渲染，就是浏览器的内核
  • 服务器端：按照规则编写前端界面代码
    • 解析标准就是Web标准
      • HTML：内容
      • CSS：外观
      • JavaScript：动态行为交互

• 

• html：操作系统会将HTML文件默认被浏览器识别

  
  	
  		
  	
  	
  		
  photo
  		 新浪政务 > 正文
  		# 水平分割线
  		
  
  		 是没有语义的行组合标签
  	
  
  

  • 表格

    

  • 表单

    • 属性
      • action： 后台接收的地址
      • get： url后边拼接，url有长度限制
      • post：在消息体中传递，参数不限大小

    
        
    
            name: 
            age: 
            
        
    
    

    • 表单项

      • input：

        

      • select

        

      • textarea

• CSS

  • 格式

    • 行内样式：写在标签的style属性中

    • 内嵌样式：写在html页面的head中

    • 外联样式：写在单独的css文件，通过link引入

  • css选择器:(id>class>元素)

    • 元素选择器 h1
    • class选择器（html中的class可以重复） .class
    • id选择器（html中的id不能重复） #id

• JavaScript（探测页面行为，更好地动态交互体验）

  • js引入

    • 内部脚本

    • 外部脚本

       
      
      alert("hello js")
      

  • JS基础

    // 输出语句
    window.alert(); 警告框
    document.write(); HTML页面输出
    console.log();浏览器控制台
    
    // var定义的变量是全局变量
    // var定义可以重复，会覆盖
    
    
    // let定义是一个局部变量
    // 不可以重复
    
    
    // const声明只读常量，值不能更改
    

  • 变量类型

    number
    string
    boolean
    null
    undefined (变量没被赋值，自动为undefined)
    
    var a = 20;
    typeof(a);
    
    ==  类型不同，值同就为true
    === 类型和值都相同为true
    
    
    // 函数可以传递任意数量的参数
    // 函数定义一
    function add(a,b){
    	return a+b;
    }
    var result = add(10,20);
    
    // 函数定义二
    var add = function(a,b){
    	return a+b;
    }
    var result = add(10,20);
    

  • 数据类型

    • Array

    var arr = new Array(1,2,3,4);
    arr[2] = 3;
    
    arr.length
    foreach()仅遍历有值的元素
    push(7.8.9)
    // 从下标2开始删除两个
    splice(2,2)
    

    • String

    var str = new String("");
    var str = "";
    str.length
    str.charAt(3);// 获取索引位置为3的值
    str.indexOf("lo");// 检索字符串的位置
    var s = str.trim()//去除字符串左右空格
    str.subString(start,end); // 含头不含尾
    

    • js自定义对象

    var user = {
    	name:"Tom",
    	eat:function(){
    		alert("json");
    	}
    	sleep(){
    		alert("sleep");
    	}
    };
    
    user.eat();
    user.name;
    

    • json

    var stu = '{"name":"tom","age":20,"addr":["beijing","shanghai"]}';
    
    // JSON转化为JS对象
    var jsObject = JSON.parse(stu);
    jsObject.name;
    
    //JS对象转为JSON字符串,即{"name":"tom","age":20,"addr":["beijing","shanghai"]}
    var jsonStr = JSON.stringify(jsObject);
    

    • BOM对象：与浏览器沟通

    window对象
        window.alert("xxxxx");
    
        //返回值是true和false
        var flag = window.confirm();
    
        //定时器 setInterval  setTimeout
        
    location对象
    	location.href //获取地址栏的url信息
    	location.href = "www.baidu.com" // 会跳转到新的地址
    

    • DOM:将html语言各个组成部分封装为对象，从而实现页面修改

    # id获取对象
    var img = document.getElementById('img');
    
    # 标签获取对象
    var divs = document.getElementsByTagName('div');
    
    # 根据name属性获取对象
    var ins = document.getElementsByName('hobby');
    
    # 根据class属性获取对象
    var ins = document.getElementsByClassName('cls');
    
    # 举例,innerHTML可以识别html代码
    var ins = document.getElementsByName('hobby');
    for(let i=0;i

  • 事件绑定

    

    

• js的高级框架Vue（view和model之间传递和渲染的方法）

  1、链接到vue
  
  
  2、创建vue对象，给出管控区域以及data
  	new Vue({
          el:"#app",
          data:{
              url:"http://www.baidu.com"
          }
      })
      
      new Vue({
          el:"#app",
          data:{    
          },
          methods:{
              handle:function(){
                  alert("点出来了");
              }
          }
      })
  3、
  	
  
  		# html组件绑定model中的数据用法
          链接1
          链接2
         
         	# 表单组件绑定model中的数据用法
          
      
  	
      
      
  
      	# 表单组件绑定model中的函数用法
          
      
  

• Ajax（前后端交互get/post）

  • 数据交互：ajax可以给服务器发送请求，获得服务器响应的数据
  • 异步交互：不刷新页面，与服务器交换数据并更新部分页面
  • Axios（ajax的封装和简化）
    • 

• Vue标准化开发环境 vue-cli需要下载，就会初始化一个前端框架

  • main.js
  • App.Vue(引用自己写的的vue)
  • 自己的vue：三层架构：template/script/style
  • Vue组件库Element：先找到布局确定整体大小，然后找组件直接赋值粘贴到自己的vue中即可
  • 项目目录下安装axios，然后import axios就可以实现异步交互
  • Vue可以通过route重定向

• Nginx

  • Nginx详解（一文带你搞懂Nginx）-CSDN博客

  • Nginx：动静分离（示意图+配置讲解）-CSDN博客

    • 反向代理
      • 负载均衡
        • 轮询法（默认方法）
        • weight权重模式（加权轮询）
        • ip_hash
      • 动静分离

• Http协议

• 基于TCP协议：三次握手

• 一次请求一次响应，不同请求之间数据不共享

  • 请求数据格式

    • 请求行（请求方式、资源路径、协议以及版本号）
    • 请求头：请求路径以及浏览器版本号
    • 请求体：post的请求参数

  • get和post请求的区别：get参数会写在资源路径，没有请求体，post会写在请求体中

  • 响应数据格式

    • 响应行（协议、状态码、描述）200 OK
    • 响应头：响应数据的类型；响应数据的长度；采用的压缩算法；客户端的缓存时间；cookie
    • 响应体：响应数据给到前端

  • 解析协议：按照字符串格式解析即可

• Tomcat工作原理：搜下边这篇

•