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

发布时间：2023年12月26日

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

链接：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: <input type="text" name = "username">
        age: <input type="text" name="age">
        <input type="submit" value = "ok">
    </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 += "<font color='red'>very good</font>"
}

    • 事件绑定

      在这里插入图片描述

      在这里插入图片描述

  • 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工作原理：搜下边这篇

  • 在这里插入图片描述

文章来源:https://blog.csdn.net/CZY925323/article/details/135216991
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章