htl26260
htl26260

Web前端技术


web基础-web工作原理，http协议，浏览器缓存
博客分类： JavaScript
web前端技术

浏览器httpweb工作原理cookie .



1，web工作原理

2，http协议

3，浏览器缓存

4，cookie和session

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

1，web工作原理

平时用浏览器，输入网址后回车，页面响应我们想要浏览的内容，简单操作的背后蕴涵了什么原理？

当输入url回车后，客户端（浏览器）会去请求DNS服务器，通过DNS获取域名对应的IP地址，然后通过这个地址找到对应的服务器，要求建立TCP连接，建立连接，客户端发送httpRequest（请求包）后，服务器接收并开始处理请求，调用自身服务，返回httpResponse（响应包），客户端收到响应包后开始渲染body主体，等到全部接收，断开与该服务器端的TCP连接。
•客户端通过TCP/IP协议与服务器端建立TCP连接；
•客户端发送httpRequest请求服务器端的资源；
•服务器接收并开始处理请求，将处理得到的数据返回给客户端；
•客户端与服务器端断开TCP连接，等待下一次请求。



URL：是统一资源定位符的英文缩写。包含协议，http服务器IP或者域名，端口号等。

DNS：域名系统的缩写。它是用于TCP/IP网络，从事将主机名或者域名翻译成IP地址的工作。

DNS的工作模式
1.当输入网址后，操作系统先检查本地hosts文件，看看是否有这个网址的映射关系。
2.第一步没有映射关系，查找本地DNS缓存，有则返回，完成域名解析。
3.第一二步没有映射关系，则查找TCP/IP协议首选的DNS服务器（本地DNS服务器），有则返回给客户端，完成域名解析。
4.上面几步都失效的情况下，则根据本地DNS服务器的设置查询，一级一级的查询上层DNS服务器，最后将结果返回给本地服务器，本地服务器再返回给客户端。



总的来说，浏览器最后发起请求时基于IP来和服务器交互的。



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

HTTP协议详解

HTTP超文本传输协议是一种通过Internet发送与接收数据的协议，客户端发出一个请求，服务器响应这个请求。,它建立在TCP协议之上，一般采用TCP的80端口。
HTTP协议是无状态的，同一个客户端的这次请求和上次请求是没有对应关系，对HTTP服务器来说，它并不知道这两个请求是否来自同一个客户端。

url

http url的格式如右：http://host[":"port][abs_path]

•http表示要通过HTTP协议来定位网络资源；
•host表示合法的Internet主机域名或者IP地址；
•port指定一个端口号，为空则使用缺省端口80；
•abs_path指定请求资源的URI；
•如果URL中没有给出abs_path，那么当它作为请求URI时，必须以“/”的形式给出，通常这个工作浏览器自动帮我们完成。
example：
1、输入：www.guet.edu.cn
浏览器自动转换成：http://www.guet.edu.cn/
2、http:192.168.0.116:8080/index.jsp



HTTP协议详解之请求篇

  http请求由三部分组成，分别是：请求行、消息报头、请求正文





Js代码 
1.GET /domains/example/ HTTP/1.1      //请求行: 请求方法 请求URI HTTP协议/协议版本 
2.Host：www.iana.org             //服务端的主机名 
3.User-Agent：Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4   //告诉HTTP服务器， 客户端使用的操作系统和浏览器的名称和版本 
4.Accept：text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8    //客户端能接收的mine 
5.Accept-Encoding：gzip,deflate,sdch     //是否支持流压缩 
6.Accept-Charset：UTF-8,*;q=0.5      //客户端字符编码集 
7.//空行,用于分割请求头和消息体 
8.//消息体,请求资源参数,例如POST传递的参数 





请求行的请求方法

请求方法有多种，最基本的有4种，分别是GET,POST,PUT,DELETE，对应资源的查，改，增，删4个操作。

主要看看GET和POST的区别:
•GET请求消息体为空，POST请求带有消息体。
•GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连，如：EditPosts.aspx?name=test1&id=123456。POST方法是把提交的数据放在HTTP包的body中。
•GET提交的数据大小有限制（数据大小长度并没有限制，HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制），而POST方法提交的数据没有限制。
•GET方式提交数据，会带来安全问题，比如一个登录页面，通过GET方式提交数据时，用户名和密码将出现在URL上，如果页面可以被缓存或者其他人可以访问这台机器，就可以从历史记录获得该用户的账号和密码。

HTTP协议详解之响应篇

HTTP响应也是由三个部分组成，分别是：状态行、消息报头、响应正文





Js代码 
1.HTTP/1.1 200 OK                     //状态行：HTTP协议版本号 状态码 状态消息 
2.Server: nginx/1.0.8                 //服务器使用的WEB软件名及版本 
3.Date:Date: Tue, 30 Oct 2012 04:14:25 GMT        //发送时间 
4.Content-Type: text/html             //服务器发送信息的类型 
5.Transfer-Encoding: chunked          //表示发送HTTP包是分段发的 
6.Connection: keep-alive              //保持连接状态 
7.Content-Length: 90                  //主体内容长度 
8.//空行 用来分割消息头和主体 
9.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"... //消息体 

状态码

状态码用来告诉客户端,服务器是否产生了预期的Response。状态代码由三位数字组成，第一个数字是响应类别，有五种可能值：

1XX 提示信息 - 表示请求已被成功接收，继续处理
2XX 成功 - 表示请求已被成功接收，理解，接受
3XX 重定向 - 要完成请求必须进行更进一步的处理
4XX 客户端错误 - 请求有语法错误或请求无法实现
5XX 服务器端错误 - 服务器未能实现合法的请求

常见状态代码：
200 OK //客户端请求成功
400 Bad Request //客户端请求有语法错误，不能被服务器所理解
401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
403 Forbidden //服务器收到请求，但是拒绝提供服务
404 Not Found //请求资源不存在，eg：输入了错误的URL
500 Internal Server Error //服务器发生不可预期的错误
503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后，可能恢复正常





Connection：keep-alive

从HTTP/1.1起，默认都开启了Keep-Alive，保持连接特性，简单地说，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接

Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同服务器软件（如Apache）中设置这个时间。



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

浏览器缓存

是把页面信息保存到用户本地磁盘里，包括html缓存和图片js，css等资源的缓存。

缓存的优点：
•服务器响应更快：请求缓存服务器而不是源服务器，这个过程耗时更少，让服务器看上去响应更快。
•减少网络带宽消耗：当副本被重用时会减低客户端的带宽消耗。

缓存工作原理：

页面缓存状态是由http header决定的，一个浏览器请求信息，一个是服务器响应信息。主要包括Pragma: no-cache、Cache-Control、 Expires、 Last-Modified、If-Modified-Since。

原理主要分三步：
1.第一次请求：浏览器通过http的header报头，附带Expires，Cache-Control，Last-Modified/Etag向服务器请求，此时服务器记录第一次请求的Last-Modified/Etag
2.再次请求：当浏览器再次请求的时候，请求头附带Expires，Cache-Control，If-Modified-Since/Etag向服务器请求
3.服务器根据第一次记录的Last-Modified/Etag和再次请求的If-Modified-Since/Etag做对比，判断是否需要更新，服务器通过这两个头判断本地资源未发生变化，客户端不需要重新下载，返回304响应。

原理图：



流程图：





与缓存相关的HTTP扩展消息头

Expires：设置页面过期时间，格林威治时间GMT
Cache-Control：更细致的控制缓存的内容
Last-Modified：请求对象最后一次的修改时间 用来判断缓存是否过期 通常由文件的时间信息产生
ETag：响应中资源的校验值，在服务器上某个时段是唯一标识的。ETag是一个可以 与Web资源关联的记号（token），和Last-Modified功能差不多，也是一个标识符，一般和Last-Modified一起使用，加强服务器判断的准确度。
Date：服务器的时间
If-Modified-Since：客户端存取的该资源最后一次修改的时间，用来和服务器端的Last-Modified做比较
If-None-Match：客户端存取的该资源的检验值，同ETag。



Cache-Control的主要参数

Cache-Control: private/public Public 响应会被缓存，并且在多用户间共享。 Private 响应只能够作为私有的缓存，不能再用户间共享。
Cache-Control: no-cache：不进行缓存
Cache-Control: max-age=x：缓存时间 以秒为单位
Cache-Control: must-revalidate：如果页面是过期的 则去服务器进行获取。



关于图片，css，js，flash的缓存

主要通过修改服务器的配置来实现缓存。



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

cookie和session

因为HTTP协议是无状态的，所以用户的每一次请求都是无状态的，我们不知道在整个Web操作过程中哪些连接与该用户有关，如何解决这个问题？Web经典的解决方案是cookie和session，cookie是一种客户端机制，把用户数据保存在客户端，而session是一种服务器端的机制。

cookie

Cookie是由浏览器维持的，在本地计算机保存一些用户操作的历史信息（当然包括登录信息），并在用户再次访问该站点时浏览器通过HTTP协议将本地cookie内容发送给服务器，从而完成验证，或继续上一步操作。

cookie是有时间限制的，根据生命期不同分成两种：会话cookie和持久cookie；

会话cookie：

如果不设置过期时间，只要关闭浏览器窗口，cookie就消失了。这种生命期为浏览会话期的cookie被称为会话cookie。会话cookie一般保存在内存里。

持久cookie：

浏览器就会把cookie保存到硬盘上，关闭后再次打开浏览器，这些cookie依然有效直到超过设定的过期时间。存储在硬盘上的cookie可以在不同的浏览器进程间共享，比如两个IE窗口。而对于保存在内存的cookie，不同的浏览器有不同的处理方式。

Session



ession机制是一种服务器端的机制，服务器使用一种类似于散列表的结构(也可能就是使用散列表)来保存信息，每一个网站访客都会被分配给一个唯一的标志符,即sessionID。

程序需要为某个客户端的请求创建一个session的时候，服务器首先检查这个客户端的请求里是否包含了一个sessionID，如果有则说明以前已经为此客户创建过session，服务器就按照sessionID把这个session检索出来使用。如果没有，则为此客户创建一个session并且同时生成一个与此session相关联的sessionID，将这个sessionID放在本次响应中返回给客户端保存在cookie里。



总的来说，session通过cookie，在客户端保存sessionID，而将用户的其他会话消息保存在服务端的session对象中。而cookie需要将所有信息都保存在客户端。

你可能感兴趣的:(http协议,web基础-web工作原理,浏览器缓存)

  • SpringMVC拦截器Interceptor导致跨越cors失效 【JAVA】玩家 Springspring
    项目采用前后端分离，服务器端添加了全局的跨域配置，但是却出现了跨域问题，分析了多次请求发现有一部分请求并没有出现跨域，没有出现跨域的请求刚好就是拦截器放行的地址，所以分析可能是权限拦截器处理在跨域处理之前进行导致跨域配置失效。刚开始的跨域配置，继承WebMvcConfigurer类重写addCorsMappings方法：@ConfigurationpublicclassWebMvcConfigim
  • nginx502 Bad Gateway错误解决办法 Hanson, nginx
    一、问题现象nginx部署正常，运行正常。后端tomcat程序部署正常，运行正常。通过nginx反向代理后出现如下报错。nginx配置：server{listen80;listen[::]:80;server_nameweb;root/usr/share/nginx/html;#Loadconfigurationfilesforthedefaultserverblock.include/etc/n
  • 银河麒麟高级服务器操作系统基础docker镜像封装http和docker端口映射操作 熊08 服务器dockerhttpkylinlinux运维
    银河麒麟高级服务器操作系统基础docker镜像封装http和docker端口映射操作一、系统环境二、基础信息2.1docker版本三、具体配置步骤3.1安装docker18.093.1.1卸载系统自带的docker-runc3.1.2安装yum源中最新的docker版本3.2导入测试docker镜像3.3启动一个容器pod3.4进入启动的容器安装web服务3.4.1进入容器3.4.2安装httpd
  • HTML零基础入门详细教程 一花一world 前端htmlcss前端
    欢迎来到HTML的零基础入门教程。HTML是构建网页的基础，是Web开发的必备技能之一。在本教程中，我们将介绍HTML的基础知识，包括HTML的基本结构、标签、属性等内容。让我们开始吧！1.HTML基本结构HTML文档由标签（tag）和文本组成。标签用于描述文本的含义和结构，而文本则是标签所描述的内容。HTML文档的基本结构如下：页面标题页面内容上面的代码是一个最简单的HTML文档。其中，声明了文
  • C# Blazor Full-Stack架构前后端开发详解 老胖闲聊 C#c#架构开发语言
    Blazor是微软推出的一个基于C#和.NET的前端框架，允许开发者使用C#代替JavaScript来构建交互式Web应用。BlazorFull-Stack是指将Blazor前端与ASP.NETCore后端结合，形成一个完整的全栈开发解决方案。以下是对BlazorFull-Stack的发展历史、应用领域、开发工具和工作原理的详细讲解。一、发展历史1.1Blazor的起源2018年：Blazor首次
  • 如何用Flask构建API
    你有没有想过你最喜欢的应用是如何互相通信的？点击手机上的按钮是如何立刻连接到一个信息的世界的？背后的魔力就是我们称之为API的东西，它代表着应用程序编程接口。它就像一个信使，接受请求，告诉系统你想要什么，然后带回响应。听起来很酷，对吧？今天，我们将学习如何使用Flask构建你自己的API，Flask是一个非常简单且轻量的PythonWeb框架。别担心，如果你觉得听起来有些复杂——我们会一步一步地以
  • SvelteKit 最新中文文档教程（13）—— Hooks
    前言Svelte，一个语法简洁、入门容易，面向未来的前端框架。从Svelte诞生之初，就备受开发者的喜爱，根据统计，从2019年到2024年，连续6年一直是开发者最感兴趣的前端框架No.1：Svelte以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级Web项目。为了帮助大家学习Svelte，我同时搭建了Svelte最新的中文文档站点。如果需要进阶学习，也可以入手我
  • 15分钟学 Go 第 42 天：RESTful API设计 凡人的AI工具箱 15分钟学Gogolangrestful开发语言后端算法人工智能
    第42天：RESTfulAPI设计目标：理解RESTfulAPI的设计原则在现代Web开发中，RESTfulAPI（RepresentationalStateTransfer）已经成为了标准的架构风格，用于实现客户端与服务器之间的通信。通过遵循REST的设计原则，我们能够构建简洁、高效、可维护的API接口。今天，我们将深入理解RESTfulAPI的设计原则，并通过实际代码示例来学习如何在Go语言中
  • SpringBoot中WebMvcConfigurer注册多个拦截器（addInterceptors）时的顺序问题（一） 迷雾骑士 开发语言springbootInterceptorWebMvcConfigureaddInterceptorsjava
    在SpringBoot中，你可以通过多次调用registry.addInterceptor()来注册多个拦截器，并通过order()方法或添加顺序来控制它们的执行顺序。以下是具体实现方式：1.注册多个拦截器并控制顺序@ConfigurationpublicclassWebConfigimplementsWebMvcConfigurer{@AutowiredprivateVideoIntercept
  • Java 前端与后端交互：解锁 RESTful API 设计的秘密 小鹿( ﹡ˆoˆ﹡ ) Javajava安全pythonJava
    引言随着互联网技术的快速发展，前后端分离已经成为现代Web开发的主流趋势之一。在这个过程中，RESTfulAPI成为了连接前端界面与后端数据处理的重要桥梁。作为一位拥有20年实战经验的编码专家，我见证了RESTfulAPI在不同场景中的广泛应用，从简单的数据查询到复杂的业务逻辑处理，无不体现出它的强大与灵活。本文将带你深入了解Java在前后端交互中如何运用RESTfulAPI设计，不仅适合初学者入
  • AI对前端开发的冲击更直接？后端开发的AI替代阻力更大？后端开发因技术门槛更高，岗位稳定性略优于前端。 南北极之间 人工智能前端
    基于参考资料和行业现状，前端开发在短期内比后端开发更容易受到AI冲击，但两者均不会被完全取代。以下是具体分析（附参考资料引用）：一、AI对前端开发的冲击更直接自动化程度高：低代码工具（如FigmaAI、Webflow）可通过拖拽生成页面，替代基础布局和组件开发。代码生成工具（如GitHubCopilot、通义灵码）能根据自然语言描述生成HTML/CSS/JavaScript代码，替代30%-50%
  • 后端开发基础：语言选择与 RESTful API 设计 风亦辰739 前后端开发全栈指南restful后端
    在Web开发中，后端（Backend）负责数据存储、业务逻辑处理、权限管理以及与前端（Frontend）的交互。本文将介绍主流后端开发语言及其适用场景，并详细解析RESTfulAPI设计原则，帮助开发者构建高效、规范的后端服务。一、后端开发语言选择后端开发语言决定了系统的可扩展性、性能和维护成本。当前流行的后端语言包括Java、Python和Node.js，它们各自适用于不同的开发场景。1.Jav
  • Calibre-Web Docker部署 清遥丷 docker容器运维
    经测试，pdf支持在线阅读，也就是网页打开，而且也可以记住阅读进度，doc文档不可以在线阅读，只有下载功能，其他暂未测试。！！！请注意，阅读进度是保存在浏览器缓存的，也就是说换一个浏览器或者换一个设备，就无法同步了。目前几个比较多人用的类似的电子书架，几乎都基于Calibre改的，因此几乎都不支持跨设备同步阅读进度，若要同步，一般是基于WebDev实现。一.Calibre-Web是什么Calibr
  • 微信小程序架构 管理大亨 微信小程序
    微信小程序的架构是结合了BS（Browser-Server，浏览器-服务器）架构和CS（Client-Server，客户端-服务器）架构的混合架构。这种架构方式使得微信小程序既具有BS架构的便利性，也具备CS架构的丰富用户体验。微信小程序架构概述微信小程序架构主要包括以下几个部分：系统架构：PageFrame：Web应用在微信下实现如原生应用般顺滑的体验，主要通过PageFrame实现。Nativ
  • Effective C++ 学习笔记 条款23 宁以non-member、non-friend替换member函数 吃着火锅x唱着歌 EffectiveC++（第三版）c++学习笔记
    想象有个class用来表示网页浏览器。这样的class可能提供的众多函数中，有一些用来清除下载元素高速缓存区（cacheofdownloadedelements）、清除访问过的URLs的历史记录（historyofvisitedURLs）、以及移除系统中的所有cookies：classWebBrowser{public://...voidclearCache();voidclearHistory(
  • Effective C++ 详解条款23：宁以non-member、non-friend替换member函数 慵懒小书虫 EffectiveC++c++封装成员函数面向对象编程class
    总结：宁可拿non-membernon-friend函数替换member函数。这样做可以增加封装性、包裹弹性（packagingflexibility）和机能扩充性。举例：一个class用来表示网页浏览器。这样的class可能提供的众多函数中，有一些用来清除下载元素高速缓存区、清除访问过的URLS的历史记录、以及移除系统中的所有cookies：classwebBrowser{public:...v
  • WebRTC中音视频服务质量QoS之FEC+NACK调用流程 chen_song_ WebRTC源码探秘webrtc音视频FECNACKH264udpRTC
    WebRTC中音视频服务质量QoS之FEC+NACK调用流程WebRTC中音视频服务质量QoS之FEC+NACK调用流程WebRTC中音视频服务质量QoS之FEC+NACK调用流程前言一、WebRTC中FEC基础原理1.FEC基础操作异或操作XOR2、FEC中行向和纵向计算3、WebRTC中媒体包分组和生成FEC的包数①kFecRateTable表:使用于确定媒体包的个数②kPacketMaskR
  • 一个功能强大、开源、必学的Python Web开发框架——Django 遇码 Pythonpythondjango后端flaskfastapiweb开发语言
    你是否已经对FastAPI、Flask有了一定的了解？你开发维护的Web项目是否功能越来越复杂？你是否会出现技术选型的困难症？轻量的web开发框架就像是没有任何应用的操作系统，当你需要完成某项任务的时候，首先你需要清楚的知道有哪些应用可以用，其次才是学会使用应用。这个时候，你会不会想要一款功能强大的框架呢？答案是：Django。什么是DjangoDjango是一个由Python编写的开源免费的We
  • python web前端开发框架,python 前端框架 weixin_39637924 pythonweb前端开发框架
    Pythonweb开发一定要用框架吗?Pythonweb开发不一定要用框架因为PythonWeb框架也是Python开发出来的。只是为了减少重复造轮子，降低开发门槛。Python的Web并不作为语言的一部分实现。因为通用语言的设计目标，Python通过Cextension形式的标准库。Python几种主流框架比较从GitHub中整理出的15个最受欢迎的Python开源框架。这些框架包括事件I/O，
  • C语言中的 `fwrite` 和 `fread` 函数：文件读写的利器 人才程序员 C语言系列课程c语言算法数据结构开发语言软件c++软件工程
    文章目录C语言中的`fwrite`和`fread`函数：文件读写的利器️1.`fwrite`函数：向文件写入数据1.1`fwrite`的基本语法1.2`fwrite`的工作原理1.3`fwrite`示例2.`fread`函数：从文件读取数据2.1`fread`的基本语法2.2`fread`的工作原理2.3`fread`示例3.`fwrite`和`fread`的常见用途3.1适用场景3.2注意事项4
  • Docker 存储驱动那些小秘密：差异、场景与选择指南 weixin_42587823 云原生dockereurekajava
    Docker存储驱动那些小秘密：差异、场景与选择指南在日常使用Docker部署应用时，我们经常会遇到存储问题。其实，Docker背后的存储驱动就像是汽车的发动机，决定了容器文件系统的表现。今天，我就来聊聊常见的几种存储驱动：overlay2、aufs、devicemapper、Btrfs、ZFS以及vfs，它们各有千秋，适用的场景也不尽相同。一、Docker存储驱动的工作原理首先，简单了解下Doc
  • NET Core2.0 三层架构，依赖注入DAL,BLL qq_18932003 .netcore架构c#开发语言
    NETCore搭建三层架构，每层之间使用依赖注入获取实例NETCore三层架构，依赖注入_晓剑-CSDN博客项目结构如下常用的三层，Web-BLL-DLLBLL与DAL层分为Interface里边是提供接口，Implments提供实现类，DIRegister提供依赖注入的映射关系一：新建好三层添加好每层之间的依赖项目之间的依赖还是像以前一样，右键添加引用即可vs2017添加引用的是可能会报错：找不
  • 分享一个让 uniapp 微信小程序支持 EventSource 的方法 魔众 uni-app微信小程序notepad++
    微信小程序不支持EventSource（SSE）是一种HTML5标准，旨在提供一种方式来在Web应用中实现异步通信和事件处理。然而，根据现有的信息，uni-app并没有直接支持EventSource，这意味着开发者需要寻找其他技术或替代方案来实现类似的效果。尽管有些主流浏览器支持SSE，但小程序目前还不能兼容这个API，这可能是由于微信平台对新技术的兼容性考虑或是开发生态的限制。一个替代实现方式c
  • 80端口深度解析：从协议原理到工程实践 网安秘谈 后端网络协议
    一、端口机制与HTTP协议栈1.1TCP/IP模型中的端口定位在TCP/IP四层模型中，端口属于传输层的核心概念。每个端口对应一个16位无符号整数（0-65535），其中0-1023为知名端口（Well-KnownPorts）。80端口作为HTTP协议默认端口，在RFC2616中明确规定其标准用途。1.2协议栈交互流程典型HTTP请求在协议栈中的封装过程：plaintextApplicationL
  • 手动搭建并配置react项目（webpack5） 程序员宝妈 webpack打包Reactreact.js前端前端框架
    手动搭建并配置react项目（webpack5）介绍不使用脚手架，利用webpack，手动搭建react项目框架1、项目创建创建目录react_wepack2、webpack+react基础架构2.1配置webpack.dev.js基础配置说明可参考这篇文章配置loader、plugin、eslint【见webpack.dev.js】constpath=require("path");constM
  • Vue + webpack 项目实践 GarfieldEr007 Vue.jsVuewebpack
    最近在内部项目中做了一些基于vue+webpack的尝试，在小范围和同事们探讨之后，还是蛮多同学认可和喜欢的，所以通过blog分享给更多人。首先，我会先简单介绍一下vue和webpack：(当然如果你已经比较熟悉它们的话前两个部分可以直接跳过)介绍vueVue.js是一款极简的mvvm框架，如果让我用一个词来形容它，就是“轻·巧”。如果用一句话来描述它，它能够集众多优秀逐流的前端框架之大成，但同时
  • 网吧网络的边缘计算 黑石云 边缘计算
    网吧的网络在理论上是能够用于P2PCDN（点对点内容分发网络）的，但需综合评估以下核心条件及潜在风险：一、可行性分析硬件基础带宽优势：网吧通常采用高带宽网络（如万兆到桌面），能稳定提供P2PCDN所需的上行带宽资源。设备性能：网吧电脑配置较高（多核CPU、大内存、SSD），满足作为分布式节点的计算与存储需求。技术适配P2PCDN特性：技术如WebTorrent支持浏览器内P2P传输，兼容性强，即使
  • web第三次作业 Forget_8550 前端cssjavascript
    弹窗案例1.首页代码      综合案例      *{      margin:0;      padding:0;      box-sizing:border-box;    }    html,body{      width:100%;      height:100%;    }    .container{      width:100%;      height:100%;    
  • Vue3 + GSAP：打造炫酷动效的终极指南 来自星星的坤 vue.js前端动画
    前言在现代前端开发中，动画已经成为提升用户体验的重要方式。Vue3作为一个强大的前端框架，与GSAP（GreenSockAnimationPlatform）结合，能让你的页面动效更加流畅且易于控制。本文将详细讲解如何在Vue3中集成GSAP，并带你实战几个常见的动画案例。1.什么是GSAP？GSAP是一个功能强大的JavaScript动画库，支持DOM、SVG、Canvas以及WebGL动画，具有
  • selenium入门示例 abcque PythonSpiderTutorial
    fromseleniumimportwebdriverfromselenium.webdriver.common.keysimportKeysfromselenium.webdriver.support.waitimportWebDriverWaitfromselenium.webdriver.supportimportexpected_conditionsasECfromselenium.web
  • java观察者模式 3213213333332132 java设计模式游戏观察者模式
    观察者模式——顾名思义，就是一个对象观察另一个对象，当被观察的对象发生变化时，观察者也会跟着变化。 在日常中，我们配java环境变量时，设置一个JAVAHOME变量,这就是被观察者，使用了JAVAHOME变量的对象都是观察者，一旦JAVAHOME的路径改动，其他的也会跟着改动。 这样的例子很多，我想用小时候玩的老鹰捉小鸡游戏来简单的描绘观察者模式。 老鹰会变成观察者，母鸡和小鸡是
  • TFS RESTful API 模拟上传测试 ronin47
           TFS RESTful API 模拟上传测试。 　　 细节参看这里：https://github.com/alibaba/nginx-tfs/blob/master/TFS_RESTful_API.markdown 模拟POST上传一个图片： curl --data-binary @/opt/tfs.png http
  • PHP常用设计模式单例, 工厂, 观察者, 责任链, 装饰, 策略,适配,桥接模式 dcj3sjt126com 设计模式PHP
    // 多态, 在JAVA中是这样用的, 其实在PHP当中可以自然消除, 因为参数是动态的, 你传什么过来都可以, 不限制类型, 直接调用类的方法 abstract class Tiger { public abstract function climb(); } class XTiger extends Tiger { public function climb()
  • hibernate 171815164 Hibernate
    main,save Configuration conf =new Configuration().configure(); SessionFactory sf=conf.buildSessionFactory(); Session sess=sf.openSession(); Transaction tx=sess.beginTransaction(); News a=new
  • Ant实例分析 g21121 ant
            下面是一个Ant构建文件的实例，通过这个实例我们可以很清楚的理顺构建一个项目的顺序及依赖关系，从而编写出更加合理的构建文件。           下面是build.xml的代码： <?xml version="1
  • [简单]工作记录_接口返回405原因 53873039oycg 工作
             最近调接口时候一直报错，错误信息是:       responseCode:405 responseMsg:Method Not Allowed        接口请求方式Post.
  • 关于java.lang.ClassNotFoundException 和 java.lang.NoClassDefFoundError 的区别 程序员是怎么炼成的
       真正完成类的加载工作是通过调用 defineClass来实现的；  而启动类的加载过程是通过调用 loadClass来实现的；  就是类加载器分为加载和定义   protected Class<?> findClass(String name) throws ClassNotFoundExcept
  • JDBC学习笔记-JDBC详细的操作流程 aijuans jdbc
    所有的JDBC应用程序都具有下面的基本流程：　　1、加载数据库驱动并建立到数据库的连接。　　2、执行SQL语句。　　3、处理结果。　　4、从数据库断开连接释放资源。 下面我们就来仔细看一看每一个步骤： 其实按照上面所说每个阶段都可得单独拿出来写成一个独立的类方法文件。共别的应用来调用。 1、加载数据库驱动并建立到数据库的连接：   Html代码  St
  • rome创建rss antonyup_2006 tomcatcmsxmlstrutsOpera
    引用 1.RSS标准 RSS标准比较混乱，主要有以下3个系列 RSS 0.9x / 2.0 : RSS技术诞生于1999年的网景公司(Netscape)，其发布了一个0.9版本的规范。2001年，RSS技术标准的发展工作被Userland Software公司的戴夫 温那(Dave Winer)所接手。陆续发布了0.9x的系列版本。当W3C小组发布RSS 1.0后，Dave W
  • html表格和表单基础 百合不是茶 html表格表单meta锚点
    第一次用html来写东西,感觉压力山大,每次看见别人发的都是比较牛逼的 再看看自己什么都还不会,   html是一种标记语言,其实很简单都是固定的格式   _----------------------------------------表格和表单 表格是html的重要组成部分,表格用在body里面的 主要用法如下; <table> &
  • ibatis如何传入完整的sql语句 bijian1013 javasqlibatis
            ibatis如何传入完整的sql语句？进一步说，String str ="select * from test_table"，我想把str传入ibatis中执行，是传递整条sql语句。         解决办法： <
  • 精通Oracle10编程SQL(14)开发动态SQL bijian1013 oracle数据库plsql
    /* *开发动态SQL */ --使用EXECUTE IMMEDIATE处理DDL操作 CREATE OR REPLACE PROCEDURE drop_table(table_name varchar2) is sql_statement varchar2(100); begin sql_statement:='DROP TABLE '||table_name;
  • 【Linux命令】Linux工作中常用命令 bit1129 linux命令
    不断的总结工作中常用的Linux命令   1.查看端口被哪个进程占用   通过这个命令可以得到占用8085端口的进程号，然后通过ps -ef|grep 进程号得到进程的详细信息   netstat -anp | grep 8085   察看进程ID对应的进程占用的端口号   netstat -anp | grep 进程ID &
  • 优秀网站和文档收集 白糖_ 网站
    集成 Flex, Spring, Hibernate 构建应用程序   性能测试工具-JMeter   Hmtl5-IOCN网站   Oracle精简版教程网站   鸟哥的linux私房菜   Jetty中文文档   50个jquery必备代码片段   swfobject.js检测flash版本号工具
  • angular.extend boyitech AngularJSangular.extendAngularJS API
    angular.extend 复制src对象中的属性去dst对象中. 支持多个src对象. 如果你不想改变一个对象，你可以把dst设为空对象{}: var object = angular.extend({}, object1, object2). 注意: angular.extend不支持递归复制. 使用方法: angular.extend(dst, src); 参数:
  • java-谷歌面试题-设计方便提取中数的数据结构 bylijinnan java
    网上找了一下这道题的解答，但都是提供思路，没有提供具体实现。其中使用大小堆这个思路看似简单，但实现起来要考虑很多。 以下分别用排序数组和大小堆来实现。 使用大小堆： import java.util.Arrays; public class MedianInHeap { /** * 题目：设计方便提取中数的数据结构 * 设计一个数据结构，其中包含两个函数，1.插
  • ajaxFileUpload 针对 ie jquery 1.7+不能使用问题修复版本 Chen.H ajaxFileUploadie6ie7ie8ie9
    jQuery.extend({ handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); }
  • [机器人制造原则]机器人的电池和存储器必须可以替换 comsci 制造
           机器人的身体随时随地可能被外来力量所破坏,但是如果机器人的存储器和电池可以更换,那么这个机器人的思维和记忆力就可以保存下来,即使身体受到伤害,在把存储器取下来安装到一个新的身体上之后,原有的性格和能力都可以继续维持.....        另外,如果一
  • Oracle Multitable INSERT 的用法 daizj oracle
    转载Oracle笔记-Multitable INSERT 的用法 http://blog.chinaunix.net/uid-8504518-id-3310531.html 一、Insert基础用法 语法：     Insert Into 表名 (字段1,字段2,字段3...）     Values (值1,
  • 专访黑客历史学家George Dyson datamachine on
    20世纪最具威力的两项发明——核弹和计算机出自同一时代、同一群年青人。可是，与大名鼎鼎的曼哈顿计划（第二次世界大战中美国原子弹研究计划）相 比，计算机的起源显得默默无闻。出身计算机世家的历史学家George Dyson在其新书《图灵大教堂》（Turing’s Cathedral）中讲述了阿兰·图灵、约翰·冯·诺依曼等一帮子天才小子创造计算机及预见计算机未来
  • 小学6年级英语单词背诵第一课 dcj3sjt126com englishword
    always 总是 rice 水稻，米饭 before 在...之前 live 生活，居住   usual 通常的 early 早的 begin 开始 month 月份   year 年 last 最后的 east 东方的 high 高的   far 远的 window 窗户 world 世界 than 比...更  
  • 在线IT教育和在线IT高端教育 dcj3sjt126com 教育
    codecademy  http://www.codecademy.com codeschool  https://www.codeschool.com teamtreehouse  http://teamtreehouse.com lynda http://www.lynda.com/ Coursera https://www.coursera.
  • Struts2 xml校验框架所定义的校验文件 蕃薯耀 Struts2 xml校验Struts2 xml校验框架Struts2校验
      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 15:54:59 星期六 http://fa
  • mac下安装rar和unrar命令 hanqunfeng mac
    1.下载：http://www.rarlab.com/download.htm 选择 RAR 5.21 for Mac OS X 2.解压下载后的文件 tar -zxvf rarosx-5.2.1.tar 3.cd rar sudo install -c -o $USER unrar /bin #输入当前用户登录密码 sudo install -c -o $USER rar
  • 三种将list转换为map的方法 jackyrong list
      在本文中，介绍三种将list转换为map的方法： 1） 传统方法 假设有某个类如下    class Movie { private Integer rank; private String description; public Movie(Integer rank, String des
  • 年轻程序员需要学习的5大经验 lampcy 工作PHP程序员
    在过去的7年半时间里，我带过的软件实习生超过一打，也看到过数以百计的学生和毕业生的档案。我发现很多事情他们都需要学习。或许你会说，我说的不就是某种特定的技术、算法、数学，或者其他特定形式的知识吗？没错，这的确是需要学习的，但却并不是最重要的事情。他们需要学习的最重要的东西是“自我规范”。这些规范就是：尽可能地写出最简洁的代码；如果代码后期会因为改动而变得凌乱不堪就得重构；尽量删除没用的代码，并添加
  • 评“女孩遭野蛮引产致终身不育 60万赔偿款1分未得”医腐深入骨髓 nannan408
    先来看南方网的一则报道： 再正常不过的结婚、生子，对于29岁的郑畅来说，却是一个永远也无法实现的梦想。从2010年到2015年，从24岁到29岁，一张张新旧不一的诊断书记录了她病情的同时，也清晰地记下了她人生的悲哀。 　　粗暴手术让人发寒 　　2010年7月，在酒店做服务员的郑畅发现自己怀孕了，可男朋友却联系不上。在没有和家人商量的情况下，她决定堕胎。 　　12月5日，
  • 使用jQuery为input输入框绑定回车键事件 VS 为a标签绑定click事件 Everyday都不同 jspinput回车键绑定clickenter
    假设如题所示的事件为同一个，必须先把该js函数抽离出来，该函数定义了监听的处理：   function search() { //监听函数略...... }   为input框绑定回车事件，当用户在文本框中输入搜索关键字时，按回车键，即可触发search():   //回车绑定 $(".search").keydown(fun
  • EXT学习记录 tntxia ext
      1. 准备   （1） 官网：http://www.sencha.com/   里面有源代码和API文档下载。   EXT的域名已经从www.extjs.com改成了www.sencha.com ，但extjs这个域名会自动转到sencha上。   （2）帮助文档：   想要查看EXT的官方文档的话，可以去这里h
  • mybatis3的mapper文件报Referenced file contains errors xingguangsixian mybatis
    最近使用mybatis.3.1.0时无意中碰到一个问题： The errors below were detected when validating the file "mybatis-3-mapper.dtd" via the file "account-mapper.xml". In most cases these errors can be d
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他