5.06号模拟前端面试8问

news2024/9/23 9:28:32

5.06号模拟前端面试8问

1.promise如何实现then处理

在JavaScript中，Promise 是一个代表异步操作最终完成或失败的对象。它有三种状态：pending（等待），fulfilled（完成），rejected（拒绝）。一旦一个 Promise 对象的状态改变，就不会再变。

then 方法是 Promise 对象的一个方法，用于指定在 promise 对象状态变为 fulfilled 或 rejected 时的回调函数。then 方法接收两个参数，分别是 Promise 对象状态变为 fulfilled 和 rejected 时执行的回调函数。

下面是一个 then 方法的基本使用示例：—

let promise = new Promise(function(resolve, reject) {
  // 这里是异步操作
  setTimeout(() => resolve("操作成功"), 1000);
});

promise.then(function(value) {
  console.log(value);    // "操作成功"
}, function(error) {
  console.log(error);
});

在这个例子中，我们创建了一个新的 Promise 对象，然后在其中执行了一个异步操作（这里用 setTimeout 模拟）。当这个操作完成时，我们调用 resolve 函数来改变 Promise 对象的状态为 fulfilled，并设置其结果值为 “操作成功”。

然后，我们调用 then 方法来指定当 Promise 对象状态变为 fulfilled 时要执行的回调函数。这个回调函数会接收到 Promise 对象的结果值，并将其打印出来。如果在 Promise 对象中发生了错误（例如调用了 reject 函数），那么 then 方法的第二个参数（一个函数）会被调用，并接收到错误信息。

需要注意的是，then 方法返回一个新的 Promise 对象，因此可以链式调用。例如：

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve("操作成功"), 1000);
});

promise.then(function(value) {
  console.log(value);    // "操作成功"
  return value + "，后续操作";
}).then(function(value) {
  console.log(value);    // "操作成功，后续操作"
});

在这个例子中，我们在第一个 then 方法的回调函数中返回了一个新的值，这个值会被传递给下一个 then 方法的回调函数。

2.koa2中间件原理

Koa2是一个基于Node.js的Web框架，它的特点是轻量级和高度可扩展。在Koa2中，中间件是一种特殊的函数，它可以访问请求对象（req）、响应对象（res）和应用程序实例（app）的上下文。中间件的主要作用是在请求和响应之间执行一些操作，例如记录日志、处理错误、解析请求体等。

Koa2中间件的工作原理如下：

  1. 当一个请求到达服务器时，Koa2会创建一个上下文对象（context），该对象包含了请求对象（req）、响应对象（res）和应用程序实例（app）。

  2. Koa2会将这个上下文对象传递给第一个中间件。

  3. 中间件可以对这个上下文进行修改，然后调用下一个中间件。这个过程会一直持续到最后一个中间件。

  4. 当所有中间件都执行完毕后，Koa2会根据上下文中的响应对象生成HTTP响应，并发送给客户端。

下面是一个简单的Koa2中间件示例代码：

const Koa = require('koa');
const app = new Koa();

// 定义一个简单的中间件
const logger = async (ctx, next) => {
  const start = new Date();
  await next();
  const ms = new Date() - start;
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);
};

// 使用中间件
app.use(logger);

// 定义一个简单的路由
app.use(async ctx => {
  ctx.body = 'Hello World';
});

// 启动服务器
app.listen(3000);

在这个示例中，我们定义了一个名为logger的中间件，它会记录每个请求的方法、URL和处理时间。然后我们将这个中间件添加到Koa2应用程序中，使其在处理每个请求时都会被执行。最后，我们定义了一个简单的路由，用于返回"Hello World"响应。

当我们运行这段代码并访问http://localhost:3000时，我们可以看到控制台输出类似于以下的日志信息：

GET / - 1ms

这表明我们的logger中间件已经成功地记录了请求的信息。

私信【学习】即可获取前端资料 都整理好啦！！！

3.常⽤的中间件

在Web开发过程中，常用的中间件有：

img
  1. 数据库中间件：如MySQL、MongoDB等，主要用于连接和操作数据库。
  2. 缓存中间件：如Redis、Memcached等，主要用于缓存数据，提高系统性能。
  3. 消息队列中间件：如RabbitMQ、Kafka等，主要用于实现异步通信和解耦。
  4. API网关中间件：如Zuul、Nginx等，主要用于统一管理和路由请求。
  5. 认证授权中间件：如JWT、OAuth2等，主要用于实现用户认证和授权。

以下是针对这些中间件的详细解释和代码示例：

  1. 数据库中间件：以MySQL为例，主要功能是连接和操作数据库。在项目中使用MySQL中间件，首先需要安装mysql模块，然后创建一个连接池，最后通过连接池进行数据库操作。
const mysql = require('mysql');
const pool = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'test'
});

pool.query('SELECT * FROM users', (error, results, fields) => {
  if (error) throw error;
  console.log(results);
});
  1. 缓存中间件：以Redis为例，主要功能是缓存数据，提高系统性能。在项目中使用Redis中间件，首先需要安装redis模块，然后创建一个Redis客户端，最后通过客户端进行缓存操作。
const redis = require('redis');
const client = redis.createClient();

client.on('connect', () => {
  console.log('Connected to Redis...');
});

client.set('name', 'Bob', redis.print);
client.get('name', (err, reply) => {
  console.log(reply);
});
  1. 消息队列中间件：以RabbitMQ为例，主要功能是实现异步通信和解耦。在项目中使用RabbitMQ中间件，首先需要安装amqplib模块，然后创建一个RabbitMQ连接，最后通过连接发送和接收消息。
const amqp = require('amqplib/callback_api');

amqp.connect('amqp://localhost', (err, conn) => {
  conn.createChannel((err, ch) => {
    const q = 'hello';
    ch.assertQueue(q, {durable: false});
    ch.sendToQueue(q, new Buffer('Hello World!'));
  });
});
  1. API网关中间件：以Zuul为例，主要功能是统一管理和路由请求。在项目中使用Zuul中间件，首先需要安装zuul模块，然后创建一个Zuul实例，最后通过实例进行路由配置。
@Configuration
public class ZuulConfig {
    @Bean
    public SampleZuulFilter simpleFilter() {
        return new SampleZuulFilter();
    }
}
  1. 认证授权中间件：以JWT为例，主要功能是实现用户认证和授权。在项目中使用JWT中间件，首先需要安装jsonwebtoken模块，然后创建一个JWT实例，最后通过实例进行用户认证和授权。
const jwt = require('jsonwebtoken');
const token = jwt.sign({ sub: user.id }, 'secret', { expiresIn: '1h' });

4. 服务端怎么做统⼀的状态处理

在服务端，实现统一的状态处理可以通过使用状态码和状态消息来实现。状态码用于表示请求的处理结果，而状态消息用于提供更详细的信息。以下是一个简单的示例，展示了如何在Node.js中使用Express框架实现统一的状态处理。

首先，我们需要安装Express框架：

npm install express

然后，创建一个名为app.js的文件，并编写以下代码：

const express = require('express');
const app = express();

// 定义一个中间件来处理统一的状态处理
function handleStatus(req, res, next) {
  // 设置默认的状态码和状态消息
  res.statusCode = 200;
  res.statusMessage = 'OK';

  // 如果请求中包含自定义的状态码和状态消息，则更新它们
  if (req.body.statusCode) {
    res.statusCode = req.body.statusCode;
  }
  if (req.body.statusMessage) {
    res.statusMessage = req.body.statusMessage;
  }

  // 调用next()函数，将控制权传递给下一个中间件或路由处理程序
  next();
}

// 使用handleStatus中间件处理所有请求
app.use(handleStatus);

// 定义一个简单的路由处理程序
app.get('/', (req, res) => {
  res.send('Hello World!');
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在这个示例中，我们定义了一个名为handleStatus的中间件，它会处理统一的状态处理。当请求到达服务器时，这个中间件会检查请求中是否包含自定义的状态码和状态消息。如果存在，则更新响应的状态码和状态消息；否则，使用默认的状态码和状态消息。最后，调用next()函数将控制权传递给下一个中间件或路由处理程序。

私信【学习】即可获取前端资料 都整理好啦！！！

通过这种方式，我们可以在服务端实现统一的状态处理，确保所有的响应都遵循相同的状态码和状态消息规范。

5.如何对相对路径引⽤进⾏优化

在Web前端面试中，对相对路径引用进行优化是一个重要的问题。相对路径引用是指在HTML文件中使用相对路径来引用其他文件，如CSS、JavaScript和图片等。常见的问题包括路径过长、重复引用和不必要的层级嵌套。

解决方案之一是使用短路径。通过将文件放在根目录下或使用公共的文件夹结构，可以减少路径的长度。例如，将CSS文件放在一个名为“css”的文件夹中，然后使用<link rel="stylesheet" href="/css/style.css">来引用它。

另一个解决方案是避免重复引用。如果多个HTML文件都引用了相同的CSS或JavaScript文件，可以考虑将它们合并为一个文件，然后在每个HTML文件中只引用一次。这样可以减少HTTP请求的数量，提高页面加载速度。

此外，还可以避免不必要的层级嵌套。如果一个文件位于多层嵌套的文件夹中，可以使用绝对路径来引用它，而不是使用多个相对路径。例如，使用<img src="/images/logo.png">来引用位于根目录下的图片。

总之，对相对路径引用进行优化可以提高网页的性能和可维护性。通过使用短路径、避免重复引用和避免不必要的层级嵌套，可以有效地解决这些问题。

6.node⽂件查找优先级

在Node.js中，文件查找优先级是指在使用require()函数加载模块时，Node.js会按照一定的顺序来查找模块文件。以下是Node.js的文件查找优先级：

img

  1. 当前目录：首先，Node.js会在当前目录下查找模块文件。如果找到了匹配的模块文件，就会立即加载并返回。

  2. node_modules目录：如果在当前目录下没有找到匹配的模块文件，Node.js会继续在node_modules目录下查找。这个目录是Node.js默认的全局模块安装位置。

  3. NODE_PATH环境变量：NODE_PATH是一个包含多个路径的环境变量，用于指定额外的模块搜索路径。Node.js会按照这些路径的顺序依次查找模块文件。

  4. 内置模块：如果以上步骤都没有找到匹配的模块文件，Node.js会检查是否为内置模块。如果是内置模块，则直接加载并返回。

下面是一个代码示例，演示了Node.js的文件查找优先级：

// 假设当前目录下有一个名为myModule.js的文件
const myModule = require('./myModule'); // 优先从当前目录加载

// 如果当前目录下没有找到匹配的模块文件，Node.js会继续在node_modules目录下查找
const express = require('express'); // 优先从node_modules目录加载

// 如果仍然没有找到匹配的模块文件，Node.js会检查NODE_PATH环境变量中的路径
const customModule = require('custom-module'); // 优先从NODE_PATH指定的路径加载

// 如果以上步骤都没有找到匹配的模块文件，Node.js会检查是否为内置模块
const fs = require('fs'); // 直接加载内置模块

通过了解Node.js的文件查找优先级，我们可以更好地理解模块加载的过程，并在编写代码时进行相应的优化和调整。

私信【学习】即可获取前端资料 都整理好啦！！！

7. npm2和npm3+有什么区别

npm2和npm3之间的主要区别如下：

  1. 依赖管理上的差异：

    • npm2：在安装包时，会将依赖项的信息添加到dependencies属性中，而不是添加到devDependencies属性中。这可能导致在生产环境中安装不必要的开发依赖项。
    • npm3：引入了扁平化依赖树的概念，所有的依赖项都会被添加到dependencies属性中。这样可以更清晰地管理依赖关系，并且可以避免重复安装相同的依赖项。

  2. 安装机制的不同之处：

    • npm2：安装包时，会递归地解析依赖树，并按照依赖树的结构安装依赖项。如果一个包被多个项目所依赖，那么每个项目都会安装该包的副本。
    • npm3：采用了扁平化的依赖树结构，所有的依赖项都会被安装在同一个层级下。这样可以减少重复安装相同依赖项的情况，节省磁盘空间和安装时间。

  3. 安全性方面的比较：

    • npm2：没有内置的安全机制来防止恶意代码的注入或下载。用户需要手动检查包的来源和可信度。
    • npm3：引入了安全机制，例如签名验证和安全漏洞扫描。这些机制可以帮助用户识别和防止安装恶意或存在安全漏洞的包。

  4. 性能上的改进或特点：

    • npm2：在大型项目中，由于依赖树的结构复杂，安装和更新包的时间可能会较长。
    • npm3：由于采用了扁平化的依赖树结构，安装和更新包的速度更快。此外，npm3还引入了一些优化措施，如缓存机制和并行安装，进一步提高了性能。

  5. 代码示例：

    • 使用npm2进行包的安装：

      npm install <package_name>

    • 使用npm3进行包的安装：

      npm install <package_name>

总结起来，npm3相对于npm2在依赖管理、安装机制、安全性和性能方面都有较大的改进。它采用扁平化的依赖树结构，提高了包的安装速度和可靠性。同时，npm3还引入了安全机制，帮助用户识别和防止安装恶意或存在安全漏洞的包。

私信【学习】即可获取前端资料 都整理好啦！！！

8.knex连接数据库响应回调

当使用knex.js库连接数据库时，首先需要安装knex和相应的数据库驱动。以下是一个示例代码段，演示如何使用knex.js进行数据库连接以及处理响应回调：

// 导入knex模块
const knex = require('knex');

// 配置数据库连接信息
const dbConfig = {
  client: 'mysql', // 数据库类型，这里以MySQL为例
  connection: {
    host: 'localhost', // 数据库主机地址
    user: 'your_username', // 数据库用户名
    password: 'your_password', // 数据库密码
    database: 'your_database' // 数据库名称
  }
};

// 创建数据库连接实例
const db = knex(dbConfig);

// 执行查询操作
db.select('*').from('your_table')
  .then(rows => {
    // 处理查询结果
    console.log(rows);
  })
  .catch(error => {
    // 处理错误情况
    console.error(error);
  })
  .finally(() => {
    // 关闭数据库连接
    db.destroy();
  });

在上述代码中，我们首先导入了knex模块，并定义了数据库连接的配置信息。然后，通过调用knex(dbConfig)来创建一个数据库连接实例。接下来，使用select方法指定要查询的列，from方法指定要查询的表。最后，使用then方法处理查询结果，catch方法处理错误情况，finally方法确保在完成查询后关闭数据库连接。

请注意，在实际项目中，你需要根据自己的数据库类型和配置信息修改dbConfig对象中的相关字段。此外，还可以根据具体需求使用其他knex.js提供的方法，如插入、更新、删除等操作。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

WhisperCLI-本地部署语音识别系统；Mis开源LLM推理平台；Dokploy-开源版Vercel；Mem-大规模知识图谱

WhisperCLI-本地部署语音识别系统；Mis开源LLM推理平台；Dokploy-开源版Vercel；Mem-大规模知识图谱

1. Whisper-cli&#xff1a;可本地部署的开源语音识别系统 近日&#xff0c;Ruff的开发团队发布了一款名为Whisper cpp cli的全新语音识别系统&#xff0c;该系统已在GitHub Repo上开源。这是一款完全自主研发的语音转文字系统&#xff0c;基于Whisper技术构建。Ruff团队一直以…
阅读更多...
【Linux-点灯烧录-SD卡/USB烧写】

【Linux-点灯烧录-SD卡/USB烧写】

目录 1. 烧写方式2. 烧写之代码编译2.1 led.s->led.o2.2 led.o->led.elf2.3 led.elf->led.bin2.4 反汇编&#xff1a;led.elf->led.dis 3. 烧写之烧录到SD卡上&#xff1a;3.1 开启烧录软件权限&#xff1a;3.2 确定SD卡的格式&#xff1a;FAT323.3 烧录到SD卡上3.…
阅读更多...
安卓跑马灯效果

安卓跑马灯效果

跑马灯效果 当一行文本的内容太多&#xff0c;导致无法全部显示&#xff0c;也不想分行展示时&#xff0c;只能让文字从左向右滚动显示&#xff0c;类 似于跑马灯。电视在播报突发新闻时经常在屏幕下方轮播消息文字&#xff0c;比如“ 快讯&#xff1a;我国选手 *** 在刚刚结束…
阅读更多...
（014） java.math.BigInteger cannot be cast to java.lang.Long

（014） java.math.BigInteger cannot be cast to java.lang.Long

文章目录 问题原因 问题 mysql 和 Java 在进行数据类型的映射时&#xff0c;报错&#xff1a; 原因 部分 jdk8 和高版本的 jdk 对 mysql 的 BigInteger 类型转换为 Java的 Long 类型认为是错误的类型转换。 1.解决方法一&#xff1a;更换兼容的 jdk8版本。 2.解决方法二&am…
阅读更多...
C++:特殊类的设计 | 单例模式

C++:特殊类的设计 | 单例模式

目录 1、特殊类的设计 2、设计一个类&#xff0c;不能被拷贝 3、设计一个类&#xff0c;只能在堆上创建对象 4、设计一个类&#xff0c;只能在栈上创建对象 5、设计一个类&#xff0c;不能被继承 6、单例模式 1、饿汉模式 2、懒汉模式 1、特殊类的设计 在实际应用场景中…
阅读更多...
集合定义和使用方法

集合定义和使用方法

一.集合的长度 集合的长度,可以添加和删除,长度也会跟着去发生改变,数组一旦创建完成他的长度就不会发生改变。 二.集合的定义方式 ArrayList<String> list new ArrayList(); 三.集合能存储的数据类型 集合能够存储引用数据类型,存储基本数据类型需要使用包装类: 四…
阅读更多...
vs配置cplex12.10

vs配置cplex12.10

1.创建c空项目 2.修改运行环境 为release以及x64 3.创建cpp文件 4.鼠标右键点击项目中的属性 5.点击c/c&#xff0c;点击第一项常规&#xff0c;配置附加库目录 5.添加文件索引&#xff0c;主要用于把路径导进来 6.这一步要添加的目录与你安装的cplex的目录有关系 F:\program…
阅读更多...
vue管理系统导航中添加新的iconfont的图标

vue管理系统导航中添加新的iconfont的图标

1.在官网上将需要的图标&#xff0c;加入项目中&#xff0c;下载 2.下载的压缩包中&#xff0c;可以选择这两个&#xff0c;复制到项目目录中 3.如果和之前的iconfont有重复&#xff0c;那么就重新命名 4.将这里的.ttf文件&#xff0c;也重命名为自己的 5.在main文件中导入 6.在…
阅读更多...
九泰智库 | 医械周刊- Vol.24

九泰智库 | 医械周刊- Vol.24

⚖️ 法规动态 国家药监局&#xff1a;2款创新器械获批上市 4月28日国家药品监督管理局公告&#xff0c;批准心擎医疗&#xff08;苏州&#xff09;股份有限公司“体外心室辅助设备”和“体外心室辅助泵头及管路”创新产品注册申请。 体外心室辅助设备由磁悬浮马达、控制主机…
阅读更多...
Python语言在地球科学中地理、气象、气候变化、水文、生态、传感器等数据可视化到常见数据分析方法的使用

Python语言在地球科学中地理、气象、气候变化、水文、生态、传感器等数据可视化到常见数据分析方法的使用

Python是功能强大、免费、开源&#xff0c;实现面向对象的编程语言&#xff0c;Python能够运行在Linux、Windows、Macintosh、AIX操作系统上及不同平台&#xff08;x86和arm&#xff09;&#xff0c;Python简洁的语法和对动态输入的支持&#xff0c;再加上解释性语言的本质&…
阅读更多...
U盘提示“被写保护”无法操作处理怎么办？

U盘提示“被写保护”无法操作处理怎么办？

今天在使用U盘复制拷贝文件时&#xff0c;U盘出现“U盘被写保护”提示&#xff0c;导致U盘明明有空闲内存却无法复制的情况。这种情况很常见&#xff0c;很多人在插入U盘到电脑后&#xff0c;会出现"U盘被写保护"的提示&#xff0c;导致无法进行删除、保存、复制等操…
阅读更多...
力扣每日一题110：平衡二叉树

力扣每日一题110：平衡二叉树

题目 简单 给定一个二叉树&#xff0c;判断它是否是 平衡二叉树 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;root [1,2,2,3,3,null,null,4,4] 输出&#xff1a;false示例 3&#xff1a; …
阅读更多...
ComfyUI中的图像镜像反转（3种方式）

ComfyUI中的图像镜像反转（3种方式）

用下面的节点就可以让图片左右镜像反转&#xff0c;如下 如果想要上下翻转呢&#xff1f;用下面的节点&#xff0c;如下 这个节点不仅可以上下翻转&#xff0c;还可以左右翻转&#xff0c;把方向设置为水平就行&#xff0c;即设置为level&#xff0c;如下 或者用下面这个节点也…
阅读更多...
动态规划——斐波那契数列模型：91.解码方法

动态规划——斐波那契数列模型：91.解码方法

文章目录 题目描述算法原理1.状态表示2.状态转移方程3.初始化⽅法⼀&#xff08;直接初始化&#xff09;⽅法⼆&#xff08;添加辅助位置初始化&#xff09; 4.填表顺序5.返回值 代码实现C优化Java优化 题目描述 题目链接&#xff1a;91.解码方法 算法原理 类似于斐波那契…
阅读更多...
Elasticsearch初步认识

Elasticsearch初步认识

Elasticsearch初步认识 ES概述基本概念正向索引和倒排索引IK分词器ik_smart最少切分ik_max_word为最细粒度划分 ES索引库基本操作对索引库操作对文档操作 ES概述 Elasticsearch&#xff0c;简称为 ES&#xff0c;是一款非常强大的开源的高扩展的分布式全文检索引擎&#xff0c…
阅读更多...
Linux基础之makefile/make

Linux基础之makefile/make

目录 一、背景 二、makefile和make的讲解 2.1 使用方法 2.2 伪目标文件 2.3 文件的属性以及属性的更新 2.4 makefile的自动推导 一、背景 这里会提及为什么要使用makefile和make&#xff0c;以及他们是什么和作用。 会不会写makefile&#xff0c;从一个侧面说明了一个人是…
阅读更多...
JS基础：输出信息的5种方式详解

JS基础：输出信息的5种方式详解

你好&#xff0c;我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。 云桃桃-大专生&#xff0c;一枚程序媛&#xff0c;感谢关注。回复 “前端基础题”&#xff0c;可免费获得前端基础 100 题汇总&#xff0c;回复 “前端基础路线”&#xff0c;可获取完整web基础…
阅读更多...
基于LLama3、Langchain,Chroma 构建RAG

基于LLama3、Langchain,Chroma 构建RAG

概要&#xff1a; 使用Llama3 Langchain和ChromaDB创建一个检索增强生成&#xff08;RAG&#xff09;系统。这将允许我们询问有关我们的文档&#xff08;未包含在训练数据中&#xff09;的问题&#xff0c;而无需对大型语言模型&#xff08;LLM&#xff09;进行微调。在使用RA…
阅读更多...
【企业动态】东胜物联正式加入EnOcean联盟，携手为智慧楼宇及能源管理提供更稳定的硬件解决方案

【企业动态】东胜物联正式加入EnOcean联盟，携手为智慧楼宇及能源管理提供更稳定的硬件解决方案

2024年4月&#xff0c;东胜物联&#xff08;Dusun&#xff09;宣布正式加入EnOcean联盟。EnOcean联盟是一个由来自建筑行业的400多家公司组成的全球性组织。它以EnOcean无线标准&#xff08;ISO/IEC 14543-3-10/11&#xff09;为基础&#xff0c;为可持续建筑自动化建立了创新的…
阅读更多...
短剧APP开发：百亿短剧市场规模下的收益密码

短剧APP开发：百亿短剧市场规模下的收益密码

短剧进入到大众的视野中&#xff0c;成为影视新行业&#xff0c;成为了中老年人茶余饭后的休闲方式&#xff0c;也成为了年轻人的“电子榨菜”。短剧时长短、节奏快&#xff0c;观众可以在短时间内看完一部剧&#xff0c;波澜起伏的剧情能够推动短剧的剧情&#xff0c;吸引观众…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023