【前端面试】常见问题小结

1、如何在node中操作MongoDB数据库

node端常见用来操作MongoDB数据库的两个驱动程序(插件)是mongodb和mongoose
mongodb插件使用时需要写终端中使用的增删改查语句,使用起来相对繁琐
mongoose插件则在终端命令的基础上进行了封装,通过定义一个model模型的方式,在模型的基础上调用封装好的增删改查API对数据库进行操作,从而代码更加简洁,可读性更好。
使用mongoose时需要注意的是,对于查询到的mongoose对象,若想往该对象中新增属性,必须提前在model中定义好指定的字段,否则属性会添加失败。或者可以将查询到的mongoose对象克隆成新的对象,再进行处理。


2、三种常见请求发送方法(xhr、fetch、axios)的用法和区别

这三个都是在页面加载后从服务器请求和接收数据的API,从而实现不重新加载页面的情况下更新网页。
xhr:xhr是最原始的方法,通过调用XMLHttpRequest对象的相关方法发送和接收数据,其主要缺点在于使用起来较为繁琐。jquery的ajax就是对xhr进行了封装,但如果多个请求有依赖关系的话,仍存在回调地狱的问题。
fetch:fetch是ES6的一个新的API,可以用来代替xhr,并且支持promise,可以解决回调地狱的问题。需要注意的是,直接使用fetch时第一次请求到的数据为资源类型,需要调用内置的原型方法json()或text()进行解析,所以通常需要进行简单的封装后再使用。第二个需要注意的就是当请求到的状态码为400或者500时,仍然走resolve,而不是走reject。
axios:axios 是一个基于 promise 的HTTP库,可以用在浏览器和 node.js 中。它本质也是对原生 XMLHttpRequest 的封装。其主要优势就是基于promise,可以使用promise相关的API,使用起来简单易操作,缺点就是只支持现代浏览器。


3、vue和react分别如何实现前端鉴权(即登录拦截)

vue的前端鉴权可以通过路由守卫实现,首先在需要鉴权的路由配置中设置meta元信息,比如定义一个requireAuth: true,接着在路由全局守卫 beforeEach 中进行处理,beforeEach有三个参数分别是 tofromnextto.match 中可以获取到元信息,如匹配到 requireAuth: true 则判断当前是否具有登录状态,若有则调用 next(),若没有则定向到登录页。
react的前端鉴权可以通过路由Route中的render函数实现,首先在外层封装一个登录状态判断的函数,对于需要鉴权的路由中,调用该函数,若函数返回结果为true,则渲染该路由对于的组件,若返回false则将路由重定向到登录页;


4、谈谈socket的三种常见使用方式

第一种方式是 netSocket,主要使用的是node中的net模块。服务端通过 new net.createServer(); 创建服务,使用 on('connection') 方法建立连接,在回调函数中即可获取到客户端发送的信息。客户端通过 new net.Socket(); 创建Socket,通过 connect 连接指定端口和域名后,即可调用 write 方法发送数据;
第二种方式是 webSocket,服务端引入第三方插件 ws 创建socket服务,客户端使用H5新增API new WebSocket 连接服务端,通过 send 方法发送数据,onmessage 方法接收数据;
第三种方式是 socket.io,服务端引入 socket.io' 模块创建服务,客户端引入 socket.io.js' 文件,建立连接后,客户端和服务端都是通过on方法接收数据,都是使用 emit 方法发送数据。
平常主要使用的是socket.io,原因是其兼容性好,适用于多平台多浏览器,且可靠性高速度快。


5、webpack的环境拆分

环境拆分:主要有两种方式,
第一种方式是将开发环境配置和生成环境配置分离,并配置一个公共配置,在对应的环境下调用 merge方法将公共配置的内容merge到当前环境的配置中,实现环境分离;
第二种方式是开发环境和生成环境配置写在同一个文件中,通过在script脚本中设置NODE_ENV区分当前环境,在配置文件中通过 process.env.NODE_ENV 获取当前环境,调用对应的配置。需要注意window在使用NODE_ENV时可能会出现问题,可以安装cross-env 并配置在script脚本中解决该问题。


6、前后端数据交互的几种常见方式

方式1:get请求的查询字符串:扩展首部中显示 Query String Parameters
方式2:post请求的json字符串:扩展首部中显示 Request Payload,需要设置Content-Type: application/json
方式3:post请求的表单数据:扩展首部中显示 Form Data,需要设置Content-Type: application/x-www-form-urlencoded
方式4:cookie:前端可以通过cookie相关插件设置或获取cookie,后端可以使用 req.set('set-cookie', '')set-cookie字段设置cookie,在req的header字段中获取cookie
方式5:自定义首部:前端在header中设置以X开头的字段作为自定义首部,后端可在req的header字段中获取,

你可能感兴趣的:(面试,javascript,socket,html5,reactjs)