誉天程序员-2301-3-day03

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=“form”，model就是存放页面元素对象，formRef就是存储校验页面元素对象。
:rules它是校验规则，这些规则html是没有定义，后面开发慢慢行业形成约定。ElemetPlus做了这个统一。这些必须查手册。

（示例）
例如：在longin.vue中，我就使用ElementPlus它的校验。根据官网案例，我进行登录的实现。控制username,非空校验。password非空和min和max几个字符长度的判断。

页面美化

el-timeline 时间线

在实际开发中，大事记，记录公司从成立重大事件

el-carousel 走马灯

404图片居中修饰

Vite项目引入axios

1、在当前项目根目录下，安装axios，pnpm install axios
2、在src目录下，创建axios.js文件（共用）。它里面引入axios函数库，创建实例。
3、创建一个api目录（api接口，对外），创建manage.js文件（业务）。利用实例创建Login方法。
4、在login.vue中就调用Login方法（属于Promise方法，支持异步），设置then()，设置catch()。

路由的调用

// 导入路由创建实力userRouter方法
	import { useRouter } from 'vue-router'
	// 使用useRouter方法创建实例
	const router = useRouter()

// 如果成功,跳转到首页
					router.push('/')

把ElementPlus通知封装成自定义工具类

第一步: 创建tools目录，创建utils.js
第二步: 定义封装ElementPlus通知组件，创建自己的函数toast (参数: msg，type）
第三步: type写死默认值sucess
第四步: 在login.vue中调用

tools/utils

//导入ElementPlus 通知的组件
import { ElNotification } from 'element-plus'

//调用组件，封装成一个函数
export const toast = (message, type='success')=>{
	ElNotification({
		title: '提示信息',
		message,
		type
	})
}

// 导入自定义工具类
	import { toast } from '../tools/utils.js'

if(res.data.code===6001){
					toast(res.data.msg)
					
					// 如果成功,跳转到首页
					router.push('/')
				}else if(res.data.code===6003){
					toast('用户名或密码错误', 'info')
				}

作业

1、真正开发开卷考试，写完所以今天功能；
2、把几个重点过程讲出来
a. 把表达（面试）套路说出来。录制一段视频。