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

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有三个参数分别是 to、from、next，to.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字段中获取，