![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 70
盼盼盼
这个作者很懒,什么都没留下…
展开
-
高级前端工程师面试题
原型链是JavaScript对象之间基于原型的继承链。每个对象都有一个内部属性[[Prototype]],指向它的原型,可以是另一个对象或null。生命周期钩子是Vue实例在不同阶段会调用的函数,如createdmountedupdateddestroyed等。XSS是攻击者将恶意脚本注入到网页中,当其他用户访问该页面时,脚本在用户的浏览器中执行。CSRF是攻击者利用用户的登录状态发起恶意请求。前端性能优化包括减少HTTP请求、使用CDN、压缩文件、图片优化、代码分割、懒加载、预加载等技术。原创 2024-07-12 14:53:56 · 839 阅读 · 0 评论 -
VueCLI4打包时清除console.log
1.在项目中下载依赖包npm install babel-plugin-transform-remove-console -g2.在项目babel.config.js中配置let transformRemoveConsolePlugin = [];// 生产环境清除console.log的信息if (process.env.NODE_ENV === "production") { transformRemoveConsolePlugin = ["transform-remove-consol原创 2020-12-02 16:48:37 · 1252 阅读 · 3 评论 -
Vue源码分析之Vue入口文件
文章目录1.1 Flow1.2 Vue.js源码目录Vue.js 的源码都在 src 目录下,其目录结构如下:compilercoreplatformsserversfcshared1.3 Vue.js构建方式1.4 Vue.js入口1.1 FlowFlow是facebook出品的JavaScript代码的静态类型检查器。Vue.js 的源码利用了 Flow 做了静态类型检查。Flow的工作方式:类型推断:通过变量的使用上下文来推断,然后根据这些推断来判断类型。类型注释:事先注释数据类型,Flo原创 2020-10-10 16:10:55 · 983 阅读 · 1 评论 -
前端基于WebSocket封装
1.无心跳,短开连接之后重新连。class webSocketClass { constructor(name) { this.lockReconnect = false; this.localUrl = "ws://XXXXXX"; this.wsUrl = ""; this.globalCallback = null; this.userClose = false; this.createWebSocket(name); } createW原创 2020-09-16 14:39:17 · 1244 阅读 · 0 评论 -
后台管理系统的权限控制------前端权限管理
1.权限管理的相关概念1.1 什么是权限管理权限管理是一个几乎所有后台系统的都会涉及的一个重要组成部分,主要目的是对整个后台管理系统进行权限的控制,而针对的对象是员工,避免因权限控制缺失或操作不当引发的风险问题,如操作错误,数据泄露等问题。1.2 权限分类后端权限管理权限管理的核心在于服务其中的数据变化,所以后端是权限管理的关键后端是如何知道该请求是哪个用户发过来的cookie:Cookie技术是客户端的解决方案,Cookie就是由服务器发给客户端的特殊信息,而这些信息以文本文件的方原创 2020-09-09 15:14:18 · 5568 阅读 · 1 评论 -
前端面试题及答案汇总
闭包是能够读取其他函数内部变量的函数要理解闭包,首先必须理解Javascript特殊的变量作用域闭包的特性:1.封闭性:外界无法访问闭包内部的数据,如果在闭包内声明变量,外界是无法访问的,除非闭包主动向外界提供访问接口;2.持久性:一般的函数,调用完之后,系统会自动注销函数,而对于闭包来说,在外部函数被调用之后,闭包依然存在。1.创建一个空对象,并且this变量引用该对象,同时还继承了该函数的原型。2.属性和方法被加到this引用的对象中。原创 2020-03-26 14:39:55 · 63859 阅读 · 14 评论 -
angular6调试报Uncaught Error: Can't resolve all parameters for ApplicationModule错
angular6调试报Uncaught Error: Can’t resolve all parameters for ApplicationModule错解决方法:在angular项目polyfills.ts中添加import 'core-js/es7/reflect';原创 2020-01-06 13:46:38 · 1615 阅读 · 0 评论 -
ionic4踩坑记
用了ionic4 四个月了,遇到的坑今天整理一下1.标题栏的返回按钮ion-back-button,在页面刷新后不显示目前解决办法是重新写返回按钮<ion-buttons class="backIcon" slot="start"> <ion-button (click)="canGoBack()"> <ion-icon slot="icon-on...原创 2019-11-20 13:21:51 · 470 阅读 · 0 评论 -
vue封装Radio单选组件(有禁用选项、默认选项的单选框)
1.效果展示2.组件代码radio.vue代码:<template> <div class="radio"> <label class="title">{{title}}</label> <a href="#" v-for="(item, index) in options" :key="...原创 2019-07-04 16:55:51 · 7018 阅读 · 1 评论 -
vue封装Checkbox多选框组件
1.效果展示2.代码checkList.vue代码<template> <div class="radio"> <label class="title">{{title}}</label> <a href="#" v-for="(item, index) in options" :key=...原创 2019-07-05 14:11:10 · 2788 阅读 · 0 评论 -
React中响应式原理
今天看flutter文档,上面讲了react的响应式原理,觉得讲的通俗易懂,摘抄下来,以后复习方便React中响应式原理1.开发者只需关注状态转移(数据),当状态发生变化,React框架会自动根据新的状态重新构建UI。2.React框架在接收到用户状态改变通知后,会根据当前渲染树,结合最新的状态改变,通过Diff算法,计算出树中变化的部分,然后只更新变化的部分(DOM操作),从而避免整棵树重...原创 2019-07-18 17:50:02 · 9409 阅读 · 0 评论 -
elementUI angular适合做H5吗
在angular项目中用了这么久elementUI,今天来总结一下使用element-angular过程中遇到的坑1.Radio 单选框样式单一,不能重新设置按钮颜色,尺寸只有large, small,主要适用于web端,h5端也可用2.Checkbox 多选框样式不好做调整3.Input 输入框相对来说,使用情况比较顺畅4.InputNumber 计数器在h5中,样式不好做调整...原创 2019-07-19 13:20:44 · 2296 阅读 · 0 评论 -
在linux服务器上安装xshell、xftp、nginx,部署前端打包的dist项目
1.下载、安装xshell,xftphttps://www.netsarang.com/zh/xshell/如果是自己用可已使用免费版的填完之后在邮箱打开下载链接下载并安装2.登录xshell填写主机名之后点击“确定”点击会话列表选项,点‘连接’linux服务器一般用户名填写root,填写完成之后点‘确定’填写密码,点‘确定’,登录xshell成功3.登录Xftp...原创 2019-07-26 16:02:37 · 3301 阅读 · 3 评论 -
安卓模拟器Genymotion下载安装
下载Genymotion地址因为Genymotion运行需要VirtualBox,如果电脑上没安装过VirtualBox,建议选这个版本。原创 2019-08-05 13:49:37 · 637 阅读 · 0 评论 -
ionic4学习笔记(一)--创建项目
1.首先要更新或者安装ionic clinpm install -g ionic2.创建项目ionic start ionic-testionic-test是创建的项目名称安装后会提示选择1.blank: 只有一个页面的空项目2.tabs: 带了下方切换页面按钮的项目3.sidemenu: 带了侧边菜单的项目3.项目跑起来npm run start打开 http://...原创 2019-08-05 16:06:11 · 643 阅读 · 0 评论 -
ionic4学习笔记(二)-- 创建页面,ion-back-button属性
1.创建user页面ionic g page userionic提供了用命令生成界面的功能:在命令行输入ionic g如下:PS D:\item\ionic-test> ionic g? What would you like to generate? (Use arrow keys)pagecomponentservicemoduleclassdirective...原创 2019-08-05 18:20:11 · 1761 阅读 · 0 评论 -
angular8版本父子组件传参报错 @ViewChild()
ERROR in src/app/component/refresh/refresh.component.ts(14,4): error TS2554: Expected 2 arguments, but got 1.解决办法//加上{static: false}@ViewChild('divContent',{static: false}) divContent: ElementRe...原创 2019-08-01 16:27:06 · 1848 阅读 · 1 评论 -
ionic4学习笔记(三)--项目目录结构分析
项目目录结构:项目结构分析:e2e端对端的测试文件node_modules 项目依赖src 项目开发文件app 项目模块,组件,服务assets 项目静态资源文件environments 项目环境,可以配置项目的运行环境theme 主题文件,可配置主题global.scss 全局样式文件index.html 项目入口karma.conf.js 测试配...原创 2019-08-06 13:44:33 · 783 阅读 · 0 评论 -
ionic4学习笔记(四)--自定义公共模块
在angular中,我们都是自定义组件来使用,但是ionic4之后,沿用了angular的模块化思想,使用懒加载的方式加载页面,每个页面都是一个模块,要是继续创建组件的话,不能在多个模块中引用同一组件,所以我们要把模块创建为组件,让模块来引用模块。创建一个tabs项目,在项目中执行命令ionic g module module/listionic g component module/lis...原创 2019-08-06 16:04:20 · 895 阅读 · 0 评论 -
JS中的数据类型
1.js中有六种数据类型,包括五种基本数据类型(Number,String,Boolean,Undefined,Null),和一种复杂数据类型(Object)2.typeof操作符检测变量的数据类型var a = 1;console.log(typeof a) //numbervar b = 'hello world';console.log(typeof b); //string...原创 2019-07-03 17:31:41 · 589 阅读 · 0 评论 -
Cordova+Framework7混合App开发
1.初始化Framework7项目执行以下命令git clone https://github.com/nolimits4web/Framework7-Vue-Webpack-Template my-app//进入项目文件npm installnpm run dev浏览器会默认打开localhost:8080想打包生产环境代码,执行npm run build-prod2.初...原创 2019-06-11 17:58:42 · 1239 阅读 · 0 评论 -
angular6引入jsrsasign,使用RSA加密
1.npm安装依赖包npm install jsrsasign2. 在项目中引用import { jsrsasign } from 'jsrsasign'原创 2019-03-28 14:14:06 · 2375 阅读 · 0 评论 -
angular6引入CryptoJS,使用HmacSHA1加密
1.npm安装CryptoJSnpm install crypto-js2.在项目中引用import CryptoJS from 'crypto-js' //注意,没有{ }getSign() { var data = new Date().getTime() var value = "123456"; var key = "GBSJSNKKM@hsdjdkm...原创 2019-03-28 13:59:10 · 3695 阅读 · 0 评论 -
H5刘海屏 刘海的高度计算 JS
何为刘海屏计算刘海屏的大致思路屏幕的可用高度:屏幕的可用宽度 = 16:9 刘海高度 = window.screen.availHeight - window.screen.availWidth * 16 / 9原创 2019-03-27 17:51:21 · 4623 阅读 · 0 评论 -
angular6使用ElementUI
1.npm 安装npm i --save element-angular2.引入CSS在styles.css中引入@import "~element-angular/theme/index.css";3.引入ElModuleimport { ElModule } from 'element-angular';4.无障碍使用<div class="page">...原创 2019-04-04 11:37:21 · 5574 阅读 · 2 评论 -
angular6-Routing
文章目录1.使用angular CLI生成AppRoutingModule1.使用angular CLI生成AppRoutingModuleng generate module app-routing --flat --module=app–flat将文件放在src / app而不是新建的文件夹中。–module = app告诉CLI将其注册到AppModule的imports数组中。...原创 2019-03-26 17:17:40 · 1098 阅读 · 0 评论 -
angular6-Http
1.在app.module.ts中引入HttpClientModuleimport { HttpClientModule} from '@angular/common/http'imports: [ BrowserModule, AppRoutingModule, HttpClientModule ],2.在调接口的文件中引入HttpClientimport...原创 2019-03-29 18:03:50 · 389 阅读 · 0 评论 -
angular6开发steps步骤条组件
1.先展示步骤条效果2.使用angular命令快速创建组件ng g c component/steps创建的组件在component文件夹下面打开steps.component.ts文件,可以看到selector的值是app-stepsimport { Component, OnInit} from '@angular/core';@Component({ selector...原创 2019-03-22 17:52:08 · 1861 阅读 · 4 评论 -
angular6-service
文章目录1.为什么创建服务2.创建服务1.为什么创建服务组件不应直接获取或保存数据,并且它们不应故意呈现假数据。他们应该专注于呈现数据并委托对服务的数据访问。2.创建服务使用angular CLI命令行创建一个名叫hero的服务ng generate service hero...原创 2019-03-25 13:27:52 · 514 阅读 · 0 评论 -
angular6基本语法 *ngFor *ngIf 获取dom元素 绑定事件
1.创建组件创建组件//创建一个header组件ng generate component header (简写 ng g c header)//创建自定义服务serviceng generate service header (简写 ng g s header)//创建路由ng generate module app-routing --flat --module=app使...原创 2019-03-20 14:02:28 · 2348 阅读 · 1 评论 -
agular6组建之间监听@Input传值变化
文章目录1.引入OnChanges2.继承接口3.声明ngOnChanges4.整体代码1.引入OnChangesimport { Component, OnInit, Input, OnChanges } from '@angular/core';2.继承接口export class AlertComponent implements OnInit, OnChanges {}3...原创 2019-04-02 11:33:30 · 759 阅读 · 0 评论 -
angular封装slider滑动条组件(支持小数)
文章目录1.先展示滑动条效果2.使用angular命令快速创建组件3.代码4.在项目中引用创建的组件1.先展示滑动条效果2.使用angular命令快速创建组件ng g c component/slider打开slider.component.ts文件,可以看到selector的值是app-stepsimport { Component, OnInit} from '@angular/...原创 2019-06-19 18:00:38 · 2007 阅读 · 1 评论 -
Flutter开发环境搭建(Windows环境下)
1.使用镜像由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中:export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn2.系统要求要安装并...原创 2019-06-06 18:00:39 · 465 阅读 · 0 评论 -
搭建Iconic+angular混合APP开发环境
1.安装iconic clinpm install -g ionic-g意思是全局安装ionic -v2.创建项目ionic start ionic-angular tabs --type=angular–type=angular 是需要多加的参数,现在官方只集成好了angualr 或许以后就会有 --type=vue 或–type=react 呢新建好项目后你会发现,...原创 2019-06-06 10:55:19 · 1280 阅读 · 1 评论 -
angular RouterLink不工作,点击每一项不报错,不跳转页面
代码:<div class="footer"> <ul> <li routerLink='../home' routerLinkActive='active'>首页</li> <li routerLink='../trade' routerLinkActive='active'>交易中心</li> ...原创 2019-05-23 11:47:23 · 2972 阅读 · 0 评论 -
angular6 运行时报错 ERROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected.
错误信息:ERROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected.node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected.node_modules/rxjs/internal/types.d.ts...原创 2019-05-20 11:56:39 · 2757 阅读 · 0 评论 -
angular6打包时报错 ERROR in src\app\user.component.html(14,31): : Expected 1 arguments, but got 0
在用ng build --prod打包时报错ERROR in src\app\user\change-phonenext\change-phonenext.component.html(14,31): : Expected 1 arguments, but got 0.处理方法:查看函数是否传参我的错误代码ts文件 modifyPhone(number) { //函数中没有...原创 2019-05-14 15:23:08 · 9453 阅读 · 1 评论 -
angular6页面刷新时报HTTP Status 404 – Not Found
错误信息:HTTP Status 404 – Not FoundType Status ReportDescription The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.Apache...原创 2019-05-14 10:05:31 · 1637 阅读 · 0 评论 -
JS字符串操作
JS字符串操作1.字符串转换2.获取字符串长度3.字符串切割4.字符串拼接5.字符串截取6.字符串替换7.字符串大小写转换8.字符串去空格9.查询子字符串10.返回指定位置的字符或字符编码1.字符串转换var num = 12;var str = num.toString() //"12"var num = 12;var str = String(num) //"12"var nu...原创 2019-05-08 15:45:56 · 330 阅读 · 0 评论 -
JS数组与字符串的相互转换
1.数组转字符串var a=[1,2,3];console.log(a.join()); //&quot;1,2,3&quot;console.log(a.toString()); //&quot;1,2,3&quot;console.log(a.join(&quot;+&quot;)); //1+2+3console.log(a.toString(&quot;+&原创 2019-03-07 14:15:39 · 521 阅读 · 0 评论