发表于 | 分类于
字数统计: 467

后端

npm init 初始化生成 package.json 配置文件

code . 在 IDE 打开 ctrl + ～ 快捷键也可以打开终端

npm install express 安装express框架

npm install nodemon -g 监听代码文件的变动，当代码改变之后，自动重启。

在package.json中配置启动命令

1
2
3
4
"scripts": {
    "start": "node server.js",
    "server": "nodemon server.js"
  }

引入 , 这里还是用的 CommonJS 语法

1
2
const express = require("express");
const app = express();

配置路由和端口号并监听

1
2
3
4
5
6
7
8
app.get("/",(req,res) => {
    res.send("Hello World!");
})

const port = process.env.PORT || 5005;
app.listen(port,() => {
    console.log(`Server running on port ${port}`);
})

npm run server 以nodemon模式运行

数据库

使用MongoDB在线数据库,太慢了太慢了…IP白名单设为0.0.0.0

选择驱动连接

npm install mongoose Mongoose是在node.js异步环境下对mongodb进行便捷操作的对象模型工具

阅读全文 »

发表于 | 分类于
字数统计: 1,455

学习自：JS忍者秘籍

事件循环

除了事件，还要保持浏览器执行的其他操作。这些操作被称为任务，并且分为两类：宏任务（或通常称为任务）和微任务。事件循环的实现至少应该含有一个用于宏任务的队列和至少一个用于微任务的队列。两种队列在同一时刻都只执行一个任务

事件循环基于两个基本原则：
● 一次处理一个任务。
● 一个任务开始后直到运行完成，不会被其他任务中断。

宏任务的例子很多，包括创建主文档对象、解析HTML、执行主线（或全局）JavaScript代码，更改当前URL以及各种事件，如页面加载、输入、网络事件和定时器事件。从浏览器的角度来看，宏任务代表一个个离散的、独立工作单元。运行完任务后，浏览器可以继续其他调度，如重新渲染页面的UI或执行垃圾回收。

而微任务是更小的任务。微任务更新应用程序的状态，但必须在浏览器任务继续执行其他任务之前执行，浏览器任务包括重新渲染页面的UI。微任务的案例包括promise回调函数、DOM发生变化等。微任务需要尽可能快地、通过异步方式执行，同时不能产生全新的微任务。微任务使得我们能够在重新渲染UI之前执行指定的行为，避免不必要的UI重绘，UI重绘会使应用程序的状态不连续。

注意处理宏任务和微任务队列之间的区别：单次循环迭代中，最多处理一个宏任务（其余的在队列中等待），而队列中的所有微任务都会被处理。所有微任务会在下一次渲染之前执行完成，因为它们的目标是在渲染前更新应用程序状态。

如果要达到每秒60帧（60 fps）的速度，理想情况下，单个任务和该任务附属的所有微任务，都应在16ms内完成。

事件监测和添加任务是独立于事件循环的，尽管主线程仍在执行，仍然可以向队列添加任务。

阅读全文 »

发表于 | 分类于
字数统计: 1,946

首先我们来看一个常见的问题

为什么用let声明的时候，显示的是1,2,3,4；而用var声明的时候就显示5,5,5,5呢？

这其中涉及到两个问题：1.var和let的作用域 2. setTimeout的异步

今天先解决第一个问题。

阅读全文 »

发表于 | 分类于
字数统计: 2,960

学习自：JS忍者秘籍

推荐Mozilla的HTML5指南，可通过https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5查看。

Mozilla也为DOM提供了一份报告，可以通过https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model进行查看。

Web应用的生命周期

页面构建

每当解析到脚本元素时，浏览器就会停止从HTML构建DOM，并开始执行JavaScript代码。JavaScript代码由浏览器的JavaScript引擎执行，例如，Firefox的Spidermonkey引擎，Chrome和Opera和V8引擎和Edge的（IE的）Chakra引擎。

浏览器暴露给JavaScript引擎的主要全局对象是window对象，它代表了包含着一个页面的窗口。全局window对象会存在于整个页面的生存期之间，在它上面存储着所有的JavaScript变量。所以所有在某个JavaScript代码执行期间用户创建的全局变量都能正常地被其他脚本元素中的JavaScript代码所访问到。

下面两个步骤都会一直交替执行。
1．将HTML构建为DOM。
2．执行JavaScript代码。

最后，当浏览器处理完所有HTML元素后，页面构建阶段就结束了。随后浏览器就会进入应用生命周期的第二部分：事件处理。

阅读全文 »

发表于 | 分类于
字数统计: 2,572

部分内容学习自：Javascript权威指南

XHR

Ajax的全称是Asynchronous JavaScript And XML，即异步JavaScript和XML。Ajax通过在浏览器和服务器之间添加Ajax中间层，允许浏览器异步发送请求，同时允许动态加载服务器响应。

用户在浏览页面的同时可以发送请求，浏览器无须频繁地重新加载新页面，服务器的响应不再是整个页面内容，而只是必须更新的部分数据。Ajax 可以减轻服务器和带宽的负担，提供更好的服务响应。

Ajax应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。避免页面重载（这是Web初期的标准做法）的能力使Web应用感觉更像传统的桌面应用。Web应用可以使用Ajax技术把用户的交互数据记录到服务器中；也可以开始只显示简单页面，之后按需加载额外的数据和页面组件来提升应用的启动时间。

浏览器通过 JavaScript 代码向服务器发送请求，JavaScript 代码负责解析服务器的响应数据，并把样式表加到数据上，然后在现有网页中显示出来。

XML是Ajax的核心技术吗？
以JSON作为数据交换格式不仅更加简单，而且网络传输的数据量更小，因此JSON逐渐取代了Ajax技术中XML的地位。

Ajax使用JavaScript来回传送数据，XMLHttpRequest是Ajax的核心。浏览器在XMLHttpRequest类上定义了它们的HTTP API。这个类的每个实例都表示一个独立的请求/响应对，并且这个对象的属性和方法允许指定请求细节和提取响应数据。

XMLHttpRequest不是协议级的HTTP API而是浏览器级的API。浏览器需要考虑cookie、重定向、缓存和代理，但代码只需要担心请求和响应。

JavaScript主要完成如下事情：

  • 创建XMLHttpRequest对象。通过XMLHttpRequest向服务器发送请求。
  • 创建回调函数，监视服务器响应状态，在服务器响应完成后，回调函数启动。
  • 回调函数通过DOM动态更新HTML页面。

官方API

阅读全文 »

发表于 | 分类于
字数统计: 187

学习自视频

效果：

主要学到的知识点：

  • 配色的重要性
  • background-image: linear-gradient(to bottom right,rgb(114,135,254),rgb(130,88,186)); 线性渐变颜色对比
  • margin: 0 auto; login 主体内容自动居中
  • box-shadow: 0 10px 50px 0px rgb(59,45,159); 阴影方向与渐变的一致性
  • border-top-left-radius: 15px; 圆角
  • display: inline-block; 行内布局
  • border-bottom: 3px solid rgb(237,221,22); 重要内容加下边框突出
  • outline: 0; input 去除轮廓线
  • hover + transition 实现颜色变化
  • ::-webkit-input-placeholder {color: rgb(199,191,219);} 专门用于占位符的颜色设置
  • height: calc(100% - 120px); 计算出的高度

一个BUG：

​ 发送框不知道为什么会跑到上面去了… 回头再好好看一下position: relative;和position: absolute;

发表于 | 分类于
字数统计: 4,725

笔记学习自：图解HTTP

当年HTTP协议的出现主要是为了解决文本传输的难题。1997年1月公布的HTTP/1.1是目前主流的HTTP协议版本。

HTTP方法

GET方法用来请求访问已被URI识别的资源。指定的资源经服务器端解析后返回响应内容。也就是说，如果请求的资源是文本，那就保持原样返回；如果是像CGI（Common Gateway Interface，通用网关接口）那样的程序，则返回经过执行后的输出结果。

POST方法用来传输实体的主体。

get和post区别:
get是以实体的方式得到由请求 URI 所指定资源的信息。
post方式: 用来向服务器发出请求，要求它接收被附在请求后的实体，并把它请求 URI 所指定资源的附加新子项，所以 post 请求可能会导致新的资源的建立和 / 或已有资源的修改。

PUT方法用来传输文件。在请求报文的主体中包含文件内容，然后保存到请求URI指定的位置。鉴于HTTP/1.1的PUT方法自身不带验证机制，一般的Web网站不使用该方法。

DELETE方法用来删除文件，是与PUT相反的方法。

HEAD方法和GET方法一样，只是不返回报文主体部分。用于确认URI的有效性及资源更新的日期时间等。使用GET方法时，对应请求资源的实体会作为响应返回；而使用HEAD方法时，对应请求资源的实体主体不随报文首部作为响应返回

OPTIONS方法用来查询针对请求URI指定的资源支持的方法。如：

TRACE方法是让Web服务器端将之前的请求通信环回给客户端的方法。发送请求时，在Max-Forwards首部字段中填入数值，每经过一个服务器端就将该数字减1，当数值刚好减到0时，就停止继续传输，最后接收到请求的服务器端则返回状态码200 OK的响应。客户端通过TRACE方法可以查询发送出去的请求是怎样被加工修改/篡改的。

CONNECT方法要求在与代理服务器通信时建立隧道，实现用隧道协议进行TCP通信。主要使用SSL（Secure Sockets Layer，安全套接层）和TLS（Transport Layer Security，传输层安全）协议把通信内容加密后经网络隧道传输。

阅读全文 »

发表于 | 分类于
字数统计: 6,108

学习笔记源自：绿叶

对于CSS来说，外部CSS文件只能在head中引入。对于JavaScript来说，外部JavaScript文件不仅可以在head中引入，还可以在body中引入。引入外部CSS文件使用的是“link标签”，而引入外部JavaScript文件使用的是“script标签”。

基本语法

变量

变量由字母、下划线、$或数字组成，并且第一个字母必须是字母、下划线或$。区分大小写

变量不能是系统关键字和保留字。

阅读全文 »

发表于 | 分类于
字数统计: 408

项目运行报错: System limit for number of file watchers reached

原来是linux系统中限制了用户可以watch文件变更的最大数，因此需要通过sysctl.conf进行更改数值

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

解决方案参考

重启服务，不再报错。

接下来集成 bootstrap-vue CSS框架。官方文档 简单使用教程

报错

GET https://registry.npmjs.com/boostrap-vue - Not found

怎么会找不到？？

先装个nrm来管理镜像 npm install -g nrm nrm用法

阅读全文 »