WEB应用学习

---

WEB应用程序

Web应用程序是一种可以通过Web访问的应用程序，程序的最大好处是用户很容易访问应用程序，用户只需要有浏览器即可，不需要再安装其他软件。

WEB学习查询网站_MDN官方文档
gitee项目地址

---

现代化编译器——VSCode

1、下载地址

https://code.visualstudio.com/

---

2、安装插件（EXTENSIONS）

1.Live Server

我们一般写网站会将网站部署在Linux上，Linux在这里承载我们的服务并启动一个网站。但是我们在学习前端的时候不需要部署到Linux上，有需求就有人研发，那么这时候就有了Live Server插件。

Launch a development local Server with live reload feature for static & dynamic pages
启动一个开发本地服务器，为静态和动态页面提供实时重载功能

即VsCode通过这个插件能够启动一个具有实时重新加载功能的小型开发服务器。用它来破解你的 HTML/JavaScript/CSS 文件，而不是用于部署最终站点。

使用该插件的原因

• 通过file协议发起AJAX请求会涉及到跨域问题，即如果您的站点通过 JavaScript 获取内容，则您需要一个服务器。
• 在更改文件并保存后进行热加载，提高开发效率。
• 本机开发的静态网页，可以在手机上浏览效果测试。

---

为什么必须要配置一个模拟的服务器?

直接点击.html文件，即通过D:/java学习资料/Web前端开发/HTML+CSS+JavaScript/07-HTML_CSS_JavaScript/html/001-我的第一个HTML页面.html打开网页。

如果你通过file协议发送AJAX请求(即你的站点通过JavaScript获取内容)，浏览器会报一个关于CORS跨域的错误。简单来说，跨域问题主要是由于浏览器同源策略限制引起的，这里就是不同协议之间发送的请求。即从file协议发送请求到http协议。CORS问题就不细讲了。

file协议和http协议的区别

file协议(file:///)用于访问本地计算机中的文件，好比通过资源管理器中打开文件一样，需要主要的是它是针对本地的，即file协议是访问你本机的文件资源。

http协议(http://)访问本地的html文件，相当于将本机作为了一台http服务器，然后通过localhost访问的是你自己电脑上的本地服务器，再通过http服务器去访问你本机的文件资源。

在简单点来讲，就是file只是简单请求了本地文件，将其作为一个服务器未解析的静态文件打开。而http是在本地搭建了一个服务器再通过服务器去动态解析拿到文件。

---

配置该插件启动的客户端浏览器 & 配置启动的域名/配饰局域网手机调试

---

2.Auto Rename Tag

Auto rename paired HTML/XML tag
自动重命名成对的HTML/XML标签

---

VsCode 自动格式化

先点击右下方齿轮，然后点击settings，然后输入format，最后勾选上Format On Save即可。

---

VsCode 创建WEB项目

1. 先创建一个文件夹，这个文件夹就是Web项目。
   一个项目其实就是一个文件夹。
2. 一个项目中跟随许多文件夹，我们网站中可能会有很多静态文件，比如说images，audios，videos。
3. 创建.html文件
4. VSCode功能：! + Tab键补全HTML文件结构

---

Git 和 本地操作系统 相互交互

本地操作系统有macOS、Windows等。

1、安装Git

下载地址
$安装过程->选择操作系统->选择合适的位数的操作系统Setup$

2、创建Repository和SSH Key

创建云端Repository，不同git平台创建方式不同需要注意。
创建本地Repository其实就创建一个文件夹。然后我们通过$git-bash$终端进入目标文件夹中。

（bash解释器是Linux常用的shell脚本，那么语法跟Linux是一样的）

git init //将当前目录当前目录配置成git仓库，信息记录在隐藏的.git文件夹中

创建密钥 并将 公钥添加到git平台（这里就自己添加吧不演示了）

ssh-keygen

然后一直回车即可。(中途有几个问题不用管)
执行结束后，~/.ssh/目录下会多两个文件：

• id_rsa：私钥
• id_rsa.pub：公钥
• 私钥不能给任何人看，公钥可以给人看。
• 私钥和公钥是唯一配对的。

3、实现交互

• git config --global user.name xxx：设置全局用户名，信息记录在~/.gitconfig文件中
• git config --global user.email [email protected]：设置全局邮箱地址，信息记录在~/.gitconfig文件中
• git remote add origin [email protected]:xxx/XXX.git：将本地仓库关联到远程仓库
• git add .：将所有待加入暂存区的文件加入暂存
• git commit -m "给自己看的备注信息"：将暂存区的内容提交到head节点的下一个节点中。(持久化操作)
• git push --set-upstream origin branch_name：将本地的branch_name分支关联到远程仓库的branch_name分支
• git push：将当前分支推送到远程仓库

遇到的问题

如果push时出现remote: Incorrect username or password ( access token )问题，解决方法：

1. 打开控制面板，点击用户账户
   
2. 点击管理 Windows 凭据
   
3. 找到普通凭据中自己的账号信息，选择编辑，填写正确的用户名和密码，点击保存即可。
   
4. 再次push项目，项目就能上传到云端了。

---