- 博客(62)
- 收藏
- 关注
RSS订阅原创 WebScoket 的原理和作用
一、WebScoket 的定义 WebScoket 是一种在单个 TCP 连接上进行全双工通信的协议。与 HTTP 不同，它以 ws:// 或 wss:// 开头（分别表示 WebScoket 和安全 WebScoket 连接）。一旦通信连接建立和连接打开后，消息交换将以双向模式进行，不必在浏览器（客户端）发送 request 之后服务器才能发送信息到浏览器，这时候服务器有主动权，可以随时发消息给浏览器（客户端），客户端和服务器之间的连接也会持续存在，直到其中任何一方（客户端或服务器）宕掉或主动关闭连接，
2022-04-29 15:36:15
3336
2
原创 uni-app 中实现位置授权以及打开地图选择位置功能
最近在项目中遇到一个要用户授权位置且可以用户自己选择位置的功能，看起来好像很难，其实并不难，我在网上看了一些优秀博主的博客，只要跟着步骤一步步来就能实现，下面是我在实现该功能后做的一次总结，希望能帮到更多的小伙伴~ 一、实现位置授权功能 实现的效果图： 实现步骤： 1. 登录小程序官网获取AppID(用自己的小程序账号登录): [开发 ->开发设置 -> 复制AppID] 2. 注册并登录腾讯地图api获取key: [控制台->我的应用->创建应用->..
2022-04-22 09:04:03
7148
5
原创 用 el-tree 实现 el-table 效果
有时候我们可能要实现如下这种效果： 光用 el-table 实现不了这种层级效果，所以博主就在 el-tree 的基础上进行了一点点改造 template <div class="tree-box"> <div class="tree-nav"> <div class="item">权限名称</div> <div class="item">权限描述</div> &
2022-04-15 14:50:23
2144
1
原创 Vue 中 Axios 的封装和接口管理
一、Axios 的封装 在 Vue 项目中，和后台进行数据交互是频繁且不可或缺的，刚开始没进行 Axios 封装的时候，每次请求后台数据都是写的完整的路径，特别长，尤其是基准地址，每次都要复制一遍加在前面，冗余特别大。封装完 Axios 后，调用接口就简短多了，如果后期出现基准地址的改变，只需要在配置中更改一次即可。 安装 Axios npm install axios 引入 我们先在 src 文件夹下创建一个 utils 文件，再在该文件夹下创一个 requery.js 文件 requ.
2022-03-21 14:47:32
1424
25
原创 Vue + elementUi 组件
一、树形控件(el-tree) + Icon 图标实现带图标的菜单栏 1. 页面布局 <template> <!-- 菜单信息 --> <nav> <el-tree class="filter-tree" :data="items" node-key="path" :props="defaultProps"
2022-03-12 08:52:32
1427
原创 项目冲刺二总结
冲刺二相较于冲刺一，还是有进步的。可能是因为全身心投入项目了，即使一个 bug 不会或者弄了很久，但基本当天的任务也都能完成。在全员的积极配合下，顺利的完成了冲刺二所有的任务。 在冲刺二里，我的任务是实现管理员界面对学科、阶段、项目的增删查改。其实增删查改功能的实现花不了多少时间，就是调个接口就能实现的事，但是我居然整整花了十天时间去完成这个功能！毫不意外，其中将近有一半多的时间在设计页面布局...最终我选择了用现成的 element Ui 组件库(但是页面看起来还是很平淡，噢，那一定不会是最终页面)，真
2022-02-07 12:51:10
594
原创 项目冲刺一总结
进入项目组后，可以说是压力不减反增，不仅每天要把握好时间，还要有成果。因为冲刺一是边学习边做项目，而且当时把重点也还是放在学习上，最后导致在规定时间内没有完成对应的任务，所以冲刺一的结果不算是理想的，但是也是收获了很多，为接下来的冲刺二做更好的准备。做了以下总结???? 遇到的问题： 前端： 边看边学导致实际做项目的时间不多 技术不熟练，磕磕绊绊，在解决 bug 的路上浪费的时间比较多 时间分配还有待提高 后端： 服务器问题 下一个冲刺要注意的： 做一个需求一次性做到底（若存在依赖，先完成被依
2022-01-25 22:16:19
989
原创 JavaScript 的内置对象
今天给大家分享一波 JavaScript 的内置对象以及比较常用的对象的属性和方法(ง ˙o˙)ว JavaScript 中的所有事物都是对象：Number、String、Array、Object、Function 等等 其中 Object 是所有对象的父对象 在 JavaScript 中，对象是拥有属性和方法的数据 一开始接触对象的时候，我学的也不是很好，当时觉得对象好复杂，老是记不住定义对象的几种方法以及对象的使用，基本靠死记硬背。果然后面再用的时候忘得一干二净。不过对象和数组对象是...
2022-01-21 18:24:26
1233
2
原创 Vue3 技术分享
Vue3 生命周期 Vue3 与 Vue2 的生命周期没有很大的不同 Vue3 与 Vue2 对比： 总结： 其中 Composition API （通过组合式API的形式去使用生命周期钩子）即 on 打头的 都写在 setup() 函数中的 原来的不变的（通过配置项的形式使用生命周期钩子）可以写在 setup() 并列外面 这两种方式二选一，如果都存在，则 setup 中的(即 on 开头的) 会比写在 setup() 外面的先执行 CompositionAPI 的优势：...
2022-01-10 11:19:43
1276
2
原创 框架学习之 Vue3
前面我们学习了 Vue2 相关的知识，Vue3 是在 Vue2 基础上的改进，虽然现在的主流还是 Vue2，但是也不妨碍我们先学习 Vue3 Vue3 简介 1. Vue3 新特性 源码的升级 使用 Proxy 代替 defineProperty 实现响应式 重写虚拟 DOM 的实现和 Tree-Shaking 新的特性 1.Composition API(组合 API) setup 配置 ref 与 reactive watch 与 watchEffec..
2021-12-31 11:46:41
909
14
原创 Vue之路由（下）
在这篇博客中，我主要给大家分享路由中的路由守卫 路由守卫的作用：对路由进行权限控制 分类：全局守卫、独享守卫、组件内守卫 全局前置_路由守卫 写在配置路由的 index.js 文件中 //全局前置路由守卫——初始化的时候被调用、每次路由切换之前被调用 router.beforeEach((to, from, next) => { console.log(to, from); if (to.meta.isAuth) { //判断是否需要鉴权 if (l..
2021-12-23 16:34:44
683
10
原创 Vue之路由（上）
路由的简介 vue-router 的理解 vue 的一个插件库，专门用来实现 SPA 应用 对 SPA 应用的理解 单页面 Web 应用（single page web application，SPA） 整个应用只有一个完整的页面 点击页面中的导航链接不会刷新页面，只会做页面的局部更新 数据需要通过 ajax 请求获取 什么是路由？ 一个路由就是一组映射关系（key-value） key 为路径，value 可能是 function 或 component 路由分类 .
2021-12-21 15:12:02
592
18
原创 Vue之Vuex的使用
目录 Vuex 简介 Getters 配置项 Vuex 的辅助函数 1.mapState 与 mapGetters 2.mapMutations 与 mapActions Vuex 模块化 + namespace（命名空间） 总结 Vuex 简介 1. 概念 在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间的通信 2. 使用场景 多个组件依赖于同一...
2021-12-15 08:43:30
2425
35
原创 Vue之动画和过渡
好玩的又来了~ 动画 使用 <transition> 包裹要做动画的元素 在当前组件的 style 标签中配置动画效果 <template> <!-- 动画 --> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition appear> <h1 v-show="isShow"
2021-12-14 09:10:42
474
5
原创 Vue之全局事件总线和消息订阅与发布
之前我们实现了子组件向父组件传递数据，很明显，这是不够的，看完这篇博客，无论哪两个组件之间传递和接收数据都没有问题！ 全局事件总线（适用于任意组件间通信） 原理：（看图理解） 主要就是通过往 x 身上放事件，然后事件的回调要放在想要获取数据的组件身上，谁要传数据就调用 x 身上对应的事件并往里面存数据就可以了，相当于一个中间商（哎，不得不说，它一出生就被利用了） 当然不是谁都能但此大任的，x 需要具备两个条件： 1. 所有组件都可以看到 2. x 身上有 $on 、$off 、$emit
2021-12-12 16:14:44
1767
11
原创 Vue之组件自定义事件的绑定和解绑
不知道小伙伴们还记不记得在用 Vue 构建 TodoList 案例的博客中，我们有涉及到要从子组件中把数据传递给父组件，当时我用的方法是，让父组件给子组件传递一个函数，然后子组件把要传过来的数据放在那个函数中，这样父组件就可以拿到数据了。当然方法不止这一种，这不，博主又学到新方法了，迫不及待给你们分享。 一种组件间通信的方式，适用于：子组件 ===> 父组件 使用场景：A 是父组件，B 是子组件，B 想给 A 传数据，那么就要在 A 中给 B 绑定自定义事件（事件的回调在 A 中） 组件自定义事
2021-12-09 11:24:53
2857
13
原创 Vue 组件之单文件组件
因为在前一篇讲了组件的相关知识点，所以这篇博客就不讲了，如果不知道的小伙伴先去看前一篇哟，这篇博客直接步入主题，讲单文件组件 单文件组件：一个文件中只包含有1个组件 每一个模块都有属于自己的 名字.vue 文件，里面配置属于模块的 <template>、<script>、<style>，配置完后然后再创建一个 App.vue 里面用来管理所有的组件，后创建 main.js 用来管理 App ，最后！创建 html 文件 把 main.js 引入即可 ...
2021-12-08 08:38:22
718
4
原创 Vue 组件之非单文件组件
非单文件组件：一个文件中包含有 n 个组件 一、组件 组件的定义——实现应用中局部功能代码和资源的集合 组件： 理解：用来实现局部（特定）功能效果的代码集（html/css/js...） 为什么：一个界面的功能很复杂 作用：复用编码，简化项目编程，提高运行效率 组件化：当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用 模块化：当应用中的 js 都以模块来缩写的，那这个应用就是一个模块化的应用（相当于把一个.js文件分成多个.js文件） 二、Vue 中...
2021-12-05 19:05:45
2119
8
原创 用 Vue 构建 TodoList 案例
目录 一、构思组件 二、布置静态页面 三、功能实现 1. MyHeader.vue 组件 2. MyList.vue 组件 3. MyItem.vue 组件 4. MyFooter.vue 组件 5. App.vue 组件 四、总结 这是学 Vue 来做的第一个比较完整的案例，可以说是前面知识点的验收阶段，不得不说，边学边忘，果然还是靠练习。怎么说，用Vue 框架实现 TodoList 的思路和以前操作 Dom 元素时做的有异曲同工之妙，但是...
2021-12-03 11:10:43
3050
20
原创 Vue 生命周期
生命周期： 又名：生命周期回调函数、生命周期函数、生命周期钩子 是什么：Vue 在关键时刻帮我们调用一些特殊名称的函数 生命周期函数的名字不可更改，但函数的具体内容式程序员根据需求编写的 生命周期函数中的 this 指向的是 vm 或 组件实例对象 Vue 生命周期???? 如果你要开一个定时器并且在另一个Vue函数中停止，那你可以用 this.timer 作为定时器名字，即创建 Vue.timer 对象，用于存放定时器，另一处使用也同理. 注意事项： 不要在before...
2021-12-01 09:17:32
1637
22
原创 Vue 指令（内置+自定义）
一、v-text 指令 1. 作用： 向其所在的节点中渲染文本内容 2. 与插值语法的区别： v-text 会替换掉节点中的内容，{{xx}} 则不会，意思就是用了 v-text 之后，再在标签中间写内容就没有意义了，因为会被替换掉 ，而且如果 v-text 中的内容里面写了标签，它也当字符，不支持结构的解析，所以这种方法少用，不灵活 <body> <div id="root"> <div v-text="name">你好</di..
2021-11-30 09:17:25
1203
22
原创 Vue 框架学习之计算属性监视属性
计算属性 1. 定义：要用的属性不存在(不需要在 data 中定义)，要通过已有属性计算得来 2. 原理：底层借助了 Object.defineproperty 方法提供的 getter 和 setter 3. get 函数什么时候执行？ （1）初次读取时会执行一次 （2）当数据发生改变时会被再次调用 4. 优势：与 methods 实现相比，内部有缓存机制（复用），效率更高，调式方便 5. 备注： （1）计算属性最终会出现在 vm 上，直接读取使用即...
2021-11-27 09:47:09
900
26
原创 用 Vue 实现数据绑定和数据代理
Vue 是一套用于构建用户界面的渐进式 JavaScript 框架 Vue 模板语法 Vue模板语法有2大类：1. 插值语法： 功能： 用于解析标签体内容 写法：{{xxx}}， xxx是 js 表达式，且可以直接读取到 data 中的所有属性 <body> <div id="root"> <h1>Hellow, {{name}}</h1> </div> <script> Vue.co...
2021-11-26 10:27:21
1566
48
原创 为什么分支这么重要
什么是分支？ 学会分支能让你体验事半功倍的感觉！ 分支在实际开发中的作用 master 主分支 功能分支 主分支和功能分支的区别： 主分支会一直存在，而功能分支是在需要的时候创建，合并后就消失了，存在时间不长 查看分支列表 通过 git branch 命令查看 Git 仓库中所有的分支列表，记住！分支前面的 * 表示当前所处的分支 创建新分支 git branch 分支名字 重点：基于当前分支创建一个新分支，即使创建完了还是处于当前分支，并不会...
2021-11-25 09:43:11
999
32
原创 快速上手 github
一、开源 在分享github 之前，我来问问大家，你们知道什么是开源吗？ 什么是开源许可协议？ 开源并不意味着完全没有限制，为了 限制使用者的使用范围和保护作者的权力，每个开源项目都应该遵守开源许可协议（Open Source License） 5种常见的开源许可协议???? 为什么要拥抱开源？ 开源的核心思想是 “我为人人，人人为我”，人们越来越喜欢开源大致是出于以下3个原因： ① 开源给使用者更多的控制权 ② 开源让学习变得容易 ③ 开源才有真正的安全 开源是软件开发领域.
2021-11-24 10:15:37
1911
24
原创 教你版本控制软件git的使用
目录 一、版本控制软件的重要性 二、Git 基础概念 Git 特性的具体分析???? Git 中的三个区域 Git 中的三种状态 Git 的工作流程 三、安装并配置 Git 四、Git 的基本操作一 五、Git 的基本操作二 一、版本控制软件的重要性 在分享git之前我先来说说为什么要用git，它是什么？它有什么好处呢？知己知彼才能百战百胜。 每个人的电脑里多多少少都会有文件，当你创建好几个作用相同的但内容稍有更改的文件的时候，是不是经常会在后面加xxx1,x...
2021-11-21 20:26:01
1216
28
原创 npm是什么？yarn又是什么？
一、什么是npm npm(全称Node Package Manager,即 node 包管理器) 是Node.js默认的、以JavaScript编写的软件包管理系统 npm来分享和使用代码已经成了前端的标配 官网： https://www.npmjs.com 拥有超过一百万个软件包，是世界上最大的软件注册表 安装完毕node后，会默认安装好npm npm本身也是基于Node.js 开发的软件 下载：http://Node:http://nodejs.cn 因为npm默认是国外地址下载，所
2021-11-19 09:07:08
3606
17
原创 怕自己注意力不集中？来做一个属于自己的番茄闹钟把
首先 虽然这第一步不需要什么技术，但是也是非常重要的，那就是找一个好看的背景！你想啊，如果你做的闹钟外观看起来不怎么样或者说是你不喜欢的样式，那你会去用吗？（反正如果是我，我可能做完就放在那不会再打开了）所以，先不要想要去怎么构思代码，找背景才是关键！（我是找了好久，勉强找了一个能看的，简约且又像闹钟）给你们瞅瞅（emmm...不要吐槽！不要吐槽！） 图片找好了那就要开始布局了，想想你的倒计时要放在哪里，以及时长的选择还有一些功能键的位置，因为我选的图片正好是居中放置的，所以其他的功能键也居中放..
2021-11-17 08:43:23
1046
33
原创 HTTP 协议详细分析
目录 一、HTTP协议 1. 什么是通信 2. 什么是通信协议 3. 什么是HTTP协议 二、HTTP请求消息 三、HTTP响应 四、HTTP响应状态码 1. HTTP请求方法 2. HTTP响应状态码 3. 状态码的组成及分类 一、HTTP协议 1. 什么是通信 通信，就是信息的传递和交换 通信三要素： 通信的主体 通信的内容 通信的方式 案例：服务器把传智专修学院的简介通过响应的方式发送给客户端浏览器 其...
2021-11-15 08:52:53
3629
19
原创 快速上手用JS实现元素的拖动与占位
这篇博客，是博主这几天刚做的一个项目遇到的一个难点，学会了这个，你就能轻松实现页面元素的移动啦，再配合一些条件，就可以做出一个任务完成进度的页面了！ 先来看看效果： 实现功能： 拖动元素从一个板块移动到另一个板块的某个位置，博主根据自己的需求做的这个是点击的元素 只能移动到它所在模块的下一个模块，如果移动到别的模块就会回到原来位置，而且当你拖动的 元素位置没有超过某个距离也会自动弹回到原来位置 案例分析： 关键一步就在于！当你鼠标按下的时候，不仅要获取到当前的元...
2021-11-12 11:08:04
4674
32
原创 淘宝搜索案例的实现
这个案例是我一开始接触前端就好奇的，现在终于知道是怎么做出来的了！ 迫不及待想分享给大家！ 实现步骤： 1. 获取用户输入的搜索关键词：为了获取到用户每次按下键盘输入的内容，需要监听输入 框的 keyup 事件 2. 封装 getSuggestList 函数：将获取搜索建议列表的代码，封装到 getSuggestList 函数中 3. 渲染建议列表的UI结构： ① 定义搜索建议列表 ② 定义渲染模板结构的函数 4. 搜索关键词为空时隐藏搜索建议...
2021-11-11 10:12:55
2764
15
原创 教你用三种不同方式获取 GET 和 POST 请求
今天分享的内容都是数据交互中的重中之重，满满的干货，一定要仔细看噢~ 一、jQuery 方式 浏览器中提供的XMLHttpRequest用法比较复杂，所以jQuery对XMLHttpRequest进行了封装,提供了一系列Ajax相关的函数，极大地降低了Ajax的使用难度。 jQuery 中发起 Ajax 请求最常用的三个方法如下： 1. $.get() 获取数据 $.get(url,[data],[callback]) 参数名 参数类型 是否必选 说明 url...
2021-11-09 11:04:26
6316
17
原创 利用FormData对象 + XHR 新特性实现文件上传——带进度条
小编今天又get到一个新技能，就是上传图片并显示进度条，话不多说，直接进入正题！冲冲冲！！???? 实现效果： 当点击上传文件按钮后，如果未选择文件，会跳出请选择要上传的文件提示框，反之，会有一个上传图片的进度条显示，当上传完成后，图片也会对应的显示在页面中. 实现步骤： ① 定义UI 结构 ② 验证是否选择了文件 ③ 向 FormData 中追加文件 ④ 使用 xhr 发起上传文件的请求 ⑤ 监听 onreadystatechange请求 ⑥ 显示文件上传进度 ...
2021-11-06 10:22:59
2928
15
原创 教你如何用Ajax制作新闻列表
Ajax 通俗理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是 Ajax 进入正题——新闻列表制作 ???? 1.实现效果：通过请求存放数据的 url 地址来将里面的内容显示到页面上（如下图所示） 2. 用到的文件： jquery.js 和 template-web.js 3. 实现步骤： ① 先引入需要的文件 ② 通过css将基本的布局实现 （效果如下） ③ 编写JS代码 css部分： .news-item { ...
2021-11-03 09:04:44
1305
13
原创 正则表达式
1. 概述 正则表达式 是用于匹配字符串中字符组合的模式。在 Js中，正则表达式也是 对象 正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等。 特点???? 2.创建正则表达式 1. 通过调用 EegExp 对象的构造函数创建var 变量名 = new RegExp(/表达式/)；
2021-10-29 16:46:57
318
20
原创 面向对象编程
一、改变函数内 this 指向 在讲方法前，我们先来了解 this 指向的几种情况。 调用方式 this指向 普通函数调用 window 构造函数调用 实例对象 原型对象里面的方法也指向实例对象 对象方法调用 该方法所属对象 事件绑定方法 绑定事件对象 定时器函数 window 立即执行函数 window 这些 this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了 this 的指向不同，一般指向我们的调用者.
2021-10-28 18:47:54
212
10
原创 边框图片、ES6模板字符、字体图标、立即执行函数
一、边框图片 边框图片： 这个属性允许指定一幅图像作为元素的边框 使用场景： 盒子大小不一，但是边框样式相同，此时就需要边框图片来完成 边框图片切图原理（重要）????： 边框图片语法（重要）????： ⭐ 其中 border-image-width 这个属性默认是 border 的宽度， 但是有区别， 这个是 边框图片的宽度 不会挤压文字，而 border 会. 我们现在来上上手 <!DOCTYPE html> <html lang="en">..
2021-10-26 15:12:29
605
14
原创 jQuery之小米官网重构
前言 呀呀呀呀~今天我又来总结小米官网了，不是为上次的博客做补充，而是分享用jQuery做小米官网交互效果。不得不说，用jQuery比用JS能省去好多好多代码呢，正好印证了jQuery的设计宗旨：“write Less , Do More”. 整体的布局就不说了，和小米官网的第一篇总结一样的布局，因为博主就是复制粘贴的html和css，但对JS换了一种方法重写了一遍，所以！我就直接分享jQuery部分了~ 一、经过下载app出现二维码 分析：第一步还是要先把要做动画的...
2021-10-24 16:18:31
551
2
原创 二叉树的性质
要想弄清楚二叉树的性质，我们就要先理解什么是二叉树。 满足以下两个条件的树就是二叉树： 本身是有序树； 树中包含的各个结点的度不能超过 2，即只能是 0、1 或者 2 接下来我们来看二叉树的性质： 性质1：在二叉树的第 i 层上至多有个结点（i >= 1） 证明： 因为是 至多 所以我们就画一个最大值，即除了叶子结点，每个结点的度都为2 相信找规律大家都会把，从上图中，不难得出 每层上最多的结点数 与 层数的关系，即 当然这个规律也是和二叉树本身有关的，...
2021-10-22 15:27:04
1216
3
原创 快速上手ECharts，让你的数据不再冷冰！
前言 这次博主给大家分享一个既好用又能快速上手的数据可视化库——ECharts. 先来给大家看看它所能呈现出来的效果，看完你们一定会震撼的！ 当然不只是让你们光震撼的，相信看完我的博客，你们每个人都能学会了! ECharts 使用五步曲⭐ ????步骤1：下载并引入 echarts.js文件—————————>图表依赖这个 js库 ????步骤2： 准备一个具备大小的DOM容器———————>生成的图表会放入这个容器内 ????步骤3： 初始化 echarts实例对象——
2021-10-21 10:09:55
2014
44
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人