Web前端最全基于 vue + Element-ui 开发的后台管理系统(1)，前端事件体系全面总结+实践分析

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

  

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

npm install

serve with hot reload at localhost:8080

npm start

完成上面这套操作，就可以在浏览器中输入：localhost:8080 看到项目了。

---

项目结构介绍

====================================================================

项目的外层目录文件，就没啥好说的了，本身也是用 vue-cli 来构建的，大家应该都清楚。我们主要来看一下 src 里面的内容。

引入 ElementUI

==========================================================================

npm i element-ui -S

Element UI 作为我们主要的 UI 组件库，还是推荐使用 完整引入 的方式。

然后，在 main.js 中：

import ElementUI from ‘element-ui’

import ‘element-ui/lib/theme-chalk/index.css’

Vue.use(ElementUI, {

size: ‘medium’

})

? 引入示例

登录功能设计

====================================================================

• 自定义输入验证校验规则

ElementUI 本身有提供表单的验证功能，但是验证规则有限，如果你想更丰富，更适合自己场景的验证规则，可以使用 自定义校验规则

// username 验证规则

const validateUsername = (rule, value, callback) => {

if (!isValidUsername(value)) {

// 如果callback是一个error对象，则验证不通过

callback(new Error(‘请输入正确的用户名’))

} else {

callback()

}

}

// 在 rules 中对要验证的字段配置 validator

rules: {

username: [

{ required: true, message: ‘请输入账号’, trigger: ‘blur’ },

{ required: true, trigger: ‘blur’, validator: validateUsername },

{ required: true, trigger: ‘change’, validator: validateUsername }

],

pwd: [

{ required: true, message: ‘请输入密码’, trigger: ‘blur’ },

{ required: true, trigger: ‘blur’, validator: validatePwd },

{ required: true, trigger: ‘change’, validator: validatePwd }

]

}

• 登录功能以及权限

提交用户输入的登录信息，调用接口要做验证。验证成功之后：

1、localstorage 会存储登录成功后下发的 token (后端会验证token的时效性)

2、登录成功后会跳到系统的主页

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

llback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-0evJavmC-1715887994797)]

[外链图片转存中…(img-Fti5rvqk-1715887994798)]