第四部分 前端、框架等(155题)
1. 谈谈你对http了解协议。
HTTP(Hyper Text Transfer Protocol)
,即超文本传输协议,是万维网服务器与本地浏览器传输超文本的协议。
坦白的讲,HTTP
协议是服务器(Server
)和客户端(Client
)一种数据交互形式。
HTTP
浏览器作为协议工作和客户端-服务端架构HTTP
客户端通过URL
向HTTP
服务端发送所有请求,WEB
服务器根据收到的请求向客户端发送相应信息。
2. 谈谈你对websocket了解协议。
WebSocket和HTTP都是基于TCP协议的两个不同协议,其中WebSocket依赖于HTTP连接。
WebSocket模拟双向通信协议Socket协议可以双向发送或接收信息,HTTP是单向的。 每个WebSocket连接始于一个HTTP请求。 具体来说,WebSocket第一次握手连接时,协议通过HTTP协议在传送WebSocket支持版本号、协议版本号、原始地址、主机地址等字段到服务器端,但建立后,无需真正传输HTTP协议的。
3. 什么是magic string ?
无论是python还是其他编程语言,都有magic string这种东西存在。它不是。phtyon专有的东西,类似的和magic number这样的。
前两年有关linux一个版本的更新有一个关于magic number的小插曲:
linux更新版本后,对某一类型显卡的驱动支持存在问题。 然后修复相关代码,直接将偏移量添加到代码中,类似于python中addr_offset = 123这样的操作。 这123是一个magic number:为什么是123?为什么不能是124或其他值? 没有解释,没有理由,它是如此神奇,然后问题就神奇地解决了。linux项目负责人很生气,在项目中骂人。
无论是magic string还是magic number,统称为magic value,也就是说,魔法值。
它们突然出现在代码中,直接使用,没有解释,无法追溯。
这给代码的可读性和可维护性带来了负面影响。
当客户端向服务端发送消息时,会有一个‘’sec-websocket-key’和’magic string随机字符串, 接到消息后,服务端会将其连接成新的key编码加密串,确保信息安全。
4. 如何创建响应式布局?
- 设置meta禁止用户缩放标签
- 通过媒体查询设置样式Media Queries Media Queries 它是响应设计的核心,它告诉浏览器如何渲染页面的指定视图宽度。
- 设置字体,rem是相对于根元素的,之前先重置根元素的大小
5. 您使用过哪些前端框架?
-
Bootstrap Boostrap是一套优美,直观并且给力的web设计工具包,可用于开发具有兼容性和美观氛围的跨浏览器页面。它提供了许多简单的流行风格UI组件、格栅系统和一些常用的JavaScript插件。
-
Vue Vue它是一个相对较轻的框架,通过双向数据绑定来驱动页面。Vue相对简单,官方文档介绍清楚,可以通过异步批处理非常快速DOM更新还可以组合可重复使用和解耦的组件,使各种模块的安装更加灵活。
6. 什么是ajax请求?并使用jQuery和XMLHttpRequest实现一个对象ajax请求。
- jQuery
$.ajax({
url:"/handle_Ajax/", type:"POST", data:{
username:"Alex",password:123}, success:function(data){
console.log(data) }, error: function (jqXHR, textStatus, err) {
console.log(arguments); }, complete: funcion (jqXHR, textStatus) {
console.log(textStatus);
},
statusCode: {
'403': function (jqXHR, textStatus, err) {
console.log(arguments);
},
'400': function (jqXHR, textStatus, err) {
console.log(arguments);
}
}
})
- XMLHttpRequest
function chat() {
// 1.获取节点值
var text = document.getElementById("text").value;
// 2.创建一个XMLHttpRequest()对象
var xmlhttp = createXMLHttpRequest();
// 3.调用XMLHttpRequest对象的open方法和send方法发送数据
xmlhttp.open("POST","/webpage/Control/",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("text="+text);
// 4.XMLHttpRequest对象添加onreadystatechange 响应函数
xmlhttp.onreadystatechange = function () {
// 5.判断响应是否完成:XMLHttpRequest 对象的readystate的属性值为4,status 属性值为200
if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
var temp = xmlhttp.responseText;
console.log(temp);
alert(temp);
document.getElementById("mine_msg").innerHTML=text;
document.getElementById("robot_msg").innerHTML=temp;
}
}
}
function createXMLHttpRequest() {
var xmlHttp;
try{
xmlHttp = new XMLHttpRequest(); // 适用于大多数浏览器,以及IE7和IE更高版本
} catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // 适用于IE6
} catch (e) {
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // 适用于IE5.5,以及IE更早版本
} catch (e){
}
}
}
return xmlHttp;
}
7. 如何在前端实现轮训?
轮询就是通过定时器让程序每隔n秒执行一次操作,可以通过setInterval()
实现。
8. 如何在前端实现长轮训?
长轮训采用阻塞模型轮询的方式,也就是说,客户端发起连接后,如果没消息,就一直不返回Response给客户端,直到有消息才返回或超时。
返回完之后,客户端再次建立连接,周而复始,基于事件的触发,一个事件接一个事件。
9. vuex的作用?
Vuex官网上这样描述:
vuex解决了组件之间同一状态的共享问题,当我们的应用遇到多个组件之间的共享问题时会需要多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会变得很繁琐,并且对于兄弟组件间的传递无能为力。
他采用集中式存储管理应用的所有组件的状态,这里的关键在于集中式存储管理。这意味着本来需要共享状态的更新是需要组件之间的通讯,而现在有了vuex,组件就都和store通讯了。
10. vue中的路由的拦截器的作用?
拦截器可以在请求发送前和发送请求后做一些处理。
vue路由拦截,针对要先登录才能进入的页面,判断是否有Token值,如果有则next(),否则跳转到登录页面。
11. axios的作用?
axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。
12. 列举vue的常见指令。
- 文本插值:{ { }} Mustache
- DOM属性绑定: v-bind
- 指令绑定一个事件监听器:v-on
- 实现表单输入和应用状态之间的双向绑定:v-model
- 控制切换一个元素的显示:v-if 和 v-else
- 列表渲染:v-for
- 根据条件展示元素:v-show
13. 简述jsonp及实现原理?
JSONP 是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略。
JsonP解决跨域只能发送get请求,并且实现起来需要前后端交互比较多。
JSONP的简单实现:创建一个回调函数,然后在远程服务上调用这个函数并且将JSON数据作为参数传递,完成回调。
14. 是什么cors ?
CORS 全称是跨域资源共享(Cross-Origin Resource Sharing),是一种 AJAX 跨域请求资源的方式,支持现代浏览器,IE支持10以上。
CORS与JSONP的使用目的相同,但是比JSONP更强大。JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。
浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)
只要同时满足以下两大条件,就属于简单请求
- 请求方法是以下三种方法之一:
HEAD
GET
POST
- HTTP的头信息不超出以下几种字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
15. 列举Http请求中常见的请求方式?
方法名称 | 定义 |
---|---|
GET | 向特定的路径资源发出请求 |
POST | 向指定路径资源提交数据进行处理请求(一般用于提交表单或者上传文件) |
PUT | 从客户端向服务器传送数据更新指定的资源 |
PATCH | 从客户端向服务器传送数据更新部分指定的资源 |
DELETE | 请求服务器删除指定的资源 |
HEAD | 向服务器索要与GET一样的请求,但是不返回返回体。这个方法可以在不必传输整个响应内容的情况下,获取包含在响应消息头中的元信息 |
OPTIONS | 查询相应URL支持的HTTP方法 |
TRACE | 返回服务器收到的请求,主要用于测试或诊断 |
CONNECT | HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务 |
16. 列举Http请求中的状态码?
1XX:指示信息–表示请求已接收,继续处理。
2XX Success(成功状态码):成功–表示请求已被成功接收、理解、接受。
200 表示从客户端发来的请求在服务器端被正常处理
204 该状态码表示服务器接收的请求已成功处理,但在返回的响应报文中不含实体的主体部分
206 该状态码表示客户端进行了范围请求,而服务器成功执行了这部分的GET请求
3XX Redirection(重定向状态码):重定向–要完成请求必须进行更进一步的操作。
301 永久性重定向
302 临时性重定向
4XX Client Error(客户端错误状态码):客户端错误–请求有语法错误或请求无法实现。
400 该状态码表示请求报文中存在语法错误
401 该状态码表示发送的请求需要有通过HTTP认证的认证信息
403 该状态码表明对请求资源的访问被服务器拒绝了
404 该状态码表明服务器上无法找到请求的资源
5XX Server Error(服务器错误状态码):服务器端错误–服务器未能实现合法的请求。
500 该状态码表明服务器端在执行请求时发生了错误。
503 该状态码表明服务器暂时处于超负载或正在进行停机维护,现在无法处理请求。
17. 列举Http请求中常见的请求头?
字段 | 意思 |
---|---|
Accept | 这个头信息指定浏览器或其他客户端可以处理的 MIME 类型。有text/html,image/,/等几种常用类型。/*可以简单的概括为告诉服务器,客户端什么数据类型都支持 |
Accept-Charset | 这个头信息指定浏览器可以用来显示信息的字符集。例如 ISO-8859-1 |
Accept-Encoding | 这个头信息指定浏览器知道如何处理的编码类型。值 gzip 或 compress 是最常见的两种可能值 |
Accept-Language | 这个头信息指定客户端的首选语言,在这种情况下,Servlet 会产生多种语言的结果。例如,en、en-us、ru 等。 |
Authorization | 这个头信息用于客户端在访问受密码保护的网页时识别自己的身份。 |
Connection | 这个头信息指示客户端是否可以处理持久 HTTP 连接。持久连接允许客户端或其他浏览器通过单个请求来检索多个文件。值 Keep-Alive 意味着使用了持续连接。 |
Content-Length | 这个头信息只适用于 POST 请求,并给出 POST 数据的大小(以字节为单位)。 |
Cookie | 这个头信息把之前发送到浏览器的 cookies 返回到服务器。 |
Host | 这个头信息指定原始的 URL 中的主机和端口。 |
If-Modified-Since | 这个头信息表示只有当页面在指定的日期后已更改时,客户端想要的页面。如果没有新的结果可以使用,服务器会发送一个 304 代码,表示 Not Modified 头信息。 Last-Modified 与If-Modified-Since都是用来记录页面的最后修改时间。当客户端访问页面时,服务器会将页面最后修改时间通过 Last-Modified 标识由服务器发往客户端,客户端记录修改时间,再次请求本地存在的cache页面时,客户端会通过 If-Modified-Since 头将先前服务器端发过来的最后修改时间戳发送回去,服务器端通过这个时间戳判断客户端的页面是否是最新的,如果不是最新的,则返回新的内容,如果是最新的,则 返回 304 告诉客户端其本地 cache 的页面是最新的,于是客户端就可以直接从本地加载页面了,这样在网络上传输的数据就会大大减少,同时也减轻了服务器的负担 |
If-Unmodified-Since | 这个头信息是 If-Modified-Since 的对立面,它指定只有当文档早于指定日期时,操作才会成功。 |
Referer | 这个头信息指示所指向的 Web 页的 URL。例如,如果您在网页 1,点击一个链接到网页 2,当浏览器请求网页 2 时,网页 1 的 URL 就会包含在 Referer 头信息中。 |
User-Agent | 这个头信息识别发出请求的浏览器或其他客户端,并可以向不同类型的浏览器返回不同的内容。 |
18. 说结果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script> let name = 'Alex'; function func() {
let name = '007'; function inner() {
alert(name); } return inner; } let ret = func(); ret(); </script>
</body>
</html>
19. 说结果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript"> function main() {
if (1 === 1){
var name = 'Alex'; } console.log(name); } main(); </script>
</body>
</html>
console输出内容:
Alex
20. 说结果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script> xo = 'Alex'; function func() {
var xo = '007'; function inner() {
var xo = 'Bei'; console.log(xo); } inner(); } func(); </script>
</body>
</html>
console输出内容:
Bei
25. 什么是wsgi?
是web服务网关接口,是一套协议。 通过以下模块实现了wsgi协议: - wsgiref - werkzurg - uwsgi 关于部署
以上模块本质:编写socket服务端,用于监听请求,当有请求到来,则将请求数据进行封装,然后交给web框架处理。
26. django请求的生命周期?
-
uWSGI服务器通过wsgi协议,将HttpRequest交给web框架 (Flask、Django)
-
首先到达request中间件,对请求对象进行校验或添加数据,例如:csrf、request.session,如果验证不通过直接跳转到response中间件
-
过URL配置文件找到urls.py文件
-
根据浏览器发送的URL,通过视图中间件去匹配不同的视图函数或视图类,如果没有找到相对应的视图函数,就直接跳转到response中间件
-
在视图函数或视图类中进行业务逻辑处理,处理完返回到response中间件
-
模型类通过ORM获取数据库数据,并返回序列化json或渲染好的Template到response中间件
-
所有最后离开的响应都会到达response中间件,对响应的数据进行处理,返回HttpResponse给wsgi
-
wsgi经过uWSGI服务器,将响应的内容发送给浏览器。
27. 列举django的内置组件?
Admin是对model中对应的数据表进行增删改查提供的组件 model组件:负责操作数据库 form组件:1.生成HTML代码2.数据有效性校验3校验信息返回并展示 ModelForm组件即用于数据库操作,也可用于用户请求的验证
28. 列举django中间件的5个方法?以及django中间件的应用场景?
process_request : 请求进来时,权限认证 process_view : 路由匹配之后,能够得到视图函数 process_exception : 异常时执行 process_template_responseprocess : 模板渲染时执行 process_response : 请求有响应时执行
29. 简述什么是FBV和CBV?
FBV(function base views)使用视图函数处理请求
CBV(class base views)使用视图类处理请求
30. django的request对象是在什么时候创建的?
class WSGIHandler(base.BaseHandler):
request = self.request_class(environ)
请求走到WSGIHandler类的时候,执行cell方法,将environ封装成了request。
31. 如何给CBV的程序添加装饰器?
导入 method_decorator 装饰器
from django.utils.decorators import method_decorator
- 给方法加
@method_decorator(check_login)
def post(self, request):
'''给方法加'''
...
- 给dispatch加
@method_decorator(check_login)
def dispatch(self, request, *args, **kwargs):
'''给dispatch加'''
...
- 给类加
@method_decorator(check_login, name="get")
@method_decorator(check_login, name="post")
class HomeView(View):
'''给类加'''
...
32. 列举django orm 中所有的方法(QuerySet对象的所有方法)
<1> all(): 查询所有结果
<2> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象。获取不到返回None
<3> get(**kwargs): 返回与所给筛选条件相匹配的对象,返回结果有且只有一个。如果符合筛选条件的对象超过一个或者没有都会抛出错误。
<4> exclude(**kwargs): 它包含了与所给筛选条件不匹配的对象
<5> order_by(*field): 对查询结果排序
<6> reverse(): 对查询结果反向排序
<8> count(): 返回数据库中匹配查询(QuerySet)的对象数量。
<9> first(): 返回第一条记录
<10> last(): 返回最后一条记录
<11> exists(): 如果QuerySet包含数据,就返回True,否则返回False
<12> values(*field): 返回一个ValueQuerySet——一个特殊的QuerySet,运行后得到的并不是一系 model的实例化对象,而是一个可迭代的字典序列
<13> values_list(*field): 它与values()非常相似,它返回的是一个元组序列,values返回的是一个字典序列
<14> distinct(): 从返回结果中剔除重复纪录
33. only和defer的区别?
defer(‘id’,‘name’):取出对象,字段除了id和name都有
only(‘id’,‘name’):取的对象,只有id和name
34. select_related和prefetch_related的区别?
有外键存在时,可以很好的减少数据库请求的次数,提高性能。
select_related通过多表join关联查询,一次性获得所有数据,只执行一次SQL查询
prefetch_related分别查询每个表,然后根据它们之间的关系进行处理,执行两次查询
35. filter和exclude的区别?
两者取到的值都是QuerySet对象,filter选择满足条件的,exclude:排除满足条件的。
36. 列举django orm中三种能写sql语句的方法。
1.使用execute执行自定义的SQL
- 直接执行SQL语句(类似于pymysql的用法)
# 更高灵活度的方式执行原生SQL语句
from django.db import connection
cursor = connection.cursor()
cursor.execute("SELECT DATE_FORMAT(create_time, '%Y-%m') FROM blog_article;")
ret = cursor.fetchall()
print(ret)
2.使用extra方法 :queryset.extra(select={“key”: “原生的SQL语句”})
3.使用raw方法
- 执行原始sql并返回模型
- 依赖model多用于查询
37. django orm 中如何设置读写分离?
方式一:手动使用queryset的using方法
from django.shortcuts import render,HttpResponse
from app01 import models
def index(request):
models.UserType.objects.using('db1').create(title='普通用户')
# 手动指定去某个数据库取数据
result = models.UserType.objects.all().using('db1')
print(result)
return HttpResponse('...')
方式二:写配置文件
class Router1:
# 指定到某个数据库取数据
def db_for_read(self, model, **hints):
""" Attempts to read auth models go to auth_db. """
if model._meta.model_name == 'usertype':
return 'db1'
else:
return 'default'
# 指定到某个数据库存数据
def db_for_write(self, model, **hints):
""" Attempts to write auth models go to auth_db. """
return 'default'
再写到配置
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
},
'db1': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
DATABASE_ROUTERS = ['db_router.Router1',]
38. F和Q的作用?
F:主要用来获取原数据进行计算。
Django 支持 F() 对象之间以及 F() 对象和常数之间的加减乘除和取模的操作。
修改操作也可以使用F函数,比如将每件商品的价格都在原价格的基础上增加10
from django.db.models import F
from app01.models import Goods
# 对于goods表中每件商品的价格都在原价格的基础上增加10元
Goods.objects.update(price=F("price")+10)
F查询专门对对象中某列值的操作,不可使用__双下划线!
Q:用来进行复杂查询
Q查询可以组合使用 “&”, “|” 操作符,当一个操作符是用于两个Q的对象,它产生一个新的Q对象,
Q对象可以用 “~” 操作符放在前面表示否定,也可允许否定与不否定形式的组合。
Q对象可以与关键字参数查询一起使用,不过一定要把Q对象放在关键字参数查询的前面。
Q(条件1) | Q(条件2) 或 Q(条件1) & Q(条件2) 且 Q(条件1) & ~Q(条件2) 非
39. values和values_list的区别?
values : queryset类型的列表中是字典
values_list : queryset类型的列表中是元组
40. 如何使用django orm批量创建数据?
def bulk_create(self, objs, batch_size=None):
# 批量插入
# batch_size表示一次插入的个数
objs = [
models.DDD(name='r11'),
models.DDD(name='r22')
]
models.DDD.objects.bulk_create(objs, 10)
41. django的Form和ModeForm的作用?
- 作用:对用户请求数据格式进行校验、自动生成HTML标签
- 区别:
Form,字段需要自己手写。
class Form(Form):
xx = fields.CharField(.)
xx = fields.CharField(.)
xx = fields.CharField(.)
xx = fields.CharField(.)
ModelForm,可以通过Meta进行定义
class MForm(ModelForm):
class Meta:
fields = "__all__"
model = UserInfo
- 应用:只要是客户端向服务端发送表单数据时,都可以进行使用,如:用户登录注册
42. django的Form组件中,如果字段中包含choices参数,请使用两种方式实现数据源实时更新。
1.重写构造函数
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["city"].widget.choices = models.City.objects.all().values_list("id", "name")
2.利用ModelChoiceField字段,参数为queryset对象
authors = form_model.ModelMultipleChoiceField(queryset=models.NNewType.objects.all())//多选
43. django的Model中的ForeignKey字段中的on_delete参数有什么作用?
删除关联表中的数据时,当前表与其关联的field的操作。
django2.0之后,表与表之间关联的时候,必须要写on_delete参数,否则会报异常。
on_delete有CASCADE、PROTECT、SET_NULL、SET_DEFAULT、SET()五个可选择的值
CASCAD