- 博客(38)
- 收藏
- 关注
RSS订阅
原创 基于Vue和Nest搭建的Web3D汽车组装演示系统
本文只是对该项目进行简要说明，不对具体技术实现进行详细描述！！（可以将本文看作项目说明文档食用）一、前言本项目是一个毕业设计的选题，由于绝大部分是大数据和电商相关的选题，最终选择了这个比较新颖的选题，就想着尝试去挑战一下自己。其实当时脑子里对这个选题完全没有头绪，有好几次在思考这个项目怎么实现的时候，头皮发麻觉得已经超出了当前能力水平，所幸找到了实现思路和方向，于是开始着手为项目开发做准备，比如去学习需要运用的技术栈、设计项目开发思路和项目架构设计以及搭建。其实本文用到的很多技术栈都是我比较陌生.
2021-06-21 19:57:24
830
原创 关于 CSS 编码规范的思考
一、前言先说明这是一篇规范类文章，主要是在日常的前端工作中遇到的一些问题做个总结。由于本人前后在多个公司经历过项目的开发，对这几家公司的编码规范都有一定的了解，然而近日在公司进行项目开发的过程中发现关于 CSS 编码规范上的一些问题，借此文记录一下。（持续补充。。。）问题描述一个项目在一般情况下是由多人协同完成的，常常会因为个人的编码习惯导致项目代码写法参差不齐，主要反映出以下几个问题：在阅读 CSS 代码的过程中，由于 CSS 属性较多，如果遇到一个选择器中有大量的 CSS 属性的情况下，阅读起
2021-08-14 16:36:07
191
原创 前端常用环境以及常用工具汇总
本文是根据个人平时工作习惯进行的汇总一、环境搭建1. Node.js介绍： Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。安装方式： http://nodejs.cn/download/2. NPM介绍： NPM是随同NodeJS一起安装的包管理工具。安装方式： 由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。建议： 由于国外镜像源下载资源速度较慢，建议更改淘宝镜像源或者安装cnpm。// 更改npm镜像源npm conf.
2021-06-25 17:27:12
1003
原创 前端生成PDF文件实现方案
一、技术选型1.html转换成canvas后生成图片导出pdf（本文选用）html转canvas插件：html2canvas是一款将HTML代码转换成Canvas的插件；canvas生成pdf：jsPDF是一个使用Javascript语言生成PDF的开源库2.HTML代码转出pdfwkhtmltopdf是一款将HTML代码转换成pdf的插件，表格场景使用居多二、技术实现（基于html2canvas和jsPDF实现）1.安装插件npm i html2canvas -Snpm i jspd
2021-06-22 16:33:08
6899
1
原创 Vue前端导出Excel文件实现方案
一、技术选型1.使用 vue-json-excel 插件实现优点：简单便捷，易上手，开箱即用；缺点：不支持 excel 表格样式设置，且支持功能比较单一；2.基于 sheetJS-xlsx 解析器的 xlsx-style 实现（推荐）优点：支持格式众多，支持 excel 表格样式设置，功能强大，可控性高，可读取和导出excel；缺点：使用较为复杂，上手成本较大，且高级功能需要收费，但该功能可以借助 xlsx-style 实现；二、技术实现使用 vue-json-excel 插件实现1.安装
2021-01-31 14:01:02
3486
4
原创 仿bilibili项目技术总结
仿bilibili项目技术总结1. 搜索功能的实现搜索框实现了防抖功能。输入过程中对suggest词进行高亮显示功能。2. 视频列表相关功能通过vue-lazyload模块实现视频列表封面的懒加载。二次封装了better-scroll组件，实现了视频列表的滚动加载功能，主要实现方式是通过监听滚动长度和列表当前长度的差距，当监听到差值为0时，发送请求并将获取到的视频列表追加到当前列表。3. 关于页面中需要请求多个api问题在一个场景中，需要页面请求多个接口，并且按顺序返回得到相应数据，
2020-09-20 15:29:30
1077
原创 LeetCode第240题：搜索二维矩阵II（中等）
题目难度：中等编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target。该矩阵具有以下特性：每行的元素从左到右升序排列。每列的元素从上到下升序排列。题解题解1：对符合条件的行进行二分查找class Solution {public: bool searchMatrix(vector<vector<int>>& matrix, int target) { int xlen = matrix.size()
2020-05-18 10:22:23
184
原创 B站视频api接口
Vue2.5打造简洁视频webapp项目api接口此文档为非官方接口文档，无法保证接口有效性。以下接口为本项目目前使用的接口（也可以直接看src/api/文件目录下的接口）仿B站视频网站项目源码：进入项目源码仓库了解项目更多内容请看：Vue2.5打造简洁视频webapp（近期停更。。。）首页模块推荐视频 https://www.bilibili.com/index/ding.json搜索模块默认搜索词 http://api.bilibili.cn/x/web-interface/sear
2020-05-14 14:04:49
36332
2
原创 LeetCode第102题：二叉树的层序遍历（中等）
题目难度：中等给你一个二叉树，请你返回其按 层序遍历 得到的节点值。 （即逐层地，从左到右访问所有节点）。题解解法1：使用队列广度优先遍历/** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * TreeNode *right; * TreeNode(int x) : val(x), left(NULL), right(NULL
2020-05-13 10:15:34
125
原创 LeetCode第228题：汇总区间（中等）
题目难度：中等给定一个无重复元素的有序整数数组，返回数组区间范围的汇总。示例 1:输入: [0,1,2,4,5,7]输出: [“0->2”,“4->5”,“7”]解释: 0,1,2 可组成一个连续的区间; 4,5可组成一个连续的区间。示例 2:输入: [0,2,3,4,6,8,9]输出: [“0”,“2->4”,“6”,“8->9”]解释: 2,3...
2020-05-07 11:03:17
168
原创 Vue2.5打造简洁视频webapp（近期停更。。。）
一、前言由于疫情原因，在家待了很长时间，所以在这段时间里对前端的知识进行了巩固及学习，然而在学了一段时间以后，有一种掌握了一些技术但却无处可施的感觉，于是脑海中就浮现了做一个项目的念头。有了这个念头之后，就开始想做什么呢？在一次逛B站的时候，对不起，我对它动手了（仿哔哩哔哩视频webapp）从一开始对这个项目进行业务分析后，让我有着坚定的决心要长期维护这个项目，这个项目无论是从数据接口，还是运...
2020-05-06 22:11:55
1379
8
原创 LeetCode第227题：基本计算器II（中等）
题目难度：中等实现一个基本的计算器来计算一个简单的字符串表达式的值。字符串表达式仅包含非负整数，+， - ，*，/ 四种运算符和空格 。 整数除法仅保留整数部分。示例 1:输入: “3+2*2”输出: 7示例 2:输入: " 3/2 "输出: 1示例 3:输入: " 3+5 / 2 "输出: 5说明：你可以假设所给定的表达式都是有效的。请不要使用内置的...
2020-05-06 14:40:09
247
原创 C++常用类型判断及转换方法
isalnum()判断一个字符是否为数字或者字母isalpha()用来判断一个字符是否为字母，如果是字符则返回非零，否则返回零。islower()用来判断一个字符是否为小写字母isupper()用来判断一个字符是否为大写字母。声明在头文件<cctype>中tolower()函数是把字符串都转化为小写字母touppre()函数是把字符串都转化为大写字母...
2020-05-06 12:01:02
746
原创 LeetCode第226题：翻转二叉树（简单）
题目：难度：简单翻转一棵二叉树。示例：题解：解法一：广度优先遍历+队列解题思路利用队列对结点进行存储。以广度优先遍历的方式，对每一个结点的左右结点交换位置，并将子节点存入队列中。直到队列为空遍历结束。/** * Definition for a binary tree node. * struct TreeNode { * int val; * T...
2020-05-06 11:05:02
178
原创 LeetCode第200题：岛屿数量（中等）
题目：难度：中等给你一个由 ‘1’（陆地）和 ‘0’（水）组成的的二维网格，请你计算网格中岛屿的数量。岛屿总是被水包围，并且每座岛屿只能由水平方向或竖直方向上相邻的陆地连接形成。此外，你可以假设该网格的四条边均被水包围。示例 1:输入: 11110 11010 11000 00000输出: 1示例 2:输入: 11000 11000 00100 00011输出: 3解释...
2020-05-05 11:09:21
246
原创 LeetCode第223题：矩形面积（中等）
题目：难度：中等在二维平面上计算出两个由直线构成的矩形重叠后形成的总面积。每个矩形由其左下顶点和右上顶点坐标表示，如图所示。示例:输入: -3, 0, 3, 4, 0, -1, 9, 2输出: 45说明: 假设矩形面积不会超出 int 的范围。题解：直接暴力性能还不错接近双百解题思路首先要判断两个矩形是否相交的情况，如果相交就计算相交的面积然后就是计算两个矩形面积...
2020-05-05 10:59:26
198
原创 纯js实现上传按钮并显示缩略图小轮子
前言造这个小轮子的起因是因为默认提供的上传文件的按钮属实丑陋了点，而且还不能直接修改这个按钮的样式，所以就打算直接搞个小轮子方便日后需要时使用。使用原生js实现。那么直接上效果图。预览效果图如下代码实现html代码<html> <head> <meta charset="utf-8" /> <title>uploalFileBu...
2020-05-02 17:43:57
213
原创 在HTML中JavaScript以及async和defer的使用
本文是阅读红宝书后对知识进行的总结和梳理一.<script>元素<script>标签定义了6个属性，分别有async，defer，charset，src，language，type。讲到script标签，不得不提async和defer这两个属性，所以对这两个属性划重点。1. async红宝书中定义：表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其...
2020-04-15 18:39:45
225
原创 基于jq实现图片预加载功能
一、什么是预加载？预加载是一种web性能优化技术，在页面加载之前，对部分资源进行提前加载，以提供给用户更好的体验，提高用户在浏览资源过程的流畅感。二、预加载的实现本次实验依赖jq实现首先看一下预加载实现的效果提前对页面中未显示的图片资源进行加载，当用户在浏览到相应的图片资源时直接从浏览器缓存中渲染在页面上。首先，我们使用立即执行函数，以闭包的方式，实现局部变量，避免内部变量与外部...
2020-03-31 00:58:46
542
原创 前端错误监控分类及方式
前端错误的分类即时运行错误：代码错误资源加载错误（包括图片、js、css加载失败）错误的捕获方式即时运行错误的捕获方式try…catchwindow.onerror（属于DOM 0，还可以使用addEventListener()）资源加载错误Object.onerrorperformance.getEntries()Error事件捕获<script ...
2020-02-25 00:34:59
255
原创 页面性能（异步加载和缓存）
提升页面性能的方法有哪些？资源压缩合并，减少HTTP请求非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别利用浏览器缓存 --> 缓存的分类 --> 缓存的原理（性能优化重要的一部分）使用CDN预解析DNS从浏览器输入URL开始到页面渲染完成，这个过程发生了哪些环节，其中第一步就是DNS解析，尤其是当出现多个域名的时候，DNS解析效果明显&...
2020-02-24 20:17:44
276
原创 JS运行机制（异步和单线程）
JS的单线程的概念JS是单线程的编程语言，也就是说同一时间只能做一件事，这样能提高效率；任务队列：同步任务（console.log()）、异步任务（setTimeout()）挂起，优先处理同步任务，再去响应异步任务；案例例1：console.log(1);setTimeout(function(){ console.log(2);},0);//挂起console.log(3)...
2020-02-24 11:39:06
148
原创 前端面试知识点--安全类（CSRF和XSS）
CSRF基本概念和缩写通常称为跨站请求伪造，英文名Cross-site request forgery 缩写CSRF攻击原理防御措施Token验证Referer验证隐藏令牌XSS基本概念和缩写通常称为跨域脚本攻击，英文名Cross-site scripting...
2020-02-24 00:22:55
377
原创 页面渲染机制（重排Reflow和重绘Repaint）
什么是DOCTYPE及作用？DTD（Document Type Definition）：文档类型定义。是一系列的语法规则，用来定义XML或者(X)HTML文件类型。浏览器会使用DTD来判断文本类型，决定使用何种协议来解析，以及切换浏览器模式。DOCTYPE：用来声明DTD规范。一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出现一些差错。常见的DOCTYPE声...
2020-02-23 21:10:43
314
原创 前端面试知识点--通信类（跨域通信方式）
什么是同源策略及限制?同源策略限制从一个源加载的文档或脚本如何与另外一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。Cookie、LocalStorage和IndexDB无法读取DOM无法获得AJAX请求不能发送前后端如何通信?Ajax（受同源策略限制）WebSocket（不受同源策略限制）CORS（支持跨域和同源通信）如何创建Ajax?XMLH...
2020-02-23 11:29:42
122
原创 前端面试知识点--面向对象
类与实例类的声明生成实例/*** 类的声明 */var Animal = function () { this.name = 'Animal';};/** * es6中class的声明 */class Animal2 { constructor () { this.name = 'Animal2'; }}/** * 实例化 ...
2020-02-22 20:09:19
278
原创 前端面试知识点--原型链
创建对象有几种方法var o1 = {name:'o1'};var o11 = new Object({name:'o11'});var M = function(){this.name='o2'};var o2 = new M();var P = {name:'o3'};var o3 = Object.create(P);原型、构造函数、实例、原型链只有函数才有proto...
2020-02-20 21:28:53
138
原创 前端面试知识点--HTTP协议
基本概念超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。HTTP是一个客户端终端（用户）和服务器端（网站）请求和应答的标准（TCP）。特点：简单快速：客户向服务器请求服务时，只需传送请求方法和路径。灵活：HTTP允许传输任意类型的数据对象。无连接：...
2020-02-18 21:23:08
263
原创 前端面试知识点--DOM事件
基本概念：DOM事件的级别DOM0 element.οnclick=function(){}DOM2 element.addEventListener(‘click’,function(){},false)DOM3 element.addEventListener(‘keyup’,function(){},false)DOM2级 与 DOM0级相比1、可以绑定多个监听函数，而DOM0级...
2020-02-17 23:56:09
174
转载 C++11特性：auto关键字（转）
C++98 auto早在C++98标准中就存在了auto关键字，那时的auto用于声明变量为自动变量，自动变量意为拥有自动的生命期，这是多余的，因为就算不使用auto声明，变量依旧拥有自动的生命期：int a =10 ; //拥有自动生命期auto int b = 20 ;//拥有自动生命期static int c = 30 ;//延长了生命期C++98中的auto多余且极少使用，C...
2020-02-16 23:59:54
172
原创 前端面试知识点--CSS盒模型
1. 基本概念完整定义DOCTYPE会触发标准模式，如果DOCTYPE缺失则在ie6/ie7/ie8下将会触发怪异模式。（W3C）标准模型一个块的宽度 = width(content宽度)+padding(内边距)+border(边框)+margin(外边距)；（怪异）IE模型一个块的宽度 = width(content宽度+内边距+边框)+margin(外边距) （即怪异模式下，...
2020-02-16 21:20:22
1352
2
原创 面试知识点--页面布局（前端）
页面布局案例：请根据题目给出多个中间自适应解决方案浮动布局脱离文档流，清除浮动（局限性）兼容性好（优点）绝对定位布局快捷（好处）可使用性差flew弹性布局解决以上两个布局的缺陷table表格布局兼容性好grid网格布局各自优缺点加上高度后哪个方案不适用最优选择方案...
2020-02-14 16:45:18
339
1
原创 面试准备--技术栈准备（前端）
jquery源码（博客或文章大致看懂能说能答）核心架构是什么，事件委托是怎么做，插件机制是什么兼容性vue.js源码（博客或文章）reactnode.js前端工程sass / lessgulp（优先） / gruntnpm（命令）webpack（必备）...
2020-02-13 20:05:36
543
原创 2(2N+1) 魔方阵（经典算法）
说明方阵的维度整体来看是偶数，但是其实是一个奇数乘以一个偶数，例如6X6，其中6=2X3，我们也称这种方阵与单偶数方阵。解法如果您会解奇数魔术方阵，要解这种方阵也就不难理解，首先令n=2(2m+1)，并将整个方阵看作是数个奇数方阵的组合，如下所示：首先依序将A、B、C、D四个位置，依奇数方阵的规则填入数字，填完之后，方阵中各行的和就相同了，但列与对角线则否，此时必须在A-D与C- B之间...
2020-02-05 18:08:54
555
原创 4N 魔方阵（经典算法）
说明与 奇数魔方阵 相同，在于求各行、各列与各对角线的和相等，而这次方阵的维度是4的倍数。解法先来看看4X4方阵的解法：根据上图说明，就是一个从左上由1开始顺序填，但遇对角线不填；另一个由左上由16开始倒序填，但只填在对角线，再将两个合起来就是解答了；如果N大于2，则以 4X4为单位画对角线：至于对角线的位置该如何判断，有两个公式，如下所示：由于方阵的维度为4，所有需要将方阵均等分...
2020-02-05 17:29:02
751
原创 奇数魔方阵（经典算法）
说明将1到n(为奇数)的数字排列在nxn的方阵上，且各行、各列与各对角线的和必须相同，如下所示：解法一般程式语言的阵列索引多由0开始，为了计算方便，我们利用索引1到n的部份。第一个数字放在第一行第一列的正中央。在计算向右(左)上或向下时，我们可以将索引值除以N值，如果得到余数为1就向下，否则就往右(左)上。若上一个数在第一行，则下一个数放在行数为N，列数为j+1的位置。若上一个数...
2020-02-05 15:39:37
3183
1
原创 前端技术教程推荐学习
Flex布局Flex布局教程：语法篇-----链接Flex布局教程：实例篇-----链接移动端开发设备像素比devicePixelRatio简单介绍持续更新中…
2019-08-16 12:58:05
155
原创 关于Vue的打包以及上线流程
个人Vue.js学习笔记组件中的name在Vue用途：① 递归组件时使用到② 取消keep-alive中的缓存③ 浏览器中vue的开发调试工具中组件的名字取决于name的命名...
2019-08-12 16:32:24
1872
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人