【前端面试题】2021/3/15面试题

最近在boss直聘上投了很多简历,记录一下今天的面试题,这个好几个都是电话直接打过来问时间方便?我一回答方便就直接开始丢题目,我也不知道哪个公司的。感觉公司不是很正规的感觉,感觉那边有个问题题库,面试官不够灵活,读课本一样,不说了,看题!

 

目录

 

1.原型链?

2.token、session、cookie的区别?

3.拦截器的作用?

4.简述MVVM模型?


1.原型链?

所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法。

引用javascript——原型与原型链

2.token、session、cookie的区别?

cookie 是一个非常具体的东西,指的就是浏览器里面能永久存储的一种数据,仅仅是浏览器实现的一种数据存储功能。

cookie由服务器生成,发送给浏览器,浏览器把cookie以kv形式保存到某个目录下的文本文件内,下一次请求同一网站时会把该cookie发送给服务器。由于cookie是存在客户端上的,所以浏览器加入了一些限制确保cookie不会被恶意使用,同时不会占据太多磁盘空间,所以每个域的cookie数量是有限的。

Session

session 从字面上讲,就是会话。这个就类似于你和一个人交谈,你怎么知道当前和你交谈的是张三而不是李四呢?对方肯定有某种特征(长相等)表明他就是张三。

session 也是类似的道理,服务器要知道当前发请求给自己的是谁。为了做这种区分,服务器就要给每个客户端分配不同的“身份标识”,然后客户端每次向服务器发请求的时候,都带上这个“身份标识”,服务器就知道这个请求来自于谁了。至于客户端怎么保存这个“身份标识”,可以有很多种方式,对于浏览器客户端,大家都默认采用 cookie 的方式。

服务器使用session把用户的信息临时保存在了服务器上,用户离开网站后session会被销毁。这种用户信息存储方式相对cookie来说更安全,可是session有一个缺陷:如果web服务器做了负载均衡,那么下一个操作请求到了另一台服务器的时候session会丢失。

Token

Token的引入:Token是在客户端频繁向服务端请求数据,服务端频繁的去数据库查询用户名和密码并进行对比,判断用户名和密码正确与否,并作出相应提示,在这样的背景下,Token便应运而生。

Token的定义:Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Token前来请求数据即可,无需再次带上用户名和密码。最简单的token组成:uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign(签名,由token的前几位+盐以哈希算法压缩成一定长的十六进制字符串,可以防止恶意第三方拼接token请求服务器)。

使用Token的目的:Token的目的是为了减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮。

基于 Token 的身份验证

使用基于 Token 的身份验证方法,在服务端不需要存储用户的登录记录。大概的流程是这样的:

  • 客户端使用用户名跟密码请求登录
  • 服务端收到请求,去验证用户名与密码
  • 验证成功后,服务端会签发一个 Token,再把这个 Token 发送给客户端
  • 客户端收到 Token 以后可以把它存储起来,比如放在 Cookie 里或者 Local Storage 里
  • 客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
  • 服务端收到请求,然后去验证客户端请求里面带着的 Token,如果验证成功,就向客户端返回请求的数据

APP登录的时候发送加密的用户名和密码到服务器,服务器验证用户名和密码,如果成功,以某种方式比如随机生成32位的字符串作为token,存储到服务器中,并返回token到APP,以后APP请求时,凡是需要验证的地方都要带上该token,然后服务器端验证token,成功返回所需要的结果,失败返回错误信息,让他重新登录。其中服务器上token设置一个有效期,每次APP请求的时候都验证token和有效期。

那么我的问题来了: 1.服务器上的token存储到数据库中,每次查询会不会很费时。如果不存储到数据库,应该存储到哪里呢。 2.客户端得到的token肯定要加密存储的,发送token的时候再解密。存储到数据库还是配置文件呢?

token是个易失数据,丢了无非让用户重新登录一下,新浪微博动不动就让我重新登录,反正这事儿我是无所谓啦。
所以如果你觉得普通的数据库表撑不住了,可以放到 MSSQL/MySQL 的内存表里(不过据说mysql的内存表性能提升有限),可以放到 Memcache里(讲真,这个是挺常见的策略),可以放到redis里(我做过这样的实现),甚至可以放到 OpenResty 的变量字典里(只要你有信心不爆内存)。

token是个凭条,不过它比门票温柔多了,门票丢了重新花钱买,token丢了重新操作下认证一个就可以了,因此token丢失的代价是可以忍受的——前提是你别丢太频繁,要是让用户隔三差五就认证一次那就损失用户体验了。

基于这个出发点,如果你认为用数据库来保持token查询时间太长,会成为你系统的瓶颈或者隐患,可以放在内存当中。
比如memcached、redis,KV方式很适合你对token查询的需求。
这个不会太占内存,比如你的token是32位字符串,要是你的用户量在百万级或者千万级,那才多少内存。
要是数据量真的大到单机内存扛不住,或者觉得一宕机全丢风险大,只要这个token生成是足够均匀的,高低位切一下分到不同机器上就行,内存绝对不会是问题。

客户端方面这个除非你有一个非常安全的办法,比如操作系统提供的隐私数据存储,那token肯定会存在泄露的问题。比如我拿到你的手机,把你的token拷出来,在过期之前就都可以以你的身份在别的地方登录。
解决这个问题的一个简单办法
1、在存储的时候把token进行对称加密存储,用时解开。
2、将请求URL、时间戳、token三者进行合并加盐签名,服务端校验有效性。
这两种办法的出发点都是:窃取你存储的数据较为容易,而反汇编你的程序hack你的加密解密和签名算法是比较难的。然而其实说难也不难,所以终究是防君子不防小人的做法。话说加密存储一个你要是被人扒开客户端看也不会被喷明文存储……
方法1它拿到存储的密文解不开、方法2它不知道你的签名算法和盐,两者可以结合食用。
但是如果token被人拷走,他自然也能植入到自己的手机里面,那到时候他的手机也可以以你的身份来用着,这你就瞎了。
于是可以提供一个让用户可以主动expire一个过去的token类似的机制,在被盗的时候能远程止损。

在网络层面上token明文传输的话会非常的危险,所以建议一定要使用HTTPS,并且把token放在post body里。

补充:

cookie与session的区别

1、cookie数据存放在客户端上,session数据放在服务器上。

2、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
   考虑到安全应当使用session。

3、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能
   考虑到减轻服务器性能方面,应当使用COOKIE。

4、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。

5、所以个人建议:
   将登陆信息等重要信息存放为SESSION
   其他信息如果需要保留,可以放在COOKIE中

3.拦截器的作用?

二:Axios封装的http拦截器:
在请求或响应被 then 或 catch 处理前拦截它们,分为请求拦截器(发送请求前触发)和响应拦截器(得到响应结果后触发)。(在请求接口调用时触发)

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});

注意:一定要有返回值
4.简述MVVM模型?

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了,它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

Model

我们可以把Model称为数据层,因为它仅仅关注数据本身,不关心任何行为(格式化数据由View的负责),这里可以把它理解为一个类似json的数据对象。

var data = {val: 0
};

 

View

指的是所看到的页面,和MVC/MVP不同的是,MVVM中的View通过使用模板语法来声明式的将数据渲染进DOM,当ViewModel对Model进行更新的时候,会通过数据绑定更新到View。

div id="myapp"><div><span>{{ val }}rmb</span></div><div><button v-on:click="sub(1)">-</button><button v-on:click="add(1)">+</button></div>
</div>

 

ViewModel

mvvm模式的核心,它是连接view和model的桥梁。它有两个方向:

  1. 将Model转化成View,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。
  2. 将View转化成Model,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。
new vue({el: '#myapp',data: data,methods: {add(v) {if(this.val < 100) {this.val += v;}},sub(v) {if(this.val > 0) {this.val -= v;}}}
});

 

总结:

在MVVM的框架下视图View和模型Model是不能直接通信的。它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

整体来看,简化了业务与界面的依赖,还解决了数据频繁更新(以前用jQuery操作DOM很繁琐)的问题。因为在MVVM中,View不知道Model的存在,ViewModel和Model也察觉不到View,这种低耦合模式可以使开发过程更加容易,提高应用的可重用性。

MVVM流程图如下:

 

 

好啦,本期的内容就分享到这里,我们下期见!

                好书不厌百回读,熟读自知其中意。让学习成为习惯,用知识改变命运,让博客见证成长,用行动证明努力。
                如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “点赞” “评论” “收藏” 一键三连哦!
                听说 👉 点赞 👈 的人运气不会太差,每一天都会元气满满呦!^ _ ^ ❤️ ❤️ ❤️
                码字不易,大家的支持就是我坚持下去的动力。点赞后不要忘了👉 关注 👈我哦!
                更多精彩内容请前往 孙叫兽的博客

微信公众号【电商程序员】,分享改变自己的项目。

如果以上内容有任何错误或者不准确的地方,欢迎在下面 👇 留个言。或者你有更好的想法,欢迎一起交流学习~~~
 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/357477.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

javafx打包路径问题_关于JavaFX的最常见问题

javafx打包路径问题上周&#xff0c;我在斯德哥尔摩的Jfokus 2012上做了一个关于JavaFX的演讲&#xff0c;当时我意识到每次活动都会问三个问题。 似乎有一个普遍的兴趣&#xff0c;所以我尝试在这篇文章中回答他们&#xff08;尽可能的说实话&#xff09;&#xff1a; iPad或其…

【前端面试题】关于一些js的一些面试题(金融行业),我和面试官扯了三个小时

今天去面试了一家金融公司&#xff0c;招聘比较着急&#xff0c;一面后直接二面等结果&#xff0c;这种公司一般对js要求比较高&#xff0c;笔试题基本都是js相关的题&#xff0c;针对公司的客户要求也会做一些jquery,vue.react相关的插件&#xff0c;H5及webAPP。下面直接说题…

上海大学计算机学院客座教授,刘云虹教授受聘上海大学外国语学院客座教授并做学术讲座...

11月29日14:00&#xff0c;南京大学外国语学院副院长、博士生导师刘云虹教授被我院聘为客座教授并做主题为《中国文学外译与翻译历史观》的学术讲座。学院副院长苗福光教授主持&#xff0c;副院长邓志勇教授(主持工作)为刘教授颁发了聘书。讲座从刘教授自己的学术研究领域和起点…

安徽阜阳计算机高中学校排名,安徽阜阳排名靠前的三大高中,有争议?2020年高考成绩说话!...

安徽省阜阳市&#xff0c;古称汝阴&#xff0c;阜阳历史悠久、文化璀璨、人才辈出&#xff0c;有阜阳剪纸等国家非物质文化遗产&#xff0c;也是管仲、鲍叔牙等历史名人的故乡&#xff1b;阜阳风景秀丽&#xff0c;辖区内有诸多知名景点&#xff0c;其中八里河风景区为国家AAAA…

数组练习2

结对开发&#xff1a;张哲 张晓菲 题目&#xff1a;返回一个数组中子数组最大和&#xff0c;数组可以首尾相连。 一、实验思路 本次实验在第一次的基础上增加了一些难度&#xff0c;数组可以首尾相连组成一个环&#xff0c;我们两个经过思考和讨论后得到一个方法&#xff1a; …

Java 8中最快的垃圾收集器是什么?

OpenJDK 8具有几种垃圾收集器算法&#xff0c;例如Parallel GC &#xff0c; CMS和G1 。 哪一个最快&#xff1f; 如果默认的GC从Java 8中的并行GC更改为Java 9中的G1&#xff08;当前建议&#xff09;&#xff0c;将会发生什么&#xff1f; 让我们对其进行基准测试。 基准方法…

【粉丝需求】如何把一个前端网页都搞下来?

一般比较简单的就是展示型网站,这类网站 最好仿制,如果带后台的不太好获取完整后台代码,但是搞一下前端代码还是可以的。一般前端不管用什么框架,基础元素由html+css+javaScript组成。 声明:本文仅仅提供一种思路,如有对站点侵权的地方,请联系博主删除。 我用的是HB-X,…

九、其他常用命令

一、挂载命令 可以理解为windows当中的分配盘符操作 1.查询与自动挂载 [rootlocalhost ~]# mount #查询系统中已经挂载的设备 [rootlocalhost ~]# mount –a #依据配置文件/etc/fstab的内容&#xff0c;自动挂载一遍 只要按照对应的格式将相应的分区添加到list中&#xff0c;那…

【ECharts系列|01入门】 从入门到天黑【入门级教程实战】

ECharts 是一个使用 JavaScript 实现的开源可视化库&#xff0c;涵盖各行业图表&#xff0c;满足各种需求。 ECharts 遵循 Apache-2.0 开源协议&#xff0c;免费商用。 ECharts 兼容当前绝大部分浏览器&#xff08;IE8/9/10/11&#xff0c;Chrome&#xff0c;Firefox&#xff0…

Java开发人员应了解的JVM流行语

本文将与您分享一些JVM“流行语”&#xff0c;它们对于Java开发人员在执行任何JVM性能和垃圾回收调优之前理解和记住非常重要。 本文末尾还提供了一些技巧&#xff0c;包括一些高级性能调优最佳实践。 将来的文章中将探讨有关Oracle HotSpot并发GC收集器&#xff08;例如CMS和G…

【ECharts系列|02可视化大屏】 舆情分析,人口分析及警情警力活动情况的实现【上篇】

简介&#xff1a;ECharts实现可视化大屏展示&#xff0c;包含人口分析&#xff0c;警情警力分析多张效果图&#xff0c; 完整的htmlcssjsimg:https://download.csdn.net/download/weixin_41937552/16361615 项目结构&#xff1a; activity.html <!doctype html> <met…

spring rmi_Spring远程支持和开发RMI服务

spring rmiSpring远程支持简化了启用远程服务的开发。 当前&#xff0c;Spring支持以下远程技术&#xff1a;远程方法调用&#xff08;RMI&#xff09;&#xff0c;HTTP调用程序&#xff0c;Hessian&#xff0c;Burlap&#xff0c;JAX-RPC&#xff0c;JAX-WS和JMS。 远程方法调…

用Paint Tool SAI绘制漫画

漫画绘图软件 Paint Tool SAI是一个来自日本的小巧的漫画辅助绘图软件&#xff0c;只有11M大小。 这个没有任何现成的模板和组件&#xff0c;只能自己一笔一笔的话&#xff0c;画笔、图层等功能与Photoshop类似&#xff0c;但没有PS其它大量功能&#xff0c;因此操作更加便捷&a…

【ECharts系列|02可视化大屏】 舆情分析,人口分析及警情警力活动情况的实现【下篇】

简介&#xff1a;ECharts实现可视化大屏展示&#xff0c;包含人口分析&#xff0c;警情警力分析多张效果图&#xff0c; 完整的htmlcssjsimg:https://download.csdn.net/download/weixin_41937552/16361615 上一篇&#xff1a;【ECharts系列|02可视化大屏】 舆情分析&#xff0…

在WildFly上将JPA和CDI Bean与骆驼一起使用

我并没有真正为此计划&#xff0c;但是在一个免费的会议月份中&#xff0c;我有机会进行了一些深入的探讨&#xff0c;并向您展示了WildFly-Camel子系统提供的WildFly魔术上的更多Camel。 商业背景 该演示来自Christina Lin在JBoss Demo-Central上的演示 。 她演示了Camel中Fi…

C#开发微信公众平台-就这么简单(附Demo)(转)

原文&#xff1a;http://www.cnblogs.com/xishuai/p/3625859.html 写在前面 阅读目录&#xff1a; 服务号和订阅号URL配置创建菜单查询、删除菜单接受消息发送消息&#xff08;图文、菜单事件响应&#xff09;示例Demo下载后记最近公司在做微信开发&#xff0c;其实就是接口开发…

【ECharts系列|03可视化大屏】大数据管理平台实时展示

基于echats实现可视化大数据管理平台实时展示。 完整htmlcssjsjsonfontvideo:https://download.csdn.net/download/weixin_41937552/16362433 项目结构&#xff1a; index.html <!DOCTYPE html> <html lang"en"> <head><link href"css/Bi…

【ECharts系列|04可视化大屏】ECharts可视化经典案例总结

收集整理一些ECharts实现可视化大屏效果的一些经典案例&#xff0c;方便在工作的时候及时的响应客户&#xff0c;及修改展示&#xff0c;根据业务需求在此基础修改即可。 第一篇为Echarts入门文档&#xff0c;如果没有Echarts基础&#xff0c;理解起来比较费劲&#xff0c;这个…

云服务器带宽如何计算,云服务器怎么选择带宽

原标题&#xff1a;云服务器怎么选择带宽很多企业或站长在购买云服务器时&#xff0c;对带宽不是很了解。他们认为硬件配置高就行&#xff0c;访问速度就会快。其实访问快慢主要是带宽大小来决定&#xff0c;硬件主要是用来运算的&#xff0c;带宽是用来传输数据的。服务器处理…

spring aop实践_使用Spring AOP实现活动记录模式

spring aop实践在课堂设计过程中&#xff0c;我们应就每个班级的职责分配做出决定。 如果我们选择的不错&#xff0c;系统将更易于理解&#xff0c;维护和扩展。 我们几乎所有的项目都有一个持久层&#xff0c;即关系数据库&#xff0c;文档存储或仅XML文件。 通常&#xff0c;…