- 博客(50)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 2小时入门-Vue
Vue入门一、什么是vue？JavaScript的框架框架是不同于向jQuery这样的js库，框架需要遵守它的规则，才能使用二、vue的特点JavaScript框架简化Dom操作响应式数据驱动三、实现第一个vue程序导入vue.js创建vue对象，并设置el属性和data属性使用简洁的模板语法把数据渲染到页面上<head> <!-- 1.引入vue文件 --> <script src="https://cdn.jsdel
2020-09-10 21:00:42
12567
10
原创 Vue设置屏幕全屏
<template> <div> <button @click="changeFull">切换全屏</button> </div></template><script>export default { name: 'fullScrenn', data() { return { isFull: true } }, methods: { changeFu
2021-11-05 23:39:24
494
原创 前端实现直播功能
前端直播功能实现直播现在很火，但是直播具体是通过什么方式实现的呢，他是如何通过前端的方式实现的呢？带着这两个问题我们研究一下一、熟悉我们先了解一下直播的具体流程通过上图我们可以大致的看到。直播一共分为三个步骤视频/图像采集流媒体服务器(做推流和拉流的中转服务器)拉流/播放二、具体操作流媒体服务器搭建这里我们用的是nodejs+node-media-server来做我们的视频中间件。你只需要建立一个文件夹，然后在这个文件夹做如下操作:一、npm i node-media-ser
2021-07-08 13:19:03
10936
26
原创 Vue局部组件数据共享Vue.observable()
随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。创建store对象首先创建一个 store.js，包含一个 store和一个 mutations，分别用来指向数据和处理方法。//store.jsimport Vue from 'vue'
2021-06-28 15:43:23
309
13
原创 取消Vue双击显示编辑状态时的文字选中
在很多情况下我们都会遇到这种情况，input一开始是只读状态，当用户双击的时候我们就可以让用户来修改我们的属性，然后在失去焦点的时候保存数据，并将状态继续保持到只读状态一般我用的状态切换是input中的disabled属性来实现只读的，但是当我们在从只读切换到编辑状态时，我们触发双击事件，但是双击事件他有默认行为(如我你的input中用value的话，他就会默认选中value，并让input失去焦点)解决思路当切换状态的时候，我先吧我input中的value的值设置为空然后在$nextTick中通
2021-06-04 15:53:34
4367
24
原创 vue 按钮权限管理
在很多情况下，程序会根据用户的权限，对按钮的显示和隐藏有一定的限制例如：页面上现在有三个按钮（添加，删除，修改），那现在后端返回的是（当前用户只对增加按钮有权限控制）即其余的按钮选项都不显示情节交代清楚了，接下来我说一下我的思路用户登陆之后就把对按钮的权限控制信息存到vuex中写一个vue的自定义指令，根据指令中传入的信息(操作Dom的显示和隐藏)在组件中注册这个自定义指令，并应用vuex中的代码import Vue from 'vue';import Vuex from 'vu.
2021-05-31 16:20:14
3837
29
原创 CSS让子元素div的高度填满父容器的剩余空间
在写项目中很多时候都会遇到这种情况，在父级中分为上下两个部分，其中头部的header是固定的，那main就要把剩下的区域自适应填充(即减去头部header的高度自适应)对很多人都想到了直接给main设置height为100%不就行了，但是这种方式会让浏览器的滚动条出现，也就是你的高度没有减去顶部header的高度，这种写法是很不友好的试了很多次最终用的是：让头部的header浮动并且让他的width为100%，main的高度还设为100%这样。不说了直接上代码：<template>
2021-05-08 17:35:07
10399
3
原创 TypeScript知识点
TypeScriptTypeScript是JavaScript类型的升级版(是一个有静态类型的js升级版)，它要编译成纯JavaScript才能运行。Ts相较于Js的好处在代码编写中就能发现一些潜在的问题，而js要运行时才能发现在编写代码时，编辑器有更好的代码提示代码语义更清楚，易懂一、下载TypeScripttypescript是一个npm包,所以要通过npm i typescript进行下载下载完成之后就可以通过新建.ts文件，来书写typescript的代码了二、运行Ts文件
2021-04-08 11:34:10
6284
原创 Flow 常用知识点整理
Flow是facebook出品的JavaScript静态类型检查工具。由于JavaScript是动态类型语言，它的灵活性也会造成一些代码隐患，使用Flow可以在编译期尽早发现由类型错误引起的bug，这种方式非常有利于大型项目源码的开发和维护。一、 Flow的安装npm install --g flow-bin创建一个项目文件夹./demo进入项目文件夹。npm init -y创建package.json文件，在文件中的scripts中添加："scripts": { "flow": ".
2021-04-07 15:17:35
6402
原创 Mock 使用教程
Mock 使用教程mock模板let Mock = require("mockjs");let basicData = Mock.mock({ "list|1-100": [ { "id|+1": 1, isBoolean: "@boolean(10, 0, true)", //百分之百的true naturalNumber: "@natural(1, 1000)", //大于等于零的整数 integer: "@integer(0)", //
2021-04-06 16:12:35
7019
转载 git-从远程仓库拉取分支到本地
1、查看本地现有分支git branch2、若没有，则拉取分支代码到本地（下面以拉取dev为例）git fetch origin dev3、命名并创建一个空分支（本文同样取名为dev），和拉取的远程分支进行关联git checkout -b dev origin/dev4、若已经有同名分支，则切换到该分支进行更新git checkout devgit pull5、最后，核查一下本地是否已有拉取的分支git branch...
2021-04-03 11:28:04
6515
原创 git命令[高阶]
git提交命令高阶在git命令中创建一个新分支在git命令中通过git checkout -b 分支名创建一个Git的新的分支，并进入此分支，并且可以通过git branch来查看所有分支git切换分支通过git checkout 分支名，例如：git checkout master就切换到master分支了git把login分支的内容合并到master并提交先切换到master分支下git merge login 然后再git push推送到云端仓库git把新分支推送到远程仓库先切换
2021-03-05 08:58:46
6282
4
原创 less
lessless可以说是动态化的css语言，主要是因为他的代码可以复用less的使用:在全局npm 安装less ，并执行lessc less文件路径 编译完成后的css路径，然后把编译后的css文件引入到html就可以了bootCDN搜索less，然后在html引入less的功能：生成变量（并且变量是可以运算的）@变量名:变量值;@color:#fff+#111变量选择器@remind:.alert;@{remind}{ height:50px
2021-01-15 08:21:52
11427
原创 用@media做自适应的css
@media自适应css@media可以更具查询条件（查询条件的true或者false）切换不同的css样式@media type and (属性) / @media not type and (属性)typescreen（屏幕）print（打印机）tty（打字机）等等属性widthheightorientation（窗口方向）举例子://让768以上1200以下背景变红@media screen and (min-width:768px) and (m
2021-01-11 07:58:08
11507
原创 less的基本用法
lessless可以说是动态化的css语言，主要是因为他的代码可以复用less的使用:在全局npm 安装less ，并执行lessc less文件路径 编译完成后的css路径，然后把编译后的css文件引入到html就可以了bootCDN搜索less，然后在html引入less的功能：生成变量（并且变量是可以运算的）@变量名:变量值;@color:#fff+#111混入就是把一个类的样式，混入到另一个类中并且在此过程中还可以传递参数.test{
2021-01-11 07:56:20
15211
5
原创 HTML5拖拽文件上传
上传文件HTML5新增了文件API,提供客户端本地操作文件的可能.我们可以通过file表单或拖放操作选择文件,还可以通过JavaScript读取文件的名称、大小、类型、和修改时间.file类型的input表单新增了files属性,保存我们上传文件的信息,如果要实现多文件上传,可以设置input的multiple属性.可以使用accept属性规定文件上传的MIME类型 例如’image/jpeg’<form action="#"> <div class="for
2020-12-31 19:39:13
15697
3
原创 百度网盘视频在线(倍速播放)
百度网盘视频在线(倍速播放)实现步骤:在网页打开百度网盘，在期中找到要观看的视频选择好视频之后，在视频的网页按下F12在Console下输入以下这条命令就可以开启倍速观看了我选的是1.5倍速的例子:代码:videojs.getPlayers("video-player").html5player.tech_.setPlaybackRate(几倍速)...
2020-12-13 16:02:27
13699
2
原创 用正则表达式提取歌词LRC中的歌词
目前有如下格式的歌词："[00:00.000]":"作曲 : G.E.M. 邓紫棋","[00:01.000]":"作词 : G.E.M. 邓紫棋","[00:03.52]":"编曲：G.E.M.邓紫棋 / T-Ma 马敬恒","[00:06.31]":"可惜我们终于来到","[00:10.18]":"一个句号","[00:13.16]":"窗外不愿飞的蜂鸟","[00:16.58]":"也在哀悼","[00:19.67]":"城市再也不会听到",要求歌词前面的时间都去掉，只匹配出歌词，
2020-11-28 23:11:26
14294
6
原创 【React】绑定事件为什么会this丢失
关于React在近几天的学习中遇到了一个问题？（绑定事件this丢失）首先我们现在了解一下类中传递this的指向方式这个看起来似乎没什么问题？可以你接着往下看class Test { constructor() { this.name = '2' } fun1() { return this.fun2() } fun2() { console.log(this) console.log(this
2020-11-14 14:41:40
12425
1
原创 Vue基础
Vue入门一、什么是vue？JavaScript的框架框架是不同于向jQuery这样的js库，框架需要遵守它的规则，才能使用二、vue的特点JavaScript框架简化Dom操作响应式数据驱动三、实现第一个vue程序导入vue.js创建vue对象，并设置el属性和data属性使用简洁的模板语法把数据渲染到页面上<head> <!-- 1.引入vue文件 --> <script src="https://cdn.jsdel
2020-11-04 16:54:30
12566
原创 【ES6】新语法入门篇
【ES6】新语法let关键字新加入了块级作用域（即在大括号中的就是块级作用域，例如if中）没有变量提升了不能从新定义了就算在全局中生成let变量，他也不会存在在window对象中在es6中函数的形参就是相当于用let定义的变量，不能重复声明function fun(a) { console.log(a) let a = 1//报错}fun(12)如果在一个作用域中定义了一个变量，这个作用域内的这个变量就被封闭了，就不能再访问到外界的这个
2020-11-01 08:50:19
12542
3
原创 【nodejs原生】博客项目
【nodejs】知识点整理获取GET传过来的参数const http = require('http')const querystring = require('querystring')const server = http.createServer((req, res) => { // 通过get传递的参数 let url = req.url // 请求方式 let method = req.method // 利用querystring内置参数，
2020-10-24 08:34:56
12178
原创 【微信小程序】原来如此简单
wx小程序与传统web的对比传统web一般就只有3个结构(html,css,js)，而小程序多了个(json)配置文件结构传统web微信小程序结构HTMLWXML样式CSSWXSS逻辑JavascriptJavascript配置无JSON通过上面的对比可以看出，微信小程序是四层结构，多个一层的配置文件.jsonwx小程序的目录结构要学习一个新的语言就要先要了解他的目录结构，以及目录结构中文件夹的功能一、全局配置文件全局配置文件主要
2020-09-24 10:44:17
18759
3
原创 mongoose常用方法
查询find()Model.find(conditions, [fields], [options], [callback])第一个参数表示查询条件，第二个参数用于控制返回的字段，第三个参数用于配置查询参数，第四个参数是回调函数，回调函数的形式为function(err,docs){}例子1：查询用户表下面名字为张三的。忽略7条，并只显示2条，按时姓名、性别、居住地址、创建时间信息并按创建时间倒叙显示userModel.find({'name':'张三'},{'name':1,'sex':1
2020-09-18 13:32:54
13199
1
原创 jQuery实现Ajax的方法
jQuery中的ajaxjQuery中封装了很多可以实现异步交互的Ajax的方法，今天就来简单介绍一下，这些方法的具体用法一、jQueryElement.load()参数:url,[data],callback注意:1.data不写默认用的方式是get。2.data有参数的话默认的方式就是post返回的内容会写在调用它的jQueryElement对象中$(function () { $('#btn').click(function () {
2020-09-04 23:29:22
12569
1
原创 JS原生Ajax(XMLHttpRequest对象)
Ajax用途：主要是引用于异步交互，当使用Ajax模型，HTML 页面能够快速地将数据逐步更新显示在用户界面上，不需要重载(刷新)整个页面。这使得HTML页面能成更快速地对用户的操作进行反馈。Ajax的实现流程XMLHttpRequest对象是实现Ajax异步交互的核心创建XMLHttpRequest对象调用XMLHttpRequest对象的open()与服务器端建立连接调用XMLHttpRequest对象的send()方法向服务器传输数据，null代表不传输任何东西利用XMLHttpR
2020-09-04 23:24:25
12495
原创 jQuery动态加载瀑布流
jquery实现瀑布流案例分析首先，它的每个图片是等宽的其次，除第一排正常显示其余的图片都会显示在上一排中高度最小的那个图片的下面最后，就是根据最矮图片所在位置的宽高来，决定绝对定位设置图片显示的位置效果图实现步骤html结构<div class="container"> <div class="box"> <div class="content"><img src="./image/1.jpg" a
2020-08-30 15:20:21
14497
3
原创 http具体讲解
http五层结构物理层主要作用是定义物理设备如何传输数据数据链路层在通信的实体间建立数据链路连接网络层为数据在结点之间传输创建逻辑链路传输层为向用户提供可靠的端到端(End-to-End)服务应用层为应用软件提供了很多服务三次握手第一次握手客户端请求建立连接。第二次握手服务端应答客户端，并请求建立连接。第三次握手客户端针对服务端请求确认应答。URI,URL,URNURI：统一 资源标志符（包括url和urn）URL：统一资源定位符URN：永久统一 资源定位符
2020-08-27 08:23:24
12562
1
原创 HTTPS和HTTP介绍
https工作流程证书如何签字非对称加密的特点任何经过A的公钥进行过加密的信息,只有A的私钥才能解密任何有公钥的人可以确认对方发送的信息是被私钥加密过的http工作流程特性被http控制的特性：缓存开放同源限制认证用HTTP Cookies来设置指定的会话代理和隧道通常情况下，服务器和/或客户端是处于内网的，对外网隐藏真实IP地址。因此HTTP请求就要通过代理越过这个网络屏障。会话http报文请求报文响应报文请求消息和响应消息的结构
2020-08-24 16:40:46
13441
1
原创 JavaScript+nodejs-加载md文件
JavaScript+nodejs-加载md文件案例展示一、案例展示案例分析前端上传（md）文件，再利用（ajax）发送请求，并把文件数据提交给后端后端接受文件数据并保存，然后读取文件，利用（marked）模块对数据进行转换，最后返回json数据返回的数据直接添加就可以加载md类型的文件了案例代码一、前端js部分注意：返回的是FormData对象类型的数据//js文件<script> $(function () {
2020-08-13 15:26:31
14560
原创 [js]--input上传图片并浏览
学习目标图片的上传并浏览图片传入到后端，后端存储，并返回可以直接访问的图片链接需要掌握的技能JavaScriptnodejs效果展示生成步骤前端上传图片后，图片浏览用change事件监听，是否上传文件获取上传的文件给这个文件建立一个url为预设好的图片设置的src属性 //图片上传时图片浏览 $('.file').change(function () { // 获取上传的文件
2020-08-07 14:50:50
14862
1
原创 [NodeJS]---cqManger后台管理系统
项目要求英雄后台管理实现功能地址登录/login.html主页/index.html新增/insert.html注册/register.html更新/update.html一、项目展示注册登录主页更新新增二、接口信息功能地址解释判断是否登录/isLogin基于第三方模块cookie-session的判断登录接口查询所有信息/index.html基于mysql模块的查询编辑/
2020-07-11 20:36:30
13436
1
原创 利用node爬取王者荣耀英雄信息，并存入数据库
抓取一、新建一个文件夹文件夹不要是中文二、下载第三方模块cmd进入文件夹地址，输入:npm init -y进行初始化输入npm i crawler mysql-ithm下载爬虫和node-orm模板三、导入模块const Crawler = require("crawler");const db = require('mysql-ithm')四、利用爬虫模块进行抓取数据在王者荣耀官网找到请求，所有英雄的ajax请求其中他的响应就是所有英雄的信息(但是不是详细信息)
2020-07-07 23:25:19
14270
原创 解决node中跨域、中间件、重定向 问题
重定向重定向就是当访问一个页面时找不到此页面，就会重定向到一个指定页面设置响应头为:302重新设置Location，指向一个重定向页面结束响应//app为express创建的服务器app.use((req, res) => { // 设置302响应头 res.writeHead(302, { Location: 'http://127.0.0.1:4399/login.html' }) //结束响应 res.end()})
2020-07-07 22:07:37
13984
原创 ES6新属性
ES6新增属性因为node用的大部分是ES6的语法，所以要先学习一下ES6新语法let-变量声明在ES5中的变量声明为var，而ES6新增变量声明let区别varlet变量提升√×块级作用域×(函数作用域)√重复声明√×重新赋值√√const-常量声明没有变量提升新增块级作用域不可重复声明不可以重新赋值必须初始化对象的解构赋值就是把一个对象的属性对应的值赋值给了一个或多个变量写法：期中左边的为对象的键
2020-07-02 11:01:42
13867
1
原创 什么是node.js
NodeJS是什么NodeJS是基于 Chrome V8 引擎 在服务器上的 JavaScript 运行环境什么是Chrome V8引擎？它是运行在chrome浏览器上的js运行环境什么是js运行环境？把js代码翻译成电脑能识别的二进制代码和其他服务器的区别：其他服务器，返回(html，css，js)文件让浏览器的引擎执行而NodeJS本身拥有js的运行环境，所以可以在服务器上运行js代码NodeJS用途用js开发服务器端的功能也可以在服务器和客户端之间
2020-07-02 10:49:45
13300
1
原创 QQ音乐播放器-jQuery实现
QQ音乐播放器案例展示案例实现的功能静态页面的布局歌曲信息的动态显示鼠标悬停，功能按钮和文字高亮歌曲信息的动态显示歌曲播放进度条显示和动态移动纯净模式的模板设置和歌词写入案例布局歌曲动态加载其实就是向中-左的ul中动态添加li来实现动态数据显示要想动态加载数据就要现有数据:通过$.ajax({})来动态加载数据（注意：加载本地文件有跨域问题，建议打开本地服务器）循环期中的数据，动态的创建li添加到ul中通过$.each()循环出数据传入到，动态创建函数
2020-06-26 10:57:45
14056
原创 jQuery中事件冒泡，默认行为，事件命名空间
事件绑定事件在jQuery中绑定事件有两种方式，一种是直接“点事件名”的方式，另一种是通过on函数“点事件名”方式绑定: $("button").click(function () { console.log("hello 1"); });“on函数绑定” $("button").on("click", function () { console.log("hello 2"); });既然有两种绑定方式，自然存在差异对于差异性从两个方面分
2020-06-18 14:26:45
13329
原创 jQuery操作css属性等操作
操作css属性jQuery操作css属性主要依靠：css方法设置css方法:逐个设置:在css方法中传入属性,值两者用逗号隔开设置完一个属性，同样的方法重新设置另一个属性链式设置在css方法中传入属性,值两者用逗号隔开设置完一个属性,在后面 .css(属性,值) 设置另一个，可以一直链下去批量设置在css方法中传入一个对象对象上写要设置的属性和值和设置css属性的写法一样获取css方法:在方法中传入要获取属性即可// 1
2020-06-17 17:05:11
13238
1
nodejs---消费追踪器
2020-08-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人