张杰伦i-优快云博客

原创 node实现阿里云发送短信

首先要发短信需要accessKeyId，accessKeySecret，短信签名SignName，短信模版CODE，这些都可以在阿里云控制台短信服务那里看到，前提是你开通了服务。然后使用node发送短信安装npm i @alicloud/sms-sdk --saveconst SMSClient = require('@alicloud/sms-sdk');router.post('/get_sms', function(req, res, next) { let phone = r

2021-11-09 17:00:42 1044 1

原创数组和对象赋值，修改后会影响原来的值

可以看到原来的数组的值也被修改了，简单来说这是因为赋值后新的值和原来的值指向的是同一个值。想详细了解的可以学习一下引用类型和拷贝这样情况可以使用JSON来转义一下...

2021-11-08 13:51:29 1013

原创 VUE PC端项目px转为rem适应屏幕

安装lib-flexible和postcss-pxtorem，这两个版本亲测可用npm install --save autoprefixer@^9npm install postcss-pxtorem@5.1.1 在main.js中引入import 'lib-flexible/flexible'修改node_modules中的lib-flexible/flexible文件中原来的是适配移动端，修改为下面这样function refreshRem(){ var w

2021-11-05 11:46:28 553

原创 h5 summary标签去掉箭头

summary箭头Geckosummary { list-style: none;}Webkitsummary::-webkit-details-marker { display: none;}

2021-11-01 14:28:18 772

原创 echarts饼图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="chart" style="width: 600px;height:400px;margin: 100px auto"></div><script src...

2021-10-25 15:22:08 112

原创 echarts象形图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="chart" style="width: 600px;height:400px;margin: 100px auto"></div><script src...

2021-10-25 14:58:13 696

原创 echarts水球图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="chart" style="width: 600px;height:400px;"></div><script src="https://cdn.b...

2021-10-25 14:50:56 186

原创使用css单行文字右对齐，多行文字左对齐

有时我们想要表单那样，左边的文字右对齐，但是文字长了换行后又难看所以我们如何实现下面这样的效果那关键就是文字的父盒子设置text-align: right;文字的盒子设置 display:inline-block;text-align: justify;如果文字的盒子设置left的话，文字换行了，但是第一行文字靠右边盒子会有距离，看起来不好看，所以可以使用justify属性...

2021-09-30 10:39:13 5583 1

原创自定义表格序号

通过返回的数据，自定义表格的序号，翻页后序号不断page是页码，pag_size是每页多少条for(let i in data){ let _id = (page - 1) * page_size + (Number(i) + Number(1)) if(_id < 10){ _id = '00' + _id }else if(_id < 100) { _id = '0' + _id }}...

2021-09-29 14:02:43 101

原创 summary标签去掉默认样式

去掉箭头summary { list-style: none;}summary::-webkit-details-marker { display: none;}去掉外边框outline:none

2021-09-28 14:10:36 468

原创移动端搜索框

实现了实时搜索显示并将匹配的字添加颜色<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />

2021-09-24 17:24:18 436

原创移动端弹框选择器

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <link rel=...

2021-09-24 11:44:59 410

原创移动端横向滚动组件，带自定义滚动条

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <link rel=...

2021-09-24 11:11:15 423

原创 jquery分页组件

我自己写了一个分页的组件，供大家参考，如下图：只会显示五个页码。具体代码如下：html部分<div class="page"> <a href="javascript:;" class="page_btn left_btn">‹</a> <div class="btns"> </div> <a href="javascript:;" class="page_btn right_btn".

2021-09-06 10:57:38 611

原创自定义上传图片组件

html<div class="upload"> <div class="upPart"> <input type="file" style="width: 98px;height: 32px;opacity: 0;position: absolute;z-index: 10;" accept=" image/jpg, image/png"> <div class="upContent"><div cl...

2021-08-19 17:09:45 229

原创自定义标签下拉选择框

先来看看效果html<div class="select"> <div class="label"> 标签多选框: </div> <div class="multiSelected"> <div class="value"><span>选择</span></div> <div class="list">

2021-08-19 14:14:36 374

原创 Django与postgres数据库的基本使用

1.先创建Django文件夹自动生成文件目录，各文件具体作用可以查看文档。运行可以看到表示创建成功了2.使用python manage.py startapp appname创建自己的app，生成的文件结构如下添加myapp的视图，创建urls.py，添加路由并在项目的urls.py中写入访问localhost:8000/myapp 可以看到页面返回this is my app page3.使用postgres数据库创建用户 create user...

2021-08-09 11:42:33 4063

原创 gulp自动化编译pug，scss，es6

目录gulpfile.jspackage.json命令行运行 gulp default就能监听了gulp-load-plugins能批量引入package.json文件中的依赖，使用的时候直接plugins.xxsass： npm install sass gulp-sass注意引入时：const sass = require('gulp-sass')(require('sass'));babel：...

2021-07-12 17:30:02 220

原创关于webstorm使用file watchers编译pug,scss,es6,json5后缀文件的配置命令

pug 默认编译到当前文件夹 arguments: $FileName$ 指定文件夹：$FileName$ -o $ContentRoot$/.tmp/$FileRelativeDir$/ -E html$ContentRoot$是项目根目录，$FileRelativeDir$是编译文件的目录结构，-E指定后缀scss 默认的argumes：$FileName$:$FileName...

2021-07-09 14:09:41 490

原创关于webpack打包图片不能显示的问题

使用webpack打包图片时，图片无法正常显示结合url-loader,file-loader,html-loader后还是不行，查阅资料后发现因为url-loader默认使用es6模块化解析, 而html-loader引入图片是commonjs解决办法将esModule设置为false,...

2021-07-05 10:56:28 826

翻译 Vue-Quill-Editor富文本编辑器的cdn引入与简单使用

今天需要用到富文本编辑器，所以选择了Vue-Quill-Editor，网上大多都是npm使用介绍，而github上的cdn 演示又需要翻墙，所以这里给大家演示下如何通过cdn引入Vue-Quill-Editor使用。引入<script src="https://cdn.quilljs.com/1.3.4/quill.js"></script><script src="https://cdn

2021-01-14 11:47:21 4273 4

原创 vue地址选择插件V - Distpicker

一般使用vue时也会使用elementui，但是elementui只有日期选择器，所以这里推荐一个很好用的地址选择插件V - Distpicker。官网https://distpicker.unie.fun/引入，使用，样式和配置官网已经有说明了，这里就演示一下我实际使用的网络引入，注意引入的顺序页面中使用绑定数据注册组件selected函数，选择最后一项时触发的函数...

2021-01-13 17:28:03 1861

原创微信小程序显示过长控制显示长度，并截取字符串

今天写小程序因为某些用户的用户名过长，导致其他元素被挤压，显示不完全。所需写了个js监听元素的长度，如果超过多少则固定宽度显示，并将截取用户名将后面的替换为*，因为小程序不支持wxml中直接使用substr()，所以可以通过.wxs文件来处理。（WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。）js获取元素的宽度let query = wx.createS

2021-01-11 15:06:18 2998

张杰伦的博客