![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html
文章平均质量分 76
奶茶丶
这个作者很懒,什么都没留下…
展开
-
计算机网络-Cookie
在经历一场笔试后,才知道作为一个web前端开发人员,计算机网络和算法也是要有点知识储备的。下面给大家分享一下 我整理的Cookie。在说Cookie的时候 不得不先来了解下HTTP协议HTTP服务器在向客户发送被请求的文件后,不保存任何关于该客户的状态信息。假设某个客户在短时间内连续两次请求同一个对象,HTTP服务器并不会因为刚刚为该 客户提供了该对象就不再做出反应,而是重新发送该对象,服务器已经完全忘记了之前做过的事情,因为HTTP服务器不会保存关于客户的任何信息,所以HTTP是一种无状态协议原创 2022-04-13 14:36:21 · 2949 阅读 · 1 评论 -
项目总结-项目冲刺三
项目预期计划和现实进展:我所负责的模块是:对用户故事的添加、将添加的用户故事移入当前迭代、对用户故事下的任务进行状态的拖拽、实时更新我们的燃尽图、以及对关卡查看的权限问题总的来说,这个冲刺上手比较快,有了一些经验的积累,...原创 2022-03-08 08:56:16 · 136 阅读 · 0 评论 -
项目总计-项目冲刺二
项目预期计划和现实进展:我所负责的该页面是会员页面,主要实现功能:ul设计 学科阶段关卡的初次展示 查看关卡的信息 开启一个关卡 完成一个关卡(返回关卡的实际完成天数) 关闭一个关卡 以及对关卡的排序(进行-逾期-未开始-已完成-关闭) 操作部分-蓝色可点、灰色不可点技术:组件结合element-UI 很多的子页面是通过路由跳转的 当开启一个关卡的时候,页面局部刷新操作,是通过$nextTick钩子完成的 sort方法对关卡进行排序在经历第一个项目冲.原创 2022-02-08 13:39:44 · 191 阅读 · 0 评论 -
项目总结-项目冲刺一
项目预期计划和现实进展:此项目是一个基于vue的禅道管理系统,主要技术就是vue框架,主要实现功能:登录系统ui设计 实现密码+邮箱 或 手机号+邮箱的登录 利用路由守卫,实现单页面不能访问 利用token实现记住密码的功能 向邮箱发送验证码的功能遇到的技术问题:在发起ajax请求时,由于后端设置请求头的问题,前端在url携带参数的时候是有一定要求的,这里用到的一个新的技术qs库qs.parse将 get 参数转为JSON对象||qs.stringify将...原创 2022-02-08 13:39:13 · 688 阅读 · 0 评论 -
JavaScript是基于对象的编程语言
为什么说javascript的一切皆为对象, 首先我们先知道什么是对象?在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。大家应该对Object并不陌生它就叫对象 它是用来定义的对象,本身没有固定的属性和方法,开发者定义了才有使用new运算符就可以创建一个对象,创建之后可以为其添加属性和方法:let person = new Object()person.name = '张三'person.age = 18.原创 2022-01-22 18:05:32 · 558 阅读 · 0 评论 -
登录重定向问题
路由拦截器的路径和登录成功后路由重定向发生冲突导致在路由跳转的时候把错误抛出this.$router.push({}).catch(()=>{})main.jsconst originalPush = Router.prototype.pushRouter.prototype.push = function push(location, onResolve, onReject) { if (onResolve || onReject) return originalPus..原创 2022-01-07 12:51:57 · 767 阅读 · 0 评论 -
前端路由的实现方式
抽点时间学点知识,说不一定面试就问到了呢,机会是留给有准备的人哒前端路由主要应用在SPA(但页面开发),在不刷新路径的情况下,根据不同的URL来显示不同的组件或者内容方法一、hash值+onhashchange事件...原创 2021-12-31 09:19:31 · 112 阅读 · 1 评论 -
Vue3-拉开序幕setup
对比Vue2.0,Vue3最不一样的就是data()变成了setup()setup是Vue3中一个新的配置项,值为一个函数组件中所用的:数据、方法等均要配置在setup中setup函数的两种返回值:1、若要返回一个对象,则对象中的属性、方法、在模版中均可以直接使用2、若返回一个渲染函数:则可以自定义渲染内容(只做一个了解)<template> <h1>学生信息</h1> <h2>姓名:{{ name }}</h2>原创 2021-12-31 08:43:54 · 397 阅读 · 0 评论 -
vuex的知识梳理
目录一、概念二、使用步骤三、四个map方法的使用---------多组件共享数据3.1、mapState 方法3.2、mapGetters 方法3.3、mapMutations方法3.4、mapActions方法四、模块化加命名空间一、概念什么是vuex:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信什么时候使用Vuex:...原创 2021-12-21 09:50:35 · 389 阅读 · 7 评论 -
webpack入门
一、什么是webpackWebpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源二、五个核心概念Entry 入口指示 Webpack以那个文件为入口起点开始打包,分析构建内部依赖图 Output 输出指示webpack打包后的资源bundles输出到哪里去,以及如何命名 Loader 让webpack能够去处理哪些非js文件 Plugins 插件可以用于执行范围更广的任务,插件的范围包括:从打包优化和压缩。一直到重新定义原创 2021-12-24 14:30:58 · 509 阅读 · 1 评论 -
vue-路由的知识总结
目录一、概念二、使用步骤三、路由嵌套四、路由命名五、query参数 和 params参数5.1、路由的query参数5.2、路由的params参数六、路由的params配置6.1、方法一6.2、方法二6.2、方法三七、两个新的生命周期钩子(路由)八、路由守卫8.1、全局守卫8.2、独享守卫8.3、组件内守卫一、概念路由用于设定访问路径,并将路径和组件映射起来一般用Vue做的都是单页应用,只有一个主页面index.ht...原创 2021-12-14 09:26:50 · 3148 阅读 · 22 评论 -
Vue-全局事件总线/消息订阅与发布
前面很详细的介绍了子组件与父组件通信 以及 父组件如何与子组件通信下面将给大家介绍两种组件间通信的方式,适用于任意组件间通信原创 2021-12-09 16:20:07 · 917 阅读 · 12 评论 -
Vue-组件自定义事件
父组件使用props传递数据给子组件,子组件给父组件通信除了通过父组件提前给子组件传递一个函数,子组件使用该函数,利用传递参数的形式给父组件传值,回调在父组件中,这里再提供一种方法:Vue的自定义事件,本文将详细介绍Vue自定义事件使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)绑定自定义事件的方式 ...原创 2021-12-07 11:12:34 · 1784 阅读 · 27 评论 -
基于Vue组件实现TodoList
实现功能:1、将已有的任务渲染到页面2、在输入框中输入内容后按enter键,即可把内容添加到下面的列表中(如果内容为空则不添加)3、动态计算有几个已完成的任务4、点击复选框,实现选中或不选中效果(即完成或未完成)5、鼠标移入列表,会出现一个删除按钮,点击删除按钮即可删除该列表所拆分的组件有:管理所有的组件App[ Header组件、List组件[Item组件]、Footer组件]功能一:将已有的任务渲染到页面...原创 2021-12-03 17:41:45 · 1961 阅读 · 9 评论 -
Vue与VueComponent的关系
下面这个案例 复习我们之前学过的原型链的知识点 // 定义一个构造函数 function Demo() { this.a = 1 this.b = 2 } //创建一个Demo实例对象 const d = new Demo() console.log(Demo.prototype); //显示原型属性 console.log(d.__pro...原创 2021-12-02 14:39:09 · 2178 阅读 · 18 评论 -
Vue组件
???? 组件事什么组件事可复用的Vue实例,把一些公共的模块抽取出来,然后写成单独的工具组件或者页面,在需要的页面中就直接引入即可,实现应用中局部功能代码和资源的集合当应用中的功能都是多组件的方式来编写的,那这个应用就是一个组件话的应用????今天就来聊聊单文件组件:单文件组件就是一个文件中包含n个组件???? Vue中使用组件的三大步骤:1、定义组件(创建组件)注意点:使用Vue.extend(options)创建 el不要写,为什么? ——— 最终所有的组件都要经过原创 2021-12-03 09:26:19 · 320 阅读 · 3 评论 -
vue-生命周期
Vue实例从创建到销毁的过程,就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。生命周期又名:什么生命周期回调函数、生命周期函数、生命周期钩子通俗的来讲生命周期是:Vue在关键时刻帮我们调用一些特殊名称的函数生命周期函数中的this指向是vm或组件实例对象主要的生命周期函数分类:创建期间的生命周期函数: ❤️ beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性...原创 2021-12-01 17:14:13 · 200 阅读 · 12 评论 -
Vue---监视数据、表单、过滤器
Vue---监视数据、表单、过滤器原创 2021-11-30 10:08:33 · 477 阅读 · 19 评论 -
vue-计算属性和监视属性
计算属性 - computed定义:要用的属性不存在,要通过已有的属性计算得来的原理:底层借助了Object.defineproperty方法提供的getter和setter如下案例:通过以下的姓和名,计算得到全名方法一:可以直接使用 methods 函数的返回式实现其功能<body> <div id="root"> 姓:<input type="text" v-model="firstName"><br /&...原创 2021-11-27 10:21:37 · 201 阅读 · 12 评论 -
Git分支
几乎每一种版本控制系统都以某种形式支持分支。使用分支意味着你可以从开发主线上分离开来,然后在不影响主线的同时继续工作。在很多版本控制系统中,这是个昂贵的过程,常常需要创建一个源代码目录的完整副本,对大型项目来说会花费很长时间。master主分支在初始化本地Git仓库的时候,Git默认已经帮我们创建了一个名字叫做master的分支不再主分支上修改代码 而是在master创建的分支上修改代码,将修改好的代码合并到主分支上------- 功能分支 ---------专门用来开发新功能的分支原创 2021-11-26 14:30:13 · 241 阅读 · 11 评论 -
Vue基础学习
什么是Vue一套用于构建用户界面的渐进式JS框架Vue的特点采用组件化模式,提高代码复用率、且让代码更好维护 声明式编码,让编码人员无需直接操作DOM、提高开发效率 也就是从命令式编码编程声明式编码 使用虚拟DOM+优秀的Diff算法,尽量复用DOM结点Vue的基本使用引入Vue <script type="text/javascript" src="../js/vue.js"></script>准备一个容器 <div id原创 2021-11-24 11:33:40 · 1136 阅读 · 12 评论 -
Git入门起步
一、关于版本控制1.1、概念版本控制软件:是一个用来记录文件变化,以便将来查阅特定版本修订情况的系统,因此有时也叫做“版本控制系统”通俗的理解:把手工管理文件版本的方式,改为由软件管理文件的版本;这个负责管理文件版本的软件,叫做“版本控制软件”1.2、好处操作方便 易于对比 易于回溯 不易丢失 协作方便1.3、分类本地版本控制系统 【单机运行】采用某种简单的数据库来记录文件的历次更新差异集中化的版本控制系统 【联网运行】基于服务器、客户端的...原创 2021-11-23 14:36:31 · 884 阅读 · 22 评论 -
mac系统 SSH配置
在学习Git将本地文件push到远程服务器的库,由于学习资料都是教windows系统如何配置,这里分享下mac系统如何快速配置SSH,git是分布式的代码管理工具,基于SSH协议。ssh的作用就是为了不用每次都输入账号和密码。没有github账号的,先注册一下https://github.com/一、github的ssh配置如下:在终端中设置git的user name 和email:git config --global user.name "用户名"git config --.原创 2021-11-22 10:18:59 · 12045 阅读 · 23 评论 -
js中的原型链
什么是原型:原型指的就是原型对象,至于是谁的原型对象,需要靠函数的prototype属性和示例的_proto_属性来区别什么是原型链:指从一个实例对象开始往上找,这个实例对象的_proto_属性所指向的则是这个实例对象的原型对象,如果obj表示这个实例,则原型对象表示为obj._proto_。这个原型对象顾名思义也是一个对象,而且它也有上一级的原型对象,相对于上一级原型对象而言,它是一个实例对象,那么它拥有_proto_属性,它的_proto_属性也指向它的原型对象,一直到Object.prot原创 2021-11-20 16:38:59 · 1268 阅读 · 7 评论 -
封装一个函数获取和修改属性
最近在做一个前后端交互的项目,根据不同的需求获取页面不同元素的属性,根据属性修改不同的样式,虽然我们有获取属性和修改属性的方法,但是每次都要写一遍,学前端的同学应该深有体会吧,当页面元素过多时,挨个的去获取非常的麻烦,别急,众多方法中总有最简单的那一个。用一个函数将其功能封装起来, // obj是哪个对象 attr哪个属性 function getStyle(obj, attr) { if (obj.currentStyle) { ...原创 2021-11-15 10:17:32 · 1361 阅读 · 13 评论 -
HTTP相关知识
作为一名前端开发人员,HTTP是必须要储备的知识,这里做了一个小小的总结,让你有种恍然大悟的感觉什么是通信协议通信协议是指通信的双方完成通信所必须遵循的规则和约定通俗的理解:通信双方采用约定好的格式来发送和接受消息,这钟事先约定好的通信格式,就叫做通信协议什么是HTTP协议HTTP协议即超文本传输协议,他规定了客服端与服务器之间进行网页传输时所必须遵循的传输格式客服端要以HTTP协议要求的格式把数据提交到服务器 服务器要把以HTTP协议要求的格式把内容响应给客服端..原创 2021-11-14 13:53:56 · 2592 阅读 · 8 评论 -
基于模版引擎实现-淘宝搜索案例
先来看看效果图:原创 2021-11-10 18:57:19 · 660 阅读 · 13 评论 -
你真的了解input表单吗?---采集用户输入的信息
一、什么是表单表单在网页中主要负责数据采集功能,HTML中的<form>标签,就是用于采集用户输入的信息,并通过<form>标签的提交操作,把采集到的信息提交到服务器端进行处理表单的组成部分:表单标签 :<form></form> 表单域 : 包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等 表单按钮 :buttom...原创 2021-11-11 14:52:59 · 1915 阅读 · 9 评论 -
前后端交互的必备知识
前言在前面学习的内容中,虽然我们能初步实现获取数据和渲染数据到我们的页面中,但是像我们所做的echarts数据图,里面的数据都是我们自己提前准备好的,非常的麻烦,我们如何将后台准备的数据渲染到我们的页面呢,在学习Ajax前,先来了解一些基础知识服务器概念:上网过程中,负责存放和对外提供资源的电脑,叫做服务器服务器对外提供了哪些资源?文字内容、图片、视频、数据【股票数据、各行业排行榜】数据则是网页的灵魂我们来看看网页中如何请求数据--------这里只是简单的提下,具体用法就期待博主原创 2021-11-17 17:25:29 · 1070 阅读 · 2 评论 -
实现网页与服务器之间的数据交互
彼晨风,郁彼北林。未见君子,忧心钦钦通过一些方法能让我们轻松实现网页与服务器之间的数据交互 ,在学习这章节的同学们,可能会有点懵,方法很多,不急不急,今天就让我来为大家总结总结,同样都是打工人,但是你好我好才是真的好!一、Ajax1.1、什么是Ajax?即异步的JavaScript和XML,是一种用于创建快速动态网页的技术;传统的页面(不使用Ajax)如果需要更新内容,必须重加载整个网页面;使用Ajax则不需要加...原创 2021-11-06 10:07:38 · 4069 阅读 · 29 评论 -
基于Ajax的聊天机器人
????️ 哈喽!大家好呀在初步进入Ajax学习 就忍不住给大家分享今天的劳动成果啦先来看看效果图:功能实现:点击发送按钮事件 将用户输入的内容渲染到页面中 点击回车键将表单的内容渲染到页面中 获取机器人的内容渲染到页面中 播放机器人的内容先来看看项目的总体结构引入相关的文件:html框架比较简单 <div class="wrap"> <!-- 头部 Header 区域 --> &...原创 2021-11-03 16:16:00 · 297 阅读 · 11 评论 -
带你看透闭包的本质
一、概念闭包(closure):指有权访问另一个函数作用域中变量的函数;简单理解就是,一个作用域可以访问另一个函数内部的局部变量闭包函数:声明在一个函数中的函数,叫做闭包函数。闭包:内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回(寿命终结)了之后。闭包的主要作用是:延伸了变量的作用范围二、特点 让外部访问函数内部变量成为可能 局部变量会常驻在内存中 可以避免使用全局变量,防止全局变量污染 会造成内存泄漏(有一块内存..原创 2021-10-28 11:10:51 · 220 阅读 · 12 评论 -
再不学ES6你就out啦
目录一、概念二、声明变量 let var const 的区别2.1let 关键字声明变量2.2、const关键字声明变量2.3 声明变量的总结三、解构赋值3.1数组解构3.2对象解构四、箭头函数五、Array的扩展运算符5.1、扩张运算符可以运用于合并数组5.2、将伪数组或可遍历对象转换为真正的数组5.3、find()方法5.4、findIndex()方法5.5、includes方法六、模版字符串七、内置对象扩展八、新的数...原创 2021-10-29 08:39:00 · 3760 阅读 · 32 评论 -
常用正则表达式
一、概念正则表达式是用于匹配字符串中字符组合的模式,正则表达式也是对象使用场景:用户名表单只能输入英文字母、数字或者下划线,昵称输入框可以输入中文(匹配) 还常用于过滤页面内容中的一些敏感词(替换),比如替换成*号 从字符串中获取我们想要的特定部分(提取),页面搜索时二、创建方法一:通过调用RegExp对象的构造函数创建var 变量名 = new RegExp(/表达式/) // 方法一 var regexp = new RegExp(/...原创 2021-10-29 17:15:37 · 990 阅读 · 1 评论 -
基于js+echarts实现数据可视化
本项目中使用的是echarts图表库,Echarts提供了常规的折线图、柱状图、散点图、饼图、k线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。一、效果展示图二、目录结构...原创 2021-10-22 08:48:14 · 11458 阅读 · 35 评论 -
ToDoList你值得拥有 ⛽️
项目介绍:ToDoList无须注册即可使用,数据存储在用户浏览器的html5本地数据库里,是最简单最安全的待办事项列表应用!,这个项目有很多细节的地方,比如如何存储数据到本地、页面刷新如何让数据实时更新、存储数据的格式。这个是一个很典型的案例,前端的同学要好好的掌握,可以锻炼逻辑思维项目效果展示:功能介绍:在表单里面输入内容,添加到正在进行里面 根据表单里面的复选框的状态,为true时,就存储到正在进行里面;为false时,就存储到已经完成里面。 右上角数字是实时记录里面有多少天内.原创 2021-10-18 16:52:37 · 656 阅读 · 19 评论 -
jQuery基础操作篇
一、jQuery属性操作设置或获取元素固有属性值 prop()所谓元素固有属性就是元素本身自带的属性,比如<a>元素里面的href,比如<input>元素里面的type原创 2021-10-13 16:07:33 · 661 阅读 · 21 评论 -
还在为一个一个敲代码烦恼❓-jQuery(1) ️
前言在学习javascript后,有很多同学认为大量的js代码非常的繁琐,做一个轮播图都的自己一个一个敲。效率太低啦。好消息好消息,今天给大家讲解一个期待已久的jquery在讲解前呢,给大家先做一个知识的铺垫:javascript库 :即library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中封装了很多预先定义好的函数在里面,比如动画animate、hide、show、获取元素等。简单理解:就是一个js文件,里面对我们原生js代码进行了封装,存放到里面原创 2021-10-13 14:35:03 · 152 阅读 · 14 评论 -
贪吃蛇-看谁能赢
跟我一起玩玩儿小游戏吧html和css框架很简单 为了节约时间就不写在这里啦,直接带大家康康我的js吧~1、定义游戏中需要的变量// sw和sh表示蛇和食物的高宽var sw = 20;var sh = 20;//tr和td表示行和列 整个盒子是600*600大小的var tr = 30;var td = 30;2、定义由行和列控制的画布为什么需要定义画布呢?定义画布能够更加方便的存储蛇和食物的坐标,用来判断蛇头碰到自己和碰到食物以及碰到墙的操作。比如..原创 2021-10-09 19:12:45 · 675 阅读 · 0 评论 -
我踩过的坑 可是填平了哟 那你呢?
目录一、实现导航栏中“下载App“和“购物车”的功能二、实现侧边栏的商品显示的功能三、轮播图效果四、实现登录功能五、扫码登录中 “二维码失效”和“切换的log”的功能小米官网的部分功能效果一、实现导航栏中“下载App“和“购物车”的功能效果图展示:实现功能介绍:当我们鼠标移动到下载app上面 缓慢的出现log图标,注意并不是直接用显示、隐藏那么简单,logo的出现需要滚动的效果思路:在当前链接里面添加一个盒子 使用定位将盒子放在该链接的下面 鼠标触摸的时.原创 2021-09-30 16:16:38 · 196 阅读 · 12 评论