![](https://img-blog.csdnimg.cn/20190927151053287.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
web总栏
文章平均质量分 73
web的汇总专栏
Da Zeng
啥都好就是记性差了点ᶘ ͡°ᴥ͡°ᶅ
展开
-
DaZeng:小程序页面相互的数据传递
小程序页面相互的数据传递原创 2022-11-29 10:55:32 · 221 阅读 · 2 评论 -
DaZeng:小程序支付调用
小程序支付点击支付按钮支付处理点击支付按钮<button class="user-btn" bindtap="allowInv">支付</button> allowInv: async function () { const { payFee } = this.data this.setData({ loading: true }) try { if (payFee > 0) { //需要支付费用的处理...原创 2021-12-28 14:33:57 · 559 阅读 · 0 评论 -
DaZeng:画loading、三角图标、图片重叠排列效果
画loading、三角图标loading三角图标loading示例图:原理:把一个div变圆了旋转,缺口就是border一边透明代码 <以第一个为案例><button class="cart-load"> <view class="load"></view> //小程序 -- web 换成div同理适用 (也可以把load写成cart-load::after样式)</button>.cart-load{ posi原创 2021-12-28 11:09:07 · 502 阅读 · 0 评论 -
DaZeng:小程序的 MobX 绑定辅助库
小程序的 MobX 绑定辅助库前文创建方式一方式二绑定配置fieldsactions延迟更新与立刻更新前文创建一个公共仓库去存储数据方法,在微信小程序开发文档中有案例,项目地址是github里面。鉴于偶尔会有网络问题我又去百度了一片文章,原文地址,再在自己的博文做一篇备份,万一哪天网址就没了呢?创建方式一方式二绑定配置fieldsactions延迟更新与立刻更新...原创 2021-12-24 17:53:31 · 279 阅读 · 0 评论 -
DaZeng:自定义react Ant Design Upload 上传组件
自定义react Ant Design Upload 上传组件antd官网点击或拖拽文件上传并传递其他参数先上传文件点击之后再携带参数传递antd官网官网地址:https://ant.design/components/upload-cn/今天先说这种点击拖拽的自定义使用情况吧:点击或拖拽文件上传并传递其他参数废话不多说直接上代码gql:const onImportFileChange = (info: any) => { const file = info.file原创 2021-11-01 11:38:39 · 680 阅读 · 0 评论 -
DaZeng:css文字的溢出隐藏及文字多行的溢出隐藏
单行 text{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }多行更改-webkit-line-clamp的数字控制显示即行,例子为2行 text{ word-break: break-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;原创 2021-09-14 19:05:48 · 172 阅读 · 0 评论 -
DaZeng:小程序请求优化之数据监听与自定义组件
小程序请求优化之数据监听前言基础实现组件实现总结前言为什么用到这个,大致就是比如从页面A中的一条数据跳到了这条数据的详情页,然后我把这条数据删了(增删改是一个道理),返回页面A,页面A要对原来这条数据做对应的修改,如果每次都在onShow的时候去请求数据就会造成很多的资源浪费,此时引出数据监听。基础实现首先对应要跳转的东西给他一个监听,告诉他去监听什么: <view class="cm-item" wx:for="{{vipList}}" wx:key="id" data-url="/pag原创 2021-09-14 18:57:12 · 261 阅读 · 0 评论 -
DaZeng:inline-block和vertical-align的问题分析
inline-block和vertical-align的问题分析前言inline-block的对齐原理解决问题前言功能完成了,今天来结合最近的程序上问题做踩坑一些记录。最近做的是小程序,但是这个问题放在web端也是会存在的,而且会很常见。inline-block在使用上最常见的问题还是前面一个是div包裹的img后面是文字,设置inline-block后却出现垂直方向不对齐情况。而我的问题大致则是我的view设置为了inline-block,父元素设置了高度,真机测试的时候某些机型出现了如下情况:in原创 2021-07-20 14:37:42 · 461 阅读 · 0 评论 -
DaZeng:GraphQL、useQuery、useMutation、useLazyQuery的基础使用
GraphQL、useQuery、useMutation的基础使用前言GraphQL(gql)useQueryuseMutation前言上周五的毕业典礼举行完了,工作也落实了有一段时间了,总结一下最近学到的技术以及一些存在的问题总是好的。这段时间实习工作的技术栈是react+ts+gql,也是我第一次接触gql,用了感觉真香,在使用过程中主要是配合react的函数式组件进行使用,作用简而言之就是查询然后发请求返回数据,替代了axios,fetch和原生的ajax请求,也不能叫替代吧就是大体作用相差不大,原创 2021-06-28 16:18:58 · 3036 阅读 · 0 评论 -
DaZeng:TypeScript的基础使用
TypeScript的基础使用TS官网TS官网TS官网传送门原创 2021-04-28 20:52:46 · 693 阅读 · 6 评论 -
DaZeng:React的基础使用及开发
React的基础使用及开发React官网安装create-react-app脚组架卸载/安装查看版本号创建项目并启动项目依赖与开发依赖React官网官网地址安装create-react-app脚组架优点:无需配置webpack,babel(把es6,7,8,9,…转换为es5的工具)卸载/安装npm uninstall -g create-react-appnpm install -g create-react-app查看版本号npx create-react-app --ver原创 2021-03-09 13:09:57 · 362 阅读 · 2 评论 -
DaZeng:Vue的基础使用及基于vue/cli的开发
Vue的基础使用及基于vue/cli的开发安装vue/cli创建vue项目目录介绍Vue生命周期Vue-router<router-view><router-link>路由的使用根路由、重定向、异步导入路由、子路由、默认路由、404页面动态路由安装vue/cli安装:npm i -g @vue/cli查看版本号:vue --version卸载:npm uninstall -g @vue/cli; // 4.xnpm uninstall -g vue-原创 2021-01-17 22:39:09 · 356 阅读 · 2 评论 -
DaZeng:Vue的基础使用及单页面开发
Vue的使用了解Vuevue是什么?什么是单页面开发?主要的vue开发方式MVVM框架Vue基础起步数据绑定了解Vuevue官方使用手册vue是什么?VUE是一套用于构建用户界面的渐进式框架。可以自底向上逐层应用。大部分都是使用它来做单页面的开发。什么是单页面开发?一个项目,如管理系统,它就只有一个Index.html页面。其它页面的内容,都以组件的形式,在页面中进行切换 。Vue-Router模块,可以模拟前端页面路径的路径,但页面也还是index.html。主要的vue开发方式原创 2021-01-17 17:23:25 · 395 阅读 · 0 评论 -
DaZeng:我的github代码也被北极收录啦!Arctic Code Vault Contributor勋章
荣获Arctic Code Vault Contributor勋章——北极代码库贡献者记得当时是打开github没在意,今天突然想起来就搜了一下,不搜不知道,一搜吓一跳,我的代码也被北极收藏了留给1000年后的下一代使用???哇真的很有意义。据说代码存放地是挪威Svalbard群岛一座已退役的矿井里。这里是国际公约规定的非军事区,可以免遭战火的袭扰。而且这里常年寒冷,有几百米厚的冻土层。稳定且寒冷的环境非常适合存储胶片。github则计划把作者在 GitHub 上贡献的代码、写的库都打包运送到了北原创 2020-12-26 20:41:40 · 817 阅读 · 6 评论 -
DaZeng:JS面向对象编程
JS高阶一面向对象(OOP)基本介绍对象的创建和使用构造函数原型对象实例化对象上动态添加属性会不会影响其他的实例化对象?在原型对象上添加属性呢?以及原型链查找?在Person增加属性呢?怎样让实例化对象有新的方法?属性方法的删除对象的销毁instanceofhasOwnProperty()for in对象的get和set方法函数中变量的作用域面向对象(OOP)基本介绍面向对象特性:封装,此特性可隐藏对象内部的实现细节,对外提供一致的访问接口继承,简单的代码复用机制,使子类拥有父类的特性。多态原创 2020-12-22 18:26:47 · 427 阅读 · 0 评论 -
DaZeng:web页面使用markdown编辑器组件
推荐几款markdown组件首推SimpleMDEMarkedjsshowdownjsvue内的markdownmillerblack/markdown-js主要用于类似于搭建个人博客中发布编辑查看博客的功能。首推SimpleMDE因为引入两行链接就可以直接使用了。官网:SimpleMDE Markdown EditorGitHub:SimpleMDE - Markdown Editor简单使用:<!DOCTYPE html><html lang="zh-CN">&原创 2020-12-21 19:50:17 · 845 阅读 · 0 评论 -
DaZeng:JS原生无缝轮播防抖(带原理、思考步骤、详情)
JS原生无缝轮播防抖前言结构样式控制自动轮播控制自动轮播的暂停和继续控制左右点击控制小圆点的点击切换前言在19年的时候发了一篇原生JS轮播的博文有80+的收藏量,思路没有问题,但是代码值得优化,所以今天重新再用原生JS来写一下轮播,毕竟经典的案例永远是经典的案例。要查看原理和具体效果的移步之前的博文,JS原生轮播图。结构首先搭建html结构,值得注意的有以下几点包裹轮播图的盒子应该分为3层,最里面的一层应该为包含一张轮播图的div,中间一层为包含所有轮播图的div,最外一层则包裹中间的盒子原创 2020-12-21 14:32:14 · 397 阅读 · 0 评论 -
DaZeng:超好看完整的自定义web密码生成器!!!(带源码)
密码生成器成品镇楼(演示案例):HTML结构搭建: <div class="box"> <h2>密码生成器</h2> <div class="pasbox"> <p id="password">Lorem ipsum dolor sit.</p> <p class="tip fz">点击复制</p> </原创 2020-12-21 13:10:00 · 449 阅读 · 2 评论 -
DaZeng:京东放大镜demo
京东放大镜成品镇楼:这个其实不难,首先要搞清楚offsetx,clientx,pagex,screenx是什么,没搞清楚的想细看的可以参考一下这个文章进行学习。大致就是这样,借鉴博主的图:以及eventX的区别,作为扩充:下面进入正题:首先写结构和默认样式:结构就三个东西:小图大图和放大镜(遮罩层)注意大图的样式应该为固定定位,且大图img的宽要大于包裹它的div,并设置div溢出隐藏。 <div id="box"> <div id="smal原创 2020-12-20 16:12:10 · 270 阅读 · 0 评论 -
DaZeng:sass的基础使用
从0独立开发企业级电商系统Vue全家桶实现小米商城(二)scssNav-HeaderVue全家桶实现小米商城(二)Vue全家桶实现小米商城(二)scss优点:预编译可统一修改。在src下新建assets文件夹创建scss文件夹存放reset.scss文件:清空浏览器的内置样式*{ margin: 0; padding: 0; outline: none;}html,body{ font: 14px/1.5 Helvetica Neue,Helvetica,A原创 2020-12-16 13:42:52 · 195 阅读 · 0 评论 -
DaZeng:cookie、session、webStorage区别及使用
cookie、session、sessionStorage、localStorage区别cookie、session区别存储:cookie 存储于浏览器端,而 session 存储于服务端安全:cookie 的安全性相比于 session 较弱,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗,考虑到安全应当使用session。服务器性能:session 会在一定时间内保存在服务器上。当访问增多时,会占用服务器的资源,所以考虑到服务器性能方面,可以使用cookie容量:cookie原创 2020-12-16 10:43:37 · 192 阅读 · 0 评论 -
DaZeng:JS基础练习
JS练习一1. 执行下面的代码`array1`和`array2`的值分别是什么?(o)2. 以下哪一个不是 JavaScript 的数据类型:3. 下面代码的输出是什么?4. 下面这个JS程序的输出是什么:(o)5. 表达式 ”2”+3+4 的值为?6. 下面代码的输出结果:7. 以下代码执行后,array的结果是?(o)8.typeof Date.now() 的值是:(o)9. 在 javascript 中,下列不属于数组方法的是()10. 下面代码的执行结果是11. 对于代码 `var a = 10.4原创 2020-12-14 15:47:05 · 763 阅读 · 0 评论 -
DaZeng:剖析promise,async/await,settimeout
promisePromise一句话就是用同步的写法和同步的执行顺序实现异步的业务功能。同步异步的通俗的理解就是,比如同步的话:你去餐厅吃饭要点菜叫服务员过来,服务员说要等前一桌客人吃完才能点菜,异步的话:去吃饭大家都可以吃饭点菜,你吃饭的时候我也可以点菜。在代码上的理解就是promise使用.then()链式写法解决回调地狱的问题。回调地狱案例(无限嵌套):通过登录获取用户订单列表再通过订单列表默认获取列表第一条数据 function fn3(){ $.ajax({原创 2020-12-11 15:18:59 · 309 阅读 · 0 评论 -
DaZeng:Git使用大全——速查手册
Git安装和配置环境变量配置、开发工具配置存储密码——SSH添加公钥团队使用Git命令开发项目git官网下载git查看版本号:git --version安装好后配置电脑的环境变量找到path,双击值把git下载的路径添加进去:查看及配置git文件在cmd中进行配置(快捷键win+R输入cmd回车进入)git配置命令://查看全局配置git config --list//配置个人用户名邮箱git config --global user.name 'you原创 2020-12-10 16:01:19 · 388 阅读 · 0 评论 -
DaZeng:Nodejs——express
Nodejs_express的使用准备了解app.js基础配置加入router和中间件router和mysql准备安装node,npm 是nodejs package manage,包管理器。主要用于安装依赖包,执行一些命令。如果安装很慢,修改Npm下载包的路径 :从taobao下载,执行以下命令;npm config set registry https://registry.npm.taobao.org如果要想运行别人的代码,就在当前package.json文件位置,打开命令提示行。输入np原创 2020-12-09 00:25:45 · 405 阅读 · 0 评论 -
DaZeng:深入浅出SQL
深入浅出SQL数据库分类什么是关系模型表和表的关系数据库服务器管理系统 RDBMSSQL什么是SQL?SQL语句:SQL的使用创建和使用数据库数据库命名规则数据类型char和varchar的区别注意创建表删除表实体完整性,域完整性,引用完整性,用户自定义完整性实体完整性域完整性为什么要保证数据的完整性?如何控制?引用完整性约束插入更新删除delete vs truncate查询数据库分类层次模型、网状模型、关系模型、对象模型。传统的缺点:应用程序基于该数据库已定义好的实现,数据库结构必须硬编码到原创 2020-12-06 20:02:22 · 513 阅读 · 0 评论 -
DaZeng:响应式布局和自适应布局——深入浅出
自适应布局作用自适应是让同一个页面布局适应不同的屏幕。响应式布局作用响应式是不同的屏幕用不同的布局。响应式布局:使用媒体查询,就是写多个@media 命令来控制设备的大小,让页面在不同的宽度范围下,显示为不同的布局效果 。如果使用 min-width属性,则应该从小的断点开始写,到大的断点结束。media属性一般来说,先写一个默认大屏幕的样式;再写其它断点下的样式;可能断点判断异常,还需要在部分区间去写一个断点。link<link rel="stylesheet" media="原创 2020-11-25 16:29:50 · 459 阅读 · 0 评论 -
DaZeng:雪碧图(精灵图)的使用
雪碧(精灵)图要求显示效果:(轮播图导航栏效果)原创 2020-11-25 13:43:21 · 5172 阅读 · 1 评论 -
DaZeng:JavaScript基础三
JavaScript第二阶段(一)面向对象编程创建对象{}、new Object()Object.assign()Object.create()动态添加属性和方法删除属性和方法销毁对象构造函数面向对象编程三种创建对象的方式:new Object(),构造函数,工厂方式面向对象的特征:抽象:生活中实际物体的相同特征提取出来,提炼成一个共同的物种类。封装:应用一种思维模式来设计函数。继承:让具有相同性的对象或类,去继承更高级的对象或类的属性与方法,或者其他对象去继承某一个类的特征。多态:是指对象原创 2020-11-24 10:25:18 · 371 阅读 · 0 评论 -
DaZeng:3分钟搞定内网渗透之外网访问指定域名
内网渗透之外网访问指定域名作用:在本地配置好之后,启动http-server服务访问指定域名即可。具体配置使用钉钉内网穿透在自己电脑上指定目录下clone git仓库执行命令:git clone https://github.com/open-dingtalk/pierced.git 不会或者不知道git的移步——Git使用我安装在E:\dingding中打开目录如下:在命令行中进入指定目录执行:cd windows_64ding -config=ding.cfg -sub原创 2020-11-13 18:57:52 · 1021 阅读 · 0 评论 -
DaZeng:JavaScript基础二
JavaScript基础二JS基础一JS基础二DOM文档对象模型节点node获取DOM节点getElementById(不带#)getElementsByClassName(不带.)getElementsByTagNamegetElementsByNamequerySelector,querySelectorAll(要带.和#)常用的节点属性和方法childNodes和children(获取多个子节点)获取单个文本节点(子节点、兄弟节点)获取根节点通过todoList掌握节点的增删增加节点删除节点DOM获取原创 2020-11-10 17:54:21 · 1125 阅读 · 0 评论 -
DaZeng:设置Mock的三种方案
设置Mock的三种方案Mock设置(模拟数据)使用JSON文件使用easy-mock使用本地集成Mockjs APIMock设置(模拟数据)Mock的项目实战:从0独立开发企业级电商系统为什么要用Mock?开发阶段,为了高效率,需要提前Mock减少代码冗余,灵活插拔减少沟通,减少接口联调时间如何创建Mock?本地创建JSON(接口文档已经规定好)easy-mock平台集成Mock API使用JSON文件public文件夹下创建mock文件夹,创建一个user文件夹存放logi原创 2020-11-06 09:45:11 · 542 阅读 · 0 评论 -
DaZeng:深度剖析接口的错误拦截
接口拦截接口拦截使用[Axios拦截器](https://www.kancloud.cn/yunye/axios/234845)设置baseURL及接口环境使用JSONP或CORS跨域以及接口代理时的baseURLJSONP或CORS跨域接口的环境设置(不是接口代理的情况下统一管理baseURL)接口拦截接口拦截的项目实战:从0独立开发企业级电商系统统一报错、未登录统一拦截、请求值,返回值统一处理。使用Axios拦截器安装:npm install axios在main.js引入Axios,导入原创 2020-11-06 09:43:09 · 315 阅读 · 0 评论 -
DaZeng:深度剖析Storage封装
Storage封装Storage封装cookie,localStorage,sessionStorage三者区别(分六点)?为什么要封装Storage?本身不是有api吗?手写Storage封装封装Storage完整代码Storage封装Storage封装的项目实战:从0独立开发企业级电商系统cookie,localStorage,sessionStorage三者区别(分六点)?大小:cookie 4k,storage 5m有效期:cookie拥有有效期可以通过expires设置失效时间,原创 2020-11-06 09:08:34 · 425 阅读 · 0 评论 -
DaZeng:跨域的三种解决方案:JSONP跨域、CORS跨域、接口代理
跨域的三种解决方案跨域什么是前端跨域怎么去解决跨域CORS跨域JSONP跨域jsonp与cors的区别:接口代理跨域什么是前端跨域前端独有,是浏览器为了安全而做出的限制策略。浏览器请求必须遵循同源策略:同域名、同协议、同端口。怎么去解决跨域CORS跨域JSONP跨域代理跨域CORS跨域服务端设置,前端直接调用。说明:后端允许前端某个站点进行访问。如Easy Mock:开源的公共MOCK平台,公共接口。在axios中访问mock的接口后 let url = 'https://w原创 2020-11-06 08:59:39 · 1077 阅读 · 0 评论 -
DaZeng:Vue全家桶实现小米商城(二)
从0独立开发企业级电商系统跨域CORS什么是前端跨域怎么去解决跨域CORS跨域JSONP跨域跨域CORS什么是前端跨域前端独有,是浏览器为了安全而做出的限制策略。浏览器请求必须遵循同源策略:同域名、同协议、同端口。怎么去解决跨域CORS跨域JSONP跨域代理跨域CORS跨域服务端设置,前端直接调用。说明:后端允许前端某个站点进行访问。如Easy Mock:开源的公共MOCK平台,公共接口。在axios中访问mock的接口后 let url = 'https://www.eas原创 2020-12-25 10:49:46 · 1242 阅读 · 0 评论 -
DaZeng:JavaScript基础一
JS基础JS基础架构体系四种使用JS的方式注释、变量、标识符、输入输出JS数据类型基本类型:**==和===**值类型(栈存储从上往下)引用类型(堆存储从下往上、栈存储,赋值的是内存地址)typeof数值的转换转为boolean值:转为字符串JS基础了解:是一种嵌入嵌入在网页中的程序段,解释性语言,被浏览器解释执行。ECMA标准化。ES6深入理解及学习作用:JS增删改查,在html网页动态写入文本,响应事件作出相应的处理。事件绑定,页面特效。本地存储,cookie的一些应用。服务端的应用,如node.原创 2020-11-02 11:49:57 · 2395 阅读 · 18 评论 -
DaZeng:CSS基础与进阶
CSS基础于进阶伪类垂直居中水平居中文档流浮动(纵向布局转换为横向布局)盒模型导航栏二级菜单伪类a:link:默认的链接样式a:visited:访问后的样式a:hover:鼠标悬停样式(非a标签也可使用hover)a:active:鼠标按下的颜色cursor:pointer:鼠标变为手型提示用户可点击垂直居中文本:css中设置对应块元素height==line-heigth时,在此块元素中的单行文本垂直居中。水平居中文本:text-align(设置块级元素内文本的水平对齐方式):cent原创 2020-10-21 16:41:57 · 345 阅读 · 0 评论 -
DaZeng:HTML基础与进阶
H5C3基础于进阶HTML网页组成部分-W3C标准标签web服务器HTML5VscodeHTML标签分析metah1~h6ahr,brpdivpreimgul,ol,li,dl,dt,ddb,i,em,strong,u,del,sup,subHTML网页组成部分-W3C标准HTML(超文本标签语言):结构化标准语言Hyper Text Markup LanguageCSS:表现标准语言JavaScript:行为标准语言倡导结构、表现、行为分离标签每一个标签都应该闭合。双标签:<div原创 2020-10-16 18:07:22 · 567 阅读 · 0 评论 -
DaZeng:web开发流程及网站规范
第一阶段:web开发流程及网站规范web开发流程web应用程序的开发流程需求分析--明白要做什么网站设计编码测试维护web开发流程1.什么是WEB?网络应用。2.熟知的WEB应用程序?聊天工具、网站、app、小程序、游戏:王者等。3.从开发的角度分析,分类应用程序:C/S:client/server 客户端-浏览器有安装包。缺点:占用硬盘空间。优点:运行速度快,用户体验好。eg:app等。B/S:browser/server 浏览器-服务器。系统自带浏览器,使用浏览器访问应原创 2020-10-15 17:08:45 · 551 阅读 · 1 评论