- 博客(24)
- 收藏
- 关注
原创 行内元素、块级元素和行内块元素
HTML 可以将元素分类方式分为行内元素、块级元素和行内块元素.使用display属性能够将三者任意转换:display:inline;// 转换为行内元素display:block;// 转换为块级元素display:inline-block// 转换为行内块元素行内元素行内元素:(a,span,i,em,strong,b,label)行内元素最常使用的就是span,其他的只在特定功能下使用.行内元素特征:设置宽高无效 对margin仅设置左右方向有效,...
2022-05-09 11:19:06
9842
3
原创 防抖与节流
是什么本质上是优化高频率执行代码的一种手段如:浏览器的resize、scroll、keypress、mousemove等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能.为了优化体验,需要对这类事件进行调用次数的限制,对此我们就可以采用throttle(节流)和debounce(防抖)的方式来减少调用频率定义节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效 防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计...
2022-05-06 10:22:23
375
2
原创 JS数据类型以及类型转换
数据类型基础数据类型number,string,undefined,null,boolean,symbol(ES6新增)引用数据类型object类型转换各种运算符对数据类型是有要求的,如果运算的类型与预期不符合,就会触发类型转换机制常见的类型转换:强制转换(显示转换) 自动转换(隐式转换)强制转换强制转换,即我们很清楚可以看到这里发生了类型的转变,常见的方法有:Number() parseInt() String() Bool
2022-05-01 11:26:17
1247
原创 type of 与 instance of 的区别
type oftype of 操作符返回一个字符串,表示未经计算的操作值的类型使用方法:typeof operandtypeof(operand)operand表示对象或原始值的表达式,其类型将被返回.typeof 1 // 'number'typeof '1' // 'string'typeof undefined // 'undefined'typeof true // 'boolean'typeof Symbol() // 'symbol'typeof nul.
2022-05-01 10:33:07
633
原创 ES6中新增的Set,Map两种数据结构
Set是一种叫做集合的数据结构,Map是一种叫做字典的数据结构什么是集合?什么又是字典? 集合 是由一堆无序的、相关联的,且不重复的内存结构【数学中称为元素】组成的组合 字典 是一些元素的集合。每个元素有一个称作key 的域,不同元素的key 各不相同 区别?共同点:集合、字典都可以存储不重复的值 不同点:集合是以[值,值]的形式存储元素,字典是以[键,值]的形式存储SetSet是es6新增的数据结构,类似于数组,但是成员的值都是唯一的,没...
2022-04-28 10:23:25
548
原创 var、let、const之间的区别
var在ES5中,顶层对象的属性和全局变量是等价的,用var声明的变量既是全局变量,也是顶层变量注意:顶层对象,在浏览器环境指的是 window 对象,在 Node 指的是 global 对象var a = 10;console.log(window.a) // 10使用var声明的变量存在变量提升的情况console.log(a) // undefinedvar a = 20在编译阶段,编译器会将其变成以下执行var aconsole.log(a)a =...
2022-04-26 12:39:44
1186
原创 MVC模型与MVVM模型区别
MVC模型Model(模型)Model是应用程序中用于应用程序中处理数据保存的部分,通常模型对象负责在数据库中存取数据数据不可能凭空生成的,要么是从服务器上面获取到的数据,要么是本地数据库中的数据,也有可能是用户在UI上填写的表单即将上传到服务器上面存放,所以需要有数据来源. 既然Model是数据管理者,则自然由它来负责获取数据View(视图)View 是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的Controller(控制器)Controller
2022-04-23 12:50:30
605
原创 Vue理解
一、Vue是什么Vue是一个用于搭建用户界面的开源MVVC模型的前端JavaScript框架,也是用于搭建单页应用的Web应用框架.Vue所关注的核心是MVVC模型中的视图层,同时也能方便地获取数据更新,并通过组件中特定的方法实现模型(model)与视图(view)的交互.二、 Vue核心特性数据驱动(MVVM)MVVM 表示的是 Model-View-ViewModelModel:模型层,负责处理业务逻辑以及和服务器端进行交互 View:视图层:负责将数据模型转化为UI展示出
2022-04-23 11:14:56
1144
原创 Vue项目 成员管理系统 Vuex状态管理(10)
Vuex是一个专为Vue.js应用程序开发的状态管理模式.它采用集中式储存管理应用的所有组件的转台并以相应的规则保证装填以一中可预测的方式发生变化.Vuex可以将组件中的某些属性、值或者方法拿出来统一去声明、统一去定义,在Vuex中去声明,设置一些方法以及一些逻辑运算,来修改这些组件用到的相同的值....
2022-04-22 20:53:21
910
原创 Vue项目 成员管理系统 加载效果和异常处理(9)
一、Loading 加载数据时显示动效项目中调用Loading,使用服务的方式去调用1.1按需导入 ElementUI 组件 Loadingimport { Loading } from 'element-ui';//按需引入1.2 加载数据时,打开和关闭动效对象注意: LoadingInstance 实例采用单例模式创建,防止响应异常时频繁切换路由时加载动效重复创建.单例模式: 当关闭Loading再次打开时,调用的是前边关闭的实例,不会新创建实例.// 加载数...
2022-04-17 10:59:55
950
原创 Vue项目 成员管理系统 修改密码(8)
目录一、nodejs 添加接口1.1添加原密码校验接口1.2添加修改密码接口二、Api 调用接口2.1新建 api\password.js 文件, 调用服务接口实现如下:三、初始化修改密码组件3.1添加修改密码表单组件3.2data 选项中初始化属性值3.3在 handleCommand 方法中调用 handlePwd 方法3.4添加 submitForm 方法, 提交修改密码表单四、校验密码是否正确4.1在 data 选项添加 user ...
2022-04-16 13:02:31
2805
原创 清除浮动
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>清除浮.
2022-04-13 13:50:57
431
原创 Vue项目 成员管理系统 学生管理模块(7)
一、学员管理-列表查询1.1分页查询学员数据列表1.1.1 nodejs 添加分页数据列表接口创建student.js:var mongoose = require('require');mongoose.connect('mongodb://localhost/stu');var Schema = mongoose.Schema;var userSchema = new Schema({ stunum: {// 学号 type: String, .
2022-04-12 12:48:22
2553
1
原创 Vue项目 成员管理系统 教师管理模块(6)
一、教师数据列表1.1 nodejs 添加数据列表接口1.1.1 创建teacher.js node.js配置//!读写数据库var mongoose = require('mongoose');mongoose.connect('mongodb://localhost/stu');//?定义规则对象var Schema = mongoose.Schema;//声明mongoose下的一个规则var userSchema = new Schema({//创建一个规则的对象,生成一个
2022-03-23 18:38:20
3368
原创 Vue项目 成员管理系统 项目布局与权限&退出(5)
一、路由配置1.1 在 src\components 目录下新建布局组件文件 Loyout.vue基础布局都放到 components 下面.页面部分:<template> <div> <!-- 头部区域 --> <div class="header"> <app-header /> </div> <!-- 左侧导航
2022-03-10 17:42:31
1739
原创 Vue项目 成员管理系统 系统登录模块(4)
一、登录页面1.1 在view文件夹下创建login文件夹,并创建index.vue界面部分:<template> <div class="login-container"> <el-form :model="form" status-icon :rules="rules" ref="form" label-width="
2022-03-03 19:36:34
1433
原创 Vue项目 成员管理系统 系统注册模块(3)
一、系统注册1.1 路由配置1.1.1 在 src\views 目录下新建 register目录及此目录下新建文件 index.vue通过 import Register from './views/register' 导入组件(引入就是引到文件夹的名),当前只指定了组件路径,默认导入的就是指定路径下的 index.vue 组件在element-ui中获取需要的表单,表单部分代码:<template> <div> <el-form
2022-03-02 17:40:15
986
原创 Vue项目 成员管理系统 Axios封装和跨域问题 (2)
一、Axios封装1.1 封装Axios对象因为项目中很多组件中要通过 Axios 发送异步请求,来请求一些数据1.2 测试封装的Axios在public下创建db.json数据文件,内容如下:[{ "name": "8080", "age": "10" }]二、跨域问题2.1 什么是跨域前后端分离时,前端和后端API服务器可能不在同一台主机上,就存在跨域问题,浏览器默认会限制跨域访问同源策略:是指协议,域名,端口都要相同,其中有任何一个不同都会产生跨域如下面示例
2022-01-07 20:53:36
1361
1
原创 Vue项目 成员管理系统 Vue-CLI脚手架构建项目 (1)
一、环境搭建使用vue-cli脚手架,脚手架中单独内置了webpack,不需要单独来装webpack再使用.1.1 全局安装 Vue-CLInpm install -g @vue/cli 1.2 安装成功后,可以查看版本vue -V //大写的V二、创建项目2.1 用vue创建msm的项目vue create msm注意: 使用vue-cli脚手架创建项目的时候,不要着急按回车选择,有些内容需要配置.第一行 为之前创建项目保留的配置的版本(之前没创
2022-01-05 22:01:44
1412
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人