- 博客(69)
- 收藏
- 关注
RSS订阅原创 前端基础面试题（后续待补充）
1.http 和 https 的基本概念http: 是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的超文本传输协议。https:是以安全为目标的 HTTP 通道，即 HTTP 下 加入 SSL 层进行加密。其作用是：建立一个信息安全通道，来确保数据的传输，确保网站的真实性。2.Cookie、sessionStorage、localStorage 的区别相同点：存储在客户端。不同点：cookie数据大小不能超过4k；sessionStorage和l
2022-04-06 20:40:51
636
原创 【vue】解决轮播图在IOS上滑动卡顿的问题
在App.vue的文件中的app元素加上-webkit-overflow-scrolling: touch;#app { height: 100vh; overflow: hidden; font-family: PingFangSC-Regular; background-color: #f1f3f5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-overfl
2022-03-25 10:30:24
4652
原创 阻止事件冒泡（点击子事件不触发父事件）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#co
2022-02-25 18:04:00
525
转载 js实现点击图片在屏幕中放大
HTML部分<div> <img src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg" class="pic"/> <img height="100" width="100" src="https://cdn.pixabay.com/photo/2011/12/14/12/21/orion-nebula-11107_960_720.jpg" class="
2022-02-23 15:52:57
7241
1
原创 前端Input在IOS不聚焦，难选中
在main.js添加如下代码FastClick.attach(document.body)FastClick.prototype.focus = function(targetElement) { let length if ( targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time
2022-01-25 16:23:22
2036
原创 [Vue]实战---电商项目(订单管理模块及数据统计)【九】
订单管理订单管理概述用于维护商品的订单信息可以查看订单的商品信息、物流信息，并且可以根据实际的运营情况对订单做适当的调整。 订单列表订单列表展示订单数据加载订单列表布局const { data: res } = await this.$http.get('orders', { params: this.queryInfo })if (res.meta.status !== 200) { return this.$message.error('获取订单列表失败！')
2020-11-15 08:38:52
1308
3
原创 [Vue]实战---电商项目(商品管理模块)【八】
商品管理商品管理概述用于维护电商平台的商品信息，包括商品的类型、参数、图片、详情等信息。通过商品管理模块可以实现商品的添加、修改、展示和删除等功能 商品列表实现商品列表布局效果调用后台接口获取商品列表数据const { data: res } = await this.$http.get('goods', { params: this.queryInfo })if (res.meta.status !== 200) { return this.$message.er
2020-11-15 08:37:29
878
1
原创 [Vue]实战---电商项目(参数管理模块)【七】
参数管理参数管理概述商品参数用于显示商品的固定的特征信息，可以通过电商平台商品详情页面直观的看到 商品分类选择选择商品分类页面布局<div> <!-- 面包屑导航区域 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-bread
2020-11-15 08:36:08
285
原创 [Vue]实战---电商项目(分类管理模块)【六】
分类管理商品分类概述商品分类用于在购物时，快速找到所要购买的商品，可以通过电商平台主页直观的看到 商品分类列表基本布局与数据获取基本布局面包屑导航区域<!-- 面包屑导航区域 --><el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item&
2020-11-15 08:34:45
263
原创 [Vue]实战---电商项目(权限管理模块)【五】
权限管理权限管理业务分析通过权限管理模块控制不同的用户可以进行哪些操作，具体可以通过角色的方式进行控制，即每个用户分配一个特定的角色，角色包括不同的功能权限 权限列表展示创建对应规格在components文件夹下创建power文件夹,在此文件夹下创建Rights.vue(此vue用于开发权限管理的权限列表内容)在index.js文件下导入import Rights from "../components/power/Rights";{ path: '/right
2020-11-15 08:33:38
425
1
原创 [Vue]实战---电商项目(用户管理模块)【四】
用户管理模块用户管理概述通过后台管理用户的账号信息，具体包括用户信息的展示、添加、修改、删除、角色分配、账号启用/注销等功能用户信息列表展示添加用户修改用户删除用户启用或禁用用户用户角色分配 用户管理 - 列表展示用户列表布局面包屑导航 el-breadcrumbElement-UI 栅格系统基本使用 el-row表格布局 el-table、el-pagination创建Users.vue在index.js中添加import Users fro
2020-11-15 08:32:09
357
原创 [Vue]实战---电商项目(页面的布局)【三】
主页布局整体布局主页布局开始引入官网的框架时,首先要在element.js中添加import { Container, Header, Aside, Main} from 'element-ui'Vue.use(Container)Vue.use(Header)Vue.use(Aside)Vue.use(Main)<template> <el-container class="home-container">
2020-11-15 08:29:42
891
1
原创 [Vue]实战---电商项目(登录与退出功能）【二】
登录/退出功能登录概述登录业务流程在登录页面输入用户名和密码调用后台接口进行验证通过验证之后，根据后台的响应状态跳转到项目主页登录业务的相关技术点http是无状态的通过cookie 在客户端记录状态(不存在跨域问题)通过session在服务器端记录状态(不存在跨域问题)通过token方式维持状态(存在跨域问题) 登录 – token原理分析 登录功能实现登录页面的布局通过Element-UI 组件实现布局el-formel-for
2020-11-15 08:26:53
319
原创 [Vue]实战---电商项目(项目的概述及初始化)【一】
项目实战项目目录项目概述项目初始化登录/退出功能主页布局用户管理模块权限管理模块分类管理模块参数管理模块商品管理模块订单管理模块数据统计模块 项目概述电商项目基本业务概述 电商后台管理系统的功能用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。 电商后台管理系统的开发模式(前后端分离)前端项目是基于Vue技术栈的SPA项目 电商后天管理系统的技术选型前端项目技术栈VueVue-rout
2020-11-15 08:22:54
603
1
原创 [Vue]---Vue脚手架与Element-UI的基本使用与配置
文章目录Vue脚手架Vue脚手架的基本用法使用安装Vue脚手架生成的项目结构分析脚手架的自定义配置第一种方法（两种方法只能选一个）第二种方法（两种方法只能选一个）Element-UI的基本使用Vue脚手架Vue脚手架的基本用法Vue脚手架用于快速生成Vue项目基础架构使用安装安装3.x版本的Vue的脚手架：npm install -g @vue/cli基于版本的脚手架创建vue项目//1．基于交互式命令行的方式，创建新版vue项目vue create my-project//2
2020-11-07 08:29:43
592
原创 [Vue]---Vue单组件的配置与使用
Vue单文件组件传统组件的问题和解决方案问题：全局定义的组件必须保证组件的名称不重复字符串模板缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的\不支持CSS意味着当HTML和JavaScript组件化时，CSS明显被遗漏没有构建步骤限制，只能使用HTML和ES5 JavaScript,而不能使用预处理器解决方案针对传统组件的问题，Vue提供了一个解决方案——使用Vue单文件组件。Vue单组件的基本用法template 组件的模板区域script业务逻辑区域style样式区域
2020-11-07 08:26:59
375
原创 [Vue]---webpack的配置与使用
文章目录webpack概述webpack的基本使用配置打包文件的入口与出口配置webpack的自动打包功能配置html-webpack-plugin生成预览页面配置自动打包相关的参数webpack中的加载器通过loader打包非js模块loader的调用过程打包处理css文件打包处理less文件打包处理scss文件配置postCSS自动添加css的兼容前缀打包样式表中的图片和字体文件打包处理js文件中的高级语法webpack概述webpack是一个流行的前端项目构建工具(打包工具),可以解决当前web开
2020-11-07 08:25:34
276
原创 [Vue]---模块化相关的规范
文章目录什么是模块化浏览器端模块化规范服务端模块化规范ES6模块规范Node.js中通过babel体验ES6的模块法ES6模块化的基本语法默认导出与默认导入按需导入与按需导出什么是模块化为了解决传统开发模式的主要问题：命名冲突和文件依赖，从而采取模块化模块化:就是把单独的一个功能封装到一个模块(文件)中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块模块化的好处:方便代码的重用，从而提升开发效率，并且方便后期的维护浏览器端模块化规范AMD(已经落伍/淘汰)—
2020-11-07 08:22:52
350
原创 [Vue]---vue路由的基本概念和使用
文章目录路由的基本概念与原理Vue Routervue-router的基本使用基本使用步骤路由重定向vue-router嵌套路由嵌套路由用法vue-router动态路由匹配基本用法路由组件传递参数vue-router命名路由命名路由的配置规则vue-router编程式导航页面导航的两种方式编程式导航基本用法编程式导航参数规则路由的基本概念与原理后端路由概念 : 根据不同的用户URL请求,返回不同的内容本质 : URL请求地址与服务器资源之间的对应关系SPA后端渲染（存在性能问题)
2020-11-04 16:50:18
283
原创 [Vue]---Vue组件化开发基础
组件化开发思想现实中的组件化思想体现标准分治重用组合组件注册全局组件注册语法Vue.component(组件名称,{ data:组件数据, template:组件模板内容})组件用法<div id='app'> <button-counter></button-counter></div><button-counter></button-counter>可以重复使用<scrip
2020-11-03 16:55:04
111
原创 [Vue]---Vue常用特性讲解
文章目录Vue常用特性常用特性概览表单操作表单域修饰符自定义属性**带参数的自定义指令****局部指令**计算属性侦听器过滤器生命周期Vue常用特性常用特性概览表单操作自定义指令计算属性过滤器侦听器生命周期表单操作基于Vue的表单操作Input 单行文本textarea 多行文本select 下拉多选radio 单选框checkbox 多选框示例代码如下：<!DOCTYPE html><html lang="en"><h
2020-11-03 16:43:05
168
原创 [Vue]---vue选项卡案例
选项卡案例实现步骤实现静态UI效果用传统的方式实现标签结构和样式基于数据重构UI效果将静态的结构和样式重构为基于Vue模板语法的形式处理事件绑定和js控制逻辑声明式编程模板的结构和最终显示的效果基本一致我们先把每组数据作为对象存储在数组中list: [{ id: 1, title: 'apple', path: 'images/苹果.jpg' }, { id: 2, title:
2020-11-01 19:03:01
468
原创 [Vue]---Vue的模块语法知识点（二）
文章目录Vue模板语法属性绑定Vue动态处理指令`v-model`底层原理分析样式绑定class样式处理数组语法语法细节style样式处理对象语法数组语法分支循环结构分支结构`v-if`与`v-show`区别循环结构``v-for``遍历数组``key的作用``︰Vue模板语法属性绑定Vue动态处理指令v-bind指令用法<a v-bind:href="url">跳转</a>缩写形式<a:href='url'跳转</a><!DO
2020-11-01 15:32:36
358
原创 [Vue]---Vue的模块语法知识点（一）
文章目录Vue模块语法模块语法的概述如何理解前端渲染？前端渲染方式指令v-clock指令用法数据绑定指令数据响应式双向数据绑定事件绑定Vue如何处理事件？事件函数的调用方式事件函数参数传递事件修饰符按键修饰符自定义按键事件修饰符Vue模块语法模块语法的概述如何理解前端渲染？把数据填充到HTML标签中前端渲染方式原生js拼接字符串基本上就是将数据已字符串的方式拼接到HTML标签中缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来前端模块引擎优点：大
2020-11-01 15:31:04
242
原创 [Vue]----Vue的基本使用和概述
Vue1.Vue的概述Vue:渐进式JavaScript框架声明式渲染→组件系统→客户端路由→集中式状态管理>项目构建2.Vue的基本使用Vue的基本使用步骤需要提供标签用于填充数据引入vue.js库文件使用vue的语法做功能吧vue提供的数据填充到标签里面2.1Vue.js之HelloWorld细节分析实例参数分析el:元素的挂载位置(值可以是css选择器或者DOM元素)data:模型数据（值是一个对象）1、提供标签用于填充数据<div id="app
2020-10-31 15:11:25
138
原创 [ES6]---迭代器与生成器的用法
迭代器与生成器SymbolSymbol是什么ES6新增了第六种原始类型Symbol类型。Symbol类型是唯一的并且是不可修改的，也可以用来作为Object的key值Symbol类型的变量是通过调用Symbol()函数生成的let symbol = Symbol();console.log(typeof symbol) //symbollet symbol2 = Symbol('林俊杰')console.log(symbol2) //Symbol(林俊杰)let symbol3 =
2020-10-29 09:33:21
175
原创 [ES6]---async函数的语法及使用
文章目录async函数的语法async函数是什么异步函数声明式返回Promise对象await表达式错误处理async函数执行Promise注意事项使用try…catch语句多个await同时触发await表达式的限制async函数的语法async函数是什么该函数的主要目的就是简化使用Promises,异步调用的操作，并对一组Promises 执行某些操作。正如 Promises类似于结构化回调，async/await类似于组合生成器和Pramisesfunction resloveAfter
2020-10-28 20:27:16
165
原创 [ES6]---Promise对象的方法及使用
Promise对象promise对象是什么ECMAScript 6新增了Promise对象，该对象允许对延迟和异步操作流程进行控制。一个Promise对象就是一个代表了异步操作最终完成或者失败的对象开发人员可以使用由其他函数创建并返回的Promise对象。Promise对象本质上就是一个绑定回调的对象，而不是将回调传入函数内部。一个Promise有以下几种状态：pending：初始状态，既不是成功，也不是失败状态。fulfilled：意味着操作成功完成。rejected：意味着操作失
2020-10-28 19:10:54
167
原创 [ES6]---Set集合、Map集合、WeakSet集合、WeakMap集合
文章目录Set集合Set集合是什么Set集合的属性与方法属性操作方法创建Set集合遍历方法Set集合与Array对比WeakSet集合WeakSet是什么Map集合Map集合是什么Map集合的属性与方法属性方法Map集合键的相等Map集合与Object对比WeakMap集合WeakMap集合是什么WeakMap集合的方法Set集合Set集合是什么Set对象是值的集合，可以按照插入的顺序迭代它的元素。Set集合中的元素只会出现一次，即Set集合中的元素时唯一的ECMAScript 6提供了Set构
2020-10-28 14:49:13
145
原创 [ES6]---对象的扩展（Object方法、super关键字等）
文章目录对象的扩展对象的属性表示法Object的方法Object.is()的方法Object.assign()的方法super关键字对象的扩展运算符对象的扩展对象的属性表示法ES5的用法let name = '林俊杰'function sayMe() { console.log('this is 林俊杰')}//ES5定义对象的属性和方法var obj = { name: name, //第二个name表示变量名 sayMe: sayMe //第二个sayMe表示函
2020-10-28 14:44:47
123
原创 [ES6]---函数的扩展（rest参数&&箭头函数）的讲解
文章目录函数的扩展函数参数的默认值函数参数的作用域rest参数箭头函数箭头函数是什么箭头函数的语法结构箭头函数的注意事项函数的尾调用函数的扩展函数参数的默认值ES5中不允许为函数的形参设置其默认值，当定义形参，而不传递实参时–形参的默认值为undefined，我们可以人为地解决形参默认值的问题 arg=arg||0function fn(arg) { arg = arg || 0 console.log(arg) //0}fn()ES6 允许为函数的形参设置默认值
2020-10-28 14:42:14
1079
1
原创 [ES6]---数组的扩展（扩展运算符&&Array方法）的讲解
数组的扩展扩展运算符扩展运算符扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。允许一个表达式在原地展开// 定义一个数组var arr = [1,2,3,4,5];//将数组中的每一个元素打印在控制台for(let i =0;i<arr.length;i++){ console.log(arr[i]);}//利用扩展运算符console.log(...arr);// 1 2 3 4 5主要用于函数调
2020-10-27 19:39:07
2323
原创 [ES6]---字符串的扩展（字符串的判断&&模板字符串）的讲解
文章目录字符串的扩展字符串判断是否包含ES5提供判断是否包含的方法：ES6提供的判断是否包含的方法repeat()方法模板字符串模板字符串是什么多行模板字符串带表达式的模板字符串带标签的模板字符串原始字符串字符串的扩展字符串判断是否包含ES5提供判断是否包含的方法：String.indexOf(searchStr)方法作用：回指定字符串中包含指定子字符串第一个匹配的索引值结果：包含–返回第一个匹配的索引值，不包含–返回-1let str = 'qishilong'console.log(
2020-10-27 19:36:31
960
原创 [ES6]---ES6的解耦赋值及用途讲解(对象的解耦、数组的解耦、字符串...等）
数组解耦赋值解耦赋值是什么按照一定模式从数组或对象中提取值，对变量进行赋值。这种赋值方式被称为“解耦赋值”（Destructuring）变量的解耦赋值–从指定的数组或对象中提取值，为指定变量进行赋值语法结构:var/let[变量名称1，变量名称2，…]=数组或对象let [a, b, c] = [1, 2, 3]console.log(a, b, c) //1 2 3"解耦赋值"本质上属于“模式匹配”。赋值运算符两边的模式相同，左边的变量会被赋予对应位置的值解耦赋值失败解耦赋值失败—定义
2020-10-26 20:57:39
1244
原创 [ES6] ---块级作用域的及let、var关键字讲解
文章目录块级作用域let与var的区别let不允许声明提前let不允许重复声明var、let与函数参数的关系为什么需要块级作用域循环语句与数组函数的声明块级作用域1.在ES5版本只存在全局作用域和函数作用域var v = 100; //在全局作用域中function fn() { //在函数作用域中-只能在当前函数作用域被访问 var w = 10; console.log(v) //100 console.log(w); //10}console.log(
2020-10-26 18:59:01
600
原创 [ES6] ----ES6的概念及运行环境的介绍
一、ES6的概念以及运行环境1、与JavaScript的关系1996年11月，、JavaScript 的创造者Netscape公司，决定将、JavaScript提交给标准化组织ECMA,希望这种语言能够成为国际标准。次年，ECMIA发布262号标准文件( ECMA- 262 )的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript,这个版本就是1.0版。该标准之所以不叫、JavaScript有两个原因，一 是 JavaScript被Netscape公司注册为商标，二是想体现
2020-10-26 18:56:06
249
原创 promise中的.then()方法
promise中.then()方法promise的构造函数是同步执行promise.then中的函数是异步执行.then()异步执行 : 当此方法执行完后再执行内部的程序是避免了没有获取到数据语法promise.then(onFulfilled[, onRejected]);参数promise必需。Promise 对象。onFulfilled可选。承诺成功完成时要运行的履行处理程序函数。onRejected可选。承诺被拒绝时要运行的错误处理程序函数。
2020-10-24 09:20:50
19767
1
原创 Canvas 添加加样式&&颜色（细解）
加样式和颜色色彩ColorsfillStyle = color设置图形的填充颜色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> function draw() { var ctx = document.getEl
2020-09-23 21:13:47
921
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人