JavaWeb(一)

初识web前端

Snipaste 2025 02 09 22 46 58
Snipaste 2025 02 09 22 48 17

Web标准

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。
三个组成部分：
HTML：负责网页的结构（页面元素和内容）。
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
JavaScript：负责网页的行为（交互效果）。

前端学习安排+引入

Snipaste 2025 02 09 23 00 31
HTML（HyperText Markup Language）：超文本标记语言。
超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
标记语言：由标签构成的语言
HTML标签都是预定义好的。例如：使用<**a**>展示超链接，使用<**img**>展示图片，<**video**>展示视频。
HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（表现）。

HTML+CSS

HTML入门

标题

HTML结构标签

<html>
	<head>    
		   <title>标题</title>
	</head>
	<body>
    
	</body>
</html>

特点

HTML标签不区分大小写
HTML标签属性值单双引号都可以
HTML语法松散

标签

标题标签：
1
<h1>…</h1>
（h1 → h6 重要程度依次降低）
注意：HTML标签都是预定义好的，不能自己随意定义。
图片标签：
1
<img>
src：指定图像的url（绝对路径 / 相对路径）
绝对路径：绝对磁盘路径（D:/xxxx）、绝对网络路径（https://xxxx）
相对路径：从当前文件开始查找。（./ : 当前目录, ../ : 上级目录）

width：图像的宽度（像素 / 相对于父元素的百分比）
height：图像的高度（像素 / 相对于父元素的百分比）
只设置一个等比例缩放不变形

水平线标签：
1
<hr>

标题样式CSS引入方式：

行内样式：写在标签的style属性中（不推荐）
1
2
<h1 style="xxx: xxx; xxx: xxx;">中国新闻网</h1>
内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
1
2
3
4
5
6
7
<style>
h1 {
xxx: xxx;
xxx: xxx;
}
</style>

外联样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入）

h1 {
   xxx: xxx; 
   xxx: xxx;
}

1	<link rel="stylesheet" href="css/news.css">

【颜色的三种表示形式及字体大小】
color: 设置文本内容的颜色
font-size：字体大小（注意：记得加px）

表示方式	表示含义	取值
关键字	预定义的颜色名	red、green、blue…
rgb表示法	红绿蓝三原色，每项取值范围：0-255	rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
十六进制表示法	#开头，将数字转换成十六进制表示	#000000、#ff0000、#cccccc，简写：#000、#ccc

【span标签】

1 2	<span> 是一个在开发网页时大量会用到的没有语义的布局标签特点：一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

【CSS选择器】
Snipaste 2025 02 12 20 43 41

【超链接】
Snipaste 2025 02 12 20 44 35

正文

正文排版

视频标签：<video>
src：规定视频的url
controls：显示播放控件
width：播放器的宽度
height：播放器的高度
音频标签：<audio>
src：规定音频的url
controls：显示播放控件
段落标签：<p>
文本加粗标签: <b> / <strong>
css样式：line-height：设置行高
        text-indent：定义第一个行内容的缩进
        text-align：规定元素中的文本的水平对齐方式
在HTML中无论输入多少个空格，只会显示一个。 可以使用空格占位符：&nbsp;

页面布局

盒子模型

组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
Snipaste 2025 02 13 17 47 47

width：设置宽度
height：设置高度
border：设置边框的属性，如：1px solid #000；
padding：内边距  //上左下右，居中可缩写为：，0 auto ，会自动帮你计算左右
margin：外边距
注意：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上 –位置，如：padding-top、padding-left、padding-right …

布局标签

实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。

标签：<div>  <span>
特点：
    div标签：
        一行只显示一个（独占一行）
        宽度默认是父元素的宽度，高度默认由内容撑开
        可以设置宽高（width、height）
    span标签：
        一行可以显示多个
        宽度和高度默认由内容撑开
        不可以设置宽高（width、height）

表格标签

<table>：定义表格，可以包裹多个 <tr>，其中：
    border：规定表格边框的宽度
    width：规定表格的宽度
    cellspacing: 规定单元之间的空间。
<tr>：定义表格中的行，一个 <tr> 表示一行，可以包裹多个 <td>，一个 <tr> 表示一行
<td>：表示普通单元格，表格单元格(普通)，可以包裹内容。如果是表头单元格，可以替换为 <th>，具有加粗居中效果

Snipaste 2025 02 13 17 50 57

表单标签

场景：在网页中主要负责数据采集功能，如 注册、登录等数据采集。
标签：<form>
表单项：不同类型的 input 元素、下拉列表、文本域等。
 <input>：定义表单项，通过type属性控制输入形式
 <select>：定义下拉列表
 <textarea>：定义文本域
属性：
action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
        method: 表单的提交方式 .
            get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . method的默认方式
            post: 在消息体(请求体)中传递的, 参数大小无限制的.

表单项标签

Snipaste 2025 02 13 21 44 43
Snipaste 2025 02 13 21 41 16

JS

JS引入方式

Snipaste 2025 02 14 15 20 23

JS基础语法

书写语法

1区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
2每行结尾的分号可有可无
3注释：
    单行注释：// 注释内容     ctrl+/
    多行注释：/* 注释内容 */   ctrl+shift+/
4大括号表示代码块
5输出：
    使用 window.alert() 写入警告框
    使用 document.write() 写入 HTML 输出
    使用 console.log() 写入浏览器控制台

变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量 。
var:声明变量，全局作用域/函数作用域，允许重复声明
JavaScript 是一门弱类型语言，变量可以存放不同类型的值 。
变量名需要遵循如下规则：
    组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
    数字不能开头
    建议使用驼峰命名
注意：ECMAScript 6 新增了
    1   let 关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。
    2   const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

数据类型、运算符、流程控制语句

数据类型

JavaScript中分为：原始类型 和 引用类型
原始类型：
    number：数字（整数、小数、NaN(Not a Number)）
     string：字符串，单双引皆可
     boolean：布尔。true，false
     null：对象为空
     undefined：当声明的变量未初始化时，该变量的默认值是 undefined
使用 typeof 运算符可以获取数据类型

运算符

算术运算符：+ , - , * , / , % , ++ , --
 赋值运算符：= , += , -= , *= , /= , %=
 比较运算符：> , < , >= , <= , != , == , === 
 逻辑运算符：&& , || , !
 三元运算符：条件表达式 ? true_value: false_value
 注意：== 会进行类型转换，=== 不会进行类型转换

eg.

var a = 10;
alert(a == "10"); //true
alert(a === "10"); //false
alert(a === 10); //true

字符串类型转为数字：
    将字符串字面值转为数字。 如果字面值不是数字，则转为NaN。
    eg. alert(parseInt("12")); //12
        alert(parseInt("1222A45")); //1222
        alert(parseInt("A45")); //NaN
其他类型转为boolean：
    Number：0 和 NaN为false，其他均转为true。
    String：空字符串为false，其他均转为true。
    Null 和 undefined ：均转为false。

流程控制语句

if…else if …else…
 switch
 for 
 while
 do … while

Snipaste 2025 02 14 13 21 12

JS函数

Snipaste 2025 02 14 15 33 18
Snipaste 2025 02 14 15 33 57

JS对象

基础对象

Array

//这是Java中的，莫记混淆：
int a[]=new int[]{1,2,3};
int b[]={1,2};
int c[]=new int[3];// 三种写法
System.out.println(c.length);
System.out.println(" ".length()); 
ArrayList list=new ArrayList();
System.out.println(list.size());

String

JSON

浏览器对象模型BOM

文档对象模型DOM

JS事件绑定

Vue

Ajax(axios2)

前端工程化

环境配置

Element组件库

Vue项目实战

Vue路由

通过Nginx打包部署

nginx反向代理和负载均衡

对登录功能测试完毕后，接下来，我们思考一个问题：前端发送的请求，是如何请求到后端服务的？

前端请求地址：http://localhost/api/employee/login

后端接口地址：http://localhost:8080/admin/employee/login

前端请求地址 后端接口地址

很明显，两个地址不一致，那是如何请求到后端服务的呢？

1). nginx反向代理

nginx 反向代理，就是将前端发送的动态请求由 nginx 转发到后端服务器

那为什么不直接通过浏览器直接请求后台服务端，需要通过nginx反向代理呢？

nginx 反向代理的好处：

提高访问速度

因为nginx本身可以进行缓存，如果访问的同一接口，并且做了数据缓存，nginx就直接可把数据返回，不需要真正地访问服务端，从而提高访问速度。
进行负载均衡

所谓负载均衡,就是把大量的请求按照我们指定的方式均衡的分配给集群中的每台服务器。
保证后端服务安全

因为一般后台服务地址不会暴露，所以使用浏览器不能直接访问，可以把nginx作为请求访问的入口，请求到达nginx后转发到具体的服务中，从而保证后端服务的安全。

nginx 反向代理的配置方式：

server{
    listen 80;
    server_name localhost;
    
    location /api/{
        proxy_pass http://localhost:8080/admin/; #反向代理
    }
}

proxy_pass：该指令是用来设置代理服务器的地址，可以是主机名称，IP地址加端口号等形式。

如上代码的含义是：监听80端口号，然后当我们访问 http://localhost:80/api/../..这样的接口的时候，它会通过 location /api/ {} 这样的反向代理到 http://localhost:8080/admin/上来。

接下来，进到nginx-1.20.2\conf，打开nginx配置

# 反向代理,处理管理端发送的请求
location /api/ {
   proxy_pass   http://localhost:8080/admin/;
    #proxy_pass   http://webservers/admin/;
}

当在访问http://localhost/api/employee/login，nginx接收到请求后转到http://localhost:8080/admin/，故最终的请求地址为http://localhost:8080/admin/employee/login，和后台服务的访问地址一致。

2). nginx 负载均衡

当如果服务以集群的方式进行部署时，那nginx在转发请求到服务器时就需要做相应的负载均衡。其实，负载均衡从本质上来说也是基于反向代理来实现的，最终都是转发请求。

nginx 负载均衡的配置方式：

upstream webservers{
    server 192.168.100.128:8080;
    server 192.168.100.129:8080;
}
server{
    listen 80;
    server_name localhost;
    
    location /api/{
        proxy_pass http://webservers/admin;#负载均衡
    }
}

upstream：如果代理服务器是一组服务器的话，我们可以使用upstream指令配置后端服务器组。

如上代码的含义是：监听80端口号，然后当我们访问 http://localhost:80/api/../..这样的接口的时候，它会通过 location /api/ {} 这样的反向代理到 http://webservers/admin ，根据webservers名称找到一组服务器，根据设置的负载均衡策略(默认是轮询)转发到具体的服务器。

注：upstream后面的名称可自定义，但要上下保持一致。

nginx 负载均衡策略：

名称	说明
轮询	默认方式
weight	权重方式，默认为1，权重越高，被分配的客户端请求就越多
ip_hash	依据ip分配方式，这样每个访客可以固定访问一个后端服务
least_conn	依据最少连接方式，把请求优先分配给连接数少的后端服务
url_hash	依据url分配方式，这样相同的url会被分配到同一个后端服务
fair	依据响应时间方式，响应时间短的服务将会被优先分配

具体配置方式：

轮询：

upstream webservers{
    server 192.168.100.128:8080;
    server 192.168.100.129:8080;
}

weight:

upstream webservers{
    server 192.168.100.128:8080 weight=90;
    server 192.168.100.129:8080 weight=10;
}

ip_hash:

upstream webservers{
    ip_hash;
    server 192.168.100.128:8080;
    server 192.168.100.129:8080;
}

least_conn:

upstream webservers{
    least_conn;
    server 192.168.100.128:8080;
    server 192.168.100.129:8080;
}

url_hash:

upstream webservers{
    hash &request_uri;
    server 192.168.100.128:8080;
    server 192.168.100.129:8080;
}

fair:

upstream webservers{
    server 192.168.100.128:8080;
    server 192.168.100.129:8080;
    fair;
}