PHP面试宝典之前端技术

攻击：

xss攻击：
跨站脚本攻击，攻击者在表单中提交js脚本，当正常用户访问时，js脚本被触发，脚本内可以获取正常用户的账号密码信息，并将这些信息发送给攻击者

解决：
用户输入信息原样输出，标签作为字符串输出

sql注入：
攻击者将有害的sql通过参数的形式影响原本sql的执行，例：攻击者正常是只能查看id=1的文章，1是正常参数，但攻击者却将【1 or 1=1】整体做一个参数传递到后端，若后端不处理，则会查询到所有文章

解决：
防止sql注入，对引号转义，使用框架提供的数据库对象

csrf攻击：
跨站点请求伪造。攻击者通过构建一个恶意网站，去劫持正常网站的用户，因为该用户已经登录了正常网站，攻击者就可以在暗中使用该用户信息做一些非法操作

解决：
token，表单验证

ddos攻击：
分布式拒绝服务攻击，攻击者通过脚本大量请求服务器，导致服务器崩溃宕机，无法再对外部提供服务

解决：
可以对IP限流

dns劫持：
攻击者将域名解析到错误的ip上，导致正常用户访问不了正常网站
解决：
ssl证书

Ajax：

同步异步：async
浏览器缓存：cace
请求数据：data
请求地址：url
返回类型：dataType
请求类型：type
返回结果：success
请求异常：error

ajax异步请求：

ajax是一个引擎，浏览器将请求交给ajax，ajax与服务器交互，服务器返回数据亦然，发送请求和接收数据都是异步的。就是说，当ajax与服务器交互的时候，浏览器是闲置的，可以继续自己的操作，

例如：写信，我们只需要将写好的信件交给邮局，邮局去给我们送信，在邮局送信的时候，我们是可以自由活动的，这就是异步，邮局就是ajax引擎

大文件切片上传：

使用前端API：slice，mozSlice，webkitSlice三种方式

跨域问题？

什么是跨域？
由于浏览器的同源策略，当我们请求网络资源时，当前url的协议、端口、域名和请求资源的url，有一个或多个不同时，就会出现跨域问题。如果没有这个跨域策略，可能会遭受csrf，xss攻击。跨域是浏览器没办法正确拿到资源，不是服务器的问题。

跨域，解决办法？

1：jsonp：动态创建script标签，src=请求地址/?（callback js回调地址）
2：domain+iframe：请求和被请求页都设置domain，请求页动态创建iframe
3：动态创建script
4：location.hash + iframe
5：window.name + iframe
6：postMessage
7：cors
8：nginx反向代理
9：websocket双向通信
10：修改header头的origin属性：laravel中注册全局中间件，并修改其属性

vue的生命周期：

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

vue的mvvm模式

model模型层、view视图层、viewModel业务逻辑层（js交互）

视图层和模型层没有联系，通过viewModel进行交互

视图变化自动同步到模型，模型变化立即反映到视图显示

mvvm框架的核心就是双向绑定

vue双向绑定的原理：

通过数据劫持+发布订阅模式结合实现；

核心是object.defineProperty，通过get获取值，通过set设置值并返回给对象

微信小程序：

生命周期函数：
onload页面加载时（一个页面只调一次）
onshow页面显示时（每次打开页面都调用一次）
onready页面初次渲染完成时（一个页面只调用一次，代表页面可以进行交互）
onhide页面隐藏时（页面隐藏或切入后台时）
onunload页面卸载时（页面跳转或返回到前页面时）

页面事件：
onPullDownRefresh：下拉刷新
onReachBottom：上拉触底
onPageScroll：华东页面
onResize：页面尺寸变化

setdata设置函数，将数据从逻辑层发送到视图层，同时改变this.data的值

wx.login获取临时登录code
auth.code2session获取openid，及unionID
wx.getsetting获取用户当前授权状态
wx.opensetting打开设置界面，引导用户开启授权
wx.authorize向用户发起授权请求

获取手机号：将button open-type设置getPhoneNumber
获取头像昵称：将button open-type设置chooseAvatar
分享朋友圈：将button open-type设置share

小程序使用的是wxml，wxss，js，

project.config.json项目配置文件，配置是否开启https校验
app.js设置全局基础数据
app.json地步tab标题栏和路由等设置
app.wxss公共样式
pages里面包含一个个具体页面
index.json当前页面标题和引入组卷
index.wxml页面结构
index.wxss页面样式
index.js页面交互

wxml与标准html的区别：

都是描述页面结构的，都有标签、属性

标签名字不一样，小程序标签更少，比较单一

多了wx:if这样的属性以及双大括号的表达式

wxml仅能在微信小程序开发者工具中预览

小程序没有document和window对象

怎么封装微信小程序的数据请求的？

1：将所有的接口放在同一的js文件中并导出

2：在app.js中创建封装请求数据的方法

3：在子页面中调用封装的请求数据

小程序双向绑定和vue的区别

大致相同，但小程序直接this.data的属性是不可以同步到视图的，必须this.setdata方法

1：双向绑定：vue默认支持，小程序需要借助data

2：取值：vue中，通过this.reason取值，小程序是this.data.reason
微信公众号开发？

配置信息：

得到信息：应用ID【appid】，应用密钥【appsecret】

填写信息：服务器地址【URL】，令牌【token】，消息加解密密钥【en coding aes key】

消息类型：事件、定位位置、文字类型、图片类型

事件类型：订阅关注、退订、点击

自定义菜单，json字符串写到body中提交，菜单有两种类型，一种是view，直接跳转链接，一种是click，点击直接走主程序文件中对应key值运行相关代码

修改菜单：先删除，再创建，菜单更改后，要重新关注才会立刻生效，否则要24小时后才会自动更新