誉天程序员-2301-3-day03

原创

已于 2023-07-24 17:05:18 修改 · 210 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端

于 2023-07-24 10:43:27 首次发布

文章介绍了响应式界面的实现，通过ElementPlus的布局和参数实现不同设备的适配。同时，讲述了如何进行前台表单验证，包括自定义JavaScript验证和使用ElementPlus的内置验证规则。还提到了页面美化的方法，如el-timeline时间线和el-carousel走马灯组件的使用。此外，讨论了Vite项目中axios的引入以及路由调用，以及如何将ElementPlus的通知组件封装成自定义工具类。

1、知识回顾

讲述下响应式界面是如何实现的？

（由来）Bootstrap4.x推出响应式布局概念。当手机流行，包括ipad流行，不同界面大小设备出品，软件需要适应不同大小屏幕。额外定义css参数。例如：ElemntPlus它就定义很多额外参数，lg,md,sm，总共5个参数。lg针对pc电脑，笔记本，md针对ipad，sm针对手机。
css推出新的布局规范，dispaly: flex布局。默认的布局的方式：块 div+css。ElementPlus默认设置布局方式就是flex。
(核心要求）根据屏幕的大小，flex把屏幕分成24栏，然后就可以根据不同大小时，设置它的所占分栏个数。
（示例）
例如：页面分成两个区域
lg=16,8 左边2/3，右边1/3
md=12,12 左边1/2，右边1/2
sm=24,24，那就没有左右，左边分栏撑满，右边分栏也撑满，所以各占一行。

讲述下你是如何实现前台表单验证的

（定义）javascript，在前台提交事件submit()时或者input框丢失焦点事件blur()，提交时，先会执行一个函数，以前自己写，自己封装工具类js，Valid()。它会获取页面上的input框架。
把input框架和button都写在form表单中。在valid函数中去获取form表单所有的组件。
document.form获取表单中所有组件element。进行遍历判断。
input.username.value，进行判断，如果为空’'，alert()，弹出错误消息：非空。

现在使用ElementPlus，它将这个验证已经规范化，自己实现了上面的校验函数，而且更加全面。
我们来说直接调用。

（核心）ElementPus它封装了，它具体怎么使用，它会在el-form中增加两个参数：
ref=“formRef” :rules=“rules”
ref参数，它是指定将来校验input项，临时存放信息位置。
和:model=“