- 博客(75)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 node.js从零开始搭建服务器(详细2)
内容比较冗长，从零搭建，现在我们已经可以进行简单的判断使用服务器，并返回状态，本章期望使用node.js连接mysql数据库，并查询到响应内容。此部分可能需要你有一定数据库基本知识管理工具使用的是SQLyog使用mysql模块连接数据库安装：npm install mysql -s在indexCtrl.js文件中引入使用：我们需要知道几个数据库操作的基本步骤：const sql = ...
2022-05-15 19:06:42
359
1
原创 less创建多个编号型样式类
最近在构建项目框架，在公用样式上突然想到需要定义margin、padding这样的常用样式，若想要1-50的不同编号的样式，单一定义用：margin-top:1px 这样的写法得写50个，就不用说还有button，left…所以去了解了一下函数式的写法，就有了以下： /** * 递归生成 1-50 像素的内外边距 包括 * 使用：mrt10 === margin-top:10rpx * 使用：pdt10 === padding-top:10rpx */ .creteMP(@
2022-03-28 11:49:40
529
原创 uniapp区分不同平台
单独写的公用方法，注：mpass项目的小程序都会被判定为MPconst EPlatform = { AppPlus:'APP-PLUS',/**App*/ AppPlusNvue:'APP-PLUS-NVUE',/**App nvue*/ H5:'H5',/**H5*/ MpAlipay:'MP-ALIPAY',/**支付宝小程序*/ MpWeixin:'MP-WEIXIN',/**微信小程序*/ MpBaidu:'MP-BAIDU', /**百度小程序*/ MpToutiao
2022-03-28 08:53:39
1343
原创 微信小程序日历组件
要求的ui样式实现后日期年月可以选择。实现：wxml<view class="calendarOut"> <view class="fullDate titleText"> <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}"
2022-02-22 13:21:33
3073
原创 中级前端面试总结
坐标成都、薪资范围12-15左右真实面试所问。1、如何优化webpack打包速度。代码压缩，使用webpack压缩插件UglifyJS，babel-loader开启缓存，设置cacheDirectorys为true，提取公共代码，借助shelljs拷贝静态文件2、promise实现原理个人理解其实就是通过原型链方法的链式调用，事件执行内容捕获与执行后的状态控制去实现的。网上许多博主对其进行了深究，可以网上翻阅一下。3、事件循环机制js是一门单线程语言，问这个问题其实就考的任务队列执行顺序的
2022-02-17 12:45:59
987
原创 方法的链式调用
es6写法：class Man { constructor(state) { this.num = state;下· } add(number) { this.num += number return this; } minus(number) { this.num -= number return this; }};const man = new Man(123).add(10).minus(100);
2022-02-14 18:00:22
372
原创 Vue调用手机权限
自学vue打包成app的时候，发现了一个问题，普通ui框架无法调用手机硬件的权限，所以我找了一下，发现Dcloud有一个5+specification可以间接实现这个功能，所以我就研究了一下用法。这个比较简单，只是想让其他小伙伴少绕一点弯路。由于本人没学原生和nt，所以不太清楚权限是不是全的。下面说一下用法。其实很简单，就只是找到项目目录下的单原页面：index.html然后使用document.addEventListener触发plusready方法，将需要使用的权限通过定义全局变量的方式定义
2022-01-25 11:52:43
2536
1
原创 微信小程序对比文本差异
项目中有使用到比对两段文本的差异，不一样的位置高亮显示，网上翻阅了一下发现似乎没有这方面的内容，随即有了本文。使用插件 diff.js微信开发者工具打开底部 终端 npm install diff --save 下载依赖包顶部工具中使用 构建npm使用方式比较简单，在需求页面头部引入var diff = require('diff');在需求位置使用：let content1 = '百年童佳倍（2021版）终=身重大疾病保险',content2='百年童佳倍（2021版）终身重大疾病保
2021-12-07 16:27:37
856
4
原创 微信小程序token过期后重新执行失效的请求封装（用户无感刷新token）
考虑接口时效性和安全性，后端增设了token验证，确保我们的单个token只使用一次，使用后就立即失效，但是也为了防止在实际进程中异步请求的出现，所以重新封装了请求方法。要求是在执行某个请求时，如果后端返回408code（token过期），就重新调用一次登录接口刷新token，并重新执行失败的请求。在app.js中定义post方法，并在globalData中定义一个用于暂存回调的unRequest。globalData: { unRequest:null},/**请求方法 * @ur
2021-09-27 12:44:26
3216
1
原创 微信小程序水波纹动画效果
水波波动效果实现，复制查看效果wxml<view class="circle"> <view class="positionNumber"> <view>60%</view> <view>匹配指数</view> </view> <view class="wave"></view></view>wxss.positionN
2021-09-13 13:37:11
1915
1
原创 封装VueQuillEditor并实现双向数据绑定与图片自定义上传（自定义图片大小）
最近接到一个需求，需要使用VueQuillEditor富文本编辑器，实现图片上传到oss服务器，并能够自定义图片的大小（拉伸），考虑到系统中使用该组件的地方非常多，所以花了些时间进行了封装。要求全局中不需要对该组件进行单独引用，且再使用时只需要通过v-modle进行双向绑定就可，图片可在富文本中自定义拉伸，缩放，图片上传后直接插入到光标位置。组件使用时：<VueQuill v-model="ruleForm.industry_content"></VueQuill>看起来是
2021-06-26 18:37:00
1546
3
原创 手机号正则，正数正则，正整数正则（持续更新）
//正数正则if(!/^[+]{0,1}[1-9]\d*$|^[+]{0,1}(0\.\d*[1-9])$|^[+]{0,1}([1-9]\d*\.\d*[1-9])$/.test(value)){ console.log('验证失败，该内容需大于0')}//非0正整数不含'.'if(!/^[0-9]*[1-9][0-9]*$/.test(value)){ console.log('验证失败，请输入正整数')}/.
2021-06-09 11:34:44
145
原创 React全屏显示
import React from 'react';import { Tooltip } from 'antd';import { FullscreenOutlined, FullscreenExitOutlined} from '@ant-design/icons';class FullScreen extends React.Component{ state={ isFullScreen: true }; //调用事件 fullScreen = () => {
2021-06-03 14:42:53
612
原创 Vue上传文件到OSS
oss服务流程不作赘述。npm install ali-oss 下载依赖需要拿到以下内容，我是通过后台反的accessKeyId: '',accessKeySecret: ''bucket: '', secure: true,region: 'oss-cn-shanghai',在需要上传的组件页面引入oss<script>const OSS = require('ali-oss')export default { name: 'page1', data(){
2021-05-08 17:23:17
231
原创 生成验证码Vue/react
利用canvas绘制登录前的验证码Vue<canvas @click="createCode" width="80" height='40' id='myCanvas'/>mounted () {//该方法需要节点加载完成之后进行，所以需放再mounted阶段执行 this.createCode() }, methods:{ //绘制验证码主要方法 createCode(){ let dot = document.getElementById("my
2021-04-27 10:36:01
156
原创 element-ui时间日期控件限制上一年选择区间
现有需求：时间日期选择器必须限制用户只能选择今日往前推移一年这个区间内的时间既有 <el-date-picker v-model="form[items.select]" style="width:100%" size="mini" type="datetimerange"
2021-01-08 10:48:14
2919
1
转载 好用的markdown编辑器mavon-editor
实现效果：1、下载npm install mavon-editor -s2、引入在需求的组件页内引入该markdown和他的css样式。<template><div><MavonEditor ref="editor" v-model="doc" @save="saveDoc" @change="updateDoc"></MavonEditor></div></template><script>import
2021-01-06 14:28:03
286
原创 element ui Select带输入查询下拉菜单，滚动加载更多数据，公用组件双向绑定
实现的效果只是一个下拉菜单，但是由于后台的数据量非常庞大，单次全部返回会有很长的时间损耗，故而想到了模糊查询加懒加载的形式去实现。下拉触底会触发 loadmore 事件 ，输入内容并回车会执行 searchCompany 事件以下代码复制可用<template> <div id="companySearch"> <el-select v-model="value" class="elSelectCom" placeholder="请选择" siz
2020-12-02 16:05:57
1556
2
原创 理解React Hook（基础的）
函数组件在v16.8 版本之前，react组件的标准写法是class(类)，而在版本之后，react引入了一种全新的api，叫做 React Hooks，它颠覆了以前的用法。import ReactDOM from 'react-dom';import React,{Component} from 'react'class ComponentA extends Component{ constructor(props){ super(props) this.state={
2020-11-23 16:40:23
510
原创 微信小程序使用echarts显示全国地图
首先可以看一下echarts官方的实例也可以直接使用我参照了官方实例的方法：1、下载echarts小程序组件并放置到具体项目下载地址将项目拉到本地之后，找到文件中的 ec-canvas 文件夹，并将其整个复制到你的小程序项目中我新建了一个component文件夹放置这个组件2、下载全国地图链接打开的网站可以查询全国的所有省市区，暂未验证是否为最新国标库。搜索你想要的地图节点，选择 JSON API(包含子域)，我这里以全国地图为例将文本框内的链接复制并在新窗口打开，因为这个文件原本
2020-11-17 16:28:33
2361
3
原创 Vue组件通信
一、父子通信：props,$emit。1、props:父组件<template> <div> <div style="border: 1px solid #ddd;padding: 40px 0;"> 这是父组件 <el-button type="primary" @click="changeChildCom()">改变子组件</el-button> &l
2020-09-08 16:45:12
189
转载 程序员兼职平台
总结至IT老哥视频链接1、人人开发项目竞标模式，可选择入驻2、猿急送需求发布，简历投递3、实现网个人、团队入驻，项目竞标4、智城外包网团队信息发布，个人信息发布5、电鸭社区网远程工作6、开源众包7、快码众包8、码市9、程序员客栈10、猪八戒...
2020-09-07 14:28:04
187
原创 微信小程序分享到朋友圈
官网文档该功能 menu 参数需要开发者工具达到2.11.3版本才能使用在需要设置分享的页面onshow 或者onload中加入wx.showShareMenu({ withShareTicket: true, menus: ['shareAppMessage', 'shareTimeline'] })当前页面即可出现分享到朋友圈按钮...
2020-08-13 14:05:32
216
原创 Vue（vue-amap） 接入高德地图获取坐标与地址信息
如果您登入高德地图并已那到应用key，请跳过 首先 步骤首先注册登陆到高德地图控制台进入控制台选择应用选择创建应用填写应用名称，并选择应用类型，点击确定创建新的应用创建完成后，选择添加然后按照要求填写内容，切记一定要选择web端(JS API),填写完后提交当前应用。添加成功后，在你的引用下方会出现这样一个列表然后打开你的项目npm install vue-amap --save安装地图依赖打开你项目中的mian.js文件将下面复制进去，并替换为你自己应用的ke
2020-08-03 15:30:47
9080
13
原创 微信小程序转支付宝小程序注意事项
就小程序而言，其实支付宝小程序与微信小程序的相差并不大，如果你掌握了微信小程序，支付宝小程序基本上手到擒来。小程序容纳大小支付宝小程序与微信小程序主包大小都只能容纳2M的内容，但是二者同样都支持分包加载，微信小程序的主包内容不能超过2M，其余分包单个不能超过2M，加主包不能超过12M，但是支付宝小程序分包加主包大小却不能超过4M，开发者要多留意本地的内容大小。微信小程序超过2M怎么办？分包加载的方法顶部导航微信小程序可以通过{"navigationStyle": "custom"}去掉单页的头部
2020-07-17 15:46:44
4132
原创 支付宝小程序使用自定义组件(原生)
首先打开支付宝的小程序开发者工具，并打开你的项目选中你创建用于放置公用组件的文件，右键 选择新建小程序组件。在小程序顶部会出现一个输入框，要求你输入你要定义的组件名称。举例：输入后回车在文件中得到一个组件：因为它是组件，所以并不会被app.json文件收纳。紧接着修改你的组件js文件：Component({ mixins: [], //混入 data: {}, //当前组件使用的公用参数 props: {}, //接收来自父组件传递的参数 didMount() {},
2020-07-17 11:13:44
3484
原创 parse ＜compoN＞ error: Custom Component‘name should be form of my-component, not myComponent or MyCom
复现：支付宝小程序在创建组件后在页面中引入组件报错parse <compoN> error: Custom Component'name should be form of my-component, not myComponent or MyComponent问题原因：引入组件的json文件中必须以支付宝组件格式严格拼写将命名修改为 my-component格式即可，需以 小写加-加小写 的格式格式！注意查看大小写是否错误。...
2020-07-17 10:49:55
612
原创 Vue 刷新当前组件
公用内容动态改变了全局参数，要求切换后刷新当前组件所有请求，或重新加载当前组件。因为我们在项目中加入了vue-routerapp.vue，就可以通过控制router-view去达到我们需求的效果。同时也要用到 provide/inject，个人列表类似vuex的辅助函数，跨越层级关系引入（注入）你的某个方法。app.Vue<template> <div id="app" v-loading.fullscreen.lock="fullscreenLoading" element
2020-07-15 10:12:59
3723
原创 小程序/app触底加载更多数据
本文仅提供触底加载更多数据的思路在小程序特有的生命周期中，onReachBottom即触底事件，在页面上显示列表的时候，我们往往需要触底加载更多数据。在分页查询中，一般后台返回数据应当包括数据同条数，当前页码，当前页容纳条数，与当前分页返回数据Data，这些作为基本参数返回，如果没有，去吊打你的后端。而你传过去的数据也应当包括，页码，每页容纳大小，与其他查询字段。如果后端没有让你返回，再去吊打你的后端。现在有两个思路，都是在触底事件的时候去改变单个第一种情况，如果你试图改变当前的页码，取得第二页
2020-07-08 10:21:12
913
原创 js在for循环中按照顺序响应请求
在某些坑爹的小程序中，原型链并没有formData，只能使用他的uploadfile方式对图片进行上传，而且单次只能上传一张图片，要是我们想让这个上传的动作同步执行怎么办呢。我们选中图片的时候会得到一个图片的列表比如 filePath:[ 'https://assasass/123123.png', 'https://assasass/123124.png', 'https://assasass/123125.png' ]三张图片。上传的时候，你可能需要for(let i in file
2020-07-07 18:54:13
2413
原创 公司从零开发微信小程序流程
微信小程序账号注册流程1、进入微信公众平台，网址为https://mp.weixin.qq.com/，选择立即注册2、进入注册页面选择小程序3、进入注册页面分别输入公司注册信息，勾选协议，并注册。4、接收来自微信团队发送到注册邮箱的激活邮件，并点击激活按钮。5、点击邮箱中的链接进入小程序信息登记页面。主体类型选为企业，其他信息可如实填写，注册方式选择微信认证，并登记该项目的系统管理员（可为公司项目负责人）全部信息填写完毕后，需要使用管理员本人微信进行扫码验证，如验证成功，即可进入微
2020-07-03 16:55:32
1155
2
原创 element-ui全屏全局加载动画（请求，路由加载）
为的目的就是让用户在使用的时候不至于一直看到你的页面等待，优化用户的使用体验。使用的是Element-ui 的全局loading加载，以服务方式调用，使用Vuex，结合全局路由守卫与请求拦截器，实现这个内容。建议使用Vuex新建公用方法去修改状态。在Vuex的js文件中以服务的方式调用，引入 Loading 服务import { Loading } from 'element-ui';并在state（Vuex集中变量存储仓库）中新增一个变量为optionsoptions 参数为 Loadi
2020-06-24 11:28:05
2617
原创 Vue项目中使用Echarts地图（精确到区）
使用地图需要获取地图的json文件这里是免费获取地图json在原本Echarts图变中你看到的代码是这样的：var uploadedDataURL = "https://geo.datav.aliyun.com/areas_v2/bound/510100_full.json";//地图jsonfunction showProvince() { var name = 'chengdu'; // myChart.showLoading(); $.get(uploadedDat
2020-05-12 12:53:48
1740
5
原创 Failed to mount component: template or render function not defined.
可能原因：使用路由懒加载动态引入路由时，没有置换为新版本的引入格式，改为require(`@/views${item.component}`).default//orimport(`@/views${item.component}`).default即可在新建的组件内容中不含template元素，在你新建的元素中加入template元素即可...
2020-05-12 10:50:33
989
原创 Echarts使用(Vue) 时间轴事件绑定、单图例多种切换
最近项目中有使用到Echarts的图表实例，一直查又嫌麻烦，自己总结一些使用上的内容，希望同时也能帮助到你。总体内容**1、Vue项目怎么使用Echarts**2、在使用带有时间轴内容时给时间轴绑定事件3如果不是Vue项目，可通过官网说明进行使用。**安装**```npm install echarts -S```**引入项目/使用**```main.js`````...
2020-04-24 16:25:19
3071
原创 微信小程序获取用户收货地址列表wx.chooseAddress
微信官方的说明，直接调用即可，但是由于该微信弹框如果拒绝，之后再不会弹出提示，而恰好wx.openSetting()，可以调起授权设置界面，显示用户已经调用过的微信授权，所以我们需要饶一下小弯路，但是也能做到用户拒绝授权后每次点击都能弹窗提示授权的功能。两条路：1、用户首次授权调用==》同意授权==》获取到用户地址列表信息2、用户首次授权调用==》拒绝授权==》wx.showModal()...
2020-04-15 15:37:54
5388
原创 H5页面px不对，单位不对等问题
在头部加入这样一句即可！<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
2020-04-14 11:27:13
458
原创 html+js抽奖转盘解析(简单)
之前在公司一直写小程序，最近项目跟进，新加了抽奖转盘的H5页面，想了想，简单梳理一下逻辑，我用的是自己写的最简单的方式。先看具体需求样式作为一个资（c）深（v）工程师的我定睛一瞧，easy！！一个大盒子里方9个小盒子，通过定义方法去给对每个盒子的样式添删一下就可以了。为了使用变量的方便，当时引入Vue。先画了这样一个html结构...
2020-04-14 11:23:18
1632
1
原创 html实现文字上下无缝轮播
cv即可，放心食用css#box{ overflow: hidden; width: 100px;height: 50px;} .centerBox>ul{ margin: 0 auto; padding: 0; }html<div class="centerBox" id="box"> <ul id="ul1"> <di...
2020-04-13 17:12:15
3952
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人