2020年11月_火星飞鸟

原创学习记录——Vue基础使用和模版语法

1. Vue基本使用1.1 Hello World基本步骤<body> <div id="app"> <div>{{msg}}</div> <div>{{1 + 2}}</div> <div>{{msg + '----' + 123}}</div> </div> <script type="text/javascript

2020-11-30 22:16:48 410 1

实现效果：[→点击此处预览效果←]点击Calculator按钮，打开计算器。打开计算器后，左边一栏是对于键盘操作的提示信息。按住计算器顶部并移动，可以实现拖拽计算器功能。实现了计算器的基本计算功能。计算器显示数字的区域，当数字过多时，自动缩小字体以显示全部的数字。点击计算器右上角的×，关闭计算器。存在的BUG：因本人水平、时间有限，计算器存在一些BUG显示0.1+0.2=0.30000000000000004，精度问题未解决。没有键盘按下的显示效果。键盘按下的显示效果应与鼠标

2020-11-30 21:28:43 432 2

原创基于Vue的TAB栏切换小练习

实现效果：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TAB选项卡</title> <style> .tab u

2020-11-30 15:10:51 292 1

原创前端面试—src和href的区别？

srcsrc是指向外部资源的位置，指向的内容会嵌⼊到⽂档中当前标签所在的位置，在请求src资源时会将其指向的资源，下载并应⽤到⽂档内，如js脚本，img图⽚和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在底部⽽不是头部。hrefhref是指向⽹络资源所在位置（的超链接），⽤来建⽴和当前元素或⽂档之间的连接，当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。...

2020-11-26 19:29:40 374

原创计算机组成原理——背景篇

1. 计算机的体系与结构1.1 冯诺伊曼体系冯诺伊曼体系是将程序指令和数据一起存储的计算机设计概念结构。早期计算机体系：冯诺伊曼体系：冯诺伊曼体系包含：储存器控制器运算器输入设备输出设备冯诺伊曼体系的优势：能够把需要的程序和数据送至计算机中能够长期记忆程序、数据、中间结果及最终运算结果的能力能够具备算术、逻辑运算和数据传送等数据加工处理的能力能够按照要求将处理结果输出给用户冯诺伊曼体系的瓶颈：CPU和存储器速率之间的问题无法调和，导致CPU经常空转等待数据传输。

2020-11-25 22:29:13 574

原创模板引擎

1. 模板引擎1.1 Ajax 项目中存在的问题数据和HTML字符串拼接导致代码混乱，拼接容易出错，增加修改难度。业务逻辑和用户界面混合，代码不易维护。for (var i = 0; i < result.length; i++) { html += '<!DOCTYPE html>\ <html lang="en">\ <head>\ <meta charset="UTF-8">\ <title&

2020-11-23 18:21:36 283

原创关于XML

XML：全称 extensible markup language，代表可扩展标记语言，它的作用是传输和存储数据。XML DOM：XML文档对象模型，是 w3c 组织定义的一套操作 XML 文档对象的API。浏览器会将 XML 文档解析成文档对象模型。例如：<students> <student> <sid>001</sid> <name>张三</name> </student

2020-11-23 16:41:17 158 1

原创 RESTful 风格的API

传统请求地址：GET http://www.example.com/getUsers // 获取用户列表GET http://www.example.com/getUser?id=1 // 比如获取某一个用户的信息POST http://www.example.com/modifyUser // 修改用户信息GET http://www.example.com/deleteUser?id=1 // 删除用户信息RESTful API 概述GET：

2020-11-23 16:31:41 197

原创 jQuery 封装函数：将表单中输入的内容转换为对象类型

实现效果：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>将表单中用户输入的内容转换为对象类型</title></head><body> <form id="form"> <input type="text" name="username"

2020-11-23 16:19:51 404 1

原创 jQuery 中的 Ajax

1. $.ajax()方法基本使用var params = { name: 'wangwu', age: 300}$('#btn').on('click', function() { $.ajax({ // 请求方式 type: 'post', // 请求地址 url: '/user', // 向服务器端发送的请求参数 // name=zhangsan&age=100

2020-11-23 16:14:32 163

原创 withCredentials 属性

在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息。withCredentials：指定在涉及到跨域请求时，是否携带cookie信息，默认值为false。（写在客户端）例：// 当检测用户状态按钮被点击时checkLogin.onclick = function() { // 创建ajax对象 var xhr = new XMLHttpRequest(); // 对ajax对象进行配置 xhr.open('get', 'http://loca

2020-11-23 15:44:46 2127

原创访问非同源数据，服务器端解决方案

同源政策是浏览器给予Ajax技术的限制，但服务器端是不存在同源政策限制。需要用到第三方模块request举例：客户端CORS.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <button id="btn"

2020-11-23 15:31:47 319

原创 CORS 跨域资源共享

CORS：全称为 Cross-origin resource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送 Ajax 请求，克服了 Ajax 只能同源使用的限制。CORS举例：客户端CORS.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head&g

2020-11-23 14:43:29 156

原创使用 JSONP 解决同源限制问题

JSONP是JSON with Padding的缩写，它不属于Ajax请求，但它可以模拟Ajax请求。1. JSONP 跨域原理浏览器的同源策略把跨域请求都禁止了html的<script>标签，<img>标签，<iframe>标签，可以请求第三方的资源（不受同源策略影响）由此可以用<script>标签引入jsonp文件，然后通过一系列JS操作获取数据2. JSONP 实现跨域步骤将不同源的服务器端请求地址写在<script>标签的

2020-11-18 17:00:57 341 1

原创学习-浏览器的同源政策

1. Ajax请求限制Ajax只能向自己的服务器发送请求。比如现在有一个A网站，有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送Ajax请求，B网站中的 HTML 文件只能向 B 网站中发送Ajax请求。但是A网站是不能向 B 网站发送Ajax请求的。同理，B网站也不能向A网站发送Ajax请求。2. 什么是同源如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。例如现有页面：http://www.example.com/dir

2020-11-18 15:55:08 197

原创基于Ajax和FormData对象实现二进制文件上传

实现效果：启动app.js在浏览器地址栏输入http://localhost:3000/upload.html实现代码：客户端upload.html：（引入了bootstrap框架bootstrap.min.css）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <

2020-11-17 19:56:37 440 1

原创前端学习 FormData 对象的方法

1. 常用的FormData对象方法获取表单对象中属性的值formData.get('key');设置表单对象中属性的值formData.set('key', 'value');删除表单对象中属性的值formData.delete('key');向表单对象中追加属性值formData.append('key', 'value');注意：set()方法与append()方法的区别是，在属性名已存在的情况下，set()会覆盖已有键名的值，append()会保留两个值。2. 其他Form

2020-11-17 19:43:33 1241 1

原创前端学习 FormData 对象的基本用法

1. FormData对象的作用模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。异步上传二进制文件。2. FormData对象的使用准备HTML表单<form id="form"> <input type="text" name="username"> <input type="password" name="password"> <input type="button"&g

2020-11-17 19:29:16 1221

原创 Ajax 实现3个option选项列表联动效果

实现效果：安装express、path模块在node环境中启动app.js在浏览器地址栏输入http://localhost:3000/provinceCityArea.html实现代码：provinceCityArea.html：（引入了bootstrap框架bootstrap.min.css和Ajax模板引擎template-web.js）[→关于ajax.js封装函数请点击此处←]<!DOCTYPE html><html lang="en"><

2020-11-16 20:52:31 175

原创 Ajax 实现搜索框内容自动提示效果

实现效果：安装express、path模块在node环境中启动app.js在浏览器地址栏输入http://localhost:3000/Search.html在输入框分别输入苹果和华为，搜索框会自动提示可能要输入的文字信息实现代码：Search.html：（引入了bootstrap框架bootstrap.min.css和Ajax模板引擎template-web.js）[→关于ajax.js封装函数请点击此处←]<!DOCTYPE html><html lang="

2020-11-16 20:44:16 765

原创 Ajax 实现验证邮箱地址唯一性

实现效果：安装express、path模块在node环境中启动app.js在浏览器地址栏输入http://localhost:3000/Email.html输入框失去焦点时，首先判断是否为邮箱格式，再验证输入邮箱的唯一性。为了实现基本的功能，app.js将123456@123.com作为已注册的邮箱。实现代码：Email.html：（引入了bootstrap框架）[→关于ajax.js封装函数请点击此处←]<!DOCTYPE html><html lang="en

2020-11-16 20:27:04 1235

原创 CSS选择器、选择器优先级计算方法

CSS选择器的优先级是：内联样式 > ID选择器 > 类选择器 > 标签选择器到具体的计算层⾯，优先级是由A、B、C、D的值来决定的，其中它们的值计算规则如下：（有些并不是选择器，但为了更好地说明问题，暂且将其列入）选择器权重计算公式 {A,B,C,D}继承或 *{}{0,0,0,0}每一个标签选择器或每一个伪元素选择器{0,0,0,1}每一个类选择器或每一个属性选择器或每一个伪类选择器{0,0,1,0}每一个ID选择器{0

2020-11-16 17:09:12 390

原创 JavaScript 封装Ajax函数

说明：封装函数ajax()，使用时传递一个对象传递的对象有请求方式type、请求地址url、请求参数data、请求参数格式的类型(字符串orjson对象)、请求成功后的函数、请求失败后的函数等属性使用时以如下格式传递：ajax({ // 请求方式 type: 'get', // 请求地址 url: 'http://localhost:3000/responseData', // 请求参数 data: { name: 'Jack',

2020-11-16 16:25:29 1098

原创 JavaScript 实现上传图片预览功能

实现效果：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box

2020-11-15 21:08:35 145

原创 CSS 清除浮动的4种方法

1. 为什么要清除浮动因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。2. 清除浮动的方法（1）额外标签法在浮动元素末尾添加一个空的标签例如：<div style="clear:both"></div>（2）父级添加overflow属性可以给父级添加overflow属性为hidden或auto或scroll：.Father { overflow: hidden; /* overfl

2020-11-11 22:31:38 1216 10

原创基于Node的Express框架

1. Express框架初体验在Node环境中使用npm install express命令进行下载使用。初体验： // 引入Express框架 const express = require('express'); // 使用框架创建web服务器 const app = express(); // 当客户端以get方式访问/路由时 app.get('/', (req, res) => { // 对客户端做出响应 send方法会根据内容的类型自动设置请求头 res.

2020-11-10 18:15:16 311

原创使用 CSS 实现盒子水平垂直居中的方法

原始代码：center.html：<!DOCTYPE html><html lang="Zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Center</title> <link rel="styleshe

2020-11-09 22:45:27 1785 7

原创 Node.js 第三方模块 serve-static

1. 功能：实现静态资源访问服务。2. 使用步骤：引入serve-static模块获取创建静态资源服务功能的方法// 引入静态资源访问模块const serveStatic = require('serve-static');调用方法创建静态资源服务并指定静态资源服务目录// 实现静态资源访问服务const serve = serveStatic(path.join(__dirname, 'public'));启用静态资源服务功能// 引入http模块const htt

2020-11-08 23:00:39 607

原创 Node.js 第三方模块 router

1. 功能实现路由功能。2. 使用步骤：获取路由对象// 引入router模块const getRouter = require('router');// 获取路由对象const router = getRouter();调用路由对象提供的方法创建路由// 呈递学生档案信息页面router.get('/add', (req, res) => { let html = template('index.art', {}); res.end(html);})

2020-11-08 22:55:42 678

原创模板引擎 artTemplate

1. 安装及使用在命令行工具中使用npm install art - template命令进行下载使用const template = require('art-template')引入模板引擎告诉模板引擎要拼接的数据和模板在哪：const html = template('模板路径', 数据);使用模板语法告诉模板引擎，模板与数据应该如何进行拼接2. 模板语法art-template同时支持两种模板语法：标准语法和原始语法。标准语法：可以让模板更容易读写{{数据}}原始语法

2020-11-08 22:45:44 390

原创数据库连接报错{ useNewUrlParser: true }{ useUnifiedTopology: true }解决办法

使用以下代码启动数据库，会提示报错信息：mongoose.connect('mongodb://localhost/playStudent', ) .then(() => console.log('数据库连接成功！')) .catch(() => console.log('数据库连接失败！'));解决办法：在js中mongoose.connect添加参数{ useUnifiedTopology: true, useNewUrlParser: true }mongoos

2020-11-08 20:24:26 1162

原创基于Node.js、MongoDB数据库的简单前后端交互界面

1. 效果展示：（1）启动MongoDB数据库服务（2）Node环境环境中运行app.js（3）浏览器地址栏输入http://localhost:3000/list进入 list 界面（4）可进行简单的增、删、改、查操作（5）可通过 MongoDB Compass 可视化软件看到数据库的内容源代码：（1）各文件相对位置（2）list.html<!DOCTYPE html><html lang="Zh"><head> <me

2020-11-07 21:28:13 753

原创初识 MongoDB 数据库

1. 环境搭建1.1 数据库相关概念在一个数据库软件中可以包含多个数据仓库，在每个数据仓库中可以包含多个数据集合，每个数据集合中可以包含多条文档（具体的数据）。术语解释说明database数据库，mongoDB数据库软件中可以建立多个数据库collection集合，一组数据的集合，可以理解为JavaScript中的数组document文档，一条具体的数据，可以理解为JavaScript中的对象field字段，文档中的属性名称，可以理解为JavaScript

2020-11-07 17:45:14 546

原创初识 HTTP

1. HTTP协议的概念超文本传输协议（HyperText Transfer Protocol，缩写：HTTP）规定了如何从网站服务器传输超文本到本地浏览器，它基于客户端服务器架构工作，是客户端（用户）和服务器端（网站）请求和应答的标准。2. 报文在HTTP请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，并且要遵守规定好的格式。2.1 请求报文（1）请求方式 (Request Method)GET 请求数据浏览器地址栏link标签的href属性scri

2020-11-07 15:25:38 297

原创 node.js 异步函数

异步函数是异步编程语法的终极解决方案，它可以让将异步代码写成同步的形式，让代码不再有回调函数嵌套，使代码变得清晰明了。使用格式：const fn = async () => {};async function fn () {};async关键字普通函数定义前加async关键字，变成异步函数异步函数默认返回promise对象在异步函数内部使用return关键字进行结果返回，结果会被包裹的promise对象中，return关键字代替了resolve方法在异步函数内部使用throw关键

2020-11-04 14:48:03 933

原创 node.js 异步函数依次读取三个文件

需求：使用异步函数，依次读取1.txt、2.txt、3.txt三个文件。文件内容：1.txt：12.txt：23.txt：3代码实现：const fs = require('fs');// 改造现有异步函数api 让其返回promise对象从而支持异步函数语法const promisify = require('util').promisify;// 调用promisify方法改造现有异步API 让其返回promise对象const readFile = promisify(fs

2020-11-04 14:42:42 628

原创 Promise 解决回调地域问题，依次读取三个文件

需求：依次读取1.txt、2.txt、3.txt三个文件，因为fs.readFile属于异步编程，可使用promise完成，解决回调地狱问题。文件内容：1.txt：12.txt：23.txt：3代码实现：const fs = require('fs');// 将三个promise定义成函数，可以再调用的时候再执行，实现依次执行function p1() { // 函数直接返回promise对象，就可以写成“p1().then”的形式 return new Promi

2020-11-04 14:24:02 359 1

原创 Node.js 异步API 代码执行顺序分析

1. 同步API同步API从上到下依次执行，前面代码会阻塞后面代码的执行for (var i = 0; i < 1000; i++) { console.log(i);}console.log('for循环后面的代码');执行结果：先将for循环执行完毕后，再执行for循环后面的代码2. 异步API异步API不会等待API执行完成后再向下执行代码console.log('代码开始执行');setTimeout(() => { console.log('

2020-11-04 12:13:37 419

原创 Node.js 模块查找机制

1. 当模块拥有路径但没有后缀时require('./find');require方法根据模块路径查找模块，如果是完整路径，直接引入模块如果模块后缀省略，先找同名JS文件再找同名JS文件夹，没有同名文件夹则报错如果找到了同名文件夹，找文件夹中的index.js如果文件夹中没有index.js，就会去当前文件夹中的package.json文件中查找main选项中的入口文件如果找指定的入口文件不存在或者没有指定入口文件就会报错，模块没有被找到2. 当模块没有路径且没有后缀时require(

2020-11-02 21:14:49 364 1

原创 nodemon : 无法加载文件 [解决办法]

安装了nodemon第三方库以后，使用nodemon .\01.helloworld.js命令，出现如下错误：解决办法：管理员身份打开powerShell将鼠标定位到左下角“开始菜单”处，右键，选择“Windows PowerShell（管理员）(A)”，输入set-ExecutionPolicy RemoteSigned回车：输入A，回车：验证一下：问题已解决！...

2020-11-02 18:31:16 1149

空空如也

空空如也