2024年最全前端口试八股文【很经典 很全面 字字珠玑】【发起收藏+关注】，2024年最新web前端口试题 应届生
自学几个月前端，为什么感觉什么都没学到？？这种征象在许多的初学者和自学前端的同砚中是比力的常见的。
由于自学走的弯路是比力的多的，会踩许多的坑，学习的过程中是比力的迷茫的。
最告急的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么水平才算好，学了能做什么。
许多自学的朋侪通常都是自己去找资料学习的，资料上有的大概就学到了，资料上没有的大概就没有学到。
这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。
但是真的是如许的吗？非也，由于许多人找的资料就是很底子的。学完了也就是把握一点底子的东西。分享给你一份前端分析门路，你可以参考。
开源分享：【大厂前端口试题剖析+核心总结学习条记+真实项目实战+最新讲授视频】
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9ibG9nX21pZ3JhdGUvY2IwMmI0Mzc0ZTE3NTA3ZTI2M2JiYjgyMjRhZWU4MzkucG5n
另有许多的同砚在学习的过程中一味的寻修业的速率，很快速的刷视频，写了背面忘了前面，末了什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个以是然。
以是学习编程肯定要注意实践操纵，训练敲代码的时间肯定要多余看视频的时间。
20.动画有哪些实现方法?
[*]Js
setTimeout、setInterval、requestAnimationFrame
requestAnimationFrame方法是h5提供的一种专门办理动画更新的API，欣赏器会自动以最符合的频率去革新动画
jQuery中动画也比力实用
[*]css
animation
[*]canvas元素团结JS
[*]插件
比方 jQuery
21.浅拷贝
浅拷贝对原对象或副本的更改大概也会导致其他对象的更改。它现实上只拷贝了一层，而且只当数组和对象包的值是原始值时才会举行拷贝。
[*]赋值运算符 =
let a=
let b=a;
console.log(b==a)//true
[*]扩展运算符 …
let a=
let b=[...a]//把数组a的内容 挨个取出 放到b数组中
console.log(b===a) //true
[*]slice方法
let a=
let b=a.slice()
console.log(a===b) //false
a=4;
console.log(a)//4 2 3
console.log(b) //1 2 3
[*]assign方法
let a=
let b=[]
Object.assign(b,a);
a=4
console.log(a)//4 2 3
console.log(b) //1 2 3
[*]Array.from
let a=
let b=Array.from(a)
a=4
console.log(a)//4 2 3
console.log(b) //1 2 3
22.深拷贝
Javascript对象和数组如果深度嵌套，浅拷贝只能实现第一层的拷贝，但是深度的值依然和原对象共享引用。
let a=[ ,, ]
let b=[...a] //浅拷贝
a= 4
console.log(a) // [,,]
consle.log(b) // [,,] 对象b也被改变了 这时浅拷贝的弊端体现出来了
[*]利用JSON
let a=[ ,, ]
let b=JSON.parse(JSON.stringfy(a));
a=4;
console.log(a) // [ ,, ]
console.log(b) // [ ,, ]
[*]structuredClone
let a=[ ,, ]
let b=structuredClone(a);
a=4;
console.log(a) // [ ,, ]
console.log(b) // [ ,, ]
[*]第三方库 lodasg、rfdc
[*]自界说函数实现
const deepCopy=(obj)=>{
if(typeof obj !=='object' || obj == null){
return obj;
}
const newObj= Array.isArray(obj) ? []:{};
Object.keys(obj).forEach((key)=>{
newObj=deepCopy(obj);
})
return newObj;
}
上述代码只能处置惩罚对象和数组的深度拷贝
注意明白深拷贝和浅拷贝的区别
23. 说一下原型链
原型就是一个平常对象，它是为构造函数的实例共享属性和方法；全部实例中引用
的原型都是同一个对象
利用 prototype 可以把方法挂在原型上，内存值生存一份
__proto__可以明白为指针，实例对象中的属性，指向了构造函数的原型（prototype）
24. new 操纵符具体做了什么？
[*]先创建一个空对象
[*]把空对象和构造函数通过原型链举行链接
[*]把构造函数的 this 绑定到新的空对象身上
[*]根据构建函数返回的范例判定，如果是值范例，则返回对象，如果是引用范例，
就要返回这个引用范例
25.script 标签里的 async 和 defer 有什么区别？
当没有 async 和 defer 这两个属性的时间，欣赏器会立即加载并实验指定的脚本
[*]有 async
加载和渲染背面元素的过程将和 script 的加载和实验并行举行（异步）
[*]有 defer
加载和渲染背面元素的过程将和 script 的加载并行举行（异步），但是它的实验事故要等
全部元素剖析完成之后才会实验
26. setTimeout 最小实验时间是多少？
HTML5 规定的内容：
setTimeout 最小实验时间是 4ms
setInterval 最小实验时间是 10ms
27. promise 的内部原理是什么？它的优缺点是什么？
Promise 对象，封装了一个异步操纵而且还可以获取乐成或失败的效果
Promise 重要就是办理回调地狱的标题，之前如果异步使命比力多，同时他们之间
有相互依赖的关系，就只能利用回调函数处置惩罚，如许就容易形成回调地狱，代码的可读性差，可维护性也很差
有三种状态：pending 初始状态 fulfilled 乐成状态 rejected 失败状态
状态改变只会有两种情况，
pending -> fulfilled; pending -> rejected 一旦发生，状态就会凝固，不会再变
起首就是我们无法取消 promise，一旦创建它就会立即实验，不能中途取消
如果不设置回调，promise 内部抛出的错误就无法反馈到外貌
若当前处于 pending 状态时，无法得知现在在哪个阶段。
原理：
构造一个 Promise 实例，实例须要通报函数的参数，这个函数有两个形参，分
别都是函数范例，一个是 resolve 一个是 reject
promise上另有then方法，这个方法就是来指定状态改变时简直定操纵，resolve
是实验第一个函数，reject 是实验第二个函数
28.promise 和 async await 的区别是什么？
[*]都是处置惩罚异步哀求的方式
[*]promise 是 ES6，async await 是 ES7 的语法
[*]async await 是基于 promise 实现的，他和 promise 都黑白壅闭性的
优缺点：
[*]promise 是返回对象我们要用 then，catch 方法行止置惩罚和捕捉非常，而且誊写方式
是链式，容易造成代码重叠，欠好维护，async await 是通过 tra catch 举行捕捉非常
[*]async await 最大的优点就是能让代码看起来像同步一样，只要碰到 await 就会立
刻返回效果，然后再实验背面的操纵
promise.then()的方式返回，会出现哀求还没返回，就实验了背面的操纵
29.欣赏器的存储方式有哪些？
[*]cookies
H5 尺度前的当地存储方式
兼容性好，哀求头自带 cookie
存储量小，资源浪费，利用贫苦（封装）
[*]localstorage
H5 参加的以键值对为尺度的方式
操纵方便，永世存储，兼容性较好
生存值的范例被限定，欣赏器在隐私模式下不可读取，不能被爬虫
[*]sessionstorage
当前页面关闭后就会立即整理，会话级别的存储方式
[*]indexedDB
H5 尺度的存储方式，，他是以键值对举行存储，可以快速读取，得当 WEB 场
景
30.token 存在 sessionstorage 还是 loaclstorage？
token：验证身份的令牌，一样平常就是用户通过账号暗码登录后，服务端把这些根据
通过加密等一系列操纵后得到的字符串
[*]存 loaclstorage 里，后期每次哀求接口都须要把它看成一个字段传给配景
[*]存 cookie 中，会自动发送，缺点就是不能跨域
[*]如果存在 localstorage 中，容易被 XSS 攻击，但是如果做好了对应的步调，那么是
利大于弊
[*]如果存在 cookie 中会有 CSRF 攻击
31. token 的登录流程。
[*]客户端用账号暗码哀求登录
[*]服务端收到哀求后，须要去验证账号暗码
[*]验证乐成之后，服务端会签发一个 token，把这个 token 发送给客户端
[*]客户端收到 token 后生存起来，可以放在 cookie 也可以是 localstorage
[*]客户端每次向服务端发送哀求资源的时间，都须要携带这个 token
[*]服务端收到哀求，接着去验证客户端里的 token，验证乐成才会返回客户端哀求
的数据
32.页面渲染的过程是怎样的？
[*]DNS 剖析
[*]创建 TCP 毗连
[*]发送 HTTP 哀求
[*]服务器处置惩罚哀求
[*]渲染页面
5.1 欣赏器会获取 HTML 和 CSS 的资源，然后把 HTML 剖析成 DOM 树
5.2 再把 CSS 剖析成 CSSOM
5.3 把 DOM 和 CSSOM 归并为渲染树
5.4 布局
5.5 把渲染树的每个节点渲染到屏幕上（绘制）
[*]断开 TCP 毗连
33.DOM 树和渲染树有什么区别？
[*]DOM 树是和 HTML 标签逐一对应的，包罗 head 和潜伏元素
[*]渲染树是不包罗 head 和潜伏元素
34.精灵图和 base64 的区别是什么？
[*]精灵图：把多张小图整合到一张大图上，利用定位的一些属性把小图体现在页面上，
当访问页面可以淘汰哀求，进步加载速率
[*]base64：传输 8Bit 字节代码的编码方式，把原来二进制情势转为 64 个字符的单位，
末了构成字符串
base64 是会和 html css 一起下载到欣赏器中，淘汰哀求，淘汰跨域标题，但是一些
低版本不支持，若 base64 体积比原图片大，倒霉于 css 的加载。
35.svg 格式相识多少？
基于 XML 语法格式的图像格式，可缩放矢量图，其他图像是基于像素的，SVG 是
属于对图像形状的形貌，本质是文本文件，体积小，而且不管放大多少倍都不会失真
[*]SVG 可直接插入页面中，成为 DOM 一部分，然后用 JS 或 CSS 举行操纵
<svg></svg>
[*]SVG 可作为文件被引入
<img src="pic.svg" />
[*]SVG 可以转为 base64 引入页面
36.HTTP 协议规定的协议头和哀求头有什么？
[*]哀求头信息：
Accept:欣赏器告诉服务器所支持的数据范例
Host:欣赏器告诉服务器我想访问服务器的哪台主机
Referer:欣赏器告诉服务器我是从那边来的（防盗链）
User-Agent:欣赏器范例、版本信息
Date:欣赏器告诉服务器我是什么时间访问的
Connection:毗连方式
Cookie
X-Request-With:哀求方式
[*]相应头信息：
Location:这个就是告诉欣赏器你要去找谁
Server:告诉欣赏器服务器的范例
Content-Type:告诉欣赏器返回的数据范例
Refresh:控制了的定时革新
37.说一下什么是“同源战略”？
http:// www. aaa.com:8080/index/vue.js
协议 子域名 主域名 端标语 资源
同源战略是欣赏器的核心，如果没有这个战略就会遭受网络攻击
重要指的就是协议+域名+端标语三者同等，若此中一个不一样则不是同源，会产生
跨域
三个答应跨域加载资源的标签：img link script
跨域是可以发送哀求，后端也会正常返回效果，只不外这个效果被欣赏器拦截了！
[*]JSONP
[*]CORS
[*]websocket
[*]反向署理
38.防抖和节流是什么？
都是应对页面中频仍触发事故的优化方案
[*]防抖:克制事故重复触发
利用场景:1.频仍和服务端交互 2.输入框的自动生存事故
[*]节流:把频仍触发的事故淘汰,每隔一段时间实验
利用场景:scroll 事故
39.有没有做过无感登录？
[*]在相应此中拦截，判定 token 返回逾期后，调用革新 token 的接口
[*]后端返回逾期时间，前端判定 token 的逾期时间，去调用革新 token 的接口
[*]写定时器，定时革新 token 接口
流程：
[*]登录乐成后生存 token 和 refresh_token
[*]在相应拦截器中对 401 状态码引入革新 token 的 api 方法调用
[*]更换生存当地新的 token
[*]把错误对象里的 token 更换
[*]再次发送未完成的哀求
[*]如果 refresh_token 逾期了，判定是否逾期，逾期了就清晰全部 token 重新登
40.大文件上传是怎么做的？
[*]分片上传：
1.1把须要上传的文件按照肯定的规则，分割成雷同巨细的数据块
1.2 初始化一个分片上传使命，返回本次分片上传的唯一标识
1.3 按照肯定的规则把各个数据块上传
1.4 发送完成后，服务端会判定数据上传的完备性，如果完备，那么就会把数据库归并成原始文件
[*]断点续传：
服务端返回，从那边开始 欣赏器自己处置惩罚
Vue篇
1. 生命周期
1.1 有哪些生命周期
体系自带：
[*]beforeCreate
[*]created
[*]beforeMount
[*]mounted
[*]beforeUpdate
[*]updated
[*]beforeDestroy
[*]destroyed
如果给组件加上keep-alive，会额外多
[*]activated
[*]deactivated
1.2初次进入页面大概组件，会实验哪些生命周期
[*]beforeCreate
[*]created
[*]beforeMount
[*]mounted
若组件添加keep-alive属性
[*]beforeCreate
[*]created
[*]beforeMount
[*]mounted
[*]acitivated
1.3在哪个阶段产生 e l ， el， el，data
[*]$el (根节点dom) 产生阶段 : mounted
[*]$data产生阶段：created
1.4 第n（n>1）次进入组件会实验哪些生命周期
平常组件
[*]beforeCreate
[*]created
[*]beforeMount
[*]mounted
组件【添加keep-alive属性】
[*]activated
[*]若脱离，则实验deactivated
2.对keep-alive的明白
[*]是什么
Vue自带的一个组件
功能:用来缓存组件的 【提拔性能】
[*]利用场景【只管淘汰发送网络哀求与后端交互+反复访问的组件淘汰其创建次数】
缓存详情页【组件】->在详情页的activated方法中判定之前革新的参数与当前吸收的参数是否同等，如果同等就不革新数据，否则就发送网络哀求革新数据
3.v-if 和 v-show的区别
[*]dom元素的加载区别
v-if 是创建了一个dom节点 如果值为true时 值为false时不创建大概移除该节点
v-show 是直接创建 display:none 潜伏了
[*]利用场景差别
[*]初次加载v-if比v-show好 页面不会多加载dom盒子
[*]频仍切换 v-show比v-if好 创建和删除开销太大，体现和潜伏开销小
[*]如果都是值为true，初次加载v-if比v-show快，雷同的节点v-show会多加一个display:none=的css属性
4.v-if 和v-for优先级
v-for 比 v-if 优先级更高 vue.js源码中可以看到 v-for 的分支在v-if之前
[*]如果同一个组件 既加了v-for 也加了 v-if 那么速率会降落许多，是先实验v-for渲染列表数据，然后再每个子项都举行v-if判定，增大开销。
[*]如果须要判定v-if创建，再实验v-for渲染子项，那么可以利用template模板
<template v-if="condition">
<div v-for="item in list"></div>
</template>
5.ref是什么
[*]作用： 用来快速获取dom的，而不消document.getElement*（）
[*]利用示例：
<img ref="imgref"src="\*\*"id= "img" >
原生js：
document.getElementById("img")
vue:
this.$refs.imgs
6.nextTick是什么
[*]作用：获取更新后的dom内容
比方：
<div ref="box" @click="change">{{content}}</div>
...
data(){
return {
content:"old"
}
}
methods:{
change(){
this.str="new";
console.log(this.$refs.box.innerText);//输出old ref中的dom数据未来得及更新
this.$nextTick(()=>{
console.log(this.$refs.box.innerText);//输出new
})
}
}
7.scoped 原理
[*]作用：让样式在本组件中收效，不影响其他组件
[*]原理：给组件节点新增自界说属性，然后css根据属性选择器添加样式，类似于下面…
<style>
div{
background:red;
}
</style>
...
<div data-v-xxx>sss</div>
<div>bbb</div>
8.CSS样式穿透
怎样让CSS只在当前组件中起作用？
[*]给当前组件添加scoped
<style scoped></style>
如果不加，则该css样式全局收效
[*]scss
2.1 先下载 npm install sass-loader node-sass --save
2.2 须要给style 添加 属性 lang="scss"
<style scopedlang="scss">
$color: red;
.warn{
color: $color;
}
</style>
2.3 scss样式穿透
父元素 /deep/ 子元素 {
新样式
}
比方 修改第三方插件的样式https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9ibG9nX21pZ3JhdGUvYzViNDViNGNjNjA2MWQwMTQ3YzliYWFlOTBmNzhkZDQucG5n
3. stylus
3.1 下载
npm install stylus stylus-loader --svae
3.2 添加lang属性
<style lang="stylus" scoped> </style>
3.3 stylus样式穿透 [两种方式 deep 大概 >>> ]
<style scoped lang="stylus">
父元素 /deep/ 子元素 {
新样式
}
父元素 >>> 子元素 {
新样式
}
</style>
9.组件的传值
[*]父组件传值给子组件
[*]父组件
<Child :data="msg"></Child>
msg和data内里的变量名同等
[*]子组件
<div>{{data}}</div>
export default{
//1. 数组
props:['data']
//2. 对象
props:{
data:String
}
}
[*]子组件传值到父组件
[*]子组件
this.$emit("eventName",value);
[*]父组件 在组件中利用 @事故名 绑定子组件的事故到函数
<div@eventName="getVal"></div>
...
methods:{
getVal(msg){
this.content=msg; //msg就是子组件传递的内容
}
}
[*]兄弟组件之间的传值
通过中转站 eventBus
[*]创建bus.js
import Vue from 'vue'
export default new Vue;
[*]发送
import bus from '@/bus'
bus.$emit("toBrother",value);
[*]吸收
import bus from '@/bus'
mounted(){
bus.$on("toBrother",(data)=>{
this.data=data;//data就是其他兄弟节点传递过来的
})
}
10.computed,methods,watch有什么区别
[*]computed vs methods
computed 盘算属性是有缓存的【只有当盘算的内容发生厘革时才会重新盘算和调用】 比方 return 111 ; 调用三次 也只会调用一次computed方法，由于值不会发生厘革。
methods 没有缓存 调用多少次实验多少次
[*]computed vs watch
[*]watch :
1.1 侦听属性 数据大概路由发生了改变才会实验
1.2 一次只能监听单个变量 厘革情况 如须要监听多个比力繁琐
[*]computed
2.1 盘算的某一个属性的值改变了，盘算属性会检测到举行返回。
2.2 computed一个方法可以监听多个干系属性
11.props 和data 优先级比力
props是父组件通报进来的，data是组件自己界说的
优先级: props => methods=> data => computed=> watch
12.Vue设置署理
署理用于办理开辟时的网络跨域标题，可以将全部哀求交由proxy去访问
[*]创创建置文件 vue.config.js
module.exports = {
publicPath:'./',
devServer: {
proxy: 'http://localhost:3000'// 打包完成后不生效
}
}
[*]利用时url 不加前面的ip段 直接写接口 如/login
[*]如果是开辟模式 devServer不实用 会打包后出现非常
13. Vue打包路径和路由模式
打包路径设置
vue.config.js
module.exports = {
publicPath:'./', // 默认为 / 打包后css js等文件的引入地址前缀
}
路由模式：history[默认]，hash #
前端如果自己测试项目，用hash
项目上线要求是 history模式，该怎么办？
交给后端举行重定向
14.署理和情况变量
开辟情况 .env.development
VUE\_APP\_TITLE=
VUE\_APP\_ENV='dev'
VUE\_APP\_BASE\_API="http:localhost:3000/"
生产情况 .env.production
VUE\_APP\_TITLE=
VUE\_APP\_ENV='pro'
VUE\_APP\_BASE\_API="http:127.0.0.1:3000/"
在axios封装的时间其base_url
let base_url=""
if(process.env.VUE\_APP\_ENV=='pro'){
base_url=process.baseApi+url;
}else{
// dev模式可以通过代理去访问 直接为默认的url即可
base_url=url;
}
15.Vue路由
路由模式：history[默认]，hash #
区别：
[*]体现情势差别
hash模式多了#
[*]跳转
访问 http:localhost:8888/id
history：会发送哀求
hash: 不会发送
[*]打包后 前端自测要利用hash，如果利用history会出现空缺
16.SPA及SPA的缺点
SPA是什么？单页面应用
缺点：
[*]SEO优化欠好
[*]性能不是特殊好【须要首页优化】
17.怎样明白 MVVM 的？
是 Model-View-ViewModel 的缩写。前端开辟的架构模式
M：模子，对应的就是 data 的数据
V：视图，用户界面，DOM
VM：视图模子：Vue 的实例对象，毗连 View 和 Model 的桥梁
核心是提供对 View 和 ViewModel 的双向数据绑定，当数据改变的时间，ViewModel
能监听到数据的厘革，自动更新视图，当用户操纵视图的时间，ViewModel 也可以监听到视
图的厘革，然后关照数据举行改动，这就实现了双向数据绑定
ViewModel 通过双向绑定把 View 和 Model 毗连起来，他们之间的同步是自动的，
不须要以为干涉，以是我们只须要关注业务逻辑即可，不须要操纵 DOM，同时也不须要关
注数据的状态标题，由于她是由 MVVM 同一管理
18.v-for 中的 key 值的作用是什么？
key 属性是 DOM 元素的唯一标识
作用：
[*]进步假造 DOM 的更新
[*]若不设置 key，大概会触发一些 bug
[*]为了触发太过效果
19.VUE路径传值
显式传值
==>localhost:8080/about?a=1;
this.$router.push({
path:'/about',
query:{
a:1
}
})
this.$router.push({
path:'/about?a=1'
})
使用query接收值
this.$router.query.a
隐式传值
this.$router.push({
name:'/About',
params:{a:1}
})
接收：
this.$router.params.a
20.vue 中遍历全局的方法有哪些？
[*]平常遍历，对象.forEach()
arr.forEach(function(item,index,arr){
console.log(item,index)
})
[*]对元素同一操纵 对象.map()
var newarr = arr.map(function(item){
return item+1
})
3.查找符合条件的元素 对象.filter()
arr.filter(function(item){
if(item > 2){
return false
}else{
return true
}
})
4.查询符合条件的元素，返回索引 对象.findindex()
arr.finindex(function(item){
if(item>1){
return true
}else{
return false
}
})
[*]对象.evening() 碰到不符合的对象会克制
[*]对象.some() 找到符合条件的元素就克制
21. vue 的过滤器怎么利用？
vue 的特性，用来对文本举行格式化处置惩罚
利用它的两个地方，一个是插值表达式，一个是 v-bind
分类：
[*]全局过滤器
Vue.filter('add',function(v){
return v < 10 ? '0' + v : v
})
<div>{{33 | add}}</div>
[*]当地过滤器
和 methods 同级
filter:{
add:function(v){
return v < 10 ? '0' + v : v
}
}
22.怎样封装一个组件？
[*]利用 Vue.extend()创建一个组件
[*]利用 Vue.components()方法注册组件
[*]如果子组件须要数据，可以在 props 中吸收界说
[*]子组件修改好数据，要把数据通报给父组件，可以用 emit()方法
原则：
(1) 把功能拆开
(2)只管让组件原子化，一个组件做一件事变
(3)容器组件管数据，展示组件管视图
23.封装一个可复用的组件，须要满足什么条件？
[*]低耦合，组件之间的依赖越小越好
[*]最好从父级传入信息，不要在公共组件中哀求数据
[*]传入的数据要举行校验
[*]处置惩罚事故的方法写在父组件中
24.路由导航守卫有哪些
全局、路由独享、组件内
[*]全局【参数 to from next】
beforeEach、beforeResolve, afterEach
[*]路由独享
beforeEnter
[*]组件内【很少】
beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave
const router = new VueRouter({
mode:"history",
base:process.env.BASE\_URL,
routes
})
router.beforeEach((to, from,next)=>{
console.log(to,from,next)//to是到哪个页面 from从哪来 next 就是保安
if(有权限){
next() // 放行
}else{
router.push('/login') //转发到其他页面
}
})
在进入某个页面之进步行拦截，可以举行权限判定
分享
开源分享：【大厂前端口试题剖析+核心总结学习条记+真实项目实战+最新讲授视频】
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9ibG9nX21pZ3JhdGUvZGExNWNhZDczOTUzNWZmZjFmNzdhNWE0MmY3NDEzYjcucG5n
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9ibG9nX21pZ3JhdGUvMmQxYzY1ZjQ4ZTk0OWE1ZjljM2M1MTUzNDBiYWI4OWYucG5n
页:
[1]