蓝旭前端开发：GIT+移动端 web 开发


目录

  • 一、==GIT==
  • 1.1 ==Git与GitHub==
  • 1.2 ==GitHub注册和Git的下载安装==
  • 二、==Git的使用==
  • 2.1 ==本地仓库==
  • 2.1.1 ==工作流程==
  • 2.1.2 ==本地仓库操作==
  • 2.1.3 ==错位时空==
  • 2.2 ==远程仓库==
  • 2.2.1 ==远程仓库的创建==
  • 2.2.2 ==远程仓库的使用（http协议下）==
  • 2.2.3 ==冲突bug和解决==
  • 三、==tomcat+nginx原理==
  • 3.1 ==简介==
  • 3.2 ==Tomcat==
  • 3.3 ==Nginx==
  • 3.4 ==代理==
  • 四、==移动端 web 开发基础==
  • 4.1 ==移动端基础==
  • 4.2 ==视口==
  • 4.2.1 ==布局视口==
  • 4.2.2 ==视觉视口==
  • 4.2.3 ==理想视口==
  • 4.2.4 ==meta视口标签==
  • 4.3 ==二倍图==
  • 4.3.1 ==物理像素&物理像素比==
  • 4.3.2 ==多倍图==
  • 4.3.3 ==背景缩放==
  • 4.4 ==移动端主流方案==
  • 4.5 ==移动端浏览器==
  • 五 ==移动端开发常见布局==
  • 5.1 ==流式布局（百分比布局）==
  • 5.2 ==flex布局==
  • 5.2.1 ==flex布局原理==
  • 5.2.2 ==父元素属性==
  • 5.2.3 ==子元素常见属性==
  • 5.3 ==rem布局==
  • 5.3.1 ==rem单位==
  • 5.3.2 ==媒体查询==
  • 5.3.3 ==适配方案==
  • 5.4 ==响应式布局==
  • 总结


一、GIT

Git是目前世界上最先进的分布式版本控制系统版本控制系统（eg：多人协同金山文档）
能记录每一次的文件改动，并且能协调多用户编辑

1.1 Git与GitHub

Git是一个分布式版本控制系统，可以理解为一个用于记录文件内容变化，以便将来查阅特定版本修订情况的软件。
GitHub是一个为用户提供Git服务的网站，简单说就是一个可以放代码的地方，（不过可以放的当然不仅是代码）GitHub除了提供管理Git的web界面外，还提供了订阅、关注、讨论组、在线编辑器等丰富的功能。

1.2 GitHub注册和Git的下载安装

  1. 在GitHub注册你的账号https://github.com/
  2. 在百度中搜索git直接访问git官网


    下载到本地后点击.exe运行之后的路径什么的都不要改，一路next

https://www.bilibili.com/video/BV1sJ411D7xN?p=5&spm_id_from=pageDriver&vd_source=9ec07c753f35e57457c156cd9dcc6d20

当然也可以看看视频，一步一步对照着来~我已经下载过了就不能给大家演示了555

  1. 安装后验证自己是否安装成功
    在桌面用鼠标右键单击，如果出现了GUI和Bash就表示已经安装成功

二、Git的使用

2.1 本地仓库

2.1.1 工作流程

  1. Git仓库，最终确定的文件保存到仓库，成为一个新的版本，并且对他人可见
  2. 暂存区，暂存已经修改的文件，最后统一提交到git仓库中
  3. 工作区，添加、编辑、修改文件等动作

nginx 判断 ip 是内网还是外网_git

2.1.2 本地仓库操作

什么是仓库呢？仓库又名版本库，我们可以简单理解成是一个目录，用于存放代码的。这个目录里面的所有文件都可以被git管理起来，每个文件的修改、删除等操作TD都能跟踪到。

  2. 在安装好后首次使用需要先进行全局配置
    桌面空白处右键，点击Git Bash Here以打开Git命令行窗口

    3. nginx 判断 ip 是内网还是外网_nginx_02


    4. nginx 判断 ip 是内网还是外网_tomcat_03

  5. 创建仓库
    当我们需要让Git去管理某个新项目/已存在的项目的时候，就需要创建仓库了。注意：创建仓库时使用的目录不一定要求是空目录，选择一个非空目录也是可以的，但不建议在现有项目上来学习Git。另外，目录名中不要出现中文，避免造成不必要的麻烦

    6. nginx 判断 ip 是内网还是外网_web_04

  6. 进入这个我们刚刚创建好的目录

    7. nginx 判断 ip 是内网还是外网_web_05

  7. 接下来Git仓库初始化

    8. nginx 判断 ip 是内网还是外网_nginx 判断 ip 是内网还是外网_06


    9. nginx 判断 ip 是内网还是外网_tomcat_07

  9. 勾选隐藏的项目进行一个无中生有的大动作

    10. nginx 判断 ip 是内网还是外网_git_08

  10. 表现：执行之后会在项目目录下创建隐藏目录，这个目录是Git所创建的，不能删除也不能随意更改其中的内容。
  11. 常用指令
  • 查看当前状态 git status

    • nginx 判断 ip 是内网还是外网_nginx_09

  • 将文件从工作区添加到缓存区 git add 注意是先创建后手动add
    ①单文件git add 文件名
    ②多文件git add 文件1 文件2
    ③单/多文件git add.（添加当前目录到缓存区）

    • nginx 判断 ip 是内网还是外网_web_10

  • 提交至版本库 git commit-m "注释内容" 注释内容可以是中文（类比记账，记下这个钱花在什么地方了）

    • nginx 判断 ip 是内网还是外网_nginx_11

2.1.3 错位时空

人生不可以重来，但Git可以

  1. 查看版本，确定需要回到的时刻点
    指令：①git log
    ②git log --pretty=oneline
  2. 回退操作
    指令：git reset --hard 提交编号（注意不能用键盘快捷键，需要用鼠标）
    回到过去之后，要想再回到现在，则需要使用指令去查看历史操作，以得到最新的commit id
    指令：git reflog

2.2 远程仓库

2.2.1 远程仓库的创建

nginx 判断 ip 是内网还是外网_nginx 判断 ip 是内网还是外网_12

nginx 判断 ip 是内网还是外网_git_13


注意：仓库名要求在当前账户下唯一！

2.2.2 远程仓库的使用（http协议下）

先在本地创建一个相同名称的仓库，在hash中进入这个仓库，使用clone指令将线上仓库克隆到本地

nginx 判断 ip 是内网还是外网_tomcat_14


注意这个仓库克隆到本地之后不需要再次进行初始化，默认已经完成了初始化

之后可以对仓库进行一些操作，提交暂存区，提交本地仓库，提交线上仓库，拉取线上仓库

  2. 提交线上仓库 git push在首次网线上仓库提交内容的时候，出现了403的致命错误，这是因为不是任何人都可以往线上仓库提交内容，必须要授权。
    如何授权：需要修改.git/config中的内容（直接用记事本打开即可）

    3. nginx 判断 ip 是内网还是外网_git_15

  3. 当不出现fatal错误时则表示提交成功
  4. 拉取线上仓库（多人协同） git pull 简单来说就是同步的作用，在你修改之前先拉取，把别人修改的同步到你这里

2.2.3 冲突bug和解决

什么是冲突
在多人协同编辑同一个文件的过程中，如果你在编辑前忘记了拉取，你们两个还恰好改动了同一个地方，这时候就会出现冲突。如果你没有pull，而是先编辑然后add，commit，push这时会push失败，并不会提交到线上，因为你们对这个文件的编辑产生了冲突。

如何解决冲突
先拉取一下，这时git会将你们的冲突进行合并，在对应文件中用<<<<<和>>>>>分别标注出你们的修改，你们进行商量决定保留哪一方的修改即可。修改过后再重新add，commit，push即可。

三、tomcat+nginx原理

3.1 简介

Nginx 服务器作为前端，Tomcat 服务器作为后端，web 页面请求由 Nginx 服务来进行转发。静态页面请求由 Nginx 服务器自己来处理，动态页面请求则转发给后端的 Tomcat 服务器来处理。
但 Tomcat 是轻量级的应用服务器，能处理的请求数量有限，所以我们需要多台 Tomcat 组成集群，实现动静分离的负载均衡架构。

3.2 Tomcat

tomcat是一个免费的，开放源代码的Web应用服务器，是Apache软件基金会项目中的一个核心项目，由Apache ，Sun和一些公司以及个人共同开发而成，深受Java爱好者的喜爱，是一款比较流行的web应用服务器。

Tomcat由一系列的组件构成，其中核心的组件有三个:

(1) web容器:完成web服务器的功能。

(2) servlet容器:名字为catalina，用于处理Servlet代码。

(3)JSP容器:用于将JSP动态网页翻译成Servlet代码。

因此Tomcat是web应用服务器，也是一个Servlet/JSP容器。Tomcat作为 Servlet容器，负责处理客户请求，把请求传送给servlet，并将servlet的响应传送回给客户。

什么是servlet ?
Servlet 是 Java Servlet 的简称，可以理解为是一个服务连接器，是用Java编写的服务器端程序，具有独立于平台和协议的特性，简单的理解: servlet就是一个中间件，包含了接口和方法，将客户端和数据库连接，从而实现动态网页的创建。

什么是JSP?
JSP 全称 Java Server Pages，是一种动态网页开发技术。它使用JSP 标签在HTML,网页中插入Java代码。标签通常以 <% 开头，以 %> 结束。
JSP是一种Java servlet，主要用于实现Java web 应用程序的用户界面部分。
JSP通过网页表单获取用户输入数据、访问数据库及其他数据源，然后动态地创建网页。

Tomcat 功能组件结构:
Tomcat的核心功能有两个，分别是负责接收和反馈外部请求的连接器Connector，和负责处理请求的容器Container:其中连接器和容器相辅相成，一起构成了基本的 web服务Service。每个Tomcat服务器可以管理多个Service。

Conector: 负责对外接收和响应请求。它是Tomcat与外界的交通枢纽，监听端口接收外界求,并将请求处理后传递给容器做业务处理，最后将容器处理后的结果响应给外界。

Container: 负责对内处理业务逻辑。其内部由 Engine、Host、Context和wrapper 四个容器成，用于管理和调用Servlet相关逻辑。

Service:对外提供的web服务。主要包含Connector和 Container两个核心组件，以及其他功能组件。Tomcat可以管理多个Service，且各Service 之间相互独立.

Container 结构分析
每个Service 会包含一个Container容器。在Container内部包含了4个子容器:4个子容器的作用分别是:
(1) Engine:引擎，用来管理多个虚拟主机，一个Service最多只能有一个Engine:

(2)Host:代表一个虚拟主机，也可以叫站点，通过配置 Host 就可以添加站点;

(3)Context:代表一个 web 应用，包含多个Servlet封装器;

(4) wrapper:封装器，容器的最底层。每一Wrapper封装着一个Servlet，负责对象实例的创建\执行和销毁功能。

Engine、Host、Context和 wrapper，这四个容器之间属于父子关系。
容器由一个引擎可以管理多个虚拟主机。每个虚拟主机可以管理多个web应用。每个web应用会有多个Servlet封装器

Tomcat请求过程

1、用户在浏览器中输入网址，请求被发送到本机端口8080，被在那里监听的 Connector获得;

2、Connector 把该请求交给它所在的Service 的 Engine (Container）来处理，并等待Engine的回应;

3、请求在Engine、Host、Context和Wwrapper 这四个容器之间层层调用，最后在Servlet 中执行对应的业务逻辑、数据存储等。

4、执行完之后的请求响应在Context、Host、Engine容器之间层层返回，最后返回给Connector，并通过Connector 返回给客户端。

3.3 Nginx

Nginx——Ngine X，是一款自由的、开源的、高性能HTTP服务器和反向代理服务器；也是一个IMAP、POP3、SMTP代理服务器；也就是说Nginx本身就可以托管网站（类似于Tomcat一样），进行Http服务处理，也可以作为反向代理服务器使用。

Nginx 解决了服务器的C10K（就是在一秒之内连接客户端的数目为10k即1万）问题。它的设计不像传统的服务器那样使用线程处理请求，而是一个更加高级的机制—事件驱动机制，是一种异步事件驱动结构。

3.4 代理

代理服务器（Proxy Server）的功能是代理网络用户去取得网络信息。形象地说，它是网络信息的中转站，是个人网络和Internet服务商之间的中间代理机构，负责转发合法的网络信息，对转发进行控制和登记。

工作原理

代理服务器作为一种既是服务器又是客户机的中间程序，主要用于转发客户系统的网络访问请求。但是，代理服务器不只是简单地向真正的因特网服务器转发请求，它还可以控制用户的行为，对接收到的客户请求进行决策，并根据过滤规则对用户请求进行过滤。

通过代理服务器，网络管理员可以实现比用包过滤路由器更严格的安全策略。不同于使用通用的包过滤路由器来管理通过防火墙的因特网服务流向，代理服务器通过在网关上为每项需要的应用安装专用的代码（代理服务）来工作。如果网络管理员没有为某一特殊服务安装代理服务代码，该服务就不会被支持，也不会通过防火墙转发相应的客户请求。并且，这种代理服务器码能被配置成仅支持某项服务的网络管理员认为可以接受的那部分特征，而不支持其他的特征。

主要功能

代理服务器具有许多功能。对于我们个人用户而言，通过代理上网，能让我们访问一些直接访问会比较慢的网站，比如互联网用户访问教育网的网站。对于单位而言，内部使用代理可以预先过滤一些病毒，保障上网的安全，还能有效地进行访问控制、网速限制，上网监控等等。

代理服务分为反向代理和正向代理

正向代理：用于代理内部网络对 Internet 的连接请求，客户端指定代理服务器，将要给web服务器发送的请求先发送到代理服务器，由代理服务器访问web服务器，web服务器将会应返回给代理，代理将回应返回给客户端。

反向代理：与正向代理相反，代理服务器来接受客户端的连接请求，然后将请求转发给网络上的web服务器。

这篇文章介绍了正向代理和反向代理的区别 点击查看

在csdn上看到了一个非常有意思的生动形象的解释：

nginx 判断 ip 是内网还是外网_nginx 判断 ip 是内网还是外网_16

nginx 判断 ip 是内网还是外网_tomcat_17

四、移动端 web 开发基础

4.1 移动端基础

  1. 浏览器
  2. 手机屏幕
  3. 移动端调试方法
    在谷歌浏览器中有一个手机模式，或者搭建本地web服务器，也可以使用外网服务器，直接ip或域名访问

4.2 视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。

4.2.1 布局视口

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的可能。IOS、Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多数都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放页面。

nginx 判断 ip 是内网还是外网_web_18

4.2.2 视觉视口

字面意思，他是用户正在看到的网站的区域。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

nginx 判断 ip 是内网还是外网_nginx 判断 ip 是内网还是外网_19

4.2.3 理想视口

乔布斯开创了理想视口。
为了使网站在移动端有理想的浏览和阅读宽度而设定。理想视口对设备来讲是最理想的视口尺寸，需要手动填写meta视口标签来通知浏览器按照理想视口的模式显示页面。meta视口标签的主要目的是：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的html视口就有多宽。

4.2.4 meta视口标签

nginx 判断 ip 是内网还是外网_web_20

4.3 二倍图

4.3.1 物理像素&物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理意义上真实存在的。也就是我们常说的分辨率。这是厂商在出厂时就设置好的。但我们在实际开发过程中，1px不一定等于1个物理像素（PC端是，移动端不一定是）。一个px的范围里能显示的物理像素点的个数，称为物理像素比或屏幕像素比。
现在的手机多采用Retina（视网膜屏幕）的显示技术，将更多的物理像素点压缩至一块屏幕，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

4.3.2 多倍图

在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

nginx 判断 ip 是内网还是外网_tomcat_21

4.3.3 背景缩放

nginx 判断 ip 是内网还是外网_nginx 判断 ip 是内网还是外网_22

4.4 移动端主流方案

移动端开发主要有两种方案

  1. 单独制作移动端页面（主流）
    京东 淘宝，移动端是独立于pc端的
  2. 响应式页面兼容移动端
    三星 根据浏览器窗口大小不断调整以兼容pc端和移动端

4.5 移动端浏览器

移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题

CSS初始化

官网地址

五 移动端开发常见布局

5.1 流式布局（百分比布局）

流式布局，也称为非固定像素布局。
通过盒子的宽度设置成百分比来适应屏幕的宽度，不受固定像素的限制，内容向两侧填充。
为了防止无限制的伸缩，设置max-width最大宽度和min-width最小宽度

5.2 flex布局

nginx 判断 ip 是内网还是外网_git_23


如果是移动端或者不考虑兼容性问题的PC端页面布局，使用flex弹性布局

display:flex;

5.2.1 flex布局原理

flex是felxible box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

当我们为父盒子设置flex布局后，子元素的float、clear和vertical-align属性将失效。

采用flex布局的元素称为flex容器，它的所有子元素自动成为容器成员，称为flex项目，简称项目。子元素可以横向排列也可以纵向排列。

nginx 判断 ip 是内网还是外网_tomcat_24

5.2.2 父元素属性

nginx 判断 ip 是内网还是外网_tomcat_25


flex-direction 子元素跟着主轴来排列，默认是x轴

白话：小孩怎么站 谁前谁后

属性值

作用

row

默认值从左到右

row-reverse

从右到左

collumn

从上到下

column-reverse

从下到上

justify-content 定义了项目在主轴上的对齐方式
白话：小孩之间的间隙如何安排

属性值

作用

flex-start

默认值从头部开始

flex-end

默认值从尾部开始

center

在主轴居中对齐

space-around

平分剩余空间

space-between

先两边贴边，再平分剩余空间

flex-wrap 设置子元素在排列时是否换行，默认不换行，会不断缩小子元素的宽度
白话：一行站不下，是不是要站到第二行

属性值

作用

nowrap

默认值，不换行

wrap

换行

align-items 该属性是控制子项在侧轴上的对齐方式，只能在子项为单行的时候使用

属性值

作用

flex-start

默认值 从上到下

flex-end

从下到上

center

垂直居中 挨在一起

stretch

拉伸（子盒子不要给高度）

align-content 定义了项目在侧轴上的对齐方式，只能在子项为多行时使用

属性值

作用

flex-start

默认值从头部开始

flex-end

默认值从尾部开始

center

在主轴居中对齐

space-around

平分剩余空间

space-between

先两边贴边，再平分剩余空间

stretch

设置子项元素高度平分父元素高度

flex-flow 这是flex-direction 和 flex-wrap 属性的复合属性

5.2.3 子元素常见属性

flex：number表示该元素所占据的份数；

align-self

nginx 判断 ip 是内网还是外网_git_26


order定义项目的排列顺序

数值越小，排列越靠前，默认是0。

5.3 rem布局

前面我们介绍的流式布局和flex布局主要针对于宽度布局，而高度并没有涉及，并且为了使页面布局文字能随着屏幕大小变化、使得屏幕发生变化的时候元素高度和宽度可以等比例缩放，rem布局应运而生。

5.3.1 rem单位

rem是一个相对单位，类似于em，em是父元素字体大小。不同的是，rem的基准是相对于html元素的字体大小。页面中可能有很多个父元素，但只有一个html。可以通过修改html里面的文字大小来改变页面中元素的大小，实现对页面的整体控制。

5.3.2 媒体查询

使用@media查询，可以针对不同的媒体类型从而定义不同的样式。@media可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。目前很多苹果手机、安卓手机、平板等设备都用得到媒体查询。

@media mediatype and|not|only (media feature) {
	CSS-Code;
}

mediatype

nginx 判断 ip 是内网还是外网_web_27

关键字and|not|only

关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件。

  • and：可以将多个媒体特性连接到一起，相当于“且”的意思。
  • not：排除某个媒体类型，相当于“非”的意思。
  • only：指定某个特定的媒体类型。

媒体特性

每种媒体类型都具备各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。

nginx 判断 ip 是内网还是外网_git_28

引入资源

当样式比较繁多的时候，我们可以针对不同的媒体使用不同的stylesheet样式表。原理就是直接在link中判断设备的尺寸，然后引用不同的css文件。

<link rel="stylesheet" media="mediatype" and|not|only (media feature)" href="mystylesheet.css"

5.3.3 适配方案

推荐使用flexible.js，当然也可以了解一下less，less主要是实现对css的优化。

nginx 判断 ip 是内网还是外网_nginx_29

github中的flexible地址

安装VScode插件cssrem，帮助px转化为rem
注意设置html字体大小的基准值

  1. 打开设置（快捷键是ctrl+逗号）
  2. 点击三个小点点打开setting.json

5.4 响应式布局

bootstrap

总结