![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
尹汇川
平淡快乐安心无忧
展开
-
CSS布局三种机制之定位
定位(position) 目标 理解 能说出为什么要用定位能说出定位的4种分类能说出四种定位的各自特点能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1. CSS 布局的三种机制 网页布局的核心 —— 就是用 CSS 来摆放...原创 2021-04-23 16:29:53 · 532 阅读 · 0 评论 -
移动web开发之rem布局,建议收藏!
移动web开发之rem布局 rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如,根元素(html)设置font-size=12px; 非根元素设置...原创 2021-04-23 16:27:50 · 181 阅读 · 0 评论 -
移动web开发之响应式布局,建议收藏!
移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 设备的划分情况: 小于768的为超小屏幕(手机)768~992之间的为小屏设备(平板)992~1...原创 2021-04-23 16:26:24 · 118 阅读 · 0 评论 -
jQuery-JQuery属性操作-JQuery文本属性值-JQuery元素操作-JQuery尺寸、位置操作-建议收藏!
jQuery 学习目标: 能够操作 jQuery 属性 能够操作 jQuery 元素 能够操作 jQuery 元素尺寸、位置 1.1. jQuery 属性操作 jQuery 常用属性操作有三种:prop() / attr() / data()...原创 2021-04-23 16:25:12 · 157 阅读 · 0 评论 -
jQuery-JQuery事件注册-JQuery事件对象-拷贝对象-多库共存-插件-附带练习案例-建议收藏
jQuery 学习目标: 能够说出4种常见的注册事件 能够说出 on 绑定事件的优势 能够说出 jQuery 事件委派的优点以及方式 能够说出绑定事件与解绑事件 能够说出 jQuery 对象的拷贝方法 能够说出 jQuery 多库共存的2种方法 能够使用...原创 2021-04-23 16:24:21 · 185 阅读 · 0 评论 -
HTML5之SVG最全知识点整理,附有案例及源码演示,建议收藏! SVG
使用SVG SVG基础使用SVG 1.使用SVG 1.1 SVG发展历史 在 2003 年一月,SVG 1.1 被确立为 W3C 标准。 参与定义 SVG 的组织有:太阳微系统、Adobe、苹果公司、IBM 以及柯达。 与其他图像格式相比,使用 SVG ...原创 2021-04-23 16:23:02 · 412 阅读 · 0 评论 -
JS检测浏览器是否支持视频、音频格式代码,一步检测浏览器支持视频音频格式
使用audio元素的canPlayType检测浏览器支持的文件格式 该方法采用Mine类型和编解码器参数,并返回下列3个字符串值之一:probably/maybe/空字符串 <!DOCTYPE html><html lang="en">...原创 2021-04-23 16:21:54 · 1273 阅读 · 0 评论 -
audio标签实现网页循环播放背景音乐代码实现
<!DOCTYPE html><html lang="en"><head><meta charset=“UTF-8”><meta name=“viewport” content=“width=device...原创 2021-04-23 16:21:11 · 1119 阅读 · 0 评论 -
看看大佬是如何用一行代码实现网页变灰的效果的
4月4日清明节,全国人民一起哀悼新冠肺炎牺牲烈士和逝世同胞。 清明时节雨纷纷,逝去的同胞,英雄一路走好。 网站变灰 昨天我们看到很多网站主页和内容都变成了灰色,包括按钮,图片,是如何做到的呢? 实现方式 html.gray { -webkit-fi...原创 2021-04-23 16:19:46 · 264 阅读 · 0 评论 -
一篇文章玩转GitHub-Git版本管理-进阶-GitHub多人协作开发-强烈建议收藏!
1. Git基础 1.1 版本管理 1.1.1 什么是版本管理 版本管理是一种记录文件变化的方式,以便将来查阅特定版本的文件内容。 1.1.2 人为维护文档版本的问题 文档数量多且命名不清晰导致文档版本混乱 每次编辑文档需要复制,不方便 多人同时...原创 2021-04-23 16:18:20 · 188 阅读 · 0 评论 -
Vuex概述
###今日目标1.Vuex概述2.Vuex基本使用3.使用Vuex完成todo案例###1.Vuex概述Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享使用Vuex管理数据的好处:A.能够在vuex中集中管理共享的数据,便于开发和后期进行维护B.能够高效的实现组件之间的数据共享,提高开发效率C.存储在vuex中的数据是响应式的,当数据发生改变时,...原创 2020-03-18 10:22:08 · 103 阅读 · 0 评论 -
.项目优化
###今日目标1.完成项目优化2.完成项目上线###1.项目优化实现步骤:A.生成打包报告,根据报告优化项目B.第三方库启用CDNC.Element-UI组件按需加载D.路由懒加载E.首页内容定制###2.添加进度条给项目添加进度条效果,先打开项目控制台,打开依赖,安装nprogress打开main.js,编写如下代码//导入进度条插件import NProgress ...原创 2020-03-18 10:21:23 · 114 阅读 · 0 评论 -
添加商品
###今日目标1.完成商品添加2.完成订单列表3.完成数据统计展示###1.添加商品####A.完成图片上传使用upload组件完成图片上传在element.js中引入upload组件,并注册因为upload组件进行图片上传的时候并不是使用axios发送请求所以,我们需要手动为上传图片的请求添加token,即为upload组件添加headers属性//在页面中添加upload组...原创 2020-03-18 10:20:25 · 363 阅读 · 0 评论 -
参数管理
###今日目标1.完成参数管理2.推送代码到码云3.制作商品列表页面4.制作商品添加页面###1.参数管理####A.展示动态参数可选项动态参数可选项展示及操作在获取动态参数的方法中进行处理。//将获取到的数据中的attr_vals字符串转换为数组res.data.forEach(item => { item.attr_vals = item.attr_vals ? ...原创 2020-03-18 10:19:37 · 1170 阅读 · 0 评论 -
商品分类
###今日目标1.完成商品分类2.完成参数管理###1.商品分类####A.新建分支goods_cate新建分支goods_cate并推送到码云git checkout -b goods_categit push -u origin goods_cate####B.创建子级路由创建categories子级路由组件并设置路由规则import Cate from './compon...原创 2020-03-18 10:19:01 · 308 阅读 · 0 评论 -
修改用户信息
###今日目标1.修改用户,删除用户2.推送代码到码云3.权限列表4.角色列表5.分配角色###1.修改用户信息A.为用户列表中的修改按钮绑定点击事件B.在页面中添加修改用户对话框,并修改对话框的属性C.根据id查询需要修改的用户数据//展示编辑用户的对话框async showEditDialog(id) { //发送请求根据id获取用户信息 const { ...原创 2020-03-18 10:18:17 · 149 阅读 · 0 评论 -
后台首页基本布局
###今日目标1.实现后台首页的基本布局2.实现左侧菜单栏3.实现用户列表展示4.实现添加用户###1.后台首页基本布局打开Home.vue组件,进行布局:<el-container class="home-container"> <!-- 头部区域 --> <el-header>Header<el-button type="info...原创 2020-03-18 10:17:39 · 1706 阅读 · 0 评论 -
.电商业务概述
###今日目标1.初始化项目2.基于Vue技术栈进行项目开发3.使用Vue的第三方组件进行项目开发4.理解前后端分离开发模式###1.电商业务概述客户使用的业务服务:PC端,小程序,移动web,移动app管理员使用的业务服务:PC后台管理端。PC后台管理端的功能:管理用户账号(登录,退出,用户管理,权限管理),商品管理(商品分类,分类参数,商品信息,订单),数据统计电商后台管理系...原创 2020-03-18 10:17:03 · 345 阅读 · 0 评论 -
.模块化
###今日目标1.能够了解模块化的相关规范2.了解webpack3.了解使用Vue单文件组件4.能够搭建Vue脚手架5.掌握Element-UI的使用###1.模块化的分类####A.浏览器端的模块化1).AMD(Asynchronous Module Definition,异步模块定义)代表产品为:Require.js2).CMD(Common Module Definiti...原创 2020-03-18 10:16:19 · 81 阅读 · 0 评论 -
路由
###今日目标1.能够说出什么是路由2.能够说出前端路由的实现原理3.能够使用Vue-Router实现前端路由4.能够实现嵌套路由,动态路由5.能够实现命名路由以及编程式导航6.理解并实现后台管理案例###1.路由的概念路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种...原创 2020-03-18 10:15:22 · 99 阅读 · 0 评论 -
接口调用方式
接口调用方式原生ajax基于jQuery的ajaxfetchaxios异步JavaScript的执行环境是「单线程」所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下一个,它会「阻塞」其他任务。这个任务可称为主线程异步模式可以一起执行多个任务JS中常见的异步调用定时任何ajax事件函...原创 2020-03-17 14:59:37 · 496 阅读 · 0 评论 -
组件
day03组件组件 (Component) 是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素,封装可重用的代组件注册全局注册Vue.component(‘组件名称’, { }) 第1个参数是标签名称,第2个参数是一个选项对象全局组件注册后,任何vue实例都可以用组件基础用<div id="example"> <!-- 2、 组件...原创 2020-03-17 14:53:09 · 183 阅读 · 1 评论 -
Vue常用特性
day02Vue常用特性表单基本操作获取单选框中的值通过v-model <!-- 1、 两个单选框需要同时通过v-model 双向绑定 一个值 2、 每一个单选框必须要有value属性 且value 值不能一样 3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据 ...原创 2020-03-17 14:50:17 · 108 阅读 · 0 评论 -
Vue 是什么?
day01Vue 是什么?Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合使用Vue将helloworld 渲染到页面上指令本质就是自定义属性Vue中指定都是以 v- 开头v-cloak防止页面加载时出现闪烁问题 <style type="text...原创 2020-03-17 14:45:25 · 165 阅读 · 0 评论 -
模板引擎
1. 模板引擎文档:http://aui.github.io/art-template/zh-cn/Github: https://github.com/aui/art-template1.1 Ajax 项目中存在的问题数据和HTML字符串拼接导致代码混乱,拼接容易出错,增加修改难度。业务逻辑和用户界面混合,代码不易维护。for (var i = 0; i < res...原创 2020-03-17 14:44:19 · 97 阅读 · 0 评论 -
项目简介
项目简介阿里百秀,内容管理系统,分为内容管理和内容展示两大核心功能。1. 功能模块1.1 内容管理模块功能用户登录、退出、用户增删改查文章文章管理分类分类管理评论评论管理网站设置关键字、描述、网站logo、轮播图1.2 内容展示模块功能首页导航、文章数据展示列表页根据分类显示文章列表详情页文...原创 2020-03-17 14:39:47 · 569 阅读 · 0 评论 -
1. Git基础
1. Git基础1.1 版本管理1.1.1 什么是版本管理版本管理是一种记录文件变化的方式,以便将来查阅特定版本的文件内容。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rFlDR5Tu-1584426580678)(assets/01.png)]1.1.2 人为维护文档版本的问题文档数量多且命名不清晰导致文档版本混乱每次编辑文档需要复制,不方...原创 2020-03-17 14:34:28 · 104 阅读 · 0 评论 -
ES6语法
ES6语法目标能够说出使用let关键字声明变量的特点能够使用解构赋值从数组中提取值能够说出箭头函数拥有的特性能够使用剩余参数接收剩余的函数参数能够使用拓展运算符拆分数组能够说出模板字符串拥有的特性ES6相关概念(★★)什么是ES6ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。[外链图片转存失败,源站可能有防盗链...原创 2020-03-17 14:29:26 · 298 阅读 · 0 评论 -
JavaScript高级第04天笔记
JavaScript高级第04天笔记1.正则表达式概述1.1什么是正则表达式正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉...原创 2020-03-17 14:27:42 · 108 阅读 · 0 评论 -
JavaScript高级第03天笔记
JavaScript高级第03天笔记1.函数的定义和调用1.1函数的定义方式方式1 函数声明方式 function 关键字 (命名函数)function fn(){}方式2 函数表达式(匿名函数)var fn = function(){}方式3 new Function()var f = new Function('a', 'b', 'console.log(a +...原创 2020-03-17 14:25:59 · 243 阅读 · 0 评论 -
JavaScript高级第02天笔记
JavaScript高级第02天笔记1.构造函数和原型1.1对象的三种创建方式–复习字面量方式var obj = {};new关键字var obj = new Object();构造函数方式function Person(name,age){ this.name = name; this.age = age;}var obj = new Person('...原创 2020-03-17 14:23:27 · 104 阅读 · 1 评论 -
JavaScript高级第01天笔记
JavaScript高级第01天笔记1.面向过程与面向对象1.1面向过程面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。1.2面向对象面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。1.3面向过程与面向对象对比面向过程面向对象优点性能比面向对象高,适合跟硬件联系很紧密的东西...原创 2020-03-17 14:18:48 · 148 阅读 · 0 评论 -
day03 - jQuery
day03 - jQuery学习目标:能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery 对象的拷贝方法能够说出 jQuery 多库共存的2种方法能够使用 jQuery 插件1.1. jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制,是开发人员抑郁操...原创 2020-03-17 14:16:00 · 159 阅读 · 0 评论 -
day02 - jQuery
day02 - jQuery学习目标:能够操作 jQuery 属性能够操作 jQuery 元素能够操作 jQuery 元素尺寸、位置1.1. jQuery 属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ;1.1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性,比如 元素里面的 href...原创 2020-03-17 14:14:17 · 138 阅读 · 0 评论 -
day01 - jQuery
day01 - jQuery学习目标:能够说出什么是 jQuery能够说出 jQuery 的优点能够简单使用 jQuery能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 jQuery 选择器能够操作 jQuery 样式能够写出常用的 jQuery 动画1.1. jQuery 介绍1.1.1 JavaScript 库 JavaScript库:即 li...原创 2020-03-17 14:13:38 · 215 阅读 · 0 评论 -
day07 - Web APIs
day07 - Web APIs学习目标:能够写出移动端触屏事件能够写出常见的移动端特效能够使用移动端开发插件开发移动端特效能够使用移动端开发框架开发移动端特效能够写出 sessionStorage 数据的存储以及获取能够写出 localStorage 数据的存储以及获取能够说出它们两者的区别1.1. 触屏事件1.1.1 触屏事件概述移动端浏览器兼容性较好,我们不需要考虑...原创 2020-03-17 14:03:40 · 215 阅读 · 0 评论 -
day06 - Web APIs
day06 - Web APIs学习目标:能够封装简单动画函数能够理解缓动动画的封装能够使用动画函数能够写出网页轮播图案例能够写出移动端触屏事件**1.1. **动画函数封装1.1.1 缓动效果原理缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来思路:让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。核心算法: (目标值 - 现在的位置) / 10...原创 2020-03-17 14:03:00 · 201 阅读 · 0 评论 -
day05 - Web APIs
day05 - Web APIs学习目标:能够说出常见 offset 系列属性的作用能够说出常见 client 系列属性的作用能够说出常见 scroll 系列属性的作用能够封装简单动画函数**1.1. **元素偏移量 offset 系列1.1.1 offset 概述offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。...原创 2020-03-17 13:56:21 · 211 阅读 · 0 评论 -
day04 - Web APIs
day04 - Web APIs学习目标:能够说出常用的3-5个键盘事件能够知道如何获取当前键盘按下的是哪个键能够知道浏览器的顶级对象window能够使用window.onload事件能够使用window.onresize事件能够说出两种定时器的区别能够使用location对象的href属性完成页面之间的跳转能够使用location对象获取url中的参数部分能够使用histo...原创 2020-03-17 13:52:20 · 234 阅读 · 0 评论 -
day03 - Web APIs
day03 - Web APIs学习目标:能够使用removeChild()方法删除节点能够完成动态生成表格案例能够使用传统方式和监听方式给元素注册事件能够说出事件流执行的三个阶段能够在事件处理函数中获取事件对象能够使用事件对象取消默认行为能够使用事件对象阻止事件冒泡能够使用事件对象获取鼠标的位置能够完成跟随鼠标的天使案例1.1. 节点操作1.1.1 删除节点[外链图...原创 2020-03-17 13:47:55 · 203 阅读 · 0 评论