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

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

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

  • 关系

    • 客户端:对连接访问到的前端代码进行解析和渲染,就是浏览器的内核
    • 服务器端:按照规则编写前端界面代码
      • 解析标准就是Web标准
        • HTML:内容
        • CSS:外观
        • JavaScript:动态行为交互
  • html:操作系统会将HTML文件默认被浏览器识别

    <html>
    	<head>
    		<title>快速</title>
    	</head>
    	<body>
    		<h1>photo</h1>
    		<img src="img/1.jpg" width="300" height="200"> <a href="www.csdn/" target="_self">新浪政务</a> > 正文
    		# 水平分割线
    		<hr></hr>
    		<span></span> 是没有语义的行组合标签
    	</body>
    </html>
    
    • 表格

    • 表单

      • 属性

        • action: 后台接收的地址

        • get: url后边拼接,url有长度限制

        • post:在消息体中传递,参数不限大小

          <body> <form action="" method="get"> name: age: </form> </body>
      • 表单项

        • input:

        • select

        • textarea

  • CSS

    • 格式

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

      • <h1 style = "xxx:xxx;xxx:xxx;">

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

      • <style> h1{ xxx:xxx; } </style>

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

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

      • 元素选择器 h1
      • class选择器(html中的class可以重复) .class
      • id选择器(html中的id不能重复) #id
  • JavaScript(探测页面行为,更好地动态交互体验)

    • js引入

      • 内部脚本

        <script>
        	alert("hello js")
        </script>
        
      • 外部脚本

        <script src="js/demo.js"></script> 
        
        alert("hello js")
        
    • JS基础

      // 输出语句
      window.alert(); 警告框
      document.write(); HTML页面输出
      console.log();浏览器控制台
      
      // var定义的变量是全局变量
      // var定义可以重复,会覆盖
      <script>   
          var a = 20;
          a = "张三";
          alert(a)
      </script>
      
      // let定义是一个局部变量
      // 不可以重复
      <script>   
          {
              let x=1
              alert(x)
          }
      </script>
      
      // 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<ins.length;i++){
        ins[i].innerHTML += "very good"
        }

    • 事件绑定

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

    1、链接到vue
    <script src="js/vue.js"></script>
    
    2、创建vue对象,给出管控区域以及data
    	new Vue({
            el:"#app",
            data:{
                url:"http://www.baidu.com"
            }
        })
        
        new Vue({
            el:"#app",
            data:{    
            },
            methods:{
                handle:function(){
                    alert("点出来了");
                }
            }
        })
    3、
    	<div id="app">
    		# html组件绑定model中的数据用法
            <a :href="url">链接1</a>
            <a v-bind:href="url">链接2</a>
           
           	# 表单组件绑定model中的数据用法
            <input type = "text" v-model = "url">
        </div>	
        
        <div id="app">
        	# 表单组件绑定model中的函数用法
            <input type = "button" value="点击" v-on:click="handle()">
        </div>
    
  • 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

  • Http协议

  • 基于TCP协议:三次握手

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

    • 请求数据格式

      • 请求行(请求方式、资源路径、协议以及版本号)
      • 请求头:请求路径以及浏览器版本号
      • 请求体:post的请求参数
    • get和post请求的区别:get参数会写在资源路径,没有请求体,post会写在请求体中

    • 响应数据格式

      • 响应行(协议、状态码、描述)200 OK
      • 响应头:响应数据的类型;响应数据的长度;采用的压缩算法;客户端的缓存时间;cookie
      • 响应体:响应数据给到前端
    • 解析协议:按照字符串格式解析即可

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

相关推荐
Summer不秃4 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰8 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye15 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm17 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
zmd-zk41 分钟前
flink学习(2)——wordcount案例
大数据·开发语言·学习·flink
乐闻x44 分钟前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Chef_Chen1 小时前
从0开始学习机器学习--Day33--机器学习阶段总结
人工智能·学习·机器学习
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js