前端
文章平均质量分 65
讷言丶
不患人之不己知,患其不能
展开
-
vue3播放m3u8视频(videoJS)
以下时项目使用中自己封装的组件,用起来也很简单,需要的可以对照自取。需要同时导入videoJS以及相关的CSS。UI框架为 ant-design-vue。原创 2023-02-07 15:00:22 · 2060 阅读 · 6 评论 -
vue3+axios:图片链接转换成二进制文件流后并提交服务器
1、使用Image类创建一个新的图片。2、将图片转换成base64。3、将base64图片使用File类转换成二进制文件流4、将二进制文件流使用 FormData类转换成binary类型提交服务器。原创 2023-01-05 16:07:17 · 4496 阅读 · 0 评论 -
python使用flask实现前后端分离&通过前端修改数据库数据【全栈开发基础】
完整代码放到了最后,时间紧张的话直接拉到最后或点击目录【🥩 完整代码】原创 2022-11-21 15:36:35 · 2555 阅读 · 9 评论 -
vue组件间通信传递数据的四种方式(路由传参、父子组件传参、兄弟组件传参、深层次传参)
1. props 和 emits传参 2. 路由传参(query、params) 3. 第三方库(pubsub-js)原创 2022-10-24 10:49:10 · 7431 阅读 · 0 评论 -
JS初识高阶函数和函数柯里化
高阶函数的定义就是看我们函数的接受和返回是不是一个函数,函数柯里化主要看咱们的函数不断的返回调用,说白了就看看函数后面跟的小括号(当然,这种看法仅限于个人,欢迎批评指正),对于递归个人觉得也是属于函数柯里化一个明晃晃的示例。高阶函数以及函数的初始化可能对于刚入门的新手来说是一个懵懂的概念,甚至会以为是什么高级的东西。但是在稍微有了一些函数基础后再通过看一遍这篇博文,我相信你能很清楚这些东西都是非常简单的。......原创 2022-08-01 11:55:02 · 192 阅读 · 0 评论 -
Vue 警告: Failed setting prop “prefix“ on <input>: value [object Object] is invalid..........
发生这个错误的原因在于我们设置的props某个前缀名不正确,这个时候我们只需要删除这个前缀名或者改正即可。出现这个错误基本属于粗心导致。原创 2022-07-29 15:03:14 · 2365 阅读 · 0 评论 -
个人微信小程序云开发总结心得
微信小程序云开发基础内容总结原创 2022-06-14 17:41:30 · 3720 阅读 · 2 评论 -
javaScript字符串方法总结
一、字符查找方法类参数表示:str表示传入字符串,num表示传入数值,带图标✨表示常用1、charAt(num)返回在指定位置的字符。index表示查找的指定下标var str = "JavaScript";var n = str.charAt(2)console.info(n) // v✨2、indexOf(str)返回某个指定的字符串值在字符串中首次出现的位置。区分大小写var str = "JavaScript";var n = str.indexOf('S')console.原创 2022-05-31 15:47:22 · 1011 阅读 · 0 评论 -
微信小程序如何使用pubsub-js实现组件间实时通信以及如何搭建Vant框架【npm包搭建介绍】
✧ 在微信小程序如何使用pubsub-js实现组件间实时通信详解以及搭建vant框架 或者使用其他的npm包?**前言:**相信很多的小伙伴在刚接触小程序时都在需要使用一些 npm 上的包很头疼,不知道怎么搭建,完全不能像vue和react中那么方便,直接 npm install 包名 下来 就能直接通过import来使用,本文主要通过微信小程序中常用的vant框架和小程序组件间通信常用的框架包 pubsub-js来给大家做一个示例,如果不足之处,还请批评指正,感激不尽。一、构建npm包的基础文原创 2022-04-27 16:08:28 · 3267 阅读 · 0 评论 -
react 按需导入 Echarts 图表
一、安装EchartsEcharts官网:https://echarts.apache.org/handbook/zh/basics/download/npm install echarts --save 或 yarn add echarts二、基本示例在Echarts示例位置找到自己项目需要的图例,地址:https://echarts.apache.org/examples/zh/index.html#chart-type-scatter该示例是基本示例,可以通过Echats的 配置项手册进行图原创 2022-04-13 10:34:39 · 2428 阅读 · 0 评论 -
React +Vite +yarn 本地跨域处理
常见的react跨域方法react的跨域,网上找了好多的方法,基本都如下所见,大差不差1、下载 http-proxy-middleware2、npm i http-proxy-middleware3、在src目录下新建一个setupProxy.js文件写入以下代码const proxy = require('http-proxy-middleware')module.exports = function(app) { app.use(proxy('/api', { target: 'htt原创 2022-03-07 11:27:47 · 2521 阅读 · 4 评论 -
python flask创建服务器实现文件的上传下载
flask创建服务器实现和前端文件的上传下载,代码可以直接使用一、前端代码<!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-sc原创 2022-01-14 15:23:21 · 2477 阅读 · 7 评论 -
python使用flask模块和前端交互基础
python利用flask模块和前端进行交互基础一、模块使用:python:flask、flask_cors【两个都是第三方模块需要进行按照】推荐使用豆瓣源安装,以下为豆瓣源安装方法pip install flask -i https://pypi.douban.com/simple/pip install flask_cors -i https://pypi.douban.com/simple/前端: Ajax二、代码演示pythonfrom flask import Flaskfr原创 2022-01-06 17:55:34 · 2869 阅读 · 1 评论 -
前后端加密解密 【JS加密模块(md5 、 crypto 、 crypto-js、jsencrypt) python RSA加密解密(pycryptodome )模块安装与使用】
应用的场景是需要前端通过公钥对需要加密的密文进行加密,后端通过私钥对前端加密的密文进行解密。通过自定义的密钥进行加解密,可以更灵活的加解密密文,但是因为密文的key在可以通过前端看到,所以加密的信息虽然通过解密网站无法解密,但是可以通过在前端得到的公共key进行解密。js-md5准确来说不算是加密,应该说是将密文序列化了,可以通过下列的网站将md5加密后的字符直接解析出来,因此安全性很低。方面简化后的代码贴在下方,可供参考,后端方面的参考下方链接的第二个博文。中生成的后保存在本地的,自己保存一下。原创 2021-12-03 14:30:15 · 11835 阅读 · 2 评论 -
JS深拷贝和浅拷贝
JS深拷贝和浅拷贝var obj = { name: '张三', girlFriend:undefined,re:/^[1-9]$/,age: 15, major: ['chinese', 'math', 'english',{all:5,other:'computer'}], fun () { console.log(this.name); }, family: { son: 'Jerry', age: 3 } }// 浅拷贝var assignObj = obj //赋值方式拷贝,相当于复制了栈原创 2021-11-29 12:40:45 · 196 阅读 · 0 评论 -
Vue3使用Echarts图表
Vue3使用Echarts图表前言: Vue3使用Echarts图表基本可以按照Echarts官网的描述来使用,这里是按照自己的方式做了一些简化和常规性的叙述,主要分为以下几步来完成:第一步: 安装npm install echarts --save第二步: 使用这里目前使用的是全局引用,没有去做按需导入,另外,引用的时候只需要在需要图表的组件中引用即可。下面是示例的代码,里面加了注释说明。<template> <h1>Echarts图表</h1> &原创 2021-11-09 09:04:24 · 7421 阅读 · 4 评论 -
Vue3中使用Sass详解
相对于vue3使用less,在使用sass时会相较于麻烦一点,但也只是加一些配置就基本可以了vue3使用less需要安装的包以上两个安装完毕,就可以在组件中style标签加上lang使用less,具体参考如下接下来我们继续看看vue3如何使用sass,主要看第二步,在中需要添加的代码,安装包都是一样的操作,但是需要注意安装版本。......原创 2021-11-01 10:29:22 · 12749 阅读 · 0 评论 -
JS事件属性总结【鼠标 / 键盘 / 表单】
前言:JS事件通常是指用户通过鼠标或者键盘以及其他方式对浏览器或浏览器网页中的某些节点或者元素进行操作,是用户与浏览器交互最为常见的方式,主要包含以下事件:1、鼠标事件2、键盘事件3、表单事件鼠标事件下列代码使用了body作为点击的元素,需要在body中加入一个元素节点或文字节点,为方便区别比较,事件相近的做到了一起,常用的鼠标事件前加了 ✦✦1、onclickonclick是最常见的鼠标事件,由用户使用鼠标左键点击后触发相应的函数方法document.body.onclick = fun原创 2021-10-20 18:17:41 · 751 阅读 · 0 评论 -
JavaScript中对象(Object)的方法
JavaScript中对象方法总结:资料来源:网道-互联网开发文档 【https://wangdoc.com/】1、Object.getPrototypeOf(Object)Object.getPrototypeOf方法返回参数对象的原型。这是获取原型对象的标准方法。代码示例: var F = function () {}; var f = new F(); Object.getPrototypeOf(f) === F.prototype // true 几种特殊对象的方原创 2021-10-18 15:44:56 · 4291 阅读 · 1 评论 -
面试官:说说Vue响应式原理
Vue2和Vue3的响应式原理前言:vue2的响应式原理主要使用的是Object.defineProperty( ),里面需要传入三个参数,分别是:【响应源数据的对象,源数据中的需要读写的属性,相对应的对象方法(包含了get和set方法)】vue3的响应式原理主要依靠的是ES6新增的Proxy方法,需要在Proxy的实例对象中传入两个参数【源数据对象,处理对象的方法【get,set,deleteProperty…等】从自己个人来说vue3感觉比vue2更简单了,很多方法封装的更方便使用可以直接在原创 2021-09-16 12:20:54 · 5641 阅读 · 1 评论 -
初识vue状态管理机制(vuex、pinia)
Pinia 是 Vue 的专属状态管理库,它允许你跨组件或页面共享状态。不同于vuex状态管理机制,pinia的写法能更好的兼容typescript,并且直接在组件中使用,写法上更趋近于vue3的写法。原创 2021-09-15 17:54:44 · 337 阅读 · 0 评论 -
JS中的Ajax发送请求获取数据流程
Ajax发送请求获取数据前端使用Ajax向后端请求数据的方法流程详细方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function(){ //1、创建对象 兼容处理 va原创 2021-09-12 13:28:12 · 2564 阅读 · 0 评论 -
JS实现字符串反转
JS实现字符串反转代码var str = 'abc'var list = str.split('')var reverseArr = list.reverse()// console.log(...str1)//c b a ,输出后有空格分割//console.log(str1.join('')) //可以直接使用join方法输出//也可以遍历输出for (i of str1){ process.stdout.write(i) //不换行输出}...原创 2021-09-05 10:50:02 · 457 阅读 · 0 评论 -
JS键盘事件获取键盘码
JS中的键盘事件keydown:在键盘上按下某个键时触发。如果按住某个键,会不断触发该事件,但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时,会取消默认的动作(如输入的键盘字符,在 IE 和 Safari 浏览器下还会禁止keypress 事件响应)。keyup:释放某个键盘键时触发。该事件仅在松开键盘时触发一次,不是一个持续的响应状态。keypress:按下某个键盘键并释放时触发。如果按住某个键,会不断触发该事件。该事件处理函数返回 false 时,会取消默认的原创 2021-08-24 18:48:01 · 2550 阅读 · 0 评论 -
JavaScript 字面值对象的一些基本方法
展开运算符的使用//构造字面量对象时使用展开语法let person = {name:'tom',age:18}let person2 = {...person} //展开运算符展开对象属性时,只能在对象中进行展开//console.log(...person); //报错,展开运算符不能直接展开对象console.log('我是person2',person2)person2.name = "Som"console.log('person2',person2);person.name原创 2021-08-24 09:30:46 · 168 阅读 · 0 评论 -
React生命周期钩子函数详解
React生命周期钩子函数声明:资料来自尚硅谷张天禹讲师,做了总结,仅供学习参考图解【旧】/* 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染 1. constructor() 2. componentWillMount() 3. render() 4. componentDidMount() =====> 常用 一般在这个钩子中做一些初始化的事,例如:开启定原创 2021-08-23 18:06:27 · 799 阅读 · 0 评论 -
网页路由的两种工作模式
url的工作模式通常包括两种:hsah、history首先是对前端开发人员比较友好的hash,hash模式不会发送#号后的内容给服务器可以防止服务器 ‘不认识’客户端传回来的值下面红框内的内容不会发送到服务器1、对于一个url来说,什么是hash值? ——#号及其后面的内容就是hash值2、hash值不会包含在HTTP请求中,即:哈市值不会带给服务器。3、hash模式:1、地址中永远带着#号,不美观2、若以后将地址通过第三方手机app分享,若app校验严格,地址会被标记为不合法3、兼容原创 2021-08-20 09:17:25 · 441 阅读 · 0 评论 -
JavaScript 闭包
JavaScript 闭包/*如何产生闭包?当一个嵌套的内部函数(子函数)引用了嵌套的外部函数(父函数)的变量或者函数时,就产生了闭包闭包到底是什么?1.闭包时嵌套的内部函数 (大部分理解)2.包含被引用的变量或函数的对象 (少部分人理解)两者理解方式都是对的,但是第二种理解方式更准确注意:闭包存在于嵌套的内部函数中产生闭包的条件?1.外部函数内嵌内部函数2.内部函数使用外部函数的变量或者函数等数据,但也有一些回调函数有例外,如我们常用的定时函数,setTimeout( =>{原创 2021-08-10 09:20:36 · 98 阅读 · 1 评论 -
JavaScript中的匿名函数
今天看到了一个前端面试题,关于匿名函数中使用定时器的,具体是这个样的:【实现每隔⼀秒钟输出0,1,2,3…数字】,刚开始看不明白,后来查了一些资料,这里需要使用for循环,for循环中需要使用定时器,但是我们都知道,定时器是一个异步函数,在for循环中使用异步函数是不能和for循环中的循环增加的变量同步使用的,此时就需要用到这个匿名函数了,简化代码、for(var i=0;i<10;i++){ (function(num){ setTimeout(function(){ console.原创 2021-08-06 11:39:01 · 232 阅读 · 0 评论 -
微信小程序入门
基础:微信小程序的开发在页面上和HTML很相似,只是在标签上新增了一些比较特殊微信小程序开发自带的标签 如:< view>< /view>、< wxs>< /wxs> < image> < /image>等,需要注意的是,微信中的标签基本都是双标签,自闭合标签极少,就我们熟知的HTML中的input标签在微信小程序开发中都是双标签。文件的后缀名也是做了更改,成了.wxml。CSS后缀名成了.wxss(但是在使用上和前端开发中的css原创 2021-08-02 12:56:09 · 109 阅读 · 0 评论 -
CSS 3D动画 大小可开合正方体
CSS 3D动画能开合的正方体原创 2021-07-30 13:46:11 · 325 阅读 · 0 评论 -
使用JavaScript解析网址
使用JavaScript解析网址成为json结构格式看到一个面试题,主要是将下列的网址问号后面的部分解析成json结构格式的对象URL :'http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e’解析后:{ a: ‘1’, b: ‘2’, c: ’ ', d: ‘xxx’, e: undefined }var str = 'http://item.taobao.com/item.htm?a=1&b=2&c=原创 2021-07-25 13:35:02 · 920 阅读 · 1 评论 -
CSS中字体样式属性
font-family属性的部分属性值<p><span style="font-family:STXinwei"> hello world</span>华文新魏:STXinwei</p><p><span style="font-family:STXingkai "> hello world</span>华文行楷:STXingkai </p><p><span style="font-fami原创 2021-07-22 16:13:49 · 871 阅读 · 0 评论 -
axios和async / await的基本用法
主要使用本地自建的cookie工具或者vue提供的vue-cookie以及element-ui框架和nprogress进度条模块,大家可以对照自己代码直接复制使用。为了我们的代码健壮性,因此本质上只要有.then()就得跟一个.catch(),至于finally()则看情况添加。这个时候我们可以直接使用 新增的语法糖 async 和await ,使用起来更加的舒服方便,代码看起来也更简洁。当然实际的开发项目中,如果我们使用了统一的请求模块,用 .then()取到正确的数据,.catch()捕获错误,原创 2021-07-20 16:50:57 · 14043 阅读 · 1 评论 -
webpack中的加载器和其基本使用
webpack 中的加载器通过 loader 打包非 js 模块在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块,webpack 默认处理不了,需要调用 loader 加载器才可以正常打包,否则会报错!loader 加载器可以协助 webpack 打包处理特定的文件模块,比如: less-loader 可以打包处理 .less 相关的文件 sass-loader 可以打包处理 .scss 相关的文件 url-loader原创 2021-07-20 09:29:12 · 132 阅读 · 0 评论 -
Vue的过滤器、生命周期钩子函数、组件开发、路由、Promise基本使用语法
过滤器的使用 {{参数 | 过滤器名(形参)}} //这里面的形参可多个Vue.filter('过滤器名‘,处理函数方法(形参){ 方法体}) //这里的形参第一个参数为div中的参数,第二个为过滤器传过来的值注:过滤器可以多次调用 如: {{参数 | 过滤器名1(形参)| 过滤器名2(形参)}} //这里面的形参可多个==========================================================================生命周期执行期原创 2021-07-19 18:54:18 · 490 阅读 · 0 评论 -
Vue的基本指令和Vue过滤器
Vue的基本指令使用在Vue中,基本上的指令在调用的时候,都是以 【 v- 】 开头的v-text更新DOM元素的内容,比之插值表达式用法不同的一点是,v-text中的是直接更新到元素中去的,相当于直接写入,如果原来的元素中有内容,那原来元素中的内容会被覆盖<span v-text="msg"></span><!-- 和下面的一样 --><span>{{msg}}</span><!-- 和下面的就不一样 -->&l原创 2021-07-17 20:52:20 · 258 阅读 · 0 评论