- 博客(53)
- 收藏
- 关注
原创 数组去重的方法总结
一、利用ES6 Set去重(ES6中最常用)const arr = [1, 4, 18, 2, 4, 2, 2, 90]const newArr = Array.from(new Set(arr))console.log(newArr)// [1, 4, 18, 2, 90]不考虑兼容性,这种去重的方法代码最少,但这种方法还无法去掉“{}”空对象。二、利用for嵌套for,然后splice去重(ES5中最常用)const arr = [1, 4, 18, 2, 4, 2, 2, 90]
2021-10-29 15:11:34
409
原创 vue面试问题总结(1)
1. Vue的最大优势是什么?Vue 作为一款轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟 DOM、运行速度快,并且作者是中国人尤雨溪,对应的 API 文档对国内开发者优化,作为前端开 发人员的首选入门框架Vue 的优势:1、Vue.js 可以进行组件化开发,使代码编写量大大减少,读者更加易于理解。2、Vue.js 最突出的优势在于可以对数据进行双向绑定。3、使用 Vue.js 编写出来的界面效果本身就是响应式的,这使网页在各种设备上都能 显示出非常好看的效果。4、相比传统
2021-09-24 13:44:49
149
原创 使用webpack打包时,如何把css提取成一个独立的文件
在使用webpack对代码进行打包,会将所有代码进行翻译合并压缩到js文件中,生成的页面的style样式镶嵌在html页面中,那如何将css文件单独抽离出来,并将css文件自动引入到html页面中呢?书写css代码,必能将其引入到js文件中import './css/main.css'webpack.config.js文件配置// 引入mini-css-extract-plugin插件,用来将css文件单独抽离出来const MiniCssExtractPlugin = require('mi.
2021-09-22 19:28:47
1347
原创 template-web模板引擎的使用
template-web是什么?这是一个模板引擎,简单来说就是构建一个模板,让其生成html的js代码。如果不用该js,手动来操作,我们可能需要繁杂的拼接html标签,还要做for循环。template-web怎么使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE
2021-09-19 19:58:56
1079
原创 前端开发中的跨域问题及解决方案
什么叫跨域?从http://127.0.0.1:5500/message_front/index.html 请求http://localhost:8080/getmsg为什么会出现浏览器跨域报错?简单来讲就是:不同源的ajax请求,具体来说满足以下三个条件就会出现跨域错误请求响应双方url不同源。双方url:发出请求所在的页面 与 所请求的资源的url 同源是指:协议相同,域名相同,端口相同 都相同。...
2021-09-18 22:26:21
1783
原创 静态资源托管(利用express)
目标用static中间件来托管静态资源,实现web服务器使用方法1. 初始化项目文件夹,下载express初始化终端命令为:npm init --yes下载express终端命令为:npm i express2. 在项目文件夹下新建public文件夹,将所有的静态资源(js文件、css文件、html文件、图片等),如下:3. 新建public的同级文件server.js,server.js参考代码如下:// 加载 Expressconst express = require('expre
2021-09-17 17:13:30
329
原创 统一管理静态资源(使用http模块)
前言从服务器获取html文件之后,如果这个html文件中还引用了其它的外部资源(图片,样式文件等),则浏览器会重新再发请求。由于我们无法事先得知一个.html文件中会引用多少个静态资源(.png, .css, .js…),所以,我们不能像处理某个页面一样去处理它们。所以我们的解决办法是:1. 把所有的静态资源(.html,.png,.css,.js)全放在一个指定的目录里统一管理;2. 然后使用server.js来启动web服务器,-收到用户的请求之后,去指定的目录下去找对应的文件.- 找到
2021-09-17 16:48:17
228
原创 express+mysql+node操作数据库(利用路由中间件优化代码)
目标:基于nodejs 用express + mysql 包 写接口,并利用路由中间件对代码进行优化,实现学生数据添加。接口1添加学生数据url: localhost:3000/api/studentmethod: post参数格式:普通键值对name: 字符串age: 数值测试:postman来测试接口2获取所有的学生数据url: localhost:3000/api/studentmethod: get参数:无测试:postman来测试实现步骤1. 新建一个项目文件夹,
2021-09-17 14:50:33
293
原创 express+mysql+node操作数据库
目标: 利用express框架+mysql包,通过node操作数据库新建一个项目文件夹,进行项目初始化终端窗口输入命令: npm init --yes初始化完成会在项目文件夹下生成会生成package.json文件下载安装express 和 mysql终端窗口输入命令: npm i express mysql安装完成,会在项目文件夹下生成node_modules文件夹和package-lock.json文件,如下所示创建utills文件夹,并在其下面创建sql.js文件用来模块
2021-09-17 10:46:25
118
原创 对象的创建方式及new关键字的执行过程
客户端发送请求的途径在地址栏中直接访问这个url通过某个a标签进行进行跳转<a href="要访问的url地址">文字</a>通过表单进行提交<form action="要提交的url的地址" method="get" target="_blank"></form>通过ajax技术访问这个url$.ajax({ url: '要提交的url的地址', type:'get' // post, delete,put,})发送请
2021-09-14 21:21:36
132
原创 数组常用的API总结
追加元素类:push(追加的元素)在数组的末尾追加数组,返回值为新数组的长度unshift()在数组内部的最前面追加元素,返回值为新数组的长度删除元素类pop() 删除数组的最后一个元素,返回值为删除的元素shift()删除数组的第一个元素,返回值为删除的元素splice(要删除的位置索引值,删除个数,替换为的元素)从指定位置删除元素,后两个参数省略,则从删除位置开始,一直删到最后连接截取类contact(连接的数组)连接数组,返回值为新数组join(‘连接的符号’)将数组用
2021-09-14 21:00:55
257
原创 常见的HTTP响应状态代码
HTTP 响应状态代码指示特定 HTTP 请求是否已成功完成。响应分为五类:信息响应(100–199),成功响应(200–299),重定向(300–399),客户端错误(400–499)和服务器错误 (500–599)常见的HTTP响应状态码有:// 200 OK 请求成功// 301 Moved Permanently 被请求的资源已永久移动到新位置// 400 Bad Request 语义有误,当前请求无法被服务器理解或者请求参数有误// 401 Unautho
2021-09-13 21:48:02
76
原创 常见的几种文件类型及其content-type
在http协议中,content-type用来告诉对方本次传输的数据的类型是什么。在请求头中设置content-type来告诉服务器,本次请求携带的数据是什么类型的在响应头中设置content-type来告诉浏览器,本次返回的数据是什么类型的通过使用res对象中的setHeader方法,我们可以设置content-type这个响应头。这个响应头的作用是告诉浏览器,本次响应的内容是什么格式的内容,以方便浏览器进行处理。content-type分类1 .htmlres.setHeader('
2021-09-13 21:31:32
513
原创 Ajax请求响应过程中执行状态
readyState属性Ajax从创建xhr对象开始,一直到完全接收服务器返回的结果为止;我们可以把整个请求响应过程划分为5个阶段。并且可以使用 xhr.readyState 属性检测当前请求执行到哪个阶段了。readyState属性值为一个数字,不同的数字表示Ajax的不同状态。如果状态值为0(xhr.readyState === 0),初始状态,表示xhr对象一定创建了。如果状态值为1(xhr.readyState === 1),表示open一定调用了如果状态值为2(xhr.readySta
2021-09-13 14:28:40
583
原创 npm包从创建到发布及下载使用
1、npm项目初始化1.1 在本地磁盘上创建一个空项目,取文件夹名为myNpm。注意请先去npm网官去确定一下,这个项目名是否已经被占用了。(如果这个 名字已经被占用了,则你是无法向npm上上传的)npm view 包名# 这个命令用来查看 某个包的信息# 包名不能与现有包重名,只能是小写字母+数字+中划线# 如果返回404,说明这个项目名在npm官网上找不到,此时你就可以使用。# 否则,说明不可用。1.2 创建一个package.json文件,对你项目myNpm信息进行设置。npm in
2021-09-12 23:44:39
177
原创 require 的模块加载机制
1、先计算模块路径1.1 如果是加载核心模块,直接从内存中加载,并缓存-加载核心模块的格式是 const xxx = require("模块名") 。不能写相对路径!1.2 如果是相对路径,则根据路径加载自定义模块,并缓存- 以require('./main')为例( 省略扩展名的情况)- 先加载 main.js,如果没有再加载 main.json,如果没有再加载 main.node(c/c++编写的模块),找不到就报错。1.3 如果不是自定义模块,也不是核心模块,则加载第三方模块,以requi
2021-09-12 23:03:17
574
原创 npm的常用命令总结
下载node.js系统自带npm,无需下载安装常用命令npm -v // 查看npm版本where node // 查看node的安装目录where npm // 查看npm的安装目录npm root -g // 查看全局包的安装目录n
2021-09-11 20:54:37
102
原创 nodemon包的安装及使用说明
作用nodemon包是一个能帮我们自动检测到我们的代码的修改,并自动重新运行我们的代码的工具下载地址官方下载地址: nodemon安装在任意位置 打开终端命令窗口,输入如下命令: npm install -g nodemon检测是否安装成功命令窗口输入:npm root -g 获取全局安装的路径,通过路径可以查看是否安装成功使用步骤在命令中,使用nodemon来代替node,nodemon可以直接替换node指令...
2021-09-11 20:14:13
756
原创 i5ting_toc 包的安装及使用说明
作用i5ting_toc 是一个可以把 md 文档转为 html 页面的小工具下载地址官方文档地址为:https://www.npmjs.com/package/i5ting_toc安装全局安装命令: npm install -g i5ting_toc使用在要转换的文件目录下,按住shift + 鼠标右键,选择 “在此处打开命令行窗口”输入命令: i5ting_toc -f 要转换的文件名.md -o-f参数,如果没有填写,默认使用README.md文件输入以上命令后,会
2021-09-11 19:47:54
278
原创 tab栏切换(横向)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l
2021-09-11 00:20:41
207
原创 tab栏切换(纵向)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l
2021-09-11 00:17:43
546
原创 下拉菜单(横向)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l
2021-09-11 00:14:48
507
原创 下拉菜单(纵向)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l
2021-09-11 00:12:11
317
原创 字符串操作的API
charAt() 返回指定索引位置的字符charCodeAt() 返回指定索引位置字符的 Unicode 值concat() 连接两个或多个字符串,返回连接后的字符串fromCharCode() 将 Unicode 转换为字符串indexOf() 返回字符串中检索指定字符第一次出现的位置lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置localeCompare() .
2021-09-11 00:02:16
49
原创 常用的终端命令及快捷键总结
总结:常用的终端命令:###node相关 // node -v 查看node版本号 // node js文件名 运行某个js文件 // clear/cls 清屏 // cd .. 返回上一级目录 // cd \ 直接回到根目录 // Ctrl+C 停止nod
2021-09-10 20:02:20
1169
原创 发布微博案例(节点的创建与插入、事件委托)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l
2021-07-30 11:55:51
126
原创 焦点图案例(事件监听和排他思想)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-07-30 11:50:15
154
原创 跟随鼠标移动的小鸟(事件对象)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-07-30 11:22:10
98
原创 获取当前时间(事件对象)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-07-27 10:32:55
123
原创 用户协议倒计时案例(定时器的使用)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-07-27 10:30:43
526
1
原创 毕业倒计时案例(时间戳)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-07-27 10:27:51
822
原创 开关灯案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-07-27 10:24:42
105
原创 简易版tab栏切换(排他思想)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-07-27 10:15:48
106
原创 简易版随机点名
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-07-27 10:12:07
77
原创 获取验证码案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-07-27 10:07:22
158
原创 猜随机数字的案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-07-24 13:56:52
52
原创 根据输入数据渲染生成柱形图页面案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-07-24 13:47:07
429
原创 封装函数求数组的最大值和最小值
function getArrMaxAndMin(arr) { let max = min = arr[0] for (let i = 1; i < arr.length;i++) { // 方法一: if语句比较法 // if(arr[i] > max) { // max = arr[i] // }
2021-07-24 13:36:41
2221
原创 冒泡排序(双重for循环的使用)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-07-24 13:31:51
316
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人