【一】web框架的本质

模板文件和静态文件

​ 模板文件和静态文件是在 web 开发中常用的两种资源文件,用于构建网站和 web 应用。

  • 模板文件:模板文件是用于定义网页结构和内容的文件。
    • 它们通常使用模板引擎(例如Jinja2或Django模板)来插入动态数据,并控制流程和逻辑。模板文件允许我们根据需要生成不同内容的网页。
  • 静态文件:静态文件是指在web应用中不需要经常改变的资源文件,例如CSS样式表、JavaScript脚本、图像和字体文件。
    • 这些文件被直接加载到网页中,用于定义网页的外观和行为。静态文件主要负责网页的静态内容。

简单的来说:

  • ​ 模板文件用于动态生成网页内容,
  • ​ 静态文件用于定义网页的静态外观和行为。

【一】动态页面和静态页面

【1】静态页面

定义:

​ 静态页面是在服务器上预先生成并且保存为静态文件的页面,内容在服务器上不会发生变化。

特定:
  • 内容固定:死页面所有的数据都是固定不变的

    • 404页面
  • 加载速度快:由于静态页面不需要进行动态内容的处理和数据库查询,通常加载速度较快。

  • 使用范围:静态页面适用于相对固定、不需要频繁跟新的情况。例如:游戏的介绍,公司的海报

  • 缓存友好:由于内容不变,静态页面可以被浏览器和代理服务器缓存,提高页面加载速度和性能。

【2】动态页面

定义:

​ 动态页面是根据特定的参数或条件在每次请求时生成内容的页面,内容是动态生成的。

  • 动态的渲染数据
  • 页面信息是实时更新的
  • 数据交互:动态页面通常涉及到与其他数据源的交互,以获取动态数据并进行相应的处理。
  • 加载数据较慢
  • 使用范围:贴吧、淘宝

注意:

​ 静态页面和动态页面并不是绝对的概念,而是相对的。即使页面是动态生成的,但如果页面内容在一段时间内保持不变,可以将其缓存为静态文件,以提高性能。同样地,即使页面是静态的,但如果通过JavaScript等技术动态地修改页面内容,也可以实现某种程度的动态效果。

总结:

  • 静态网页适合用于内容较少且不需要频繁更新的场景,如关于我们、联系我们等基础介绍页面。
  • 动态网页则更适用于需要实时交互、内容丰富且需要定期更新的场景,如新闻资讯、在线购物平台等,通过服务器端的动态处理,提供了更好的用户体验和更高的业务复杂性处理能力。

【二】jianjia2语法

【1】功能

  • 支持将数据传递到html页面并提供近似于后端的处理方式简单快捷的操作数据

【三】网络框架和MVC架构以及MVT框架

MVC

Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器©和视图(V)三层,他们之间以一种插件式的、松耦合的方式连接在一起,模型负责业务对象与数据库的映射(ORM),视图负责与用户的交互(页面),控制器接受用户的输入调用模型和视图完成用户的请求,其示意图如下所示

image-20240226191627282

网络框架

  • 网络架构其实就是人家帮我们封装好底层源码调用后的框架

MVC框架

M:model.py 就是和数据库打交道用的,创建表等操作

V:View 视图(视图函数,html文件)

C:controller 控制器(其实就是我百度云代码里面那个urls文件里面的内 容,url(路径)分发与视图函数的逻辑处理)

MVT框架

​ MVT是一种用于构建Web应用程序的架构模式:

  • M(Model):负责处理数据的存储和操作。在Model中定义了数据结构和与数据库的交互方式。
  • V(View):负责处理业务逻辑和用户请求。视图函数从Model中获取数据,并根据业务需求对数据进行处理,然后将结果传递给Template进行渲染。
  • T(Template):负责呈现最终的用户界面。开发人员使用模板语言在Template中编写HTML代码,通过与View交互,将动态数据嵌入到静态页面中,最终生成用户所看到的网页。

MVT是Django框架的设计核心设计思想,它将数据、业务逻辑和用户界面分离,使得开发人员可以更好地组织和管理项目中的不同部分。

​ 除了以上三层之外,还需要一个URL分发器,它的作用是将一个个URL的页面请求分发给不同的View处理,View再调用相应的Model和Template,MTV的响应模式如下所示:

在这里插入图片描述

【四】python后端框架

【1】Django框架

  • Django框架比较完整并且大
  • 大而全
  • 笨重

【2】flask框架

  • 小而精
  • 依赖于第三方模块

【3】Tornado框架

  • 速度比较快
  • 游戏服务器上

【4】fastapi框架

  • 支持异步,比较快
  • 内置了很多高级的功能

【五】Djingo的基本配置

  • 终端命令:django-admin startproject sitename (在当前目录下创建一个Django程序)

  • IDE创建Django程序时,本质上都是自动执行上述命令

其他常用命令:

  • python manage.py runserver ip:port (启动服务器,默认ip和端口为http://127.0.0.1:8000/)
  • python manage.py startapp appname (新建 app)
  • python manage.py syncdb (同步数据库命令,Django 1.7及以上版本需要用以下的命令)
  • python manage.py makemigrations (显示并记录所有数据的改动)
  • python manage.py migrate (将改动更新到数据库)
  • python manage.py createsuperuser (创建超级管理员)
  • python manage.py dbshell (数据库命令行)
  • python manage.py (查看命令列表)

Django框架的核心思想

总结

  • “快速开发和高可维护性”。

Django致力于提供一种高效的方式来构建Web应用程序,通过以下几个方面体现其核心思想:

  1. DRY(Don’t Repeat Yourself)原则:Django鼓励开发人员遵循DRY原则,尽量减少重复的代码。通过提供ORM(对象关系映射)等工具,避免编写重复的数据库访问代码。
  2. MTV设计模式:Django采用MTV(Model-Template-View)设计模式,将数据处理(Model)、模板(Template)和视图逻辑(View)清晰地分离,以提高代码的可维护性和可扩展性。
  3. 自动化流程:Django提供了自动化的管理工具,包括自动生成Admin后台、自动生成数据库迁移脚本等,简化了开发人员的工作流程。
  4. 安全性和可扩展性:Django内置了一些安全机制,如CSRF保护、XSS防护等,并提供了丰富的扩展插件和第三方应用程序,使开发人员能够快速构建功能强大的应用程序。

​ 综上所述,Django框架的核心思想是通过提供高效的工具和规范,使开发人员能够快速构建高质量、可维护的Web应用程序。

什么是DRY原则

​ 是一种软件开发中的一个重要的原则

  1. 避免重复:不要在代码中重复相同的信息或逻辑,而应该将其抽象出来,以便在需要时进行重用。
  2. 单一权威:系统中特定的信息或逻辑只应该存在一个地方,这样可以避免对系统进行多处修改。

【六】Python框架官网

  • Django框架官网:https://www.djangoproject.com/
  • Flask框架官网:https://flask.palletsprojects.com/en/3.0.x/
  • Fastapi框架官网:https://fastapi.tiangolo.com/
  • Pyramind框架官网:https://trypyramid.com/
  • Tornado框架官网:https://www.tornadoweb.org/en/stable/
  • Sanic框架官网:https://github.com/sanic-org/sanic
  • Fastapi框架官网:https://fastapi.tiangolo.com/
  • Aiohttp框架官网:https://docs.aiohttp.org/en/stable/

【七】Django框架下载

【1】pip安装

python自带的第三方库

# pip install django==3.2.12

# pip install django # 默认是最新版本 
  • 在你的Python解释器安装目录下的 Scripts 文件夹下 会出现一个 django-admin.exe的文件

image-20240226201014953

【2】如何校验是否安装成功!

# django-admin

image-20240226201131962

image-20240226192621972

# django-admin --version  # 查看Django版本

【3】在终端创建Django项目

【1】创建Django项目

(1)语法

django-admin startproject 项目名

(2)示例

  • 在指定文件下启动终端
django-admin startproject mysite
  • 终端无显示内容

image-20240207193103864

  • 查看当前文件夹下内容,会发现多了一个文件夹,文件夹下有很多对应的文件

image-20240207193129934

【2】启动Django项目

(1)语法

python manage.py runserver [IP:PORT]
  • IP和PORT可选,默认是本地的 127.0.0.1:8000

(2)示例

  • 进入到创建好的文件目录下
    • 注意这个文件目录是你当前目录下有 manage.py 文件才行
python manage.py runserver

image-20240207193436849

  • 访问底下提示的链接地址
    • http://127.0.0.1:8000/

image-20240207193537903

【3】创建APP

【1】语法

python manage.py startapp 应用名
  • 应用名一般为英文

【2】示例

  • 同上,在当前 manage.py 所在终端目录下
python3 manage.py startapp app01

# 上面命令不生效,试试 python3 能不能进入到python解释器,如果不能,换下面的试试
python manage.py startapp app01

image-20240207193827680

  • 查看当前文件夹下会发现多了一个 app01 文件夹

image-20240207193947121

【3】注册APP

  • 创建APP后,如果想使用相关的功能,必须将创建的APP注册到配置文件中
  • 即在settings中加入下述内容
INSTALLED_APPS = [
  'django.contrib.admin',
  'django.contrib.auth',
  'django.contrib.contenttypes',
  'django.contrib.sessions',
  'django.contrib.messages',
  'django.contrib.staticfiles',
   # 找到对应的配置内容中,加入当前新创建的APP的名字
  'app01'
]

【4】用Pycharm创建Django项目

第一步

image-20240226200105070

创建完成之后会在本地文件中出现如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

第二步

image-20240226195654210

第三步

# 运行Django
#  python manage.py runserver

image-20240226201719442

【补充】Django项目文件介绍

【1】Django空项目

├── Django项目名       # 整体项目名
  ├── db.sqlite3      # Django默认的db数据库,sqlite3
  ├── manage.py				# Django的服务控制文件,所有的Django命令都是基于manage.py 来执行的
  └── mysite					# 项目名
      ├── __init__.py	# 包初始化文件
      ├── __pycache__	# 缓存编译后的模块代码,加快加载速度
      │   ├── __init__.cpython-310.pyc # 编译后的文件
      │   ├── settings.cpython-310.pyc # 编译后的文件
      │   ├── urls.cpython-310.pyc 		 # 编译后的文件
      │   └── wsgi.cpython-310.pyc     # 编译后的文件
      ├── asgi.py       # 支持异步请求处理的应用程序接口
      ├── settings.py   # 配置文件
      ├── urls.py			  # 实现URL路由规则
      └── wsgi.py			  # Django项目的入口点,将HTTP请求传递给WSGI容器,以启动Django服务器。
  • Django项目名

    • 这是您为该项目创建时指定的名称,比如 “mysite”。
    • 每个Django项目都有一个唯一的名称,并且在整个项目目录下作为顶级目录存在。
  • db.sqlite3

    • 这是Django默认使用的SQLite数据库文件。
    • SQLite是一个轻量级的关系型数据库管理系统,无需服务器运行,所有数据存储在一个文件中。
    • 在这个项目中,SQLite被用作开发阶段的数据存储和本地测试环境的默认选项。
  • manage.py

    • 这是Django的核心服务控制脚本,包含了各种用于管理和维护项目、应用程序以及运行Django服务器的内置命令。
    • 通过manage.py,您可以执行如创建数据库、迁移模型、创建超级用户、运行开发服务器等操作。
  • mysite

    • __init__.py
      
      • 这是一个空的Python模块文件,它告诉Python这是一个包含其他模块或包的目录。
      • 尽管对于Django项目来说,这通常不是必需的,但在一些情况下可能会用到。
    • __pycache__
      
      • Python会在此目录下缓存编译后的模块代码,以便加快后续加载速度。
      • 这些目录通常不应该直接修改或删除,而是由Python自动处理。
      • __init__.cpython-310.pyc: 编译后的初始化模块。
      • settings.cpython-310.pyc, urls.cpython-310.pyc, wsgi.cpython-310.pyc: 分别对应于settings.py、urls.py和wsgi.py这三个文件的编译版本。
    • asgi.py

      • 在Django 3.0及更高版本中,此文件允许将项目配置为ASGI应用(Asynchronous Server Gateway Interface),即支持异步请求处理的应用程序接口,适用于生产环境中部署长连接或WebSocket服务。
    • settings.py

      • 项目级别的设置文件,定义了诸如数据库连接、认证方式、中间件列表、静态文件托管、邮件配置等各种全局设置,以及其他项目自定义配置信息。
    • urls.py

      • 应用程序级别的URL配置文件,定义了项目内各个视图函数与URL模式之间的映射关系,实现了URL路由规则。
    • wsgi.py

      • Web Server Gateway Interface (WSGI) 实现文件,是Django项目的入口点,将HTTP请求传递给WSGI容器(如uWSGI, Gunicorn, uWSGI等)以启动Django服务器。
      • 在早期版本中,Django项目可能只有一个根WSGI应用;而在现代Django项目中,可能涉及多个WSGI应用组合。

【2】APP项目

└── app01					# APP 名字
  ├── __init__.py # 包初始化文件
  ├── admin.py    # 注册管理后台界面中的模型
  ├── apps.py     # 定义当前app相关的信息
  ├── migrations  # 模型相关的数据迁移历史记录文件
  │   └── __init__.py # 包初始化文件
  ├── models.py   # 数据库模型
  ├── tests.py    # 用于编写单元测试
  └── views.py    # 主要逻辑处理模块,负责接收 HTTP 请求并返回响应
  • app1 是一个名为 “app01” 的Django应用程序目录,它遵循Django应用组织的标准结构,用于组织可重用的功能模块。
    • __init__.py
      • 此文件是空的,但它表明当前目录 “app01” 是一个Python包,里面包含其他子模块或文件。
    • admin.py
      • 如果您的 “app01” 应用需要注册管理后台界面(Admin Site)中的模型,则应在该文件中编写自定义的ModelAdmin类,以便管理和编辑数据库表中的记录。
      • 如果没有特定需求,可以保持为空或者注释掉。
    • apps.py
      • 此文件定义了 “app01” 应用本身,包括应用的元数据(如名称、路径等)、是否启用该应用,以及与其他应用的关系(如有依赖)。
    • migrations
      • 存储与 “app01” 模型相关的数据迁移历史记录文件(.py)和应用状态文件(.pyc)。
      • 当您更改了 “models.py” 中的模型结构时,Django会根据这些变更生成新的迁移文件,用于更新数据库结构以保持一致。
    • models.py
      • 该文件定义了 “app01” 中的数据库模型(也称为数据结构或对象)。
      • 每个模型继承自 django.db.models.Model 并定义字段及其属性,例如字段类型、验证规则、外键关联等。它是实现业务逻辑的基础,并最终决定了数据库表的设计。
    • tests.py
      • 用于编写单元测试(Unit Tests)的模块,确保 “app01” 应用中各个功能模块正确无误地工作。
      • 通过unittest.TestCase类或使用更高级别的测试框架如pytest进行测试用例编写。
    • views.py
      • 视图(Views)是 “app01” 中的主要逻辑处理模块,负责接收 HTTP 请求并返回响应。
      • 它们是Django URL 路由系统与用户交互的核心部分,定义了如何解析请求、调用相应的业务逻辑以及构建最终返回的响应数据。
      • 每个视图通常与 URLconf 中的一个 URL 路由关联起来。

dmin类,以便管理和编辑数据库表中的记录。
- 如果没有特定需求,可以保持为空或者注释掉。

  • apps.py
    • 此文件定义了 “app01” 应用本身,包括应用的元数据(如名称、路径等)、是否启用该应用,以及与其他应用的关系(如有依赖)。
  • migrations
    • 存储与 “app01” 模型相关的数据迁移历史记录文件(.py)和应用状态文件(.pyc)。
    • 当您更改了 “models.py” 中的模型结构时,Django会根据这些变更生成新的迁移文件,用于更新数据库结构以保持一致。
  • models.py
    • 该文件定义了 “app01” 中的数据库模型(也称为数据结构或对象)。
    • 每个模型继承自 django.db.models.Model 并定义字段及其属性,例如字段类型、验证规则、外键关联等。它是实现业务逻辑的基础,并最终决定了数据库表的设计。
  • tests.py
    • 用于编写单元测试(Unit Tests)的模块,确保 “app01” 应用中各个功能模块正确无误地工作。
    • 通过unittest.TestCase类或使用更高级别的测试框架如pytest进行测试用例编写。
  • views.py
    • 视图(Views)是 “app01” 中的主要逻辑处理模块,负责接收 HTTP 请求并返回响应。
    • 它们是Django URL 路由系统与用户交互的核心部分,定义了如何解析请求、调用相应的业务逻辑以及构建最终返回的响应数据。
    • 每个视图通常与 URLconf 中的一个 URL 路由关联起来。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【算法练习】28:选择排序学习笔记

一、选择排序的算法思想 弄懂选择排序算法,先得知道两个概念:未排序序列,已排序序列。 原理:以升序为例,选择排序算法的思想是,先将整个序列当做未排序的序列,以序列的第一个元素开始。然后从左…

scala实现通过Spark统计人均登录次数最终写入MySQL

谨以此博客作为记录 小编这里用的版本是&#xff1a; <hadoop.version>2.7.7</hadoop.version> <spark.version>2.4.5</spark.version> <scala.version>2.12.10</scala.version> 如果没用到Hadoop可以忽略 步骤 准备数据&#xff0c;知道…

【Latex】参考文献标号未对齐解决方案

Latex写论文时发现最后参考文献标号出现如下没有对齐的情况&#xff1a; 解决方案&#xff1a; 将参考文献开始出的序号1改为99&#xff08;或者其他大点的数字也可以&#xff09; ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇

JSON的定义和基本使用

1、JSON的特点: JSON是一种轻量级的数据交换格式&#xff0c;是由字符串化的键值对构成。基于网络的前后端通信&#xff0c;数据在服务端和客户端之间进行传输&#xff0c;采用的就是JSON的格式来进行交互。JSON采用完全独立于语言的文本格式&#xff0c;JSON的数据格式完全独…

HarmonyOS(鸿蒙)——单击事件

2.4 实现ClickedListener接口并重写onClick方法 2.5 实现onClick方法中的具体逻辑&#xff0c;以此完成点击事件的相关业务操作 三、测试 3.1 登录远程模拟器 3.2 运行项目 四、精选好文 一、简介 1.1 什么是组件 组件就是文本、按钮、图片等元素的统称 1.2 什么是事件 …

【测试篇】测试用例

文章目录 前言具体设计测试用例等价类边界值场景设计法判定表&#xff08;因果图&#xff09;正交排列&#xff08;用的非常少&#xff09;错误猜测法 前言 什么是测试用例&#xff1f;&#xff1f; 测试用例是针对软件系统或应用程序的特定功能或场景编写的一组步骤&#xf…

了解 Solidity 语言:构建智能合约的首选编程语言

了解 Solidity 语言&#xff1a;构建智能合约的首选编程语言 Solidity 是一种用于编写智能合约的高级编程语言&#xff0c;广泛应用于以太坊和其他以太坊虚拟机&#xff08;EVM&#xff09;兼容的区块链平台。它是以太坊智能合约的首选语言之一&#xff0c;具有丰富的功能和灵活…

GEE教程——如何利用影像行列号和distinct函数实现影像的筛选

如何利用影像行列号和distinct函数实现影像的筛选 本次主要利用Landsat中 WRS_PATH 和 WRS_ROW属性实现对影像的筛选。这里我们会用到遍历函数map也就是我们需要对其影像中的每一景影像的行列号属性进行获取,然后再对其列表化,然后利用distinct函数实现属性分离,最后移除不…

Coursera上托福专项课程01:TOEFL Reading and Listening Sections Skills Mastery 学习笔记

TOEFL Reading and Listening Sections Skills Mastery Course Certificate 本文是学习 https://www.coursera.org/learn/toefl-reading-listening-sections-skills-mastery 这门课的笔记&#xff0c;如有侵权&#xff0c;请联系删除。 文章目录 TOEFL Reading and Listening …

【系统架构师】-软件产品线与构件

1、产品线 核心资源、产品集合 1、过程驱动 2、特定领域 3、技术支持 4、以架构为中心 双生命周期模型&#xff1a; 建立产品线的方式&#xff1a;演化、革命 成功因素&#xff1a; 对该领域具备长期和深厚的经验 一个用于构建产品的好的核心资源库 好的产品线架构 好的管…

STM32CubeMX 中配置__weak类型函数和用法

目录 概述 1 weak类型函数 1.1 weak类型函数介绍 1.2 weak类型函数的特点 2 在 STM32CubeMX中配置weak类型函数 2.1 配置函数类型 2.2 生成代码 2.3 验证 3 _weak类型函数项目中的应用 3.1 重写_weak类型函数 3.2 测试 4 总结 概述 本文主要介绍__weak类型函数…

java算法day44 | 动态规划part06 ● 完全背包 ● 518. 零钱兑换 II ● 377. 组合总和 Ⅳ

完全背包理论基础 完全背包和01背包问题唯一不同的地方就是&#xff0c;每种物品有无限件。 体现在代码中就是对背包的遍历顺序不同。01背包是逆序遍历背包&#xff0c;完全背包是顺序遍历背包。 518. 零钱兑换 II class Solution {public int change(int amount, int[] coin…

接口调用成功后端却一直返回404

vuespringboot 我在vue.config.js中配置了向后端的反向代理 然后使用了axios向后端发送post请求 可以看到可以接收到前端传来的值 但是前端控制台却报了 “xhr.js:245POST http://localhost:7777/api/login 404 (Not Found)” 最后询问我那智慧的堂哥... ... 解决办法是把C…

Flutter Boost 3

社区的 issue 没有收敛的趋势。 设计过于复杂&#xff0c;概念太多。这让一个新手看 FlutterBoost 的代码很吃力。 这些问题促使我们重新梳理设计&#xff0c;为了彻底解决这些顽固的问题&#xff0c;我们做一次大升级&#xff0c;我们把这次升级命名为 FlutterBoost 3.0&am…

IMAP的要点:旅行前需要了解的内容

你是否经常因会议而出差&#xff0c;需要在各种设备上灵活地访问你的电子邮件&#xff1f;如果是的话&#xff0c;你可能会想了解你的电子邮件系统是如何通过使用互联网消息访问协议&#xff08;IMAP&#xff09;来工作的&#xff0c;这样当你不在办公桌前时&#xff0c;你可以…

1.Docker简介和安装

1 Docker 简介 1.1 Docker 是什么&#xff1f; docker是一个开源的应用容器引擎。 1.2 容器是什么&#xff1f; 容器是一种轻量级的虚拟化技术 &#xff0c;它是一个由应用运行环境、容器基础镜像组成的集合。 以 Web 服务 Nginx 为例&#xff0c;如下图所示&#xff1a;Ngin…

Revit 2025新功能一览~

Hello大家好&#xff01;我是九哥~ Revit2025已经更新&#xff0c;安装后&#xff0c;简单试了下&#xff0c;还是挺不错的&#xff0c;流畅度啊&#xff0c;新功能啊&#xff0c;看来还是有听取用户意见的&#xff0c;接下来就简单看看都有哪些新功能。 好了&#xff0c;今天的…

大转盘抽奖小程序源码

源码介绍 大转盘抽奖小程序源码&#xff0c;测试依旧可用&#xff0c;无BUG&#xff0c;跑马灯旋转效果&#xff0c;非常酷炫。 小程序核心代码参考 //index.js //获取应用实例 var app getApp() Page({data: {circleList: [],//圆点数组awardList: [],//奖品数组colorCirc…

CVPR24_ArGue: Attribute-Guided Prompt Tuning for Vision-Language Models

Abstract 尽管软提示微调在调整视觉语言模型以适应下游任务方面表现出色&#xff0c;但在处理分布偏移方面存在局限性&#xff0c;通过属性引导提示微调&#xff08;Attribute-Guided&#xff0c;ArGue&#xff09;来解决这个问题 Contributions 与直接在类名之前添加软提示…

Web Component 组件库有什么优势

前言 前端目前比较主流的框架有 react&#xff0c;vuejs&#xff0c;angular 等。 我们通常去搭建组件库的时候都是基于某一种框架去搭建&#xff0c;比如 ant-design 是基于 react 搭建的UI组件库&#xff0c;而 element-plus 则是基于 vuejs 搭建的组件库。 可能你有这种体…