通过wysiwyg-editor实现wysiwyg-editor的主要参考文档包括下面两个:Github官方文档:https://github.com/froala/wysiwyg-editor配置参考文档:https://froala.com/wysiwyg-editor/docs/options方式一:通过CDN引入在需要使用富文本编辑器的页面,通过下面的cdn进行引入。<link href="https://cdn.jsdelivr.net/npm/froala-edit
上传功能的实现将上传表单的类型置为file.注意:name属性不可缺少。<li>菜品图片:<input type="file" name="picUrl" /></li>配置文件上传的模式 // 配置文件上传的模式 config.multipart = { mode: 'file' };配置csrf属性enctype属性不可缺少。 <form action="/<%=adminPath%>/pro
题目描述解题思路本题的核心解题思路是使用DFS,所谓的DFS就是递归加标记,符合条件的元素遍历过后将其标记为已经遍历过,在本题中我们无需使用哈希表进行标记,只需将遍历过的位置变为0即可。定义二维数组的行数,即grid的长度。定义二维数组的列数,即grid[0]的长度。二层循环遍历每一个元素,不断更新最大值。将当前位置和行列数投入DFS函数中,首先进行边界条件的判断,如果不符合则返回0,如果符合则将其标记为0,表示已经遍历过,然后递归上下左右四个方向进行判断。var maxAreaO
安装指定版本的webpacknpm i webpack@4.41.6 webpack-cli@3.3.11 -D安装指定版本的loadernpm i css-loader@3.4.2 style-loader@1.1.3 -D配置Webpack使得JS能够处理CSS样式下面是配置文件webpack.config.js// 引入用于拼接绝对路径的方法const { resolve } = require('path');module.exports = { // 入口起点
题目描述解题思路实现方式一:递归法进行层序遍历然后根据层次的奇偶进行反转var levelOrder = function (root) { // 核心思路:二叉树的层序遍历--递归实现 if (!root) return []; let result = []; function levelOrder(root,level) { if (!root) return null; result[level] = result[level] || []; re
上传到COS上的参考文档可以参考官方的文档:https://cloud.tencent.com/document/product/436/8629#.E4.B8.8A.E4.BC.A0.E5.AF.B9.E8.B1.A1上传图片到腾讯云的COS上控制器中写法async doAdd() { const { ctx } = this; const body = ctx.request.body; const file = ctx.request.files[0]; .
问题描述在博主使用Egg.js写一个管理系统的时候,在静态页面中有一个表单,表单中含有两个checkbox,但是博主发现,在通过这个表单进行post数据的时候,如果checkbox没有选中是不会传递value的,这令我很震惊,当然也让我付出了将近两个小时的努力,因此特地分享出来,为后续遇到这个问题的兄弟填下坑。未修改前代码<input type="checkbox" value="1" name="isBest" <%if(product.isBest == 1){%>chec
一、为什么要有事件循环?JS是单线程、非阻塞的。JS的主要用途是与用户互动,并操作DOM,如果涉及成多线程的,一个线程要删除当前DOM节点,另一个线程要修改当前DOM节点,这就会带来很严重的同步问题。这就是为什么JS要设计成单线程的原因,而JS的非阻塞特性就是由event loop实现的。二、浏览器的事件循环执行栈和事件队列同步代码,按照顺序添加到执行栈中以下面的代码为例,分析执行栈的执行顺序。function a() { b(); console.log('a');}
题目描述解题思路二叉树的最大深度的解题方法有很多种,但是我们要做的是使用通用的思路来求解,比如使用层序遍历的方法首先用数组保存整个树的所有节点到数组中,然后返回这个二维数组的长度就是这个二叉树的最大深度,之所以要这样做,是因为我们的解题方法是通用的,这个思路既可以求解这个问题,也可以进行二叉树的遍历。var maxDepth = function(root) { // 使用递归法层序遍历二叉树 if (!root) return 0; let result = []; func
配置dev-server安装相关包npm i webpack-dev-server@3.10.3增加配置项 devServer: { contentBase: resolve(__dirname,'build'), compress: true, port: 3000, open: true }下面我们对配置项进行一一解读。contentBase:指定服务器的启动路径。compress:是否进行压缩。port:服务器的启动端口号。open:
题目描述解题思路这道题和最长回文子串有本质不同,这道题相当于给我们一个字符串,让我们根据这个字符串来自己组合最长回文串,我第一次尝试解决这个问题的时候,采用的是Map的思路,但是需要考虑很多种情况,后来看到使用Set+打牌思路的题解,感觉甚是巧妙,特此分享给大家。创建一个Set。遍历每一个字符,如果这个字符出现在了集合中,则将这个字符从集合中删去,并且给sum+2,表示这个字符出现过两次,如果这个字符没有出现在集合中,则将其添加到集合中去。最后判断集合中是否还有元素,有则给结果+1,没有则
题目描述解题思路这道题目堪称是二分查找的经典题型,核心题型,模板题型。只要会了这道题目,几乎所有的二分查找的问题都迎刃而解了。定义二分查找中查找左边界的函数,这个函数能够返回左边界的下标,如果数组中有目标元素返回第一个下标,如果数组中的所有元素都小于目标元素,返回的是数组的长度,如果数组中的所有元素都比目标元素大,返回的是下标0,如果数组中没有该元素,但是有比该元素大的值,返回的是第一个比目标值大的下标。如果函数返回的下标对应的值不等于target,则返回[-1,-1].如果存在则返回[f
在文章开始之前,首先想让大家知道一个知识点,那就是loader的加载顺序问题,是从下到上开始进行加载的。定义nodejs的环境变量,决定使用browserslist的哪个环境process.env.NODE_ENV = 'production';复用loader首先定义好需要复用的loader。const commonCssLoader = [ MiniCssExtractPlugin.loader, 'css-loader', { // 还需要再package.js.
题目描述解题思路DFS是解决这道题的核心思路,DFS函数总共接收三个参数。第一个参数是遍历的起始位置,这个参数存在的意义在于防止重复遍历,只添加这个元素后面的元素,这个元素前面的不再遍历。第二个参数是临时数组,用来记录一次遍历的数组。第三个参数是临时数组内的和。边界条件是如果临时和大于等于target则继续判断,如果等于则存储,不等于则返回。var combinationSum = function(candidates, target) { const res = [];
一、什么是Webpack?webpack是用于现代JavaScript应用程序的静态模块打包工具。webpack会分析我们的项目结构,找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言(例如Sass、TypeScript等),并将其打包为合适的格式供浏览器使用。二、为什么需要Webpack?如今在开发前端项目时,为了简化开发的复杂程度,引入了模块化、TypeScript、less、sass等CSS预处理器实践方法,但是使用它们开发的文件需要进行额外的处理才能被浏览器识别,we
题目描述解题思路本题的解题思路核心就是二分查找,这道题目是二分查找的经典题目,其解题思路也堪称是二分查找的模板,二分查找的判别就在于题目给的是一个已经排好序的数组,因此本题符合要求。var searchInsert = function(nums, target) { // 搜索插入位置使用的是二分查找的核心模板 function findLeft(nums,target) { let left = 0; let right = nums.length - 1;
路由的基本配置安装插件npm install vue-router@next --save创建一个routers.ts文件在routers.ts中引入组件并配置路径。import { createRouter,createWebHashHistory } from 'vue-router';// 引入组件import Home from './components/Home.vue';import News from './components/News.vue';imp
一、引入Eslint安装相关工具包npm install eslint eslint-loader eslint-config-airbnb-base eslint-plugin-importloader配置的核心写法module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader', options: {
一、箭头函数的特点1. 相比普通函数,箭头函数有更加简洁的语法。普通函数function add(num) { return num + 10}箭头函数const add = num => num + 10;2. 箭头函数不绑定this,会捕获其所在上下文的this,作为自己的this。这句话需要注意的是,箭头函数的外层如果有普通函数,那么箭头函数的this就是这个外层的普通函数的this,箭头函数的外层如果没有普通函数,那么箭头函数的this就是全局变量。下面
source-map是什么?source-map是一种提供构建后代码到源代码的映射技术,可以根据这个映射来追踪源代码的错误。设置source-map的方法我们只需在webpack.config.js中添加一个配置项即可。devtool: "source-map"选择类型开发环境:eval-source-map生产环境:source-maponeOf是什么?有时候,我们在webpack配置中写了很多的loader,这也就意味着,一个文件要被多个loader过滤一遍,这在有些情
懒加载的实现方法通过动态import的方法来实现懒加载。(下面的函数,不点击按钮是不会加载test.js这个文件的)。console.log("index.js文件被加载了~");document.getElementById('btn').onclick = function() { // 懒加载 import(/* webpackChunkName: 'test' */'./test').then(({mul}) => { console.log(mul(4,5));
什么是tree shaking?我们可以将我们的项目比作一棵树,树上每一个用到的第三方模块或者函数都可以比作一个绿色的树叶,但是我们的项目中可能存在很多没有被用到的模块或者函数,这些就是需要我们摇晃掉的树叶,这个过程我们叫做tree shaking。如何开启tree shaking?开启tree shaking只需满足下面两个条件,即可自动开启。必须使用ES6模块化。开启production环境。如果想要把所有的代码都进行tree shaking还需要在package.json中进
题目描述解题思路这个题目总共包含五个主要步骤。步骤1:函数初始化在初始化函数的时候,函数的实例身上应该包含两个栈,一个是入队栈,一个是出队栈。var MyQueue = function() { this.pushStack = []; this.popStack = [];};步骤2:模拟入队操作如果队列想要进行入队操作,直接push进入队栈即可。MyQueue.prototype.push = function(x) { this.pushStack.pus
题目描述博主最近看面经的时候,发现字节在面试的时候,问了候选人一道这样的算法题:请反转不包含字母的字符串。解题思路首先将字符串分割为单个的字符。使用一个变量记录遍历到的字符是字母还是数字。如果属于数字或者横线则将其倒序加入到临时数组中,如果不属于数字或者横线则将临时数组的内容加入到结果数组并拼接字符,然后将临时数组给清空。最后返回数组。function reverseStr(str) { const result = []; const arr = str.split('')
Copyright © 2005-2025 51CTO.COM 版权所有 京ICP证060544号