avatar
Articles
109
Tags
44
Categories
28

Home
Archives
Categories
DarylWxc
Home
Archives
Categories

DarylWxc

uni-app初试
Created2021-03-31|移动端|Vue•移动端开发
1. 文档查阅初始化hello-uniapp项目,查看项目相关文件,src为主要文件夹common:文件夹为一些配置插件封装components:组件目录hybrid:存放本地HTML文件platforms:存放各平台专用页面文件pages:业务页面文件存放目录static:存放本地静态资源wxcomponents:存放小程序组件manifest.json:配置应用名称、appid、logo、版本等打包信息pages.json:配置页面路由、导航条、选项卡等页面类信息 1.1 写法标签与小程序相似page相当于body节点 123page{ background:#ccc;} 2. 疑难杂症1.引入iconfont方式,添加图标到创建的项目文件夹中,然后Unicode选项生成代码,直接讲代码复制到新建的css文件中,然后在app.vue文件引入该CSS文件。使用时: 12345style:iconfont{ font-family:"iconfont" //之前css文件里的font-family值 font-size:16 ...
Web安全性
Created2021-03-26|web前端|网络安全
1. Web攻击植入恶意代码,修改网站权限,获取网站用户隐私信息等等。常见Web攻击方式有: XSS(Cross Site Scripting)跨站脚本攻击 CSRF(Cross-site request forgery)跨站请求伪造 SQL注入攻击 2. XSS跨站脚本攻击,允许攻击者将恶意代码植入到提供给其他用户使用的页面中。XSS涉及到三方,即攻击者、客户端与Web应用。XSS是盗取存储在客户端的Cookie或者其他网站用于识别客户端身份的敏感信息。获取合法用户的信息后,假冒合法用户与网站交互。XSS攻击可以分成: 2.1 存储型步骤: 攻击者将恶意代码提交到目标网站的数据库中 用户打开目标网站时,网站服务端将恶意代码从数据库取出,拼接在HTML中返回给浏览器 用户浏览器接收到响应后解析执行,混在其中的恶意代码也被执行 恶意代码窃取用户数据并发送到攻击者的网站,或者冒充用户的行为,调用目标网站接口执行攻击者指定的操作这种攻击常见于带有用户保存数据的网站功能,如论坛发帖、商品评论、用户私信等 2.2 反射型步骤: 攻击者构造出特殊的URL,其中包含恶意代码 用户打开带有恶 ...
单点登录SSO
Created2021-03-25|web前端|前端
1. SSO是什么单点登录,简称SSO。是在多个应用系统中用户只需要登录一次就可以访问所有相互信任的应用系统。SSO一般都需要一个独立的认证中心(passport),子系统登录均通过passport,子系统本身将不参与登录操作。授权以后,会建立局部会话,一定时间内无需再次向passport发起认证。2. 如何实现 同域名下的单点登录cookie的domin属性设置为当前域的父域,并且父域的cookie会被子域所共享。path属性默认为web应用的上下文路径。利用cookie的该特点,将cookie的path属性设置为根路径,将Session ID保存到父域中。子域应用就都可以访问到这个cookie。不过需要在主域名相同的情况下可以通过这种方式来实现单点登录。 不同域名下的单点登录(一)不同域下,Cookie不共享。需要部署一个认证中心,用于专门处理登录请求的独立的Web服务。验证token,如果没有则跳转到认证中心,跳转时携带Cookie(带有token),根据Cookie判断登录状态。已登录的用户在跳转前生成一个Token拼接在目标URL的后面,回传给目标应用系统,写入Cookie。 ...
Vue插槽
Created2021-03-18|web前端|前端框架•Vue
1. 普通插槽以不同于严格的父子关系组合组件。将内容放置到新位置或使组件更通用的出口。插槽将slot作为子组件承载分发的载体。
computed和watch
Created2021-03-16|Web前端|前端框架•Vue
1. computed用法类似于watch的计算属性,根据所依赖的数据动态设置新的计算结果。computed的值在getter执行后会被缓存。应用场景: - 适用于一些重复使用数据或复杂及费时的运算。 - 依赖于其他数据的数据2. computed和methods的区别?1.methods无响应式,不会动态更改2.computed可以定义成函数,也可以定义成get/set3. watch用法对data里的数据监听回调。应用场景:当data数据更新时需要操作或数据变化时执行异步,开销较大的操作时使用。普通监听:watch内调用,根据newval和oldval执行函数深度监听:有immediate属性,可立即执行方法,deep属性,针对对象属性的监听,性能开销较大4. watch和computed的区别相同:都是观察页面数据变化不同:computed只有当依赖数据变化才会计算,当数据没有变化会读取缓存。watch每次都需要执行函数,无缓存,更适用于数据变化时的异步。5. 原理及源码在initState函数中,initComputed函数,判断是否有computed后执行,循环遍历 ...
前端工程化
Created2021-03-15|Web前端|工程化
1. 模块化1.1 什么是模块化 将一个复杂的程序依据一定的规则封装成几个块,并进行组合在一起 块的内部数据与实现是私有的,只向外部暴露一些接口(方法)与外部其他模块通信 1.2 模块化的进行过程 全局function模式:将不同的功能封装成不同的全局函数编码:将不同的功能封装成不同的全局函数问题:污染全局命名空间,容易引起命名冲突或数据不安全,模块之间看不出关系 namespace模式:简单对象封装作用:减少全局变量,解决命名冲突问题:数据不安全 IIFE模式:匿名函数自调用(闭包)作用:数据是私有的,外部只能通过暴露的方法操作编码:将数据和行为封装到一个函数内部,通过给window添加属性来向外暴露接口问题:如果当前这个模块依赖另一个模块怎么办? IIFE模式增强:引入依赖 1.3 模块化的好处 避免命名冲突 更好的分离,按需加载 更高复用性 高可维护性 1.4 引入多个script后出现问题 请求过多 依赖模糊 难以维护 2. AST2.1 什么是AST抽象语法树,源代码的抽象语法结构的树状表现形式。 2.2 词法分析和语法分析JS是解释型语言,通过词法分析->语法 ...
Vue响应式原理
Created2021-03-15|Web前端|前端框架•Vue
1. 数据初始化Vue源码中在initState中进行了数据初始化,为数据添加响应式。针对props,methods,data,computed和watch,做数据的初始化处理,响应式转换。 2. initPropsProps用于父子组件间传值(父传子)。:test=test会被解析成{attrs: {test: test}},并作为子组件的render函数。创建VNode遇到child占位符时,根据attrs属性进行规范校验,最后以propsData形式传入Vnode构造器中。通过proxy为props做了一层代理,可通过vue实例代理访问到props的值,本质上是利用Object.defineProperty对数据的getter和setter方法进行重写。总结:props以propsData的形式在Vnode的属性存在,通过proxy进行代理,然后实例访问。 3. initMethodsmethods方法定义必须是函数,命名不能与props重复。定义的方法都将挂载在根实例上。 4. initDataVue组件实例在init函数时将options参数赋值在this上,传入i ...
CSS基础
Created2021-03-15|页面样式|CSS•响应式布局
1. 盒模型?盒模型:框模型,包含content(内容)、padding(内边距)、border(边框)、margin(外边距)。## 1. IE模型和标准模型的区别?IE模型:width=content+padding,height=content+padding标准模型:width=content,height=content## 2. CSS设置方式可通过CSS3新增的属性box-sizing设置盒模型的模式,content-box(标准模型),IE模型(border-box)。## 3. JavaScript设置盒模型的宽高1.dom.style.width/height //只能取到行内样式的宽和高,style标签中的link外链取不到。2.dom.currentStyle.width/height //取到的是最终渲染后的宽高,只IE支持3.window.getComputedStyle(dom).width/height //同(2),IE9以 ...
JavaScript基础
Created2021-02-26|web前端|JavaScript
1. 原型链每个函数都有prototype,指向了一个对象,该对象为实例的原型。每个JS对象(除了null)都具有_proto_属性,指向该对象的原型。每个原型都具有constructor属性,指向关联的构造函数。Object.prototype._proto_为null代表该对象没有原型。 2. 继承 原型链继承123456789101112131415161718192021222324252627function Parent () { this.name = 'kevin';}Parent.prototype.getName = function () { console.log(this.name);}function Child () {}Child.prototype = new Parent();var child1 = new Child();console.log(child1.getName()) // kevinvar child1 = new Child(); // 引 ...
vue权限管理
Created2021-02-26|web前端|前端框架•Vue
1. 权限是啥?权限是对特定资源的访问许可,确保用户只能访问到被分配的资源。其原理是请求发起权,请求发起有两种形式: 页面加载触发 页面上的按钮点击触发实现目标: 路由方面,只能看到有权访问的菜单 视图方面,只能看到自己有权浏览的内容和有权操作的控件 请求控制,越权请求在前端进行拦截 2. 如何实现?权限控制可以分四个方面: 接口权限 按钮权限 菜单权限 路由权限 接口权限接口权限一般采用jwt的形式来严重,登录完拿到token将token保存,每次请求拦截器进行拦截,请求头部带token 路由权限控制方案一:在路由标记相应的权限信息,路由跳转前做校验 1234567891011121314151617181920212223242526272829const routerMap = [ { path: '/permission', component: Layout, redirect: '/permission/index', alwaysShow: true, // will always sho ...
1…789…11
avatar
DarylWxc
Articles
109
Tags
44
Categories
28
Follow Me
Announcement
My favorite music type is melodic progressive house
Recent Post
BCDA-noted2025-05-07
Symbols-in-English2024-11-03
Database-Notes2024-11-03
react-porject-build2024-10-24
Node-Learning2024-10-03
Categories
  • Back-End1
  • Class2
  • DOM1
  • English1
  • Entertainment1
  • Note1
  • Personality13
  • UI设计开发5
Tags
Mpvue 伸缩布局 工作职责 Drama Vue 设计模式 Database diary learning CSS Typescript HEXO 单页面与多页面应用 面试 图片编辑 javaScript 前端开发 Web性能 响应式布局 函数 record 正则表达式 学习需求 notes 工程化 JavaScript Studying 字体 代码管理 网络安全 Axure 开发者工具 移动端开发 Music ES6 webpack 原型设计 版本管理 front-end development 测试
Archives
  • May 20251
  • November 20242
  • October 20242
  • September 20241
  • January 20241
  • November 20233
  • October 20233
  • September 20231
Info
Article :
109
UV :
PV :
Last Push :
©2019 - 2026 By DarylWxc

Static Badge Static Badge Static Badge